/*
 ██████   █████  ██      ██      ███████ ██████  ██    ██ ██████   ██████  ██   ██
██       ██   ██ ██      ██      ██      ██   ██  ██  ██  ██   ██ ██    ██  ██ ██
██   ███ ███████ ██      ██      █████   ██████    ████   ██████  ██    ██   ███
██    ██ ██   ██ ██      ██      ██      ██   ██    ██    ██   ██ ██    ██  ██ ██
 ██████  ██   ██ ███████ ███████ ███████ ██   ██    ██    ██████   ██████  ██   ██

A pure css gallery, made with a bunch of wonderful hacks! Will be upgraded to
be (slightly) less hacky once :target-within lands in browsers.

Exported to codepen: https://codepen.io/sbrl/details/YzZJYxg
 */

:root {
	--gallerybox-bg: hsla(0, 0%, 95%, 0.75);
}

@media (prefers-color-scheme: dark) {
	:root {
		--gallerybox-bg: hsla(0, 0%, 30%, 0.75);
	}
}

@media (orientation: landscape) {
	.gallerybox-gallery {
		max-width: 95vw;
	}
}


.gallerybox {
	display: flex;
	justify-content: center;
	/*
	The <picture /> element causes a small amount of extra padding at the
	bottom of the element, so we use this to balance out the look at the top
	ideally we'd shift the <picture> out of the way, but we can't without also
	shifting the <img /> inside
	*/
	padding-top: 0.2em;
}

.gallerybox-gallery {
	--gallerybox-nextprev-padding: 5vw;
	--gallerybox-nextprev-move: 0.2em;
	--gallerybox-nextprev-hover: 0.1em;
	
	max-width: 80vmax;
	
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas: "main";
}

/* .gallerybox picture {
	position: relative;
	top: -1em;
}
.gallerybox picture > img {
	position: relative;
	top: 1em;
} */

.gallerybox-item {
	grid-area: main;
	z-index: 2;
}

.gallerybox-item > figcaption {
	background: var(--gallerybox-bg);
	position: absolute;
	bottom: 0.25em; left: 0; right: 0;
	padding: 0.75em 1em;
	text-align: center;
}

.gallerybox-gallery > .gallerybox-item:target {
	display: block;
	z-index: 100;
}
/* .gallerybox-gallery > .gallerybox-item:not(:target) {
	display: none;
	z-index: 2;
}
.gallerybox-item:not(:target) ~ .gallerybox-item:last-child {
	display: block;
	z-index: 2;
} */

/* 
.gallerybox-gallery:target-within > .gallerybox-item:target {
	display: block;
}
.gallerybox-gallery:target-within > .gallerybox-item:not(:target) {
	display: none;
} */


.gallerybox-item {
	position: relative;
}
.gallerybox-item img {
	max-width: 100%;
}
:where(.gallerybox-prev, .gallerybox-next) {
	display: flex;
	align-items: center;
	height: 100%;
	position: absolute; top: 0;
	vertical-align: middle;
	font-weight: bold;
	font-size: 4em;
	color: hsla(0, 0%, 100%, 0.8) !important;
	text-decoration: none;
	transform: none;
	transition: transform 0.25s;
}
.gallerybox-item > .gallerybox-prev {
	padding-left: var(--gallerybox-nextprev-padding);
	left: 0;
}
.gallerybox-item > .gallerybox-next {
	padding-right: var(--gallerybox-nextprev-padding);
	right: 0;
}


:where(.gallerybox-prev, .gallerybox-next):hover {
	color: hsla(0, 0%, 100%, 1) !important;
}
:is(.gallerybox-prev, .gallerybox-next):active {
	color: hsla(0, 0%, 100%, 1) !important;
}
.gallerybox-next:hover { transform: translateX(calc(var(--gallerybox-nextprev-hover) * -1)); }
.gallerybox-prev:hover { transform: translateX(var(--gallerybox-nextprev-hover)); }

.gallerybox-prev:active { transform: translateX(calc(var(--gallerybox-nextprev-move) * -1)); }
.gallerybox-next:active { transform: translateX(var(--gallerybox-nextprev-move)); }