@use 'sass:map';
@use 'sass:list';
@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;
        height:  3em;

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

            @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) {
                $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i);

                &:nth-child(#{$i}) {
                    background-color: fn.global-color(--base $key);
                }
            }
        }

        @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' {
            @include iro.bem-modifier($palette) {
                @include iro.bem-elem('item') {
                    @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) {
                        $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i);
        
                        &:nth-child(#{$i}) {
                            background-color: fn.global-color(--#{$palette} $key);
                        }
                    }
                }
            }
        }
    }
}