/** @format */

#header {
	width: 100%;
	background-color: var(--color-highlight);
	top: 0px;
	z-index: 1000;

	.nav.nav--header ul.menu {
		display: flex;
		flex-direction: column;
		gap: var(--universal-gap);
		align-content: space-around;
		font-size: var(--fs-titlesecondary);
	}

	.nav-menu--button {
		justify-self: end;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;

		width: 3rem;
		height: 3rem;

		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;

		span {
			display: block;
			width: 70%;
			height: 3px;
			background-color: white;
			border-radius: 999px;
			transition:
				transform 0.3s ease,
				opacity 0.3s ease;
		}
	}

	.menu-left--absolute {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 500;
	}
	.menu-right--fixed {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1000;
		.nav-menu--button {
			grid-column: 2;
		}
	}
}
#body.menu_active #header {
	.header__inner_container nav.nav--header {
		height: 100%;
		transition: height 2s;
	}
	.header__logo {
		pointer-events: none;
		opacity: 0.1;
	}
	.menu-right--fixed {
		height: 100vh;
		background-color: var(--color-black);
		opacity: 0.9;
		transition:
			height 2s,
			background-color 2s;
		.header__inner_container nav.nav--header ul {
			display: flex;
			flex-direction: column;
			gap: var(--universal-gap);
			align-content: space-around;
			font-size: var(--fs-titlesecondary);
		}
	}
}

.header__inner_container {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	align-items: center;
	padding: calc(var(--universal-gap) / 2) 0;
}

.header__logo {
	width: 100%;
	max-width: none;
}

.header__inner_container > *:first-child {
	justify-self: start;
}

.header__inner_container nav.nav--header {
	justify-self: start;
	height: 0;
	overflow: hidden;
}

#body.menu_active #header {
	.nav-menu--button {
		span:first-child {
			width: 70%;
			transform: translateY(6px) rotate(45deg);
		}

		span:last-child {
			width: 70%;
			transform: translateY(-6px) rotate(-45deg);
		}
	}
}