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

@include iro.props-namespace('list-group') {
    @include iro.props-store((
        --dims: (
            --pad-i:    fn.global-dim(--size --175),
            --pad-b:    fn.global-dim(--size --125),
            --rounding: fn.global-dim(--rounding),
            --border:   fn.global-dim(--border --thin),
        ),
        --colors: (
            --bg:     fn.global-color(--base --75),
            --border: fn.global-color(--border),
            --hover:  fn.global-color(--border-mute),
            --active: fn.global-color(--border),
        )
    ));

    @include iro.bem-object(iro.props-namespace()) {
        border:           fn.dim(--border) solid fn.color(--border);
        border-radius:    fn.dim(--rounding);
        background-color: fn.color(--bg);

        @include iro.bem-elem('item') {
            padding-block:  fn.dim(--pad-b);
            padding-inline: fn.dim(--pad-i);

            @include iro.bem-next-twin-elem {
                border-width:             0;
                border-block-start-width: fn.dim(--border);
                border-style:             solid;
                border-color:             fn.color(--border);
            }

            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                &:hover,
                &:focus-visible {
                    background-color: fn.color(--hover);
                }

                &:active {
                    background-color: fn.color(--active);
                }
            }
        }

        @include iro.bem-modifier('horizontal') {
            display: flex;

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

                @include iro.bem-next-twin-elem {
                    border-block-start-width:  0;
                    border-inline-start-width: fn.dim(--border);
                }
            }
        }
    }
}