@use 'iro-sass/src/index' as iro;
@use '../../src/functions' as fn;

@include iro.props-namespace('sidebar') {
    @include iro.props-store((
        --colors: (
            --bg:              fn.global-color(--bg),
            --border:          fn.global-color(--obj),
            --icon:            fn.global-color(--fg-hi),
            --group-header-fg: fn.global-color(--fg-hi),
        ),
    ), 'colors');

    @include iro.props-store((
        --colors: (
            --bg:     fn.global-color(--bg-hi),
            --border: fn.global-color(--bg-hi),
        ),
    ), 'colors-dark');

    @include iro.bem-component(iro.props-namespace()) {
        grid-area:        sidebar;
        min-width:        10em;
        padding:          .6em;
        overflow:         auto;
        border-right:     1px solid fn.color(--border);
        background-color: fn.color(--bg);
    }
}