﻿$tree-node-padding: 24px;
$tree-node-line-width: 2px;

.mud-ex-horizontal-tree-wrapper {
    height: 100%;
}

.mud-ex-horizontal-tree {
    overflow: hidden;    
    height: 100%;
    padding: 0;
}

.mud-ex-horizontal-tree-scroll-wrapper {
    display: flex;
    place-items: center;
    height: 100%;
    transition-property: transform;
    transition-duration: 0.5s;
}

.mud-ex-horizontal-tree-column {
    &:not(:first-child) .mud-ex-horizontal-tree-node:before,
    .mud-ex-horizontal-tree-node.node-selected.node-expandable.node-expanded:after,
    &:not(:first-child) .mud-ex-horizontal-tree-node:not(:last-child) > div:after {
        content: " ";
        background-color: var(--tree-node-line-color, green);
        position: absolute;
        top: 50%;
        height: var(--tree-node-line-width, $tree-node-line-width);
        width: var(--tree-node-padding, $tree-node-padding);
    }

    &:not(:first-child) .mud-ex-horizontal-tree-node:before {
        left: 0;
    }

    .mud-ex-horizontal-tree-node.node-selected.node-expandable:after {
        right: 0;
    }

    &:not(:first-child) .mud-ex-horizontal-tree-node:not(:last-child) > div:after {
        width: var(--tree-node-line-width, $tree-node-line-width);
        height: 100%;
        left: calc(var(--tree-node-padding, $tree-node-padding) * -1 - var(--tree-node-line-width, $tree-node-line-width));
        padding-top: calc(var(--tree-node-line-width, $tree-node-line-width) + 2px);
    }
}

.mud-ex-horizontal-tree-node {
    padding: 0 var(--tree-node-padding, $tree-node-padding);
    cursor: pointer;

    & > div {
        position: relative;
        padding: 4px 4px 4px 12px;
        
        white-space: nowrap;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
    }

    &.node-selected {
        & > div {
            border-radius: var(--mud-default-borderradius, 8px);
        }
    }

    .mud-ex-horizontal-tree-expandable {
        position: absolute;
        top: 8px;
        right: 8px;
    }
}

.clickable {
    cursor: pointer;
}

.clickable:focus {
    outline: none;

    &:not(.node-selected) {
        /*color: orange;
        opacity: 0.5;*/
    }
}

.node-selected {
    /*color: orange;*/
    opacity: 1;
}


.mud-ex-simple-flex {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.mud-ex-flex-reverse-end {
    flex-flow: row-reverse;
    justify-content: flex-end;
}

.mud-ex-treeview-item-reverse-space-between > .mud-treeview-item-content {
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
}

.trimmer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}