:root {
    --tv-icon-size: 16px;
    --tv-pad-x: 8px;
    --tv-pad-y: 4px;
    --tv-gap: 6px;
    --tv-sel-bg: var(--brand-50);
    --tv-sel-color: var(--gray-900);
    --tv-hov-bg: var(--brand-100);
}

.eControls .eTreeView--doc {
    
    & .k-treeview .k-treeview-item {
        position: relative;
        padding: var(--tv-pad-y) var(--tv-pad-x) var(--tv-pad-y) calc(var(--tv-pad-x) * 2 + var(--tv-icon-size));
        border-radius: 6px;
        line-height: 1.4;
        font-size: 14px;
        display: block;
    }

    & .tree-node-content::before {
        content: "";
        position: sticky;
        width: var(--tv-icon-size);
        height: var(--tv-icon-size);
        transform: translateY(-16%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /*& .k-treeview .k-treeview-leaf > .k-mid > .k-treeview-item::before,
    & .k-treeview .k-treeview-item::before { 
        background-image: url("/images/TreeViewFolder-icon.svg");
    }*/

    & .tree-node-content:has( > .folder__type-1)::before {

        background-image: url("/images/TreeViewFolder-icon.svg");
    }

    & .tree-node-content:has( > .folder__type-2)::before {
        background-image: url("/images/TreeViewFolderDot-icon.svg");
    }

    & .tree-node-content:has( > .folder__type-3)::before {
        background-image: url("/images/TreeViewFolderViolet-icon.svg");
    }

    & .tree-node-content:has( > .folder__type-4)::before {
        background-image: url("/images/TreeViewFolderVioletDot-icon.svg");
    }

    /*& .k-treeview li[aria-expanded="false"]:has( > :not(ul))::after {
        content: "\e013";
        transform: rotate(90deg);
    }

    &  .k-treeview li[aria-expanded="true"]:has( > :not(ul))::after {
        content: "\e013";
        transform: rotate(180deg);
    }*/

    & .k-treeview .k-treeview-item.k-selected,
    & .k-treeview .k-mid.k-selected > .k-treeview-item,
    & .k-treeview .k-item.k-selected > .k-mid > .k-treeview-item,
    & .k-treeview-leaf.k-selected {
        background: var(--tv-sel-bg);
        color: var(--tv-sel-color);
    }

    /*& .k-treeview .k-treeview-item:hover {
        background: var(--tv-hov-bg);
    }*/

    & .k-treeview.k-treeview-lines .k-lines .k-line {
        border-color: var(--brand-300);
    }

    & .k-treeview .k-treeview-item.k-i-collapse,
    & .k-treeview .k-treeview-item.k-i-expand {
        margin-right: 2px;
    }

    & .k-treeview-leaf-text {
        display: block;
        /*width: 120px;*/
        white-space: nowrap; 
        overflow: hidden; 
        /*text-overflow: ellipsis;*/
    }

    & .tree-node-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        & .tree__node-file-name {
            /*max-width: 100px;*/
        }

        /*& .k-treeview-item {
            display: none;
        }*/
    }

   /* & .custom-template-applied {
        & .k-treeview-leaf {
            display: none;
        }
    }*/
    
    & .tree-node-content {
        display: grid;
        grid-template-columns: 16px auto;
        align-items: center;
        gap: 12px;
    }
    
    & .tree-dots-menu {
        position: relative;
        opacity: 0;
        transition: opacity 0.2s;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-left: 8px;
    }
    
    & .tree-dots-menu:hover {
        background-color: var(--brand-150);
    }
    
    & div:where(.k-treeview-bot, .k-treeview-top):hover .tree-dots-menu {
        opacity: 1;
    }
    
    & .tree-dots-menu.active {
        opacity: 1;
        background-color: var(--brand-150);
    }
    
    & .tree-context-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        z-index: 1000;
        min-width: 160px;
        padding: 4px 0;
        display: none;
    }
    
    & .tree-context-menu-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
    }
    
    & .tree-context-menu-item:hover {
        background-color: var(--brand-150);
    }
    
    & .tree-context-menu-item img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
 
}