/*---------------------------------------------------------------------------*\
	#Menu
\*---------------------------------------------------------------------------*/

.menu {
	line-height: 1.5;
}

.menu_wrapper {
	position: relative;
	display: flex;
	gap: 4rem;
	list-style-type: none;
	margin: 0;
	padding: 0;
}


.menu__item {
	font-size: inherit;
	line-height: inherit;
	/* Reset adjustments from li-elements. */
	margin: 0;
	padding: 0;
}

.menu__item_wrapper {
	position: relative;
}


.menu-link {
	color: inherit;
	background-image: none;
	cursor: pointer;
	display: block;
	text-decoration: none;
	outline: none;
	width: max-content;
	margin: 0;
	padding: 0;
	transition: none;
}

.menu-link__content-part {
	display: inline;
	color: inherit;
	background-image: linear-gradient( currentColor, currentColor );
	background-position: 0% 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: .25s background-size ease;
}

	.menu-link:where( :focus, :hover, :active ) :where( .menu-link__content-part ),
	.menu-link--current :where( .menu-link__content-part ),
	.menu-link--current--parent :where( .menu-link__content-part ) {
		background-size: 100% 1px;
	}

	.menu-link--placeholder :where( .menu-link__content-part ) {
		background-image: none;
	}





/*---------------------------------------------------------------------------*\
	#Submenu-0
	- Submenus must be implemented individually.
\*---------------------------------------------------------------------------*/

.submenu-0 {
	display: none;
}

.submenu-0_wrapper {
	list-style-type: none;
	margin: 0;
	padding: 0;
}





/*---------------------------------------------------------------------------*\
	#Submenu-1
	- Submenus must be implemented individually.
\*---------------------------------------------------------------------------*/

.submenu-1 {
	display: none;
}

.submenu-1_wrapper {
	list-style-type: none;
	margin: 0;
	padding: 0;
}





/*---------------------------------------------------------------------------*\
	#Menu-Icon
\*---------------------------------------------------------------------------*/

/* The link should overlay non-interactive Icons. */
.menu-link--has-icon--before {
	padding-left: 2em;
}

.menu-link--has-icon--after {
	padding-right: 2em;
}

/* Interactive Icons must be accessible. */
.menu-link--has-icon--before:where( .menu-link--parent ) {
	margin-left: 2em;
	padding-left: 0;
}

.menu-link--has-icon--after:where( .menu-link--parent ) {
	margin-right: 2em;
	padding-right: 0;
}


/* It is a Button for parents. */
.menu-icon {
	position: absolute;
	display: block;
	background: none;
	cursor: pointer;
	color: inherit;
	font-size: inherit;
	line-height: 1;
	height: 1em;
	width: 1em;
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;
	margin: 0;
	border: 0;
	padding: 0;
	outline: none;
}

	.menu-icon:focus,
	.menu-icon:active {
		outline: none;
	}

	.menu-icon--before {
		left: 0;
	}

	.menu-icon--after {
		right: 0;
	}