// =============================================================================
// 31-modules / list-group / output
// =============================================================================

@use "sass:map";
@use "../../01-core/prefix" as *;
@use "./list-group.config" as config;
@use "./list-group.mixins" as *;
@use "../../01-core/external" as *;

@layer ss.components {
    .#{$ss-prefix-module}-list-group {
        @include ss-list-group;

        &--flush {
            > .#{$ss-prefix-module}-list-group__item {
                border-radius: 0;
                border-left: 0;
                border-right: 0;
                &:first-child {
                    border-top: 0;
                }
                &:last-child {
                    border-bottom: 0;
                }
            }
        }

        > [data-marker] {
            @include ss-list-group-marker;
        }
        &--numbered {
            counter-reset: ss-list-group;
            > .#{$ss-prefix-module}-list-group__item::before {
                counter-increment: ss-list-group;
                content: counter(ss-list-group) ". ";
                font-variant-numeric: tabular-nums;
            }
        }

        &__item {
            @include ss-list-group-item;

            &--primary {
                color: var(--ss-color-background);
                background-color: map.get(
                    config.$list-group-config,
                    "color-primary"
                );
                border-color: map.get(
                    config.$list-group-config,
                    "color-primary"
                );
            }
            &--success {
                color: var(--ss-color-on-success);
                background-color: map.get(
                    config.$list-group-config,
                    "color-success"
                );
                border-color: map.get(
                    config.$list-group-config,
                    "color-success"
                );
            }
            &--warning {
                color: var(--ss-color-on-warning);
                background-color: map.get(
                    config.$list-group-config,
                    "color-warning"
                );
                border-color: map.get(
                    config.$list-group-config,
                    "color-warning"
                );
            }
            &--danger {
                color: var(--ss-color-on-error);
                background-color: map.get(
                    config.$list-group-config,
                    "color-danger"
                );
                border-color: map.get(
                    config.$list-group-config,
                    "color-danger"
                );
            }
            &--info {
                color: var(--ss-color-on-info);
                background-color: map.get(
                    config.$list-group-config,
                    "color-info"
                );
                border-color: map.get(config.$list-group-config, "color-info");
            }

            &__heading {
                font-weight: 600;
                margin: 0 0 q(4);
            }
            &__text {
                margin: 0;
                font-size: var(--ss-font-size-sm);
            }
        }

        // After `&__item`, so the row's corner rules override the column ones.
        &--horizontal {
            @include ss-list-group-horizontal;

            > .#{$ss-prefix-module}-list-group__item {
                @include ss-list-group-horizontal-item;
            }
        }
    }

    // Links inside the active item take its (inverted) text colour; the
    // link colour failed contrast on the active fill.
    .#{$ss-prefix-module}-list-group__item--active a,
    .#{$ss-prefix-module}-list-group__item.is-active a {
        color: inherit;
    }
}