$o-overlay-menu: (
	'bgcolor':          palette(neutral, 900),
	'color':            palette(neutral, 0),
	'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%;
	left: 0;
	top: 0;
	background-color: map-get($o-overlay-menu, 'bgcolor');

	// When it disappears out of view
	opacity: 0;
	transform: translateX(120vw);
	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 & {
		opacity: 1;
		transform: none;
		transition-delay: map-get($o-overlay-menu, 'opacity-speed'), 0ms;
	}

	// Shader
	&::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		left: -120vw;
		width: 120vw;
		height: 100%;
		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) {
		display: none;
	}
}


.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: 138px;
	max-height: 76px;
}


.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);
}


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


.o-overlay-menu__item {
	position: relative;
	transition: all 300ms ease-in;

	&:after {
		content: '';
		position: absolute;
		z-index: 2;
		left: 8px;
		bottom: 50%;
		display: inline-block;
		width: 13px;
		height: 12px;
		opacity: 0;
		background-image: url("/img/airplane.svg");
		background-size: contain;
		background-repeat: no-repeat;
		pointer-events: none;
		transform: translateY(50%);
	}

	&.is-active {
		&:after {
			opacity: 1;
		}
	}

	& + & {
		border-top: 1px solid palette(neutral, 500);
	}

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


.o-overlay-menu__link {
	font-size: 1rem;
	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;

	.is-active & {
		font-weight: bold;
 	}

	&: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};
			}
		}
	}
}