/* PREVIEW */
.preview-viewer {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:20;
}
.preview-viewer.hidden {
	display:none;
}

.preview-viewer .overlay {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;

	/*background-color:var(--preview-bg-color);*/
	background:light-dark(var(--light-preview-bg), var(--dark-preview-bg));
}

.preview-viewer .close-button {
	position:absolute;
	top:24px;
	right:24px;

	font-family:"Boldonse",monospace;
	font-size:12px;
}
.preview-viewer .close-button img {
	transform:translate(3px, 2px);
}


.preview-viewer .prev-button,
.preview-viewer .next-button {
	position:absolute;
	width:64px;
	height:64px;
	padding:8px;

	border-radius:32px;
	box-shadow:0px 0px 0px 4px light-dark(var(--light-main-bg), var(--dark-main-bg));

	bottom:calc(50% - 32px);
	z-index:5;
}
.preview-viewer .prev-button { left:24px; }
.preview-viewer .next-button { right:24px; }

.preview-viewer .prev-button:hover,
.preview-viewer .next-button:hover {
	box-shadow:0px 8px 0px 0px light-dark(var(--light-main-bg), var(--dark-main-bg));
}

.preview-viewer .preview-content {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items: center;
}

.preview-viewer .preview-content figure {
	/*display:none;*/
	position:absolute;
	width:75%;
	margin:0;

	flex-direction:column;
	justify-content:center;
	align-items:center;
	opacity:0;

	transition-property:transform, opacity;
	transition-timing-function: ease-out;
	transition-duration: 240ms;
}
.preview-viewer .preview-content figure.portrait {
	width:auto;
	height:75%;
}

.preview-viewer .preview-content figure.active {
	position:relative;
	display:flex;
	margin:0 auto;
	z-index:2;
}

.preview-viewer .preview-content figure img {
	display:block;
	width:100%;
	height:auto;
	min-width:64px;
	min-height:64px;

	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));

	background-color:light-dark(white, black);
	background-image:url("/img/loader.gif");
	background-position:center center;
	background-repeat:no-repeat;

	transition-property:width height;
	transition-duration:300ms;

	user-drag:none;
	-ms-user-drag: none;
	-moz-user-drag: none;
	-webkit-user-drag: none;
}
.preview-viewer .preview-content figure video {
	display:block;
	width:100%;
	height:auto;

	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));
}

html.dark .preview-viewer .preview-content figure img {
	background-image:url("/img/loader-dark.gif");
}
.preview-viewer .preview-content figure.portrait img {
	width:auto;
	height:100%;
}
.preview-viewer .preview-content figure.no-border img {
	background-color:transparent;
	border:0;
}

.preview-viewer .preview-content figure figcaption {
	display:block;
	padding:16px 24px;
	margin-top:-8px;

	width:500px;
	border:8px solid light-dark(var(--light-main-text), var(--dark-main-text));

	color:light-dark(var(--light-main-text), var(--dark-main-text));
	font-size:16px;
	font-style:italic;
	text-align:left;
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));
	z-index:-1;

	transform:translate(0, -200%);
	opacity:0;
	transition-property:transform, opacity;
	transition-timing-function:ease-out;
	transition-duration:300ms
	/*transition:transform ease-out 300ms;*/
}
.preview-viewer .preview-content figure.active figcaption {
	transform:translate(0, 0);
	opacity:1;
}
.preview-viewer .preview-content figure.no-border figcaption {
	margin-top:8px;
}

.preview-viewer .preview-content figure.active,
.preview-viewer .preview-content figure.active + figure,
.preview-viewer .preview-content figure.active + figure + figure,
.preview-viewer .preview-content figure:has(+figure.active),
.preview-viewer .preview-content figure:has(+ figure + figure.active) {
	opacity:1;
}


/* figure after .active */
.preview-viewer .preview-content figure.active + figure {
	display:flex;
	position:absolute;
	z-index:1;

	transform:scale(0.75) rotate(5deg) translate(25vw);
}
.preview-viewer .preview-content figure.active + figure.portrait {
	transform:scale(0.75) rotate(5deg) translate(25vw);
}

/* figure after-after .active */
.preview-viewer .preview-content figure.active + figure + figure {
	display:flex;
	position:absolute;

	transform:scale(0.5) rotate(15deg) translate(50vw);
	z-index:0;
}
.preview-viewer .preview-content figure.active + figure + figure.portrait {
	transform:scale(0.5) rotate(15deg) translate(50vw);
}

/* figure after-after-after .active */
.preview-viewer .preview-content figure.active + figure + figure + figure {
	transform:scale(0.25) rotate(30deg) translate(75vw);
}

/* figure before .active */
.preview-viewer .preview-content figure:has(+figure.active) {
	display:flex;
	position:absolute;

	transform:scale(0.75) rotate(-5deg) translate(-25vw);
}
.preview-viewer .preview-content figure.portrait:has(+figure.active) {
	transform:scale(0.75) rotate(-5deg) translate(-25vw%);
}

/* figure before-before .active */
.preview-viewer .preview-content figure:has(+ figure + figure.active) {
	display:flex;
	position:absolute;

	transform:scale(0.5) rotate(-15deg) translate(-50vw);
}
.preview-viewer .preview-content figure.portrait:has(+ figure + figure.active) {
	transform:scale(0.5) rotate(-15deg) translate(-50vw);
}

/* figure before-before-before .active */
.preview-viewer .preview-content figure:has(+ figure + figure + figure.active) {
	transform:scale(0.25) rotate(-30deg) translate(-75vw);
}

.preview-viewer .pagination {
	position:absolute;
	bottom:24px;
	width:100%;
	height:64px;

	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	gap:8px;
}
.preview-viewer .pagination .dot {
	display:block;
	width:16px;
	height:16px;
	border-radius:16px;
	box-sizing:content-box;
	background:light-dark(var(--light-main-text), var(--dark-main-text));
}
.preview-viewer .pagination .dot.active {
	background:light-dark(var(--light-main-bg), var(--dark-main-bg));
	border:4px solid light-dark(var(--light-main-text), var(--dark-main-text));
}

@media (max-width: 768px) {
	.preview-viewer .preview-content figure {
		width:95%;
	}
	.preview-viewer .preview-content figure.portrait {
		height:fit-content;
	}
	.preview-viewer .preview-content figure.portrait img{
		width:100%;
		height:auto;
	}
	.preview-viewer .preview-content figure figcaption {
		width:75%;
	}

	.preview-viewer .prev-button,
	.preview-viewer .next-button {
		bottom:24px;
	}
}