/* Theme colors */
:root {
	--vid-lightbox-dark: #000;
	--vid-lightbox-dark-alpha: #0005;
	--vid-lightbox-light: #fff;
	--vid-lightbox-light-alpha: #fff5;
	--vid-lightbox-shadow: #0005;
}

/* Lightbox */
.vid-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: var(--vid-lightbox-dark-alpha);
}

/* Image */
.vid-lightbox-image {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: top left;
	-webkit-box-shadow: 0px 0px 50px 30px var(--vid-lightbox-shadow);
	box-shadow: 0px 0px 50px 30px var(--vid-lightbox-shadow);
	z-index: -1;
	transition: scale 300ms ease;
}

/* Description */
.vid-lightbox-description {
	position: absolute;
	bottom: 0;
	left: 50%;
	max-width: 90%;
	max-height: 50%;
	width: max-content;
	height: max-content;
	overflow-y: auto;
	transform: translateX(-50%);
	color: var(--vid-lightbox-light);
	text-align: center;
	text-shadow: 2px 2px 5px var(--vid-lightbox-shadow);
}

/* Prev, Next, X - things in common */
.vid-lightbox-x, .vid-lightbox-prev, .vid-lightbox-next {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	position: absolute;
	font-weight: bold;
	font-size: 50px;
	color: var(--vid-lightbox-light);
	cursor: pointer;
	transition: color 500ms ease-out, background-color 500ms ease-out, transform 500ms ease-out;
}
.vid-lightbox-x::before, .vid-lightbox-prev::before, .vid-lightbox-next::before {
	content: "";
	position: absolute;
	transition: background-color 500ms ease-out, transform 500ms ease-out;
	z-index: -1;
}

/* X */
.vid-lightbox-x {
	top: 0;
	left: 0;
	right: 0;
	height: 50px;
	z-index: 99999;
}

/* X ::before */
.vid-lightbox-x:hover { color: var(--vid-lightbox-dark); }
.vid-lightbox-x::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
}

/* Prev and next */
.vid-lightbox-prev, .vid-lightbox-next {
	top: 0;
	width: 50px;
	height: 100%;
}
.vid-lightbox-prev { left: 0; }
.vid-lightbox-next { right: 0; }
.vid-lightbox-prev:hover { color: var(--vid-lightbox-dark); }
.vid-lightbox-next:hover { color: var(--vid-lightbox-dark); }

/* Prev and next ::before */
.vid-lightbox-prev::before, .vid-lightbox-next::before {
	top: 0;
	width: 50px;
	height: 100%;
}

/*
 * THEME SPECIFIC STYLES
 */

/* CLEAN THEME */
.vid-lightbox.clean .vid-lightbox-x,
.vid-lightbox.clean .vid-lightbox-prev,
.vid-lightbox.clean .vid-lightbox-next {
	text-shadow: 2px 2px 5px var(--vid-lightbox-shadow);
}

/* ROUNDED THEME */
.vid-lightbox.rounded .vid-lightbox-prev::before { border-radius: 0 50% 50% 0; }
.vid-lightbox.rounded .vid-lightbox-next::before { border-radius: 50% 0 0 50%; }
.vid-lightbox.rounded .vid-lightbox-x::before { border-radius: 0 0 50% 50%; }

.vid-lightbox.rounded .vid-lightbox-x::before,
.vid-lightbox.rounded .vid-lightbox-prev::before,
.vid-lightbox.rounded .vid-lightbox-next::before {
	background-color: var(--vid-lightbox-dark-alpha);
}
.vid-lightbox.rounded .vid-lightbox-prev:hover::before,
.vid-lightbox.rounded .vid-lightbox-next:hover::before,
.vid-lightbox.rounded .vid-lightbox-x:hover::before { background-color: var(--vid-lightbox-light-alpha); }

.vid-lightbox.rounded .vid-lightbox-prev:hover::before,
.vid-lightbox.rounded .vid-lightbox-next:hover::before,
.vid-lightbox.rounded .vid-lightbox-x:hover::before { transform: scale(1.2); }

.vid-lightbox.rounded .vid-lightbox-x:hover { transform: translateY(10px); }
.vid-lightbox.rounded .vid-lightbox-prev:hover { transform: translateX(10px); }
.vid-lightbox.rounded .vid-lightbox-next:hover { transform: translateX(-10px); }

.vid-lightbox.rounded .vid-lightbox-x::before {	top: -50px; height: 100px; }
.vid-lightbox.rounded .vid-lightbox-prev::before { left: -50px; width: 100px; }
.vid-lightbox.rounded .vid-lightbox-next::before { right: -50px; width: 100px; }

/* BLOCK THEME */
.vid-lightbox.block .vid-lightbox-x::before,
.vid-lightbox.block .vid-lightbox-prev::before,
.vid-lightbox.block .vid-lightbox-next::before {
	background-color: var(--vid-lightbox-dark-alpha);
}

.vid-lightbox.block .vid-lightbox-prev:hover::before,
.vid-lightbox.block .vid-lightbox-next:hover::before,
.vid-lightbox.block .vid-lightbox-x:hover::before {
	background-color: var(--vid-lightbox-light-alpha);
}

.vid-lightbox.block .vid-lightbox-prev::before,
.vid-lightbox.block .vid-lightbox-next::before {
	top: 50px;
	height: calc(100% - 50px);
}

.vid-lightbox.block .vid-lightbox-prev::before,
.vid-lightbox.block .vid-lightbox-next::before {
	width: 50px;
}