@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../objects/heading.vars" as heading;

@mixin styles {
	/* stylelint-disable-next-line scss/dollar-variable-pattern */
	$-size-map: (
		xs: h6,
		sm: h5,
		md: h4,
		lg: h3,
		xl: h2,
		xxl: h1,
	);

	@include bem.scope("headings") {
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			display: block;
			margin-block-start: props.get(heading.$margin-bs);
			font-family: props.get(heading.$font-family);
			font-weight: props.get(heading.$font-weight);
			font-feature-settings: props.get(heading.$feature-settings);
			line-height: props.get(heading.$line-height);
			text-transform: props.get(heading.$text-transform);
			letter-spacing: normal;
			transform: translateX(props.get(heading.$offset));
		}

		@include bem.elem("highlight") {
			background-image: linear-gradient(
				to top,
				transparent 0.15em,
				props.get(heading.$bg-color) 0.15em,
				props.get(heading.$bg-color) 0.6em,
				transparent 0.6em
			);
		}

		@each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
			$feature-settings, $text-transform, $text-color in heading.$sizes
		{
			#{map.get($-size-map, $mod)} {
				font-family: props.get($font-family);
				font-size: props.get($font-size);
				font-weight: props.get($font-weight);
				font-feature-settings: props.get($feature-settings);
				line-height: props.get($line-height);
				color: props.get($text-color);
				text-transform: props.get($text-transform);
				letter-spacing: props.get($letter-spacing);
			}
		}

		@include bem.modifier("display") {
			@each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing,
				$feature-settings, $text-transform, $text-color in heading.$display--sizes
			{
				#{map.get($-size-map, $mod)} {
					font-family: props.get($font-family);
					font-size: props.get($font-size);
					font-weight: props.get($font-weight);
					font-feature-settings: props.get($feature-settings);
					line-height: props.get($line-height);
					color: props.get($text-color);
					text-transform: props.get($text-transform);
					letter-spacing: props.get($letter-spacing);
				}
			}
		}

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

				@each $mod, $value in heading.$sizes {
					#{map.get($-size-map, $mod)} {
						color: props.get(heading.$static-themes, $theme, --#{$mod}, --text-color);
					}
				}

				@include bem.modifier("display") {
					@each $mod, $value in heading.$sizes {
						#{map.get($-size-map, $mod)} {
							color: props.get(
								heading.$static-themes,
								$theme,
								--display,
								--#{$mod},
								--text-color
							);
						}
					}
				}
			}
		}
	}
}