/* ------------------------------------------------------------------------------
 *
 *  # List group component
 *
 *  Overrides for list group component
 *
 * ---------------------------------------------------------------------------- */


// Base class
.list-group {
    background-color: $card-bg;
    border: $list-group-border-width solid $list-group-border-color;
    padding: $list-group-padding-y 0;
    background-clip: padding-box;
    @include border-radius($list-group-border-radius);
}

// Individual list items
.list-group-item {
    display: flex;
    align-items: center;
    border-width: 0;
    background-color: transparent;
    @include transition(all ease-in-out $component-transition-timer);

    // Top border
    .list-group:not([class*=list-group-horizontal]) &:first-child {
        @include border-top-radius(0);
    }

    // Bottom border
    .list-group:not([class*=list-group-horizontal]) &:last-child {
        @include border-bottom-radius(0);
    }

    // Borders setup
    & + & {
        margin-top: 1px;

        &.active {
            margin-top: 1px;
            border-top-width: 0;
        }
    }

    // Add gap between items
    .list-group & + &,
    .list-group & + &.active {
        margin-top: 0;
    }

    // Disabled state
    &.disabled,
    &:disabled {
        cursor: $cursor-disabled;
    }
}

// Icon indication for active state
.list-group-item-active-indicator {
    opacity: 0;
    visibility: hidden;
    transition: opacity ease-in-out $component-transition-timer, visibility ease-in-out $component-transition-timer;

    .list-group-item.active > & {
        opacity: 1;
        visibility: visible;
    }
}

// Horizontal
@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .list-group-horizontal#{$infix} {
            border: 0;

            .list-group-item-action {
                width: auto;
            }

            .list-group-item {
                border: $list-group-border-width solid $list-group-border-color;
            }
        }
    }
}

// Flush list items
.list-group-flush {
    > .list-group-item {
        border-width: 0;
    }
}

// List group divider
.list-group-divider {
    padding: 0;
    margin: $list-group-padding-y 0;
    height: $list-group-border-width;
    background-color: $list-group-border-color;
    border: 0;
}

// Bordered list
.list-group-bordered {
    padding: 0;

    // Item
    .list-group-item {
        border-top-width: $list-group-border-width;
        border-bottom-width: $list-group-border-width;
        margin-bottom: -$list-group-border-width;

        // Round top corners
        &:first-child {
            border-top-width: 0;
            @include border-top-radius($list-group-border-radius);
        }

        // Round bottom corners
        &:last-child {
            @include border-bottom-radius($list-group-border-radius);
        }
    }
}

// Dark badkgrounds
.list-group-custom {
    @include border-radius($list-group-border-radius);

    // Links
    .list-group-item-action {
        &:not(.active):not(.disabled) {
            color: rgba($white, 0.9);

            // Hover state
            @include hover-focus {
                background-color: $dropdown-dark-hover-bg;
                color: $white;
            }
        }
    }

    // Item
    .list-group-item {
        color: $white;

        // Active state
        &.active {
            background-color: $dropdown-dark-active-bg;
            border-color: transparent;
        }

        // Disabled state
        &.disabled,
        &:disabled {
            color: $dropdown-dark-disabled-color;
            background-color: transparent;
        }
    }

    // Divider
    .list-group-divider {
        background-color: $dropdown-dark-divider-bg;
    }

    // Custom bg color
    &.list-group-bordered {
        .list-group-item {
            border-top-color: $navigation-dark-bordered-border-color;
            border-bottom-color: $navigation-dark-bordered-border-color;
        }
    }
}

// Contextual variants
@each $color, $value in $theme-colors {
    @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
}