/**
 * Modal: .mk-modal (templates/components/modal.php, store drawer.js).
 * Tokens: theme.json `modal`, `color.modal`.
 *
 * A modal <dialog> centred in the window: 80% of the window wide, 800 at
 * most (`modal.width`, `modal.maxWidth`), radius 10, at most the window
 * height minus 16 on each side (only the content scrolls). Header: title
 * heading-3 on the left, close (icon button 24) on the right, padding
 * 14 / 24, 1px bottom divider (#F6E3E4); content padding 24. Opening: the
 * window fades in and rises 16 (`modal.offset`) from 98% (`modal.enterScale`),
 * the backdrop fades in (`motion.duration.base`); reduced motion: fade only.
 * While it is open the page does not scroll and keeps its scrollbar gutter.
 */

.mk-modal {
	--mk-modal-from: translateY(var(--wp--custom--modal--offset))
		scale(var(--wp--custom--modal--enter-scale));

	position: fixed;
	inset: 0;
	box-sizing: border-box;
	inline-size: min(
		var(--wp--custom--modal--width),
		var(--wp--custom--modal--max-width)
	);
	max-inline-size: none;
	block-size: fit-content;
	max-block-size: calc(100% - 2 * var(--wp--custom--modal--margin-block));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--modal--radius);
	overflow: hidden;
	background-color: var(--wp--custom--color--modal--background);
	color: var(--wp--custom--color--text--primary);
	opacity: 0;
	transform: var(--mk-modal-from);
	transition-property: opacity, transform, overlay, display;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
	transition-behavior: allow-discrete;
}

.mk-modal[open] {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transform: none;
}

@starting-style {
	.mk-modal[open] {
		opacity: 0;
		transform: var(--mk-modal-from);
	}
}

.mk-modal::backdrop {
	background-color: transparent;
	transition-property: background-color, overlay, display;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-behavior: allow-discrete;
}

.mk-modal[open]::backdrop {
	background-color: var(--wp--custom--color--backdrop);
}

@starting-style {
	.mk-modal[open]::backdrop {
		background-color: transparent;
	}
}

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

.mk-modal__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--modal--header-gap);
	padding-block: var(--wp--custom--modal--header-padding-block);
	padding-inline: var(--wp--custom--modal--header-padding-inline);
	border-block-end: var(--wp--custom--border-width--thin) solid
		var(--wp--custom--color--modal--divider);
}

.mk-modal__title {
	margin: 0;
	color: var(--wp--custom--color--modal--title);
	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);
}

.mk-modal__close {
	flex: none;
}

.mk-modal__content {
	min-block-size: 0;
	padding: var(--wp--custom--modal--content-padding);
	overflow-y: auto;
	overscroll-behavior: contain;
}

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