/**
 * Drawer: .mk-drawer (templates/components/drawer.php, store drawer.js).
 *
 * A modal <dialog> pinned to the left edge, full height; full screen below
 * 48rem (`custom.breakpoint.tablet`), `drawer.width` (400) on tablets,
 * `drawer.desktopWidth` (600) from 64rem. Header = three columns (start,
 * centred title, close), only the content scrolls (thin scrollbar 4, thumb
 * `color.drawer.scrollbarThumb`), footer stays at the bottom. While it is
 * open the page does not scroll and keeps its scrollbar gutter, so nothing
 * behind the backdrop moves. Slides in from the left (not with reduced motion).
 * Modifiers: --end (right edge, slides in from the right, left corners
 * `drawer.radius` 10 from 48rem), --title-start
 * (title left, close right), --flush (content and footer without padding).
 */

.mk-drawer {
	--mk-drawer-from: -100%;

	position: fixed;
	inset: 0 auto 0 0;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background-color: var(--wp--custom--color--drawer--background);
	color: var(--wp--custom--color--text--primary);
	transform: translateX(var(--mk-drawer-from));
	transition-property: transform, overlay, display;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
	transition-behavior: allow-discrete;
}

@media (min-width: 48rem) {
	.mk-drawer {
		inline-size: var(--wp--custom--drawer--width);
	}

	.mk-drawer--end {
		border-start-start-radius: var(--wp--custom--drawer--radius);
		border-end-start-radius: var(--wp--custom--drawer--radius);
	}
}

@media (min-width: 64rem) {
	.mk-drawer {
		inline-size: var(--wp--custom--drawer--desktop-width);
	}
}

.mk-drawer[open] {
	transform: none;
}

@starting-style {
	.mk-drawer[open] {
		transform: translateX(var(--mk-drawer-from));
	}
}

.mk-drawer--end {
	--mk-drawer-from: 100%;

	inset: 0 0 0 auto;
}

.mk-drawer::backdrop {
	background-color: var(--wp--custom--color--backdrop);
}

:root:has(.mk-drawer[open]) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

.mk-drawer__panel {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

.mk-drawer__header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--custom--drawer--header-padding-inline);
	padding-block: var(--wp--custom--drawer--header-padding-block);
	padding-inline: var(--wp--custom--drawer--header-padding-inline);
	border-block-end: var(--wp--custom--border-width--thin) solid
		var(--wp--custom--color--drawer--divider);
}

.mk-drawer--title-start .mk-drawer__header {
	grid-template-columns: 1fr auto;
}

.mk-drawer--title-start .mk-drawer__title {
	text-align: start;
}

.mk-drawer__start {
	justify-self: start;
}

.mk-drawer__title {
	margin: 0;
	font-family: var(--wp--custom--text--heading-3--font-family);
	font-size: var(--wp--custom--text--heading-3--font-size);
	font-weight: var(--wp--custom--text--heading-3--font-weight);
	line-height: var(--wp--custom--text--heading-3--line-height);
	letter-spacing: var(--wp--custom--text--heading-3--letter-spacing);
	text-align: center;
}

.mk-drawer__close {
	justify-self: end;
}

/* Positioned, so absolute children (screen reader text) scroll with it. */
.mk-drawer__content {
	position: relative;
	flex: 1;
	min-block-size: 0;
	padding-block: var(--wp--custom--drawer--content-padding-block);
	padding-inline: var(--wp--custom--drawer--content-padding-inline);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mk-drawer__content::-webkit-scrollbar {
	inline-size: var(--wp--custom--drawer--scrollbar-width);
}

.mk-drawer__content::-webkit-scrollbar-track {
	background-color: transparent;
}

.mk-drawer__content::-webkit-scrollbar-thumb {
	border-radius: var(--wp--custom--drawer--scrollbar-radius);
	background-color: var(--wp--custom--color--drawer--scrollbar-thumb);
}

@media (hover: hover) {
	.mk-drawer__content::-webkit-scrollbar-thumb:hover {
		background-color: var(
			--wp--custom--color--drawer--scrollbar-thumb-hover
		);
	}
}

/* Firefox: no ::-webkit-scrollbar, the standard properties instead. */
@supports not selector(::-webkit-scrollbar) {
	.mk-drawer__content {
		scrollbar-width: thin;
		scrollbar-color: var(--wp--custom--color--drawer--scrollbar-thumb)
			transparent;
	}
}

.mk-drawer__footer {
	display: grid;
	padding-block: var(--wp--custom--drawer--footer-padding-top)
		var(--wp--custom--drawer--footer-padding-bottom);
	padding-inline: var(--wp--custom--drawer--footer-padding-inline);
	border-block-start: var(--wp--custom--border-width--thin) solid
		var(--wp--custom--color--drawer--divider);
}

.mk-drawer--flush :is(.mk-drawer__content, .mk-drawer__footer) {
	padding: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mk-drawer {
		transition: none;
	}
}