@use "sass:list";
@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/bem";
@use "../config";
@use "pkg:iro-sass/props";
@use "../core.vars" as core;

@mixin styles {
	@include bem.object("palette") {
		display: flex;
		block-size: 3em;

		@include bem.elem("item") {
			flex: 1 1 auto;

			$palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
			$levels: map.get(
				config.$themes,
				config.$theme-default,
				light,
				--levels,
				list.nth($palette, 2)
			);

			@for $i from 1 through list.length($levels) {
				$key: list.nth(map.keys($levels), $i);

				&:nth-child(#{$i}) {
					background-color: props.get(core.$theme, --base, $key);
				}
			}
		}

		@each $palette-name,
			$palette in map.get(config.$themes, config.$theme-default, light, --palettes)
		{
			$levels: map.get(
				config.$themes,
				config.$theme-default,
				light,
				--levels,
				list.nth($palette, 2)
			);

			@include bem.modifier(string.slice($palette-name, 3)) {
				@include bem.elem("item") {
					@for $i from 1 through list.length($levels) {
						$key: list.nth(map.keys($levels), $i);

						&:nth-child(#{$i}) {
							background-color: props.get(core.$theme, $palette-name, $key);
						}
					}
				}
			}
		}

		@include bem.modifier("static") {
			@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
				$levels: map.get(config.$static-colors, --levels);

				@include bem.modifier(string.slice($palette-name, 3)) {
					@include bem.elem("item") {
						@for $i from 1 through list.length($levels) {
							$key: list.nth(map.keys($levels), $i);

							&:nth-child(#{$i}) {
								background-color: props.get(
									core.$theme,
									#{$palette-name}-static,
									$key
								);
							}
						}
					}
				}
			}
		}
	}
}