// List group styles for dark theme
@mixin dark-theme-list-group {
    .list-group,
    &.list-group{
        background-color: $dark;
        color: $light;
    }

    // List action item styles
    .list-group-item-action:hover {
        background-color: generate-shade($dark, 10, "lighten");
    }

    .btn-close::after,
    .btn-close::before,
    .btn-arrow::after,
    .btn-arrow::before {
        background-color: $light !important;
    }
}

// List group styles for light theme
@mixin light-theme-list-group {
    .list-group,
    &.list-group{
        background-color: $light;
        color: $dark;
    }

    // List action item styles
    .list-group-item-action:hover {
        background-color: generate-shade($light, 10, "darken");
    }

    .btn-close::after,
    .btn-close::before,
    .btn-arrow::after,
    .btn-arrow::before {
        background-color: $dark !important;
    }
}


// Base list-group styles
.list-group {
    display: inline-block;
    overflow: hidden;

    @include light-theme-list-group;
    @include base-border-style();

    // List group item styles
    .list-group-item {
        padding: $base-padding/2 $base-padding;

        @include base-border-style();
        border-radius: 0;
        border-left: none !important;
        border-right: none !important;

        &:first-child {
            border-top: none;
        }

        &:last-child {
            border-bottom: none;
        }

        // Action list item styles
        &.list-group-item-action {
            cursor: pointer;
            transition: background-color $base-transition-time ease-in-out;
        }

        // Active list group item styles
        &.active {
            @include active-object-color();
        }
    }

    // List-group-form styles
    &.list-group-form {
        .list-group-item {
            padding: 0 !important;

            label {
                display: block;
                padding: $base-padding/2 $base-padding;
            }

            input {
                display: none;
            }

            // Change the color when the checkbox is checked
            input[type="checkbox"]:checked + label,
            input[type="radio"]:checked + label {
                @include active-object-color();
            }
        }
    }
}


// Apply list-group themes
body[data-theme="dark"] {
    @include dark-theme-list-group;
}

body[data-theme="light"] {
    @include light-theme-list-group;
}

.list-group[data-theme="dark"] {
    @include dark-theme-list-group;
}

.list-group[data-theme="light"] {
    @include light-theme-list-group;
}