// Component settings: Overlay menu
// ------------------------------------------

$o-overlay-menu: (
	'bar-height': 88px,
	'languages-height': 98px,
	'shader-color': rgba(0, 0, 0, 0.6),
	'move-speed': 400ms,
	'opacity-speed': 400ms,
);

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


.o-overlay-menu {
	@include z(z-overlay-menu);
	display: flex;
	flex-direction: column;
	opacity: 0;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background-image: linear-gradient(to bottom, palette(primary, 500) space(8), palette(primary, 600) calc(100% - #{space(8)}));

	// When it disappears out of view
	pointer-events: none;
	transform: translateX(-200px);
	transition-property: transform, opacity;
	transition-duration: map-get($o-overlay-menu, 'move-speed'), map-get($o-overlay-menu, 'opacity-speed');
	transition-timing-function: ease-in-out;

	// When it comes into view
	.is-overlay-menu-active & {
		pointer-events: all;
		opacity: 1;
		transform: none;
	}


	.ie & {
		z-index: -1;

		.is-overlay-menu-active & {
			@include z(z-overlay-menu);
		}
	}

	// Shader
	&::before {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		right: -120vw;
		width: 120vw;
		height: 100%;
		background: map-get($o-overlay-menu, 'shader-color');
		pointer-events: none;
		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;

		.is-overlay-menu-active & {
			opacity: 1;
			transition-delay: 0s;
		}
	}

	// Hide overlay menu on larger viewports
	@include mq(full-nav) {
		display: none;
	}
}

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

.o-overlay-menu__logo {
	svg {
		height: 56px;
		width: 56px;
	}
}

.o-overlay-menu__nav {
	@include contain;
	margin-top: space(3);
	height: calc(100% - #{map-get($o-overlay-menu, 'bar-height')} - #{map-get($o-overlay-menu, 'languages-height')});
	overflow: scroll;
}

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

.o-overlay-menu__item {
	& + & {
		border-top: 1px solid rgba(palette(primary, 200), 0.16);
	}
}


.o-overlay-menu__link {
	@include font-size(base);
	display: flex;
	align-items: center;
	padding: space(1);
	color: palette(neutral, 0);
	text-decoration: none;

	&.is-active {
		opacity: 1;
		position: relative;
	}
}

.o-overlay-menu__icon {
	margin-left: auto;
	color: palette(primary, 200);
}


.o-overlay-menu__languages {
	@include contain;
	list-style: none;
	display: flex;
	margin-top: space(4);
	padding: space(3) 0;
	border-top: 1px solid rgba(palette(primary, 200), 0.5);
}


.o-overlay-menu__language-item {
	@include border-radius(xs);
	display: flex;
	align-items: center;
	justify-content: center;
	width: space(6);
	height: space(6);

	&.is-active {
		border: 1px solid rgba(palette(primary, 200), 0.5);
	}
}