@miyagi/core/frontend/assets/css/main/menu/nav.css

miyagi is a component development tool for JavaScript template engines.

/** @define Nav; */

.Nav-entry {
	position: relative;
}

.Nav-entry:not(.Nav-entry--lvl0)::before {
	content: "";
	display: block;
	inline-size: var(--bar-size);
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	background: var(--color-MenuBar-background);
}

.Nav-entry--directory {
	border-block-start: var(--divider);
}

.Nav-entry--lvl0:last-child {
	border-block-end: var(--divider);
}

.Nav-wrapper {
	position: relative;
}

.Nav-toggle {
	display: block;
	position: absolute;
	z-index: 1;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: var(--bar-size);
}

.Nav-toggle::after {
	border: var(--toggle-border);
	border-block-start-width: var(--toggle-borderWidth);
	border-inline-end-width: var(--toggle-borderWidth);
	content: "";
	display: block;
	font-size: var(--toggle-fontSize);
	block-size: var(--toggle-height);
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transition: var(--toggle-transition);
	inline-size: var(--toggle-width);
}

.Nav-toggle[aria-expanded="false"]::after {
	transform: var(--toggle-transition-closed);
}

.Nav-toggle[aria-expanded="true"]::after {
	transform: var(--toggle-transition-opened);
	border-color: var(--color-Text);
}

.Nav-item,
.Nav-variant {
	display: block;
	padding-block: var(--menu-spacing);
	padding-inline-start: calc(var(--level, 1) * 1em + var(--menu-spacing));
	margin-inline-start: var(--bar-size);
}

:where(.Nav-item, .Nav-variant):not(:has(mark)),
:where(.Nav-item, .Nav-variant) mark {
	text-transform: capitalize;
}

:where(.Nav-item, .Nav-variant)[aria-current="page"] {
	background: var(--color-Link-active-background);
	color: var(--color-Link-active, var(--color-Link));
}

.is-no-match:not(:has(.is-match)) {
	display: none;
}

.Nav-entry--directory.has-match > .Nav-toggle,
.Nav-entry--directory.is-match * {
	opacity: 1 !important;
}

.Nav-item--directory {
	color: var(--color-Link);
	cursor: default;
	opacity: 0.75;
}

.Nav-item--link {
	font-weight: 600;
}

.Nav-item--link,
.Nav-variant {
	color: var(--color-Link);
	text-decoration: none;
}

.Nav-item--link:where(:hover, :focus),
.Nav-variant:where(:hover, :focus) {
	text-decoration: underline;
}

.Nav-toggle:focus-visible,
.Nav-item:focus-visible {
	outline-offset: calc(-1 * var(--outline-offset));
}