@layer base {
	[data-lightbox-close] {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		padding: 1rem;
		color: var(--color-on-overlay, #fff);
		border-radius: 0.5rem;
		opacity: 0.5;
		transition: all 0.5s var(--ease-out, ease-out);
		cursor: pointer;

		&::before {
			content: '✕';
			width: 1em;
			line-height: 1em;
			display: inline-block;
		}

		&:hover {
			opacity: 1;
		}

		&:active {
			opacity: 0.5;
		}
	}

	[data-lightbox-dialog] {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100lvh;
		z-index: 1000;

		overflow: hidden;

		max-width: unset;
		max-height: unset;
		background: transparent;

		display: flex;
		justify-content: center;
		align-items: center;

		&::backdrop {
			opacity: 0;
			background: var(--color-overlay, #808080aa);
			animation: lightbox-fade-in 0.5s var(--ease-out, ease-out);
		}

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			cursor: pointer;
			z-index: -1;
		}

		& [data-lightbox-image] {
			width: 100%;

			/*
			--image-shadow-inset: 0.5%;
			--image-shadow-color: var(--color-bg-1, #fff);

			background-image:
				linear-gradient(
					to right,
					var(--image-shadow-color),
					var(--image-shadow-color)
				),
				linear-gradient(
					to right,
					transparent calc(100% - var(--image-shadow-inset)),
					var(--image-shadow-color)
						calc(100% - var(--image-shadow-inset)),
					transparent
				),
				linear-gradient(
					to left,
					transparent calc(100% - var(--image-shadow-inset)),
					var(--image-shadow-color)
						calc(100% - var(--image-shadow-inset)),
					transparent
				),
				linear-gradient(
					to top,
					transparent calc(100% - var(--image-shadow-inset)),
					var(--image-shadow-color)
						calc(100% - var(--image-shadow-inset)),
					transparent
				),
				linear-gradient(
					to bottom,
					transparent calc(100% - var(--image-shadow-inset)),
					var(--image-shadow-color)
						calc(100% - var(--image-shadow-inset)),
					transparent
				),
				linear-gradient(
					to top right,
					transparent,
					var(--image-shadow-color) 0%,
					transparent 50%
				),
				linear-gradient(
					to top left,
					transparent,
					var(--image-shadow-color) 0%,
					transparent 50%
				),
				linear-gradient(
					to bottom right,
					transparent,
					var(--image-shadow-color) 0%,
					transparent 50%
				),
				linear-gradient(
					to bottom left,
					transparent,
					var(--image-shadow-color) 0%,
					transparent 50%
				);
			background-size:
				calc(100% - var(--image-shadow-inset) * 2)
					calc(100% - var(--image-shadow-inset) * 2),
				100% calc(100% - var(--image-shadow-inset) * 2),
				100% calc(100% - var(--image-shadow-inset) * 2),
				calc(100% - var(--image-shadow-inset) * 2) 100%,
				calc(100% - var(--image-shadow-inset) * 2) 100%,
				var(--image-shadow-inset) var(--image-shadow-inset),
				var(--image-shadow-inset) var(--image-shadow-inset),
				var(--image-shadow-inset) var(--image-shadow-inset),
				var(--image-shadow-inset) var(--image-shadow-inset);
			background-position:
				50% 50%,
				0 50%,
				0 50%,
				50% 0,
				50% 0,
				100% 0,
				0 0,
				100% 100%,
				0 100%;
			background-repeat: no-repeat;
			*/
		}

		&[data-lightbox-dialog='open'],
		&[data-lightbox-dialog='open']::backdrop {
			opacity: 1;
			transition: all 0.5s var(--ease-out, ease-out);
		}

		&[data-lightbox-dialog='open'] [data-lightbox-image] {
			animation: lightbox-zoom-in 0.5s var(--ease-out, ease-out);
			transition: all 0.5s var(--ease-out, ease-out);
		}

		&[data-lightbox-dialog='close'] {
			opacity: 0;
			filter: blur(48px) brightness(2);
			transition: all 0.5s var(--ease-in, ease-in);
		}

		&[data-lightbox-dialog='close']::backdrop {
			opacity: 0;
			transition: all 0.5s var(--ease-out, ease-out);
		}

		&[data-lightbox-dialog='close'] [data-lightbox-image] {
			animation: lightbox-zoom-out 0.5s var(--ease-out, ease-out);
			transition: all 0.5s var(--ease-out, ease-out);
		}
	}

	@keyframes lightbox-fade-in {
		from {
			opacity: 0;
		}
	}

	@keyframes lightbox-fade-out {
		to {
			opacity: 0;
		}
	}

	@keyframes lightbox-zoom-in {
		from {
			transform: translate(var(--diff-x, 0), var(--diff-y, 0))
				scaleX(var(--diff-scale-x, 1)) scaleY(var(--diff-scale-y, 1));
		}
	}

	@keyframes lightbox-zoom-out {
		to {
			transform: translate(var(--diff-x, 0), var(--diff-y, 0))
				scaleX(var(--diff-scale-x, 1)) scaleY(var(--diff-scale-y, 1));
		}
	}

	[data-lightbox-image] {
		width: 100%;
		max-width: none;
		max-width: min(100%, calc(100lvh * var(--aspect)));
		height: auto;
		object-fit: contain;

		cursor: pointer;
	}
}