@import '../scss/_mixins';

.container {
	position: fixed;
	z-index: 10;
	margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;

	&:not(.hidden) {
		transition: transform, cubic-bezier(0.4, 0, 0.2, 1), 300ms;
		transform: translateY(0%);
	}

	&.hidden {
		transition: transform, cubic-bezier(0.4, 0, 0.2, 1), 300ms;
		transition-delay: 275ms;
		transform: translateY(-100%);
	}
	
	.menuHeader {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;

		a {
			display: flex;
			align-items: center;
			margin: 1rem;

			font-weight: 600;
			font-family: var(--font-sans);
			color: var(--primary-dim);
		}
	}

	.mobileButton {
		display: none;
	}

	.menu {
		display: flex;	
		justify-content: space-between;
		max-width: var(--reading-width);
		margin: 1rem auto;
		border-radius: 1rem;
		position: relative;
		backdrop-filter: blur(10px);
		border-radius: 1rem;

		a {
			font-family: var(--font-accent);
			font-weight: 700;
			color: var(--primary);

			&:hover {
				color: var(--primary-bright);
			}
		}
		
		&:after {
			content: '';
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: var(--primary-dark);
			opacity: 50%;
			border-radius: 1rem;
		}
	}

	.menuContent {
		ul {
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			text-align: center;
			gap: 4rem;
		}
	}

	.menuBlackout {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 0;
		z-index: -1;
		
		&[data-open="true"] {
			height: 100vh;
		}
	}

	.mobileToggle {
		z-index: 1;
		display: none;
		position: relative;
		width: 50px;
		height: 50px;
		cursor: pointer;
		transform: rotateY(180deg);
	
		div {
			margin: auto;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			width: 22px;
			height: 12px;
		}
		
		span {
			position: absolute;
			display: block;
			width: 100%;
			height: 2px;
			background-color: var(--primary);
			border-radius: 1px;
			transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
	
			&:first-of-type {
				top: 0;
			}
			&:last-of-type {
				bottom: 0;
			}
		}
		
		&[data-open="true"] {
			span {
				&:first-of-type {
					transform: rotate(45deg);
					top: 5px;
				}
				&:last-of-type {
					transform: rotate(-45deg);
					bottom: 5px;
				}
			}
		}
	
		&[data-open="true"]:hover span:first-of-type,
		&[data-open="true"]:hover span:last-of-type {
			width: 22px;
		}
		
		&:hover {
			span:first-of-type {
				width: 12px;
			}

			span:last-of-type {
				width: 26px;
			}
		}
		
	}
	
}

@include media($max: $mobile) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
		width: 100%;

		&.hidden {
			.menuBlackout {
				height: 0;
			}
		}

		.menuContainer {
			position: relative;
		}
		.mobileToggle {
			display: block;
		}
		.menuHeader {
			width: 100%;
		}
		.menu {
			flex-direction: column;
		}
		.menuContent {
			transition: transform, cubic-bezier(0.4, 0, 0.2, 1), 300ms;
			max-height: 0vh;
			overflow: hidden;
			
			&[data-open="true"] {
				transition: transform, cubic-bezier(0.4, 0, 0.2, 1), 300ms;
				max-height: 100vh;
				transform: translate3d(0px,0px,1px);
			}

			ul {
				flex-direction: column;
				gap: 2rem;
				margin: 2rem;
			}
		}
	}
}