/*
 * Viewer — the fullscreen frame shared by everything that opens media over the
 * page: the image lightbox (assets/css/lightbox.css) and a Video-width
 * wage/modal. One file, so a gallery image and a video open identically.
 *
 *   .viewer          the <dialog>: fullscreen, transparent, the backdrop
 *   .viewer-bar      the top row of controls
 *   .viewer-control  a bare icon button (close, zoom, previous, next)
 *
 * Colours and sizes are settings.custom.lightbox. Glyphs are assets/icons/*,
 * inlined with wage_block_icon_svg(). Registered as a dependency of both
 * stylesheets (functions.php), so it loads before either and they can extend
 * these rules at equal specificity.
 */

/* Lock background scroll while open. */
html:has(.viewer[open]) {
	overflow: clip;
}

/* `dialog.` so it outranks a block's own dialog rules (`.modal`) at equal
   class count. The markup pins color-scheme--dark, so roles resolve against
   the backdrop whatever the page's scheme. */
dialog.viewer {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	overflow: visible;

	/* Fast or double clicks otherwise select what is behind (a blue flash);
	   nothing here is selectable. Also drops the iOS grey tap highlight. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/* Only lay out when open: this would otherwise override the UA's
   `display: none` for a closed dialog. */
dialog.viewer[open] {
	display: flex;
	flex-direction: column;
}

dialog.viewer::backdrop {
	background-color: var(--wp--custom--lightbox--backdrop);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ── Bar ─────────────────────────────────────────────────────── */

.viewer-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	min-block-size: var(--wp--custom--lightbox--control--size);
	padding: calc(var(--wp--preset--spacing--xxs) / 2) var(--wp--preset--spacing--s);
	z-index: 2;
}

/* Close stays pinned right whatever else the bar holds. */
.viewer-bar > .viewer-control--close {
	margin-inline-start: auto;
}

/* ── Controls ────────────────────────────────────────────────── */

/* Bare glyphs, no disc: near-white, with a dark outline from stacked
   drop-shadows (box-shadow would trace the box, not the glyph), so they read
   over any image. */
.viewer-control {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	inline-size: var(--wp--custom--lightbox--control--size);
	block-size: var(--wp--custom--lightbox--control--size);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wp--custom--lightbox--icon--color);
	cursor: pointer;
	transition: transform var(--wp--custom--transition--fast);
}

.viewer-control :where(svg) {
	inline-size: var(--wp--custom--lightbox--icon--size);
	block-size: var(--wp--custom--lightbox--icon--size);
	filter:
		drop-shadow(0 0 1px var(--wp--custom--lightbox--icon--outline))
		drop-shadow(0 1px 2px var(--wp--custom--lightbox--icon--outline));
}

.viewer-control:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--s);
}

/* A quarter-turn on the X. */
.viewer-control--close:hover,
.viewer-control--close:focus-visible {
	transform: rotate(90deg);
}

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

	.viewer-control--close:hover,
	.viewer-control--close:focus-visible {
		transform: none;
	}
}