@import '../dynamic';

.list-group {
    background-color: transparent;

    &.list-group-lg {
        .list-group-item {
            font-size: $font-size-lg;
            line-height: $input-height-lg;
            height: $input-height-lg;
        }
    }
    &.list-group-sm {
        .list-group-item {
            font-size: $font-size-sm;
            line-height: $input-height-sm;
            height: $input-height-sm;
        }
    }
}

.list-group-item {
    background-color: $gray-100;
    font-weight: 500;
    line-height: $input-height;
    padding: 0 2rem;
    margin: 0;
    margin-bottom: $border-width;
    border: none;
    height: calc(#{$input-height} - #{$border-width});
    &.active {
        background-color: $gray-200;
        color: $black;
    }
    &.disabled {
        opacity: $btn-disabled-opacity;
    }
    @each $color, $value in $theme-colors {
        &.list-group-item-#{$color} {
            background-color: $value;
            color: color-yiq($value);
            &.active {
                background-color: map-get($highlighted-colors, $color);
            }
        }
    }
}