$treeview-font-size: 1rem;
$compact-treeview-font-size: 0.875rem;

$treeview-item-height: 2.5rem;
$compact-treeview-item-height: 28px;

$treeview-handle-width: 2rem;
$compact-treeview-handle-width: 1.5rem;

$subtreeview-indention: 1.25rem;

.bd-treeview {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;

    ul {
        @include paddingStart($subtreeview-indention);
    }

    a {
        text-decoration: none;
        outline: none;
    }
}

.bd-treeview-focus {
    a:focus {
        text-decoration: underline;
    }
}
//----
.bd-treeview-item {
    display: flex;
    align-items: center;
    font-size: $treeview-font-size;
    line-height: 1;

    @include paddingEnd(0.5rem);

    & > div {
        line-height: $treeview-item-height;
        display: flex;
        flex-grow: 1;
        align-items: center;

        svg {
            font-size: 1.5rem;
        }
    }

    & > span {
        display: flex;
        align-self: stretch;
        align-items: center;
        justify-content: center;
        width: $treeview-handle-width;

        svg {
            font-size: 1.25rem;
        }
    }

    &.bd-treeview-compact {
        font-size: $compact-treeview-font-size;

        & > div {
            line-height: $compact-treeview-item-height;

            svg {
                font-size: 1.25rem;
            }
        }

        & > span {
            width: $compact-treeview-handle-width;

            svg {
                font-size: 1.125rem;
            }
        }
    }

    &.disabled {
        opacity: 0.5;
        cursor: default !important;

        &:hover {
            background-color: transparent !important;
        }
    }

    &.bd-treeview-menu {
        user-select: none;
        cursor: pointer;
    }
}

//---
.bd-treeview-divider {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

/*******************/
@mixin listTheme($palette) {
    $text-primary: map-get($palette, text, primary);
    $text-secondary: map-get($palette, text, secondary);
    $bg: map-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $primary: map-get($primary-palette, main);

    .bd-treeview {
        a {
            color: $text-primary;
        }

        svg {
            color: $text-secondary;
        }
    }

    .bd-treeview-menu {
        &:hover {
            background-color: rgba($text-primary, 0.05);
        }
    }

    .bd-treeview-selected {
        background-color: mix($primary, $bg, 10%) !important;
    }

    .bd-treeview-divider {
        border-color: rgba($text-primary, 0.15) !important;
    }
}

/*******************/
.theme-bd.theme-light {
    $palette: map-get($theme, light);
    @include listTheme($palette);
}

.theme-bd.theme-dark {
    $palette: map-get($theme, dark);
    @include listTheme($palette);
}