$list-group-bg: transparent;
$list-group-border-color: $color-border;
$list-group-item-padding-y: 0.25rem;
$list-group-item-padding-x: 0.5rem;
$list-group-action-color: $color-text-1;
$list-group-action-hover-color: $color-text;
$list-group-hover-bg: $color-bg-2;
$list-group-action-active-color: $color-text-3;
$list-group-action-active-bg: $color-bg-5;

@import 'bootstrap/scss/list-group';

.theme-light {
    .list-group-item {
        border-color: $color-light-border;
    }
    .list-group-item-action {
        color: $color-light-text-1;
        &:hover,
        &:focus {
            color: $color-light-text-6;
            background-color: $color-light-bg-2;
        }
        &.active {
            color: $color-light-text-4;
            background-color: $primary;
        }
    }
}

// .list-group-item-$color is too light in the dark theme. Recreate these styles to have colors with less
// brightness.
.theme-dark {
    @each $color, $value in $theme-colors {
        @include list-group-item-variant($color, theme-color-level($color, 6), theme-color-level($color, -9));
        a.list-group-item-#{$color}:hover {
            color: var(--link-hover-color);
        }
    }
}