/*
 * The manuals' screenshot viewer (AIEO_Docs_Viewer, includes/docs/class-aieo-docs-viewer.php): the screenshots' links
 * on the page and the dialog. The look is the legacy reader's dark overlay on the theme's tokens: the scheme's darkest
 * colour under its lightest (contrast and bg in the light scheme, bg and fg in the dark one, which the theme marks with
 * `data-rooster-scheme="dark"` on <html>).
 */

/* The links stay inline and unstyled, so the page lays out as before; the focus ring is drawn on the image. */
.rooster-docs__shot {
	cursor: zoom-in;
}

.rooster-docs__shot:focus-visible {
	outline: none;
	box-shadow: none;
}

.rooster-docs__shot:focus-visible > :is(img, picture) {
	box-shadow: var(--wp--custom--rooster--focus-ring);
}

/* The page under the open viewer: no scroll; the scrollbar's gutter kept when it had one. */
:root.rooster-docs-viewer-open {
	overflow: hidden;
}

:root.rooster-docs-viewer-gutter {
	scrollbar-gutter: stable;
}

.rooster-docs-viewer {
	--rooster-docs-viewer-ink: var(--wp--preset--color--contrast);
	--rooster-docs-viewer-paper: var(--wp--preset--color--bg);
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--rooster-docs-viewer-ink) 94%, transparent);
	color: var(--rooster-docs-viewer-paper);
	font-family: var(--wp--preset--font-family--body, inherit);
	overscroll-behavior: contain;
}

:root[data-rooster-scheme="dark"] .rooster-docs-viewer {
	--rooster-docs-viewer-ink: var(--wp--preset--color--bg);
	--rooster-docs-viewer-paper: var(--wp--preset--color--fg);
}

.rooster-docs-viewer[open] {
	display: flex;
	flex-direction: column;
}

.rooster-docs-viewer::backdrop {
	background: transparent;
}

.rooster-docs-viewer [hidden] {
	display: none;
}

.rooster-docs-viewer__bar {
	display: flex;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--2);
	align-items: center;
	min-height: 3.25rem;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	background: color-mix(in srgb, var(--rooster-docs-viewer-ink) 96%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--rooster-docs-viewer-paper) 12%, transparent);
}

.rooster-docs-viewer__title {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rooster-docs-viewer__count {
	min-width: 3.5em;
	color: color-mix(in srgb, var(--rooster-docs-viewer-paper) 75%, var(--rooster-docs-viewer-ink));
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.rooster-docs-viewer__button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--2);
	border: 1px solid color-mix(in srgb, var(--rooster-docs-viewer-paper) 16%, transparent);
	border-radius: var(--wp--custom--rooster--shape--control);
	background: color-mix(in srgb, var(--rooster-docs-viewer-paper) 10%, transparent);
	color: var(--rooster-docs-viewer-paper);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.rooster-docs-viewer__button:hover {
	background: color-mix(in srgb, var(--rooster-docs-viewer-paper) 20%, transparent);
}

.rooster-docs-viewer__button[aria-pressed="true"] {
	border-color: var(--rooster-docs-viewer-paper);
	background: var(--rooster-docs-viewer-paper);
	color: var(--rooster-docs-viewer-ink);
}

.rooster-docs-viewer__button:focus-visible {
	outline: 2px solid var(--rooster-docs-viewer-paper);
	outline-offset: 2px;
	box-shadow: none;
}

.rooster-docs-viewer__stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--wp--preset--spacing--3);
	overflow: auto;
	overscroll-behavior: contain;
	touch-action: manipulation;
}

.rooster-docs-viewer__stage:focus-visible {
	outline: 2px solid var(--rooster-docs-viewer-paper);
	outline-offset: -4px;
	box-shadow: none;
}

.rooster-docs-viewer__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--wp--custom--rooster--shape--media);
	background: var(--rooster-docs-viewer-paper);
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.rooster-docs-viewer__stage.is-full .rooster-docs-viewer__image {
	max-width: none;
	cursor: grab;
}

.rooster-docs-viewer__stage.is-dragging .rooster-docs-viewer__image {
	cursor: grabbing;
}

.rooster-docs-viewer__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}