/* Modal — a native <dialog> in the top layer. */

.modal {
	width: min(var(--modal-width, 35rem), calc(100vw - 2 * var(--wp--style--root--padding-left)));
	max-height: calc(100vh - 2 * var(--wp--preset--spacing--l));
	padding: 0;
	border: 0;
	border-radius: var(--wp--preset--border-radius--l);
	background: var(--modal-bg, var(--wp--preset--color--white));
	color: inherit;
	overflow: clip;
}

/* The top layer centres a dialog with margin: auto. A modal in Post Content
   is also a layout child, and core's block-gap rules zero its block margins,
   pinning it to an edge. The strongest is `:root :where(…) > :last-child`
   at (0,2,0); `dialog.modal[open]` is (0,2,1). */
dialog.modal[open] {
	margin: auto;
}

.modal--l { --modal-width: 52rem; }

.modal::backdrop {
	background: rgb(0 0 0 / 0.55);
	backdrop-filter: blur(4px);
}

/* Not open is the default state of a dialog; stated so a stylesheet override
   cannot accidentally reveal it. Scoped to dialog: the editor preview is a
   div with no [open], and must stay visible. */
dialog.modal:not([open]) {
	display: none;
}

.modal__panel {
	display: flex;
	flex-direction: column;
	max-height: inherit;
}

.modal__header {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--m) 0;
}

.modal__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-4);
}

.modal__close {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	margin-inline-start: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--custom--surface--tint);
	color: inherit;
	cursor: pointer;
	transition: background var(--wp--custom--transition--fast);
}

.modal__close:hover,
.modal__close:focus-visible {
	background: var(--wp--custom--surface--inset);
}

.modal__close svg {
	width: 1.125rem;
	height: 1.125rem;
}

.modal__body {
	padding: var(--wp--preset--spacing--m);
	overflow-y: auto;
}