/**
 * Mobile menu drawer (D-108). Tokens only (D-85). Left-anchored, 88vw up to 360px.
 */

.materli-mobile-menu {
	margin: 0 auto 0 0;
	width: 88vw;
	max-width: 360px;
	height: 100%;
	max-height: 100%;
	padding: 0;
	border: 0;
	overflow-y: auto;
	background: var(--materli-color-surface);
	color: var(--materli-color-text);
}

.materli-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--materli-space-sm) var(--materli-space-md);
	background: var(--materli-color-surface-alt);
}

.materli-mobile-menu__header h2 {
	margin: 0;
	font-size: var(--materli-text-body);
	font-weight: var(--materli-weight-strong);
}

.materli-mobile-menu__close {
	min-width: var(--materli-hit);
	min-height: var(--materli-hit);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.materli-mobile-menu nav,
.materli-mobile-menu__footer {
	padding: var(--materli-space-sm) var(--materli-space-md);
}

.materli-mobile-menu__link,
.materli-mobile-menu__group > summary {
	display: flex;
	align-items: center;
	min-height: var(--materli-hit);
	font-size: var(--materli-text-body);
	text-decoration: none;
	color: inherit;
}

.materli-mobile-menu__group > summary {
	justify-content: space-between;
	font-weight: var(--materli-weight-strong);
	list-style: none;
	cursor: pointer;
}

.materli-mobile-menu__group > summary::-webkit-details-marker {
	display: none;
}

.materli-mobile-menu__group > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.materli-mobile-menu__group ul {
	margin: 0;
	padding: 0 0 var(--materli-space-sm) var(--materli-space-md);
	list-style: none;
}

.materli-mobile-menu__footer {
	border-top: 1px solid var(--materli-color-border);
}

.materli-mobile-menu__footer form {
	margin-top: var(--materli-space-sm);
}

@media (prefers-reduced-motion: no-preference) {
	.materli-mobile-menu__group > summary::after {
		transition: transform var(--materli-motion);
	}

	.materli-mobile-menu__group[open] > summary::after {
		transform: translateY(2px) rotate(225deg);
	}
}

html.materli-mobile-menu-open {
	overflow: hidden;
}

@media (min-width: 1000px) {
	.materli-mobile-menu {
		display: none !important;
	}
}

/* Nav item icons (05-21): the label wrapper keeps the summary chevron pinned right. */
.materli-nav-label {
	display: inline-flex;
	align-items: center;
}

/* U-8: in a list where any row has an icon, iconless rows are indented by the icon slot so labels align. */
.materli-mobile-menu nav:has(> a > .materli-nav-icon, > details > summary .materli-nav-icon) > a:not(:has(> .materli-nav-icon)),
.materli-mobile-menu nav:has(> a > .materli-nav-icon, > details > summary .materli-nav-icon) > details > summary:not(:has(.materli-nav-icon)),
.materli-mobile-menu__group ul:has(> li > a > .materli-nav-icon) > li > a:not(:has(> .materli-nav-icon)) {
	padding-inline-start: calc(var(--materli-icon-size) + var(--materli-space-xs));
}