/*
 * Data tree.
 */

@use "sass:math";

.data-tree {
    flex: 1;
    margin-left: -$data-tree-gutter;
}

.data-tree + .list-footer {
    margin-top: $component-margin-bottom;
}

.btn-tree-toggle {
    z-index: 2;
    display: inline-flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: $data-tree-gutter*2;
    height: $data-tree-gutter*2;
    font-size: $data-tree-gutter*2;
    margin-left: $data-tree-gutter;
    margin-right: $data-tree-gutter;
    color: $data-tree-lines-color;
    background-color: $white;
    border-radius: 50%;
}


// -
// Header
// ---

.data-tree-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: $data-tree-gutter;

    > .form-check {
        flex: 1;
        margin-left: $data-tree-gutter;
    }
}

.data-tree-sort {
    display: flex; // correct vertical align
    flex-direction: row;
    margin-left: auto;

    .btn {
        padding: 0 $data-tree-gutter;
    }
}

// customizes bulk actions
.data-tree .list-selected {
    position: relative;
    border: var(--#{$prefix}border-width) solid transparent;
    margin-top: $data-tree-gutter;
    margin-left: $data-tree-indent;

    .list-selected-label,
    .btn {
        padding: $data-tree-gutter;
    }

    &:before {
        position: absolute;
        z-index: 1;
        top: -($data-tree-gutter);
        left: -($data-tree-indent*.5);
        bottom: 0;
        content: " ";
        border-left: 1px solid $data-tree-lines-color;
    }

    &:after {
        z-index: 1;
        position: absolute;
        content: " ";
        left: -($data-tree-indent*.5);
        bottom: 50%;
        border-top: 1px solid $data-tree-lines-color;
        width: $data-tree-indent*.5;
        box-sizing: content-box !important;
    }
}


// -
// Content & Items
// ---

.data-tree-content {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.data-tree-content,
.data-tree-children {
    > .data-tree-item-container:last-child {
        > .data-tree-item:not(.expanded):after {
            border: none;
        }
    }
}

.data-tree-item {
    position: relative;
    display: flex;
    align-items: flex-start;

    .btn-tree-toggle {
        margin-top: $data-tree-gutter*2;
    }

    .data-card {
        margin-top: $data-tree-gutter;
    }

    // draw lines
    // connect to parent
    &:before {
        z-index: 1;
        position: absolute;
        left: $data-tree-indent*.5;
        top: 0;
        content: " ";
        border-bottom: 1px solid $data-tree-lines-color;
        width: $data-tree-indent*.5;
        border-left: 1px solid $data-tree-lines-color;
        height: $data-tree-gutter*3;
        box-sizing: content-box !important;
    }

    // draw lines
    // connect to next sibling
    &:after {
        z-index: 1;
        position: absolute;
        left: $data-tree-indent*.5;
        top: $data-tree-gutter*2;
        bottom: 0;
        content: " ";
        border-left: 1px solid $data-tree-lines-color;
    }
}

.data-tree-item-select {
    position: absolute;
    top: $data-tree-gutter;
    left: $data-tree-indent;
    margin: $data-tree-gutter !important;
}

.data-tree-leaf {
    padding-left: $data-tree-indent;
}

.data-tree-children {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding-left: $data-tree-indent;

    &:before {
        z-index: 1;
        position: absolute;
        content: " ";
        left: $data-tree-indent*.5;
        height: 100%;
        border-left: 1px solid $data-tree-lines-color;
    }
}
