@use "@styles/common";
@use "@styles/var";
@use "@styles/color";

body.lb-disable-scrolling {
	overflow: hidden;
}

.lightboxOverlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999;
	background-color: black;
	opacity: 0.8;
	outline: none;
}

.lightbox {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 10000;
	outline: none;
	width: 100%;
	height: 100%;
	overflow: hidden;

	/* Data Container (comments, close) */

	.lb-dataContainer {
		overflow: hidden;
		background-color: color.$media-bg-light;

		.lb-data {
			display: flex;
			align-items: center;
			margin: var.$elem-spacing;
			gap: var.$block-spacing;
			color: color.$media;

			.lb-details {
				display: contents;
			}

			.lb-caption {
				display: contents;

				.lb-caption-line {
					flex: 0 0 auto;
					line-height: 1.33333333333em; //icon height
				}

				.lb-caption-line.comment {
					flex: 1 1 auto;
					min-width: 0;
				}
			}

			.lb-closeContainer {
				flex: 0 0 auto;
				margin-left: auto;

				.lb-close {
					@extend .clickable;
					color: color.$media;

					&:hover {
						color: color.$media-hover;
					}
				}
			}
		}
	}

	/* Picture Container */

	.lb-outerContainer {
		position: relative;
		width: 250px;
		height: 250px;
		margin: 0;
		background-color: color.$default-bg-trans;

		.lb-container {
			overflow: hidden;
			position: relative;

			&.moveable {
				cursor: grab;
			}

			&.moving {
				cursor: grabbing;
			}

			.lb-image {
				max-width: inherit;
				max-height: none;
				border-radius: 0;
				border: none;

				image-orientation: from-image;
				--translate-x: 0;
				--translate-y: 0;
				--scale: 1;
				transform:
					translateX(var(--translate-x, 0))
					translateY(var(--translate-y, 0))
					scale(var(--scale, 1));
			}

			.lb-video {
				box-sizing: content-box;
				position: absolute;
				top: 0;
				left: 0;
			}

			&.lb-video-nav .lb-nav {
				top: 100px;
				height: calc(100% - 200px); //Leave space for video progress bar
			}

			.lb-nav {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				z-index: 10;

				.lb-prev-area, .lb-next-area {
					position: absolute;
					top: 0;
					height: 100%;
					width: 50%;
					-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
					
					&.lb-next-area {
						right: 0;
					}

					&:hover a.lb-prev, &:hover a.lb-next {
						opacity: 1;
					}
				}

				a.lb-prev, a.lb-next {
					cursor: pointer;
					color: color.$over-img;
					text-decoration: none;
					filter: drop-shadow(var.$elem-shadow);
					width: 150px;
					height: 150px;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					transition: opacity var.$trans-quick, color var.$trans-quick;
					opacity: 0;
					outline: none;
					font-size: 2em;

					&:hover {
						color: color.$over-img-hover;
					}

					.spot-icon {
						vertical-align: inherit;
						top: 50%;
						transform: translate(-50%, -50%);
						position: relative;
						left: 50%;
					}
				}
			
				a.lb-prev {
					left: 0;
				}
			
				a.lb-next {
					right: 0;
				}
			}

			.lb-loader {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				.lb-cancel {
					@extend .flicker;
					font-size: 2em;
					color: color.$default;
					text-decoration: none;
				}
			}
		}
	}
}
