@use 'sass:map';
@use 'sass:string';
@use 'iro-sass/src/bem';
@use 'iro-sass/src/props';
@use 'include-media/dist/include-media' as media;

@use 'core.vars' as vars;
@forward 'core.vars';

@mixin styles {
    @include bem.theme('base') {
        background-color: props.get(vars.$theme, --bg-base);

        @include bem.suffix('light') {
            @media (prefers-color-scheme: light) {
                background-color: props.get(vars.$theme, --bg-base);
            }
        }

        @include bem.suffix('dark') {
            @media (prefers-color-scheme: dark) {
                background-color: props.get(vars.$theme, --bg-base);
            }
        }
    }

    @include bem.theme('l1') {
        background-color: props.get(vars.$theme, --bg-l1);

        @include bem.suffix('light') {
            @media (prefers-color-scheme: light) {
                background-color: props.get(vars.$theme, --bg-l1);
            }
        }

        @include bem.suffix('dark') {
            @media (prefers-color-scheme: dark) {
                background-color: props.get(vars.$theme, --bg-l1);
            }
        }
    }

    @include bem.theme('l2') {
        background-color: props.get(vars.$theme, --bg-l2);

        @include bem.suffix('light') {
            @media (prefers-color-scheme: light) {
                background-color: props.get(vars.$theme, --bg-l2);
            }
        }

        @include bem.suffix('dark') {
            @media (prefers-color-scheme: dark) {
                background-color: props.get(vars.$theme, --bg-l2);
            }
        }
    }

    @include bem.theme('50') {
        background-color: props.get(vars.$theme, --base, --50);

        @include bem.suffix('light') {
            @media (prefers-color-scheme: light) {
                background-color: props.get(vars.$theme, --base, --50);
            }
        }

        @include bem.suffix('dark') {
            @media (prefers-color-scheme: dark) {
                background-color: props.get(vars.$theme, --base, --50);
            }
        }
    }

    @each $theme in map.keys(props.get(vars.$transparent-colors)) {
        $theme-name: static-#{string.slice($theme, 3)};

        @include bem.theme($theme-name) {
            color:            props.get(vars.$transparent-colors, $theme, --text);
            background-color: props.get(vars.$transparent-colors, $theme, --900);
        }
    }
}