$o-overlay-menu: (
	'bgcolor':          palette(primary, 800),
	'color':            white,
	'shader-color':     rgba(0, 0, 0, 0.6),
	'move-speed':       450ms,
	'opacity-speed':    100ms,
);

// ------------------------------------------


.o-overlay-menu {
	@include z(z-overlay-menu);
	display: flex;
	flex-direction: column;
	position: fixed;
	height: 100%;
	width: 100%;
	right: 0;
	top: 0;

	pointer-events: none;

	// When it disappears out of view
	opacity: 0;
	transform: translateY(-400px);
	transition-property: transform, opacity;
	transition-duration: map-get($o-overlay-menu, 'move-speed');
	transition-timing-function: cubic-bezier(0.8, 0.2, 0.2, 0.8);
	transition-delay: 0ms, map-get($o-overlay-menu, 'move-speed');

	// When it comes into view
	.is-overlay-menu-active & {
		pointer-events: all;
		opacity: 1;
		transform: none;
		transition-delay: map-get($o-overlay-menu, 'opacity-speed'), 0ms;
	}

	// Shader
	&::before {
		display: block;
		content: '';
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		height: 200vh;
		width: 120vw;
		background: map-get($o-overlay-menu, 'shader-color');
		pointer-events: none;

		// when shader disappears out of view
		opacity: 0;
		transition-property: opacity;
		transition-duration: map-get($o-overlay-menu, 'opacity-speed');
		transition-delay: map-get($o-overlay-menu, 'move-speed');
		transition-timing-function: linear;

		// when shader comes into view
		.is-overlay-menu-active & {
			opacity: 1;
			transition-delay: 0ms;
		}
	}

	//// Hide overlay menu on larger viewports
	@include mq($bp-header-large) {
		//height: auto;

	}
}

.o-overlay-menu__main {
	background-color: map-get($o-overlay-menu, 'bgcolor');
}

.o-overlay-menu__shape {
	display: flex;
	justify-content: center;
	align-items: flex-start;

	color: map-get($o-overlay-menu, 'bgcolor');

	svg {
		width: 100%;
	}
}

.o-overlay-menu__bar {
	@include contain;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: space(4);
	padding-bottom: space(4);
}


.o-overlay-menu__img {
	width: 220px;
	max-height: 80px;
}


.o-overlay-menu__toggle {
	transform: rotate(-0.5turn);
	transition: transform 600ms ease-out;
	transition-delay: 200ms;

	.is-overlay-menu-active & {
		transform: none;
	}
}


.o-overlay-menu__nav {
	margin-top: space(1);

	@include mq($bp-header-large) {
		@include contain;
	}
}


.o-overlay-menu__list {
	margin-left: 0;
	list-style: none;
}


.o-overlay-menu__item:not(.o-overlay-menu__item--advice) {

	@include mq($max: $bp-header-large) {
		& + & {
			border-top: 1px solid rgba(white, 0.4);
		}
	}
}

.o-overlay-menu__item--advice {
	margin: 20px column(1,14) 0;
	opacity: 0;
	transform: translateX(column(-1)) scale(1.2);
	transform-origin: top left;
	transition: all 300ms ease-in;
	transition-delay: 0ms;

	.is-overlay-menu-active & {
		opacity: 1;
		transform: none;
		transition: all 300ms ease-out 800ms;
	}

	@include mq(1100) {
		margin-top: 40px;
	}
}

.o-overlay-menu__link {
	position: relative;
	z-index: 2;
	@include font-size(m);
	display: block;
	padding: space(1.5) column(1,14);
	color: map-get($o-overlay-menu, 'color');
	text-decoration: none;
	opacity: 0;
	transform: translateX(column(-1)) scale(1.2);
	transform-origin: top left;
	transition: all 300ms ease-in;
	transition-delay: 0ms;

	&:after {
		content: '';
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	&:hover {
		&:after {
			background-color: scale-color(map-get($o-overlay-menu, 'bgcolor'), $lightness: -20%);
		}
	}

	&:focus {
		outline-offset: 2px;
		outline-color: map-get($o-overlay-menu, 'color');
	}

	.is-overlay-menu-active & {
		opacity: 1;
		transform: none;
		transition: all 200ms ease-out;
	}

	// Set a delay for each link
	@for $i from 1 through 10 {
		@at-root .o-overlay-menu__item:nth-child(#{$i}) {
			.is-overlay-menu-active & .o-overlay-menu__link {
				$gap: 45;
				$initialdelay: map-get($o-overlay-menu, 'move-speed');
				transition-delay: #{$i * $gap + $initialdelay};
			}
		}
	}

	.is-active & {
		color: palette(primary, 300);
	}
}