/**
	Show thumbnails
*/

.show-thumbnails {
	display: grid;
	--cols: 5;
	--rows: calc(var(--total-slides, 100) / var(--cols));
	--gap: .01;
	--gap-h: calc(100vw * var(--gap));
	--gap-v: calc(100vh * var(--gap));
	grid-template-columns: repeat(auto-fill, minmax(calc(100vw / var(--cols) - var(--gap-h)), 1fr));
	grid-template-rows: repeat(auto-fill, calc(100vh / var(--cols) - var(--gap-v)));
	gap: var(--gap-v) var(--gap-h);

	& .slide-container {
		display: contents;
	}

	&.headers-only .slide:not(header):not(:target) {
		display: none !important;
	}

	/* Display titles */
	& .slide[data-title]:not(header):after {
		content: attr(data-title);
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: .1em 0;
		background: rgba(0,0,0,.5);
		color: white;
		font-size: 250%;
		text-align: center;
		text-shadow: .05em .05em .1em black;
		transform: none;
	}
}

.show-thumbnails .slide,
.show-next .slide.next {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	float: left;
	overflow: hidden;
	position: static;
	opacity: 1;
	visibility: visible;
	cursor: pointer;
	transform: scale(calc(1 / var(--cols) - var(--gap)), calc(1 / var(--cols) - var(--gap)));
	transform-origin: top left;
	transition-duration: .3s;
	transition-property: transform, transform-origin, margin;
}

.show-next {
	.slide {
		transition: 0s;
	}

	.slide.next {
		transform: scale(.05, .05);
		transform-origin: bottom right;
		margin: 15px 15px;
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 100;
	}

	.slide.next:not(:hover) {
		opacity: .5;
	}
}

/* Show all delayed items */
/* FIXME not all delayed items work with opacity,
ldeally you want to add .delayed and .current to them */
.show-thumbnails .slide .delayed,
.show-next .slide:target + .slide .delayed {
	opacity: 1 !important;
}

.show-thumbnails .slide:hover,
.show-thumbnails .slide:target,
.show-next .slide:target + .slide {
	--outline-color: hsl(0 0 100 / 60%);
	--outline: 40px var(--outline-color, transparent);
	box-shadow: 5px 5px 40px hsl(0 0 0 / 50%), 0 0 0 var(--outline);
}

.show-thumbnails .slide:target {
	--outline-color: hsl(0 100% 40% / .5);
}

.show-thumbnails .slide:target:hover {
	--outline-color: hsla(0 100% 40% / .9);
}