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

$o-overlay-menu: (
	'bgcolor':          palette(primary, 700),
	'color':            palette(neutral, 0),
	'hover-color':      rgba(palette(neutral, 0), 0.7),
	'shader-color':     rgba(0, 0, 0, 0.6),
	'move-speed':       400ms,
	'opacity-speed':    200ms,
);

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


.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-color: map-get($o-overlay-menu, 'bgcolor');
	background-image: linear-gradient(75deg, palette(primary, 700) 50%, palette(primary, 500) 125%);

	// When it disappears out of view
	transform: translateX(-120vw);
	transition-property: transform, opacity;
	transition-duration: map-get($o-overlay-menu, 'move-speed'), map-get($o-overlay-menu, 'opacity-speed');
	transition-delay: 0s, map-get($o-overlay-menu, 'move-speed');
	transition-timing-function: cubic-bezier(0.5, 0.15, 0.1, 1), linear;

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

	// 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;
		}
	}

	// Diagonal shape on the right
	&::after {
		display: block;
		content: '';
		position: absolute;
		top: 0;
		right: -20%;
		width: 20%;
		height: 100%;
		background: linear-gradient(-86deg, transparent 50%, map-get($o-overlay-menu, 'bgcolor') 50%);
	}

	// 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 {
	height: space(6);
}


.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__list {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 0;
	list-style: none;
}


.o-overlay-menu__item {
	padding: space(1) column(1,14);
	border-top: 1px solid rgba(map-get($o-overlay-menu, 'color'), 0.3);
}


.o-overlay-menu__link {
	@include font-size(l);
	display: block;
	color: map-get($o-overlay-menu, 'color');
	text-decoration: none;
	transition: opacity 200ms linear;

	&:hover {
		color: map-get($o-overlay-menu, 'hover-color');
	}

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

	&.is-active {
		position: relative;
		opacity: 1;
		font-weight: bold;

		&::before {
		    content: '\2794';
			position: absolute;
		    top: 6px;
		    left: -1.25em;
			font-size: 14px;
		}
	}
}