/**
 * @package     SIMGallery
 * @subpackage  com_simgallery
 *
 * @copyright   (C) 2026 SIMGallery contributors
 * @license     GNU General Public License version 3 or later; see LICENSE.txt
 *
 * The gallery pages are built from Bootstrap components and utilities; this file only adds what Bootstrap has no
 * class for. Every selector is wrapped in :where() (zero specificity), so a template overrides any rule with a
 * plain class selector.
 */

:where(.sg-root) {
	--sg-surface: var(--body-bg, var(--bs-body-bg, Canvas));
	--sg-surface-alt: color-mix(in srgb, var(--sg-text) 4%, var(--sg-surface));
	--sg-text: var(--body-color, var(--bs-body-color, CanvasText));
	--sg-muted: var(--secondary-color, var(--bs-secondary-color, GrayText));
	--sg-border: var(--border-color, var(--bs-border-color, color-mix(in srgb, CanvasText 15%, transparent)));
	--sg-accent: var(--link-color, var(--bs-link-color, LinkText));
	--sg-accent-contrast: var(--body-bg, var(--bs-body-bg, Canvas));
	--sg-danger: var(--danger, var(--bs-danger, #b02a37));
	--sg-radius: var(--border-radius, 0.375rem);
	--sg-gap: 1rem;
	--sg-card-min: 14rem;
	--sg-focus: var(--focus-color, var(--bs-focus-ring-color, Highlight));

	color: var(--sg-text);
}

:where(.sg-root.sg-size-sm) {
	--sg-card-min: 9rem;
}

:where(.sg-root.sg-size-lg) {
	--sg-card-min: 19rem;
}

:where(.sg-root.sg-size-xl) {
	--sg-card-min: 26rem;
}

/* ----------------------------------------------------------------- cards */

/* Links inside a card carry the card's colour; only the pointer marks them. */
.sg-root :where(.sg-card) a:not(.btn) {
	color: inherit;
	text-decoration: none;
}

.sg-root :where(.sg-card) a:not(.btn):hover,
.sg-root :where(.sg-card) a:not(.btn):focus-visible {
	text-decoration: underline;
}

/* Two lines of title, so a long one does not push the tiles of its row apart. */
:where(.sg-card--album) :where(.sg-card__title) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

:where(.sg-card__meta) > * {
	white-space: nowrap;
}

:where(.sg-card__meta) [class^="icon-"],
:where(.sg-album-meta) [class^="icon-"] {
	margin-inline-end: 0.2rem;
	opacity: 0.75;
}

:where(.sg-card__avatar) {
	object-fit: cover;
	background: var(--sg-surface-alt);
}

:where(.sg-like-count),
:where(.sg-comment-count) {
	font-variant-numeric: tabular-nums;
}

/* The cover lifts a little while it flips through the album's photos. */
:where(.sg-card--album) :where(.sg-card__media) {
	transition: transform 0.2s ease, filter 0.2s ease;
}

:where(.sg-card--album):hover :where(.sg-card__media),
:where(.sg-card--album):focus-within :where(.sg-card__media) {
	transform: scale(1.03);
	filter: brightness(1.04);
}

/* ------------------------------------------------- one card for a level of categories */

.sg-root :where(.sg-categories-list__link):hover,
.sg-root :where(.sg-categories-list__link):focus-visible {
	background: var(--sg-surface-alt);
	color: inherit;
}

.sg-root :where(.sg-categories-list__link):hover :where(.sg-categories-list__name),
.sg-root :where(.sg-categories-list__link):focus-visible :where(.sg-categories-list__name) {
	text-decoration: underline;
}

:where(.sg-categories-list__image) {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	object-fit: cover;
	background: var(--sg-surface-alt);
}

/* A long name must be allowed to shrink inside its flex column. */
:where(.sg-categories-list__text) {
	min-inline-size: 0;
}

:where(.sg-categories-list__name) {
	overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- avatars */

:where(.sg-avatar) {
	flex: none;
	inline-size: 4rem;
	block-size: 4rem;
	background: var(--sg-surface-alt);
	color: var(--sg-muted);
}

:where(.sg-avatar) :where(img),
:where(.sg-avatar) :where(svg) {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

:where(.sg-avatar--sm) {
	inline-size: 2rem;
	block-size: 2rem;
}

/* --------------------------------------------------------- notifications */

:where(.sg-notifications) {
	position: relative;
}

:where(.sg-notification-items) {
	max-block-size: min(60vh, 28rem);
	overflow-y: auto;
	scrollbar-gutter: stable;
	overscroll-behavior: contain;
}

:where(.sg-notification-items) > :where(li) {
	padding: 0.5rem 0.75rem;
	border-block-end: 1px solid var(--sg-border);
}

:where(.sg-notification-items) > :where(li.is-unread) {
	background: color-mix(in srgb, var(--sg-accent) 8%, transparent);
}

/* ------------------------------------------------------------- user card */

:where(.sg-usercard-popover) {
	max-inline-size: 20rem;
}

:where(.sg-usercard) {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	align-items: start;
}

/* The picture stands next to the name and the join date; the rules below it run the full width. */
:where(.sg-usercard) > :where(.sg-avatar) {
	grid-row: 1 / span 2;
}

:where(.sg-usercard__rule),
:where(.sg-usercard__counts),
:where(.sg-usercard__link) {
	grid-column: 1 / -1;
}

:where(.sg-usercard__rule) {
	margin-block: 0.4rem;
	opacity: 0.25;
}

:where(.sg-usercard) > :where(p) {
	margin: 0;
	font-size: 0.875rem;
}

:where(.sg-usercard__name) {
	font-size: 1rem;
}

:where(.sg-usercard__counts) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
}

:where(.sg-usercard__since),
:where(.sg-usercard__counts) {
	color: var(--sg-muted);
}

/* ------------------------------------------------------------ form state */

:where([aria-invalid="true"]) {
	border-color: var(--sg-danger);
}

:where([aria-busy="true"]) {
	cursor: progress;
}

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

@media (prefers-reduced-motion: reduce) {
	:where(.sg-root) *,
	:where(.pswp) * {
		animation-duration: 0.001ms;
		animation-iteration-count: 1;
		transition-duration: 0.001ms;
		scroll-behavior: auto;
	}

	:where(.sg-card--album) :where(.sg-card__media),
	:where(.sg-card--album):hover :where(.sg-card__media) {
		transition: none;
		transform: none;
	}
}

@media (prefers-contrast: more) {
	:where(.sg-root) {
		--sg-border: CanvasText;
		--sg-muted: CanvasText;
	}
}

@media print {
	:where(.sg-actions-bar),
	:where(.sg-actions),
	:where(.sg-load-more),
	:where(.sg-notifications),
	:where([data-sg-action]),
	:where(button[data-sg-like]) {
		display: none;
	}

	:where(.sg-card) {
		break-inside: avoid;
		box-shadow: none;
	}
}