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

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

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

	@include bem.object("thumbnail") {
		position: relative;
		display: block;
		flex: 0 0 auto;
		inline-size: props.get(vars.$size);
		block-size: props.get(vars.$size);
		overflow: hidden;
		outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
		outline-offset: calc(-1 * props.get(vars.$border-width));
		border-radius: props.get(vars.$rounding);

		&:hover,
		&:active,
		&:focus-visible {
			outline-color: props.get(vars.$hover--border-color);
			opacity: 1;
		}

		@include bem.elem("image") {
			position: absolute;
			inset-block-start: 0;
			inset-inline-start: 0;
			display: block;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			object-position: center center;
		}

		@include bem.elem("icon") {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: 50%;
			transform: translate(-50%, -50%);
		}

		&:focus-visible {
			$focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));

			margin: $focus-border-offset;
			outline: props.get(vars.$key-focus--border-color) solid
				props.get(vars.$key-focus--border-width);
			outline-offset: 0;
			border: props.get(vars.$key-focus--border-offset) solid transparent;
			border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
			box-shadow: 0 0 0
				calc(
					props.get(vars.$key-focus--outline-width) +
						props.get(vars.$key-focus--border-width)
				)
				props.get(vars.$key-focus--outline-color);
		}

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

				&:hover,
				&:active,
				&:focus-visible {
					outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
				}

				@include bem.is("selected") {
					border-color: props.get(vars.$static-themes, $theme, --selected, --border);
				}

				&:focus-visible {
					outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
					border-color: transparent;
					box-shadow: 0 0 0
						calc(
							props.get(vars.$key-focus--outline-width) +
								props.get(vars.$key-focus--border-width)
						)
						props.get(vars.$static-themes, $theme, --key-focus, --outline);
				}
			}
		}
	}
}