/**
 * @package     SIMGallery
 * @subpackage  com_simgallery
 *
 * @copyright   (C) 2026 SIMGallery contributors
 * @license     GNU General Public License version 3 or later; see LICENSE.txt
 *
 * The single media page, on top of the tokens of site.css.
 */

/* ----------------------------------------------------------- the figure */

:where(.sg-figure) :where(img) {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 80vh;
	margin-inline: auto;
	object-fit: contain;
}

:where(.sg-figure) :where(figcaption) {
	padding: 0.5rem 0.75rem;
	color: var(--sg-muted);
	font-size: 0.9375rem;
}

/* -------------------------------------------------------------- tagging */

:where([data-sg-tag-layer]) {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

:where([data-sg-tag-layer].is-tagging) {
	pointer-events: auto;
	cursor: crosshair;
}

:where(.sg-tag-box) {
	position: absolute;
	inset-block-start: var(--sg-top, 0%);
	inset-inline-start: var(--sg-left, 0%);
	inline-size: var(--sg-width, 20%);
	block-size: var(--sg-height, 20%);
	padding: 0;
	border: 2px solid rgb(255 255 255 / 90%);
	border-radius: 2px;
	background: none;
	box-shadow: 0 0 0 2px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(0 0 0 / 35%);
	opacity: 0;
	pointer-events: auto;
	transition: opacity 0.15s ease-in-out;
}

:where(.sg-figure:hover) :where(.sg-tag-box),
:where(.sg-figure:focus-within) :where(.sg-tag-box),
:where(.sg-tag-box:focus-visible),
:where(.sg-tag-draft) {
	opacity: 1;
}

:where(.sg-tag-draft) {
	border-style: dashed;
	cursor: move;
}

:where(.sg-tag-list) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.sg-tag-list) > :where(li) {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	margin-inline-end: 0.5rem;
}

/* -------------------------------------------------------------- sidebar */

:where(.sg-info) {
	margin: 0;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.25rem 0.75rem;
	font-size: 0.9375rem;
}

:where(.sg-info) > :where(dt) {
	color: var(--sg-muted);
}

:where(.sg-info) > :where(dd) {
	margin: 0;
	overflow-wrap: anywhere;
}

:where(.sg-nav__position) {
	color: var(--sg-muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- comments */

:where(.sg-comment-list) > :where(li) {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 0.75rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid var(--sg-border);
}

:where(.sg-comment__body) {
	margin: 0;
	overflow-wrap: anywhere;
}

:where(.sg-comment__meta) {
	color: var(--sg-muted);
	font-size: 0.875rem;
}

:where(.sg-comments) :where(textarea) {
	field-sizing: content;
	min-block-size: 4lh;
	max-block-size: 16lh;
	inline-size: 100%;
	resize: vertical;
}

/* --------------------------------------------------------- preferences */

@media (forced-colors: active) {
	:where(.sg-tag-box) {
		border-color: Highlight;
		box-shadow: none;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(.sg-tag-box) {
		transition: none;
	}
}