@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --treeview-background: #ffffff;
    --treeview-color: #43454a;
    --treeview-color-secondary: #808080;
    --treeview-selected-row-background: #d4e2ff;
    --treeview-selected-row-color: #2b2d30;
    --treeview-node-toggle-color: #191919;
}

.dark-side {
    --treeview-background: #1e1f22;
    --treeview-color: #dfe1e5;
    --treeview-color-secondary: #808080;   
    --treeview-selected-row-background: #43454a;
    --treeview-selected-row-color: #ffffff;
    --treeview-node-toggle-color: #ffffff;
}

.treeview, .treeview ul:not(.d-menu) {
    margin: 0;
    padding: 0;
    font-size: 14px;
    list-style: none inside;
    display: block;
    position: relative;
    user-select: none;
    background-color: var(--treeview-background);
    color: var(--treeview-color);
}

.treeview {
    margin: 0;
    padding: 0;
    list-style: none inside;
    overflow: hidden;
}

@pl: 20px;

.treeview {
    li {
        position: relative;
        display: block;
    }

    a, label {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 13px;
        color: var(--d-menu-item-color);
        text-decoration: none;
        padding: 4px 10px 4px @pl;
        border-radius: var(--d-menu-border-radius);
        white-space: nowrap;
        flex-wrap: nowrap;
        line-height: 20px;
        overflow: hidden;
        border: 1px dotted transparent;
        cursor: default;
    }

    a[href], label {
        cursor: pointer;
    }
    
    @media (hover: hover) {
        a:hover, label:hover {
            background-color: var(--treeview-selected-row-background);
            color: var(--treeview-selected-row-color);
        }
    }

    @media (hover: none) {
        a:active, label:active {
            background-color: var(--treeview-selected-row-background);
            color: var(--treeview-selected-row-color);
        }
    }    

    .current > a {
        background-color: var(--treeview-selected-row-background);
        color: var(--treeview-selected-row-color);
    }

    ul :is(a, label) { padding-left: @pl * 2; }
    ul ul :is(a, label) { padding-left: @pl * 3; }
    ul ul ul :is(a, label) { padding-left: @pl * 4; }
    ul ul ul ul :is(a, label) { padding-left: @pl * 5; }
    ul ul ul ul ul :is(a, label) { padding-left: @pl * 6; }
    ul ul ul ul ul ul :is(a, label) { padding-left: @pl * 7; }
    ul ul ul ul ul ul ul :is(a, label) { padding-left: @pl * 8; }
    ul ul ul ul ul ul ul ul :is(a, label) { padding-left: @pl * 9; }
    ul ul ul ul ul ul ul ul ul :is(a, label) { padding-left: @pl * 10; }

    ul :is(.input) { margin-left: @pl * 2; width: calc(100% - @pl * 2); }
    ul ul :is(.input) { margin-left: @pl * 3;  width: calc(100% - @pl * 3); }
    ul ul ul :is(.input) { margin-left: @pl * 4;  width: calc(100% - @pl * 4); }
    ul ul ul ul :is(.input) { margin-left: @pl * 5;  width: calc(100% - @pl * 5); }
    ul ul ul ul ul :is(.input) { margin-left: @pl * 6;  width: calc(100% - @pl * 6); }
    ul ul ul ul ul ul :is(.input) { margin-left: @pl * 7;  width: calc(100% - @pl * 7); }
    ul ul ul ul ul ul ul :is(.input) { margin-left: @pl * 8;  width: calc(100% - @pl * 8); }
    ul ul ul ul ul ul ul ul :is(.input) { margin-left: @pl * 9;  width: calc(100% - @pl * 9); }
    ul ul ul ul ul ul ul ul ul :is(.input) { margin-left: @pl * 10;  width: calc(100% - @pl * 10); }

    .icon {
        margin-right: 6px;
        width: 16px;
        height: 16px;
        font-size: 15px;
        object-fit: cover;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .node-toggle {
        .toggle();
        position: absolute;
        left: 0;
        top: 6px;
        width: 16px;
        height: 16px;
        z-index: 0;

        &::before {
            .rotate(-135deg);
            border-color: var(--treeview-node-toggle-color);
        }
    }

    ul .node-toggle { left: @pl * 1; }
    ul ul .node-toggle { left: @pl * 2; }
    ul ul ul .node-toggle { left: @pl * 3; }
    ul ul ul ul .node-toggle { left: @pl * 4; }
    ul ul ul ul ul .node-toggle { left: @pl * 5; }
    ul ul ul ul ul ul .node-toggle { left: @pl * 6; }
    ul ul ul ul ul ul ul .node-toggle { left: @pl * 7; }
    ul ul ul ul ul ul ul ul .node-toggle { left: @pl * 8; }
    ul ul ul ul ul ul ul ul ul .node-toggle { left: @pl * 9; }

    li.expanded {
        & > .node-toggle {
            &::before {
                .rotate(-45deg);
            }
        }
    }

    .badge {
        display: inline-block!important;
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 10px;
        border: 1px solid transparent;
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin-left: 4px;
        cursor: inherit;
    }

    .secondary-text {
        margin-left: auto;
        font-size: 11px;
        color: var(--treeview-color-secondary);
    }
    
    li:hover, .current {
        & > .actions-holder {
            display: flex;
        }
    }

    .actions-holder {
        z-index: 2;
        position: absolute;
        top: 1px;
        left: -2px;
        display: none;
        height: 26px;
        width: 26px;
        align-items: center;
        justify-content: center;

        .actions-list {
            position: absolute;
            top: 100%;
            left: 0;
        }

        .actions-list-trigger {
            background-color: transparent;
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            
            svg {
                display: none!important;
            }
        }

        & > ul {
            margin: 0;
            z-index: 3;

            li {
                padding-left: 0;
            }
        }
    }

    //&.auto-layout {
    //    ul:not(.d-menu) li { padding-left: @pl * 2; }
    //    ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 3; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 4; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 5; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 6; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 7; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 8; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 9; }
    //    ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) ul:not(.d-menu) li { padding-left: @pl * 10; }
    //}
    
    .d-menu {
        :is(a) { padding: 4px 10px 4px 32px; }
    }
}