@use "../variables";
.list-group-item {
    color: variables.$default-text-color;
    background-color: variables.$custom-white;
    border: 1px solid variables.$default-border;
    padding: 1rem 1.25rem;
}
.list-group-item.active {
    color: variables.$white !important;
    background-color: variables.$primary !important;
    border-color: variables.$primary;
}
.list-group-item {
    &.disabled,
    &:disabled {
        color: variables.$default-text-color;
        background-color: variables.$light;
        opacity: 0.5;
    }
}
.list-group-item-action {
    &:focus,
    &:hover {
        color: variables.$default-text-color;
        background-color: variables.$list-hover-focus-bg;
    }
}
.list-group-item-primary {
    color: variables.$primary;
    background-color: variables.$primary-01;
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$primary;
            background-color: variables.$primary-02;
        }
    }
}
.list-group-item-secondary {
    color: variables.$secondary;
    background-color: rgba(var(--secondary-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$secondary;
            background-color: rgba(var(--secondary-rgb), 0.2);
        }
    }
}
.list-group-item-info {
    color: variables.$info;
    background-color: rgba(var(--info-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$info;
            background-color: rgba(var(--info-rgb), 0.2);
        }
    }
}
.list-group-item-warning {
    color: variables.$warning;
    background-color: rgba(var(--warning-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$warning;
            background-color: rgba(var(--warning-rgb), 0.2);
        }
    }
}
.list-group-item-danger {
    color: variables.$danger;
    background-color: rgba(var(--danger-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$danger;
            background-color: rgba(var(--danger-rgb), 0.2);
        }
    }
}
.list-group-item-success {
    color: variables.$success;
    background-color: rgba(var(--success-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$success;
            background-color: rgba(var(--success-rgb), 0.2);
        }
    }
}
.list-group-item-dark {
    color: variables.$dark;
    background-color: rgba(var(--dark-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$dark;
            background-color: rgba(var(--dark-rgb), 0.2);
        }
    }
}
.list-group-item-light {
    color: variables.$default-text-color;
    background-color: rgba(var(--light-rgb), 0.1);
    &.list-group-item-action {
        &:focus,
        &:hover {
            color: variables.$default-text-color;
            background-color: rgba(var(--light-rgb), 0.2);
        }
    }
}
.list-item-solid-primary {
    background-color: variables.$primary;
    color: variables.$white;
    border-color: variables.$primary;
}
.list-item-solid-secondary {
    background-color: variables.$secondary;
    color: variables.$white;
    border-color: variables.$secondary;
}
.list-item-solid-success {
    background-color: variables.$success;
    color: variables.$white;
    border-color: variables.$success;
}
.list-item-solid-info {
    background-color: variables.$info;
    color: variables.$white;
    border-color: variables.$info;
}
.list-item-solid-warning {
    background-color: variables.$warning;
    color: variables.$white;
    border-color: variables.$warning;
}
.list-item-solid-danger {
    background-color: variables.$danger;
    color: variables.$white;
    border-color: variables.$danger;
}
.list-item-solid-light {
    background-color: variables.$light;
    color: variables.$default-text-color;
    border-color: variables.$light;
}
.list-item-solid-dark {
    background-color: variables.$dark;
    color: variables.$white;
    border-color: variables.$dark;
}
[data-theme-mode="dark"]{
    .list-group-item-action:not(.active):focus, .list-group-item-action:not(.active):hover {
        color: variables.$default-text-color;
        background-color: rgba(255,255,255,0.1);
    }
}