@use 'sass:map';
@use 'sass:list';
@use 'sass:string';
@use 'iro-sass/src/index' as iro;
@use '../functions' as fn;
@use '../config';

@include iro.props-namespace('palette') {
    @include iro.bem-object(iro.props-namespace()) {
        display:    flex;
        block-size: 3em;

        @include iro.bem-elem('item') {
            flex: 1 1 auto;

            $palette:   map.get(config.$themes, config.$theme-default, --palettes, --base);
            $contrasts: map.get(config.$themes, config.$theme-default, --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: fn.global-color(--base $key);
                }
            }
        }

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

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

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

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