/**
 * Front-end chrome for the omg/modal <dialog>: shell, animation, backdrop, close button.
 */

/* display lives on [open], not here: a closed <dialog> must keep the UA display:none, else the absolutely-positioned shell extends the page and adds phantom scroll space. The display transition below animates the none<->flex toggle. */
.omg-modal {

	/* dvh bounds the modal to the currently visible viewport; vh (large viewport on iOS) overflows above/below the toolbar and clips the close button. */
	max-height: 90vh;
	max-height: 90dvh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;

	/* Clip the body's rounded corners; scrolling lives on .omg-modal__body so the close button stays pinned. */
	overflow: hidden;

	/* Background and text colour come from the block's color attributes, not here. */
	opacity: 0;
	transform: translateY(16px) scale(0.98);
}

/* Caps at 1240px, else viewport minus 24px gutters; the [open] selector beats the UA dialog:modal max-width. */
.omg-modal[open] {
	display: flex;
	flex-direction: column;
	width: min(1240px, 100vw - 48px);
	max-width: none;
	opacity: 1;
	transform: translateY(0) scale(1);
}

.omg-modal::backdrop {
	background: rgb( 0 0 0 / 0% );
}

.omg-modal[open]::backdrop {
	background: rgb( 0 0 0 / 60% );
}

/* allow-discrete lets display/overlay transition so the open/close animation
   plays before the dialog leaves the top layer. Motion only; reduced-motion
   users get an instant show/hide. */
@media (prefers-reduced-motion: no-preference) {

	.omg-modal {
		transition:
			opacity 0.25s ease,
			transform 0.25s ease,
			overlay 0.25s ease allow-discrete,
			display 0.25s ease allow-discrete;
	}

	.omg-modal::backdrop {
		transition:
			background 0.25s ease,
			overlay 0.25s ease allow-discrete,
			display 0.25s ease allow-discrete;
	}

	@starting-style {

		.omg-modal[open] {
			opacity: 0;
			transform: translateY(16px) scale(0.98);
		}

		.omg-modal[open]::backdrop {
			background: rgb( 0 0 0 / 0% );
		}
	}
}

/* z-index keeps the button above .omg-modal__body, which is positioned and follows it in the DOM. */
.omg-modal__close {
	position: absolute;
	z-index: 1;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: var( --wp--preset--color--dark-blue, #001c44 );
	color: var( --wp--preset--color--white, #fff );
	cursor: pointer;
}

.omg-modal__close:hover,
.omg-modal__close:focus-visible {
	opacity: 0.85;
}

.omg-modal__close svg {
	width: 14px;
	height: 14px;
	fill: currentcolor;
}

.omg-modal__body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
}