@charset "utf-8";

[data-imageplayer]:has(img) {
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: middle;
}

[data-imageplayer] img {
	vertical-align: middle;
}

[data-imageplayer][data-blur="true"] img {
	filter: blur(10px);
}

.imageplayer-dialog {
	container-type: inline-size;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: hsl(0 0 0 / .8);
	color: hsl(0 0 100);
	line-height: 1.5;
	visibility: hidden;
	opacity: 0;
	transition: var(--imageplayer-wait);
}

.imageplayer-dialog[open] {
	opacity: 1;
	visibility: visible;
}

.imageplayer-dialog[open] .imageplayer-imageblock {
	transform: scale(1);
}

.imageplayer-dialog::backdrop {
	background: transparent;
}

.imageplayer-headerblock,
.imageplayer-footerblock {
	display: grid;
	grid: 5rem / 5rem calc(100cqw - 10rem) 5rem;
	place-items: center;
}

.imageplayer-countertext {
	max-width: 100%;
	max-height: 100%;
	padding-left: .5rem;
}

.imageplayer-headertext,
.imageplayer-footertext {
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
	box-sizing: border-box;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.imageplayer-centerblock {
	display: grid;
	grid: auto / repeat(3, 1fr);
	place-items: center;
	position: relative;
	right: 100cqw;
	width: 300cqw;
	height: calc(100svh - 10rem);
}

.imageplayer-imageblock {
	display: inline-block;
	position: relative;
	overflow: hidden;
	border-radius: .5rem;
	background-color: white;
	transform: scale(0);
	transition: transform var(--imageplayer-wait);
	-webkit-tap-highlight-color: transparent;
}

.imageplayer-imageblock[data-blur="true"] {
	cursor: pointer;
}

.imageplayer-imageblock img[data-blur="true"] {
	filter: blur(20px);
}

.imageplayer-image {
	max-width: calc(100cqw - 2rem);
	max-height: calc(100cqh - 10rem);
	vertical-align: middle;
	user-select: none;
}

.imageplayer-closebutton,
.imageplayer-prevbutton,
.imageplayer-nextbutton {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.imageplayer-prevbutton:disabled,
.imageplayer-nextebutton:disabled {
	-webkit-tap-highlight-color: transparent;
}

.imageplayer-closebutton::before,
.imageplayer-closebutton::after,
.imageplayer-prevbutton::before,
.imageplayer-prevbutton::after,
.imageplayer-nextbutton::before,
.imageplayer-nextbutton::after {
	content: "";
	display: block;
	position: absolute;
	background: hsl(0 0 100);
	height: .4rem;
	border-radius: 1rem;
}

.imageplayer-closebutton:disabled::before,
.imageplayer-closebutton:disabled::after,
.imageplayer-prevbutton:disabled::before,
.imageplayer-prevbutton:disabled::after,
.imageplayer-nextbutton:disabled::before,
.imageplayer-nextbutton:disabled::after {
	background: hsl(0 0 50);
}

.imageplayer-closebutton::before {
	width: 2rem;
	transform: rotate(45deg);
}

.imageplayer-closebutton::after {
	width: 2rem;
	transform: rotate(-45deg);
}

.imageplayer-prevbutton::before {
	width: 1.5rem;
	translate: 0 .4rem;
	transform: rotate(45deg);
}

.imageplayer-prevbutton::after {
	width: 1.5rem;
	translate: 0 -.4rem;
	transform: rotate(-45deg);
}

.imageplayer-nextbutton::before {
	width: 1.5rem;
	translate: 0 -.4rem;
	transform: rotate(45deg);
}

.imageplayer-nextbutton::after {
	width: 1.5rem;
	translate: 0 .4rem;
	transform: rotate(-45deg);
}
