.menu-header {
	@media (width > 768px) {
		margin-inline: auto;
	}

	@media (width > 1200px) {
		margin-inline: 0;
	}
}

.menu-header__list,
.menu-header__sub-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.menu-header__list {
	display: flex;
	flex-direction: column;

	@media (width > 768px) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		background-color: var(--gray-carbon);
		padding: var(--spacing-10);
		border-radius: 999px;
		justify-content: center;
		gap: 0 var(--spacing-10);
	}

	@media (width > 800px) {
		gap: 0 var(--spacing-20);
	}

	@media (width > 1000px) {
		gap: 0 var(--spacing-30);
	}
}

.menu-header__item {
	display: block;
	margin: 0;
	transition-duration: 0.5s;
}

.menu-header__item--level-0 {
	position: relative;

	&.menu-header__item--has-children {
		> a::after {
			content: url(../../images/chevron.svg);
			margin-left: 5px;
			position: relative;
			top: 4px;
		}
	}
}

@media (width > 768px) {
	.menu-header__item--level-0 {
		display: inline-block;
	}
}

.menu-header__link {
	display: flex;
	align-items: center;
	font-family: var(--font-secondary);
	font-size: var(--step-0);
	font-weight: 500;
	text-decoration: none;
	transition: 0.3s all;
	color: var(--white);
	padding-block: var(--spacing-10);
	white-space: nowrap;

	.menu-header__item--current > &,
	&:hover,
	&:focus-within {
		color: var(--teal-contrast);
	}
}

.menu-header__link--level-0 {
	@media (width > 768px) {
		padding-block: var(--spacing-10);
		font-size: var(--step--2);
	}

	@media (width > 1000px) {
		font-size: var(--step--1);
	}
}

.menu-header__link--sub {
	font-family: var(--font-primary);
	font-size: var(--step--2);
	font-weight: 400;
	padding: var(--spacing-10) var(--spacing-20);
	margin: 0;
}

.menu-header__item--level-2 > .menu-header__link--sub {
	padding-left: var(--spacing-30);
}

.menu-header__item--level-0 > .menu-header__sub-list {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.8s ease-in-out;

	@media (width > 768px) {
		visibility: hidden;
		opacity: 0;
		max-height: 0;
		position: absolute;
		left: 0;
		background-color: var(--fog);
		padding: var(--spacing-10) 0;
		margin: 0;
		min-width: 375px;
		transition: opacity 0.5s ease;

		.menu-header__sub-list {
			visibility: visible;
			opacity: 1;
			position: static;
			display: block;
			padding: 0;
			max-height: 99999px;
		}
	}

	&.menu-header__sub-list--active {
		max-height: 99999px;
	}
}

.menu-header__item--right > .menu-header__sub-list {
	left: auto;
	right: 0;
}

@media (width > 768px) {
	.menu-header__item:hover > .menu-header__sub-list,
	.menu-header__item:focus-within > .menu-header__sub-list {
		visibility: visible;
		opacity: 1;
		display: block;
		max-height: 99999px;
	}
}

.menu-header__icon {
	display: flex;
	margin-inline-end: var(--spacing-10);

	@media (width > 768px) {
		margin-inline-end: 0;
	}

	svg {
		max-width: 20px;
		width: 100%;
		height: auto;
	}
}

.menu-header__link:has(.menu-header__icon) {
	@media (width > 768px) {
		background-color: var(--midnight);
		border-radius: 999px;
		width: 35px;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: center;

		&:hover,
		&:focus-within {
			background-color: var(--gray-medium);
		}

		.menu-header__icon-text {
			display: none;
		}
	}

	@media (width > 1000px) {
		width: 45px;
		height: 45px;
	}
}

.menu-header__btn {
	cursor: pointer;
	padding: var(--spacing-10);
	position: absolute;
	right: 0;
	top: 8px;
	font-size: 0;
	line-height: 0.5;

	path {
		stroke: var(--white);
	}

	/* TODO: Add pseudo chevron on desktop. */
	@media (width > 768px) {
		display: none;
	}
}

.menu-header__btn:hover,
.menu-header__btn:focus-within {
	path {
		stroke: var(--teal-contrast);
	}
}

.menu-header__btn--expanded {
	svg {
		transform: rotate(180deg);
	}
}