@use "sass:map";
@use "sass:meta";
@use "sass:string";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;

@forward "lightbox.vars";
@use "lightbox.vars" as vars;

@use "button.vars" as button;
@use "backdrop.vars" as backdrop;
@use "thumbnail.vars" as thumbnail;

@mixin styles {
	@include materialize-at-root(meta.module-variables("vars"));

	@include bem.object("lightbox") {
		box-sizing: border-box;
		display: none;
		flex: 1 1 auto;
		grid-template-areas: "image" "thumbnails";
		grid-template-rows: 1fr auto;
		grid-template-columns: 1fr;
		align-items: center;
		justify-items: center;
		inline-size: 100%;
		max-inline-size: none;
		block-size: 100%;
		min-block-size: 0;
		max-block-size: none;
		padding: 0;
		margin: 0;
		overflow: hidden;
		background-color: transparent;
		border: 0;
		pointer-events: none;

		&::backdrop {
			background-color: props.get(backdrop.$bg-color);
			backdrop-filter: blur(props.get(backdrop.$blur));
		}

		&[open],
		&:popover-open {
			display: grid;
		}

		> * {
			pointer-events: auto;
		}

		@include bem.elem("info", "controls") {
			position: absolute;
			inset-block-start: props.get(vars.$pad);
			z-index: 20;
			display: flex;
			align-items: center;
			block-size: props.get(vars.$controls--block-size);
			padding-inline: props.get(vars.$controls--pad-i);
			background-color: props.get(vars.$controls--bg);
			border-radius: 10em;
			box-shadow: props.get(vars.$controls--shadow-x) props.get(vars.$controls--shadow-y)
				props.get(vars.$controls--shadow-blur) props.get(vars.$controls--shadow-grow)
				props.get(vars.$controls--shadow-color);
		}

		@include bem.elem("info") {
			inset-inline-start: props.get(vars.$pad);
			font-variant-numeric: tabular-nums;
		}

		@include bem.elem("controls") {
			inset-inline-end: props.get(vars.$pad);
		}

		@include bem.elem("img") {
			position: relative;
			z-index: 10;
			display: block;
			grid-area: image;
			inline-size: auto;
			min-inline-size: 0;
			max-inline-size: 100%;
			block-size: auto;
			min-block-size: 0;
			max-block-size: 100%;
			user-select: none;
			object-fit: contain;

			@include bem.is("hidden") {
				display: none;

				@include bem.next-elem("placeholder") {
					display: block;
				}
			}
		}

		@include bem.elem("placeholder") {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: 50%;
			z-index: 5;
			display: none;
			transform: translate(-50, -50);
		}

		@include bem.elem("thumbnails") {
			display: flex;
			grid-area: thumbnails;
			gap: props.get(vars.$thumbnail--spacing);
			justify-content: center;
			padding: props.get(vars.$pad);
			overflow: auto;
		}

		@include bem.elem("thumbnail") {
			inline-size: props.get(vars.$thumbnail--width);
			transition:
				inline-size 0.2s ease,
				margin-inline 0.2s ease;

			@include bem.is("selected") {
				inline-size: props.get(vars.$thumbnail--active--width);
				margin-inline: props.get(vars.$thumbnail--active--spacing);
			}
		}

		@each $theme in map.keys(props.get(vars.$static-themes)) {
			@include bem.modifier(string.slice($theme, 3)) {
				color: props.get(vars.$static-themes, $theme, --text);
			}
		}
	}
}