@use 'sass:list';
@use 'sass:map';
@use 'sass:string';
@use 'iro-sass/src/bem';
@use '../config';
@use 'iro-sass/src/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);
            $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));

            @for $i from 1 through list.length($contrasts) {
                $key: list.nth(map.keys($contrasts), $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) {
            $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));

            @include bem.modifier(string.slice($palette-name, 3)) {
                @include bem.elem('item') {
                    @for $i from 1 through list.length($contrasts) {
                        $key: list.nth(map.keys($contrasts), $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) {
                $contrasts: map.get(config.$static-colors, --contrasts);

                @include bem.modifier(string.slice($palette-name, 3)) {
                    @include bem.elem('item') {
                        @for $i from 1 through list.length($contrasts) {
                            $key: list.nth(map.keys($contrasts), $i);
            
                            &:nth-child(#{$i}) {
                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
                            }
                        }
                    }
                }
            }
        }
    }
}