/**
 * @package     SIMGallery
 * @subpackage  com_simgallery
 *
 * @copyright   (C) 2026 SIMGallery contributors
 * @license     GNU General Public License version 3 or later; see LICENSE.txt
 *
 * Additions to the PhotoSwipe stylesheet. The lightbox is always dark, whatever the template's color scheme.
 */

/* PhotoSwipe sets these on `.pswp` itself, so this rule needs the same weight to win. */
.pswp {
	--sg-panel-width: 24rem;
	--pswp-bg: #3b3e44;

	color-scheme: dark;
}

/* PhotoSwipe gives everything it hides on close `z-index: 10` with two classes, so these rules need two as well:
   the panel lies over the picture, and the buttons of the top bar lie over the panel. */
.pswp .pswp__sg-panel {
	z-index: 1050;

	/* The panel is dark whatever the template's colour scheme. Bootstrap's utilities carry `!important`, so the
	   only way in is through the variables they read - Cassiopeia's unprefixed ones as well as the `--bs-` set. */
	--body-color: #f1f1f1;
	--secondary-color: #b6b6b6;
	--link-color: #9ec5ff;
	--link-hover-color: #c7dcff;
	--border-color: rgb(255 255 255 / 15%);
	--bs-body-color: #f1f1f1;
	--bs-body-color-rgb: 241, 241, 241;
	--bs-secondary-color: #b6b6b6;
	--bs-link-color: #9ec5ff;
	--bs-link-hover-color: #c7dcff;
	--bs-border-color: rgb(255 255 255 / 15%);
}

.pswp .pswp__top-bar {
	z-index: 1060;
}

/* The buttons of the top bar stand on a disc, so they stay readable over a bright picture and hold their line. */
.pswp__top-bar .pswp__button {
	inline-size: 40px;
	block-size: 40px;
	margin-block-start: 10px;
	margin-inline-end: 6px;
	border-radius: 50%;
	background: rgb(0 0 0 / 45%);
}

.pswp__top-bar .pswp__button:hover,
.pswp__top-bar .pswp__button:focus-visible {
	background: rgb(0 0 0 / 65%);
}

.pswp__top-bar .pswp__button .pswp__icn {
	inset-block-start: 4px;
	inset-inline-start: 4px;
}

/* Our buttons carry a font icon where PhotoSwipe draws an SVG: same box, same white, same soft shadow. */
.pswp__button .pswp__icn[class*="icon-"] {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pswp-icon-color, #fff);
	font-size: 19px;
	line-height: 1;
	text-shadow: 0 0 3px var(--pswp-icon-stroke-color, rgb(0 0 0 / 45%));
}

:where(.pswp__sg-panel) {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(100%, var(--sg-panel-width));
	padding: 3.5rem 1rem 1rem;
	background: color-mix(in srgb, #16171a 94%, transparent);
	color: #f1f1f1;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
}

:where(.pswp__sg-panel) :where(.sg-panel__caption) {
	margin: 0;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid rgb(255 255 255 / 15%);
	font-size: 0.9375rem;
}

:where(.pswp__sg-panel) :where(a) {
	color: #9ec5ff;
}

:where(.pswp__sg-panel) :where(.sg-info) > :where(dt),
:where(.pswp__sg-panel) :where(.sg-comment__meta) {
	color: #b6b6b6;
}

:where(.pswp__sg-panel) :where(.sg-comment-list) > :where(li) {
	border-block-end-color: rgb(255 255 255 / 15%);
}

/* On a wide viewport the image makes room for the open panel, and so does the arrow to the next picture. */
@media (min-width: 60rem) {
	:where(.pswp--sg-panel-open) :where(.pswp__scroll-wrap) {
		inline-size: calc(100% - var(--sg-panel-width));
	}

	.pswp--sg-panel-open .pswp__button--arrow--next {
		right: var(--sg-panel-width);
	}
}

/* Likes and comments sit in the corner of the picture, as they do on a tile. */
.pswp .pswp__sg-social {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 1040;
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 55%);
	color: #fff;
	font-size: 0.875rem;
}

.pswp--sg-panel-open .pswp__sg-social {
	right: calc(var(--sg-panel-width) + 1rem);
}

:where(.pswp__sg-social-item) {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
}

:where(.pswp__sg-comment) {
	cursor: pointer;
}

:where(.pswp__sg-social-label) {
	margin-inline-start: 0.15rem;
	text-decoration: underline;
}

@media (max-width: 36rem) {
	:where(.pswp__sg-social-label) {
		display: none;
	}
}

:where(.pswp__button--sg-page) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 50px;
	block-size: 60px;
	color: currentcolor;
	text-decoration: none;
}

:where(.pswp__icn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	font-size: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
	:where(.pswp),
	:where(.pswp__bg),
	:where(.pswp__container) {
		transition: none;
	}
}

@media (forced-colors: active) {
	:where(.pswp__sg-panel) {
		background: Canvas;
		color: CanvasText;
		forced-color-adjust: none;
	}
}