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

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

@use 'backdrop.vars' as backdrop;
@use 'thumbnail.vars' as thumbnail;

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

	@include bem.object('lightbox') {
		position:         relative;
		box-sizing:       border-box;
		display:          none;
		flex:             1 1 auto;
		flex-direction:   column;
		align-items:      center;
		justify-content:  center;
		inline-size:      100%;
		max-inline-size:  none;
		block-size:       100%;
		min-block-size:   0;
		max-block-size:   none;
		padding:          0;
		margin:           0;
		background-color: transparent;
		border:           0;

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

		&[open] {
			display: flex;
		}

		@include bem.elem('controls') {
			position:          absolute;
			inset-block-start: props.get(vars.$pad);
			inset-inline-end:  props.get(vars.$pad);
			z-index:           20;
			padding:           props.get(vars.$controls--pad-y) props.get(vars.$controls--pad-x);
			border-radius:     10em;
		}

		@include bem.elem('img') {
			position:        relative;
			z-index:         10;
			display:         none;
			flex:            1 1 auto;
			inline-size:     auto;
			max-inline-size: 100%;
			block-size:      auto;
			max-block-size:  100%;
			margin:          auto;

			@include bem.multi('&:target', 'is' 'visible') {
				display: block;
			}
		}

		@include bem.elem('thumbnails') {
			display: 		 flex;
			flex:            0 0 auto;
			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 .1s ease, margin-inline .1s 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);

				@include bem.elem('controls') {
					background-color: props.get(vars.$static-themes, $theme, --controls-bg);
				}
			}
		}
	}
}