@use "sass:map";
@use "sass:string";

@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "pkg:iro-design" as iro;

@mixin styles {
	@include bem.component("logo") {
		display: block;
		padding: props.get(iro.$core--size--50);
		margin-inline: calc(-1 * props.get(iro.$core--size--50));
		border-radius: props.get(iro.$s-links--rounding);
		color: props.get(iro.$core--theme, --heading);

		&:link,
		&:visited {
			&:hover {
				text-decoration: none;
				color: props.get(iro.$core--theme, --text-mute);
			}

			&:focus-visible {
				color: props.get(iro.$s-links--key-focus--text-color);
				text-decoration: none;
				outline: props.get(iro.$s-links--key-focus--border-color) solid
					props.get(iro.$s-links--key-focus--border-width);
				box-shadow: 0 0 0
					calc(
						props.get(iro.$s-links--key-focus--border-width) +
							props.get(iro.$s-links--key-focus--outline-width)
					)
					props.get(iro.$s-links--key-focus--outline-color);
			}
		}

		@include bem.elem("img") {
			display: block;
			block-size: 1.7em;
			aspect-ratio: 2700 / 600;
		}

		@include bem.modifier("sm") {
			@include bem.elem("img") {
				aspect-ratio: 600 / 600;
			}
		}

		@include bem.modifier("lg") {
			@include bem.elem("img") {
				block-size: 2em;
			}
		}

		@each $theme in map.keys(props.get(iro.$core--transparent-colors)) {
			$logo-theme: static-#{string.slice($theme, 3)};

			@include bem.modifier($logo-theme) {
				color: props.get(iro.$core--transparent-colors, $theme, --900);

				&:link,
				&:visited {
					&:hover {
						color: props.get(iro.$core--transparent-colors, $theme, --800);
					}

					&:focus-visible {
						color: props.get(iro.$core--transparent-colors, $theme, --900);
						outline-color: props.get(iro.$core--transparent-colors, $theme, --900);
						box-shadow: 0 0 0
							calc(
								props.get(iro.$s-links--key-focus--border-width) +
									props.get(iro.$s-links--key-focus--outline-width)
							)
							props.get(iro.$core--transparent-colors, $theme, --300);
					}
				}
			}
		}
	}
}