// =============================================================================
// 31-modules / list-group / mixins
// =============================================================================

@use "sass:map";
@use "./list-group.config" as config;

@mixin ss-list-group {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border-radius: map.get(config.$list-group-config, "radius");
    list-style: none;
}

@mixin ss-list-group-flush {
    > * {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        &:first-child {
            border-top: 0;
        }
        &:last-child {
            border-bottom: 0;
        }
    }
}

@mixin ss-list-group-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

/// Items of a horizontal group: collapse the shared inline border instead of
/// the top one, and round only the outer corners of the row.
@mixin ss-list-group-horizontal-item {
    border-radius: 0;

    &:not(:first-child) {
        border-top-width: map.get(config.$list-group-config, "border-width");
        border-inline-start-width: 0;
    }
    &:first-child {
        border-start-start-radius: inherit;
        border-end-start-radius: inherit;
    }
    &:last-child {
        border-start-end-radius: inherit;
        border-end-end-radius: inherit;
    }
}

/// `li[data-marker="✓"]`: draws the attribute text as the item's marker.
@mixin ss-list-group-marker {
    &::before {
        content: attr(data-marker);
        display: inline-block;
        min-inline-size: 1em;
        margin-inline-end: map.get(config.$list-group-config, "marker-gap");
        color: map.get(config.$list-group-config, "marker-color");
        text-align: center;
    }
}

@mixin ss-list-group-item {
    display: block;
    position: relative;
    padding: map.get(config.$list-group-config, "item-padding");
    color: map.get(config.$list-group-config, "color");
    background-color: map.get(config.$list-group-config, "background");
    border: map.get(config.$list-group-config, "border-width") solid
        map.get(config.$list-group-config, "border-color");

    &:not(:first-child) {
        border-top-width: 0;
    }
    &:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }
    &:last-child {
        border-bottom-left-radius: inherit;
        border-bottom-right-radius: inherit;
    }

    &.is-active,
    &--active {
        z-index: 2;
        color: map.get(config.$list-group-config, "variant-fg");
        background-color: map.get(config.$list-group-config, "color-primary");
        border-color: map.get(config.$list-group-config, "color-primary");
    }

    &.is-disabled,
    &--disabled {
        color: map.get(config.$list-group-config, "disabled-color");
        pointer-events: none;
        background-color: map.get(config.$list-group-config, "disabled-bg");
    }
}