@use './variables';
@use './mixins/list-group';

//
// List groups
// --------------------------------------------------

// Base class
//
// Easily usable on <ul>, <ol>, or <div>.

.list-group {
    // No need to set list-style: none; since .list-group-item is block level
    padding-left: 0; // reset padding because ul and ol
}

// .collapsible indentation (currently only supports 2 levels)
.list-group {
    &:not(.list-group-secondary) {
        .collapsible {
            .list-group-item {
                padding-left: 50px;
            }
        }
    }
}

// Primary list group
.list-group-primary {
    .list-group-item {
        font-size: variables.$font-size-large;
    }
    .list-group-header {
        line-height: 25px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}

// Secondary list group
.list-group-secondary {
    .list-group-item {
        padding: variables.$padding-base-vertical 22px;
        background-color: variables.$level3;
        margin-bottom: 1px;
        font-size: variables.$font-size-base;
        line-height: variables.$line-height-base;
        color: variables.$text-color-secondary;

        &:focus {
            background-color: variables.$level4;
        }
        &:hover,
        &.active,
        &.active:hover,
        &.active:focus {
            &,
            a {
                background-color: variables.$level4;
                box-shadow: none;
            }
        }
        &[data-toggle='collapse'] {
            .caret {
                position: absolute;
                left: 3px;
                top: 13px;
                border-width: 5px;
            }
            &.collapsed {
                .caret {
                    transform: rotateZ(-90deg);
                }
            }
            &:before {
                // No folder icon for .list-group-secondary
                content: '' !important;
                position: absolute;
            }
        }
        &.disabled,
        &.disabled:hover,
        &.disabled:focus {
            color: variables.$text-color-disabled;
        }
    }
    .list-group-header {
        padding-left: 0;
        padding-right: 0;
    }
    .collapsible {
        margin-left: 15px;
    }
}

// Individual list items
//
// Use on `li`s or `div`s within the `.list-group` parent.
.list-group-item {
    position: relative;
    padding: 4px 8px;
    margin-bottom: 1px;
    background-color: variables.$list-group-bg;
    border-radius: variables.$border-radius-base;
    font-size: 14px;
    line-height: 20px;

    &,
    > a {
        color: variables.$list-group-link-color;
        display: block;
        text-decoration: none;
    }
    &[data-toggle='collapse'] {
        &:before {
            font: var(--fa-font-light);
            content: '\f07c';
            display: inline-block;
            margin-right: 8px;
            width: 18px;
        }
        &:hover {
            &:before {
                content: '\f07b';
            }
        }
        &.collapsed {
            &:before {
                content: '\f07b';
            }
            &:hover {
                &:before {
                    content: '\f07c';
                }
            }
        }
    }
    // Disabled state
    &.disabled,
    &.disabled:hover,
    &.disabled:focus {
        background-color: variables.$list-group-disabled-bg;
        color: variables.$list-group-disabled-color;
        cursor: variables.$cursor-disabled;
    }

    // Active class on item itself, not parent
    &.active,
    &.active:hover,
    &.active:focus {
        z-index: 2; // Place active items above their siblings for proper border styling
        color: variables.$list-group-active-color;
        background-color: variables.$list-group-active-bg;
        border-color: variables.$list-group-active-border;
    }
    &:hover {
        text-decoration: none;
        color: variables.$list-group-link-hover-color;
        background-color: variables.$list-group-hover-bg;
    }
    .list-group-item-icon {
        position: absolute;
        left: 7px;
        top: 9px;
        font-size: 8px;
    }
    // Contextual variants
    //
    // Add modifier classes to change text and background color on individual items.
    // Organizationally, this must come after the `:hover` states.
    @include list-group.list-group-item-variant(success, variables.$state-success-bg, variables.$state-success-text);
    @include list-group.list-group-item-variant(info, variables.$state-info-bg, variables.$state-info-text);
    @include list-group.list-group-item-variant(warning, variables.$state-warning-bg, variables.$state-warning-text);
    @include list-group.list-group-item-variant(danger, variables.$state-danger-bg, variables.$state-danger-text);
}

// Custom content options
//
// Extra classes for creating well-formatted content within `.list-group-item`s.
.list-group-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2px 12px;
    line-height: 24px;
    margin: 0;
    color: variables.$text-color;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 14px;
}
.list-group-item-actions,
.list-group-header-actions {
    position: absolute;
    right: 0;
    top: 1px;
    text-transform: initial;
    z-index: 11;

    &.open,
    &:hover,
    &:focus-within {
        opacity: 1;
        z-index: 12;
    }
}
.list-group-item-actions {
    opacity: 0;
    top: -2px;

    &:hover + .list-group-item {
        color: variables.$list-group-link-hover-color;
        background-color: variables.$list-group-hover-bg;
    }
}
.list-group-item-with-actions {
    position: relative;

    &:hover {
        > .list-group-item-actions {
            opacity: 1;
        }
    }
}