/**
 * Public image lightbox styles.
 *
 * @since       6.2.0     Copied from pGallery to pNet. Minor adjustments.
 * @package     pNet
 * @copyright   2025 Keith Pfeiffer
 */

/* =============================================================================
# Custom properties
*/

:root {
	--sl-top: calc(var(--pnet-v-space) + 64px);
}

/* =============================================================================
# Layout
*/

.has-lightbox {
	overflow: hidden;
}

.sl-overlay {
	background: var(--surface);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 11035;
}

.sl-wrapper {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 11040;
}

.sl-wrapper.simple-lightbox button {
	background: var(--surface);
	border: none;
	color: var(--on-surface);
	font-size: var(--pnet-text-huge);
	line-height: 0.5;
	margin: 0;
	padding: var(--pnet-v-half-space) var(--pnet-h-space);
	z-index: 11060;
}

.sl-wrapper button:is(:focus, :hover) {
	text-decoration: none;
	background-color: var(--primary-400);
	color: var(--on-primary);
}

.sl-wrapper .sl-close {
	display: none;
	position: fixed;
	right: 1vw;
	top: var(--sl-top);
}

.sl-wrapper .sl-navigation {
	display: none;
}

.sl-wrapper .sl-navigation button {
	position: fixed;
	top: 50%;
}

.sl-wrapper .sl-navigation button.sl-next {
	right: 1vw;
}

.sl-wrapper .sl-navigation button.sl-prev {
	left: 1vw;
}

.sl-wrapper .sl-image {
	box-shadow: var(--pnet-shadow-elevation-8);
	position: fixed;
	z-index: 11050;
}

.sl-wrapper .sl-image img {
	display: block;
	filter: none;
	width: 100%;
	height: auto;
}

.sl-wrapper .sl-image .sl-caption {
	background: var(--surface);
	bottom: 0;
	color: var(--on-surface);
	display: none;
	left: 0;
	padding: var(--pnet-v-half-space) var(--pnet-h-space);
	position: absolute;
	text-align: center;
}

.sl-spinner {
	animation: spin 1s ease-in-out infinite;
	border-radius: 50%;
	border: var(--pnet-h-half-space) solid var(--primary);
	border-right-color: transparent;
	display: none;
	height: 4rem;
	left: 50%;
	position: fixed;
	top: 50%;
	width: 4rem;
}