/**
 * Popup front-end styling
 *
 * Defines front-end styling. All view.css files
 * like this one only load when enqueued manually
 * or via a block.json file. You can import this
 * file into an editor.css file to apply these
 * front-end styles within the block editor.
 */
.dialog {
	overflow: hidden;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	background-color: transparent;
	border: 0;
	transition: opacity var(--ani-speed);
}
.dialog[open] {
		display: flex;
	}
body:not(.has-active-dialog) .dialog {
		opacity: 0;
	}
.torso.is-layout-constrained > .dialog {
		margin: unset;
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
	}
.dialog::backdrop {
		background-color: transparent;
	}
.dialog__frame {
	position: relative;
	width: 100%;
	max-width: 70em;
	max-height: calc(100vh - var(--sp-m-rem));
	background-color: var(--c-0-9);
	box-shadow: var(--shadow-m);
	border-radius: var(--bd-rad-m);
	transition-property: opacity, transform;
	transition: none 0.5s 0.2s var(--ani-ease-l);
}
.dialog__frame::before {
		content: "";
		position: absolute;
		inset: -50vw;
		background-color: color-mix(in srgb, var(--c-2-2) 95%, transparent);
		transition: 0.6s ease-out;
		opacity: 0.92;
		z-index: -1;
	}
body:not(.has-active-dialog) .dialog__frame {
		opacity: 0;
		transform: translateY(0.5rem) scale(0.95);
	}
.dialog__content {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	mask-image: linear-gradient(
		transparent,
		tan 1.7em,
		tan calc(100% - 1.7em),
		transparent
	);
}
.dialog__scrolls.has-global-padding:not([style*="padding-left"]) {
			padding-left: var(--sp-s-rem);
		}
.dialog__scrolls.has-global-padding:not([style*="padding-right"]) {
			padding-right: var(--sp-s-rem);
		}
.dialog__scrolls.has-global-padding:not([style*="padding-top"]) {
			padding-top: var(--sp-s-rem);
		}
.dialog__scrolls.has-global-padding:not([style*="padding-bottom"]) {
			padding-bottom: var(--sp-s-rem);
		}
.dialog__close {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	color: var(--c-0-0);
	transform: translate(0.5em, -0.5em);
}
body.has-active-dialog {
	overflow: clip;
}

/* video variant */
.dialog--video .dialog__frame {
		overflow: hidden;
	}
.dialog--video .dialog__content {
		mask: none;
	}