/* --------------------------------

File#: _1_tree
Title: Tree
Descr: Multi-level directory of editable items
Usage: codyhouse.co/license

-------------------------------- */
/* variables */
:root {
    /* colors */
    --tp2-color-primary-hsl: 250, 84%, 54%;
    --tp2-color-bg-hsl: 0, 0%, 100%;
    --tp2-color-contrast-high-hsl: 230, 7%, 23%;
    --tp2-color-contrast-higher-hsl: 230, 13%, 9%;
    --tp2-color-white-hsl: 0, 0%, 100%;

    /* spacing */
    --tp2-space-3xs: 0.25rem;
}

@media(min-width: 64rem){
    :root {
        /* spacing */
        --tp2-space-3xs: 0.375rem;
    }
}

/* icons */
.tp2-icon {
    height: var(--tp2-size, 1em);
    width: var(--tp2-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

/* component */
:root {
    --tree-item-padding-x: var(--tp2-space-3xs);
    --tree-item-padding-y: var(--tp2-space-3xs);
    --tree-arrow-icon-size: 16px;
    --tree-arrow-icon-margin-right: 2px;
    --tree-label-icon-size: 16px;
    --tree-label-icon-margin-right: 6px;
    --tree-arrow-btn-size: 16px;
    --tree-arrow-btn-margin-right: 4px;
}

.tree {
    position: absolute;
    padding-left: 5px;
    z-index: 1;
}

.tree__nodes .tree__nodes {
    display: none;
}

.tree__nodes .tree__nodes .tree__item {
    padding-left: calc(var(--tree-item-padding-x) + (var(--tree-arrow-icon-size) + var(--tree-arrow-icon-margin-right) + var(--tree-label-icon-size) + var(--tree-label-icon-margin-right)) * 1);
}

.tree__nodes .tree__nodes .tree__nodes .tree__item {
    padding-left: calc(var(--tree-item-padding-x) + (var(--tree-arrow-icon-size) + var(--tree-arrow-icon-margin-right) + var(--tree-label-icon-size) + var(--tree-label-icon-margin-right)) * 2);
}

.tree__nodes .tree__nodes .tree__nodes .tree__nodes .tree__item {
    padding-left: calc(var(--tree-item-padding-x) + (var(--tree-arrow-icon-size) + var(--tree-arrow-icon-margin-right) + var(--tree-label-icon-size) + var(--tree-label-icon-margin-right)) * 3);
}

.tree__node--expanded > .tree__nodes {
    display: block;
}

.tree__item {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: calc(var(--tree-item-padding-y)/2) var(--tree-item-padding-x);
    border-radius: 0.25em;
    text-align: left;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: text;
    transition: 0.2s;
}
.tree__item:hover:not(.tree__item--selected) {
    background-color: hsla(var(--tp2-color-contrast-higher-hsl), 0.05);
}
.tree__item:focus {
    outline: none;
    background-color: hsla(var(--tp2-color-primary-hsl), 0.15);
}
.tree__item:focus:hover {
    background-color: hsla(var(--tp2-color-primary-hsl), 0.2);
}

.tree__item--selected {
    background-color: hsl(var(--tp2-color-primary-hsl));
    color: hsl(var(--tp2-color-white-hsl));
}
.tree__item--selected svg {
    color: hsl(var(--tp2-color-white-hsl));
}

.tree__item--editing {
    background-color: hsl(var(--tp2-color-bg-hsl));
    box-shadow: inset 0 0 0 2px hsl(var(--tp2-color-primary-hsl));
    color: hsl(var(--tp2-color-contrast-high-hsl));
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
.tree__item--editing svg {
    color: inherit;
}
.tree__item--editing .tree__label:focus {
    box-shadow: none;
}

.tree__arrow-icon, .tree__arrow-icon-spacer {
    width: var(--tree-arrow-icon-size);
    height: var(--tree-arrow-icon-size);
    margin-right: var(--tree-arrow-icon-margin-right);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.tree__node--expanded > .tree__item .tree__arrow-icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.tree__label-icon {
    width: var(--tree-label-icon-size);
    height: var(--tree-label-icon-size);
    margin-right: var(--tree-label-icon-margin-right);
}

.tree__arrow-btn {
    display: inline-flex;
    width: var(--tree-arrow-btn-size);
    height: var(--tree-arrow-btn-size);
    margin-right: var(--tree-arrow-btn-margin-right);
    border-radius: 50%;
    transition: 0.2s;
}
.tree__arrow-btn .tree__arrow-icon {
    margin: auto !important;
}
.tree__arrow-btn:hover {
    background-color: hsla(var(--tp2-color-contrast-higher-hsl), 0.15);
}

.tree__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    height: 100%;
    padding: calc(var(--tree-item-padding-y)/2) 0;
}

/* utility classes */
.tp2-opacity-50\% {
    opacity: 0.5;
}

.tp2-color-contrast-higher {
    --tp2-color-o: 1;
    color: hsla(var(--tp2-color-contrast-higher-hsl), var(--tp2-color-o, 1));
}

.tp2-color-primary {
    --tp2-color-o: 1;
    color: hsla(var(--tp2-color-primary-hsl), var(--tp2-color-o, 1));
}