/*!
 * 
 * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../mixins";
@import "../variables/trees_vars";

/**
** General tree styles
**/
.dlt-tree {
    // @include component-vars(trees);
    list-style: none;
    margin: $tree-margin;
    padding: $tree-padding;
    border-radius: $tree-border-radii;
    font-family: $tree-font-family;
    color: $tree-text-color;
    text-align: left;
    line-height: $tree-line-height-default;
    font-size: $tree-font-size-default;
    font-weight: $tree-content-font-weight;
}

/**
** Basic trees
**/
ul.dlt-tree--sm > li > span {
    line-height: $tree-item-span-line-height-sm;
    height: $tree-item-span-height-sm;
}
ul.dlt-tree--lg > li > span {
    line-height: $tree-item-span-line-height-lg;
    height: $tree-item-span-height-lg;
}

li.dlt-tree__item {
    position: relative;
    margin-left: $tree-item-margin-left;
    padding-left: $tree-item-padding-left;
    list-style: none;
    cursor: pointer;
    &[disabled] {
        opacity: $tree-item-disabled-opacity;
        outline: $tree-item-disabled-outline;
        resize: none;
        cursor: not-allowed;
        pointer-events: none;
    }
    & > span {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        line-height: $tree-item-span-line-height;
        height: $tree-item-span-line-height;
        width: $tree-item-span-width;
        &::before {
            position: absolute;
            display: inline-block;
            vertical-align: bottom;
            box-sizing: border-box;
            left: $tree-item-span-before-left;
            top: $tree-item-span-before-top;
            width: $tree-item-span-before-width;
            height: $tree-item-span-before-height;
            line-height: $tree-item-span-before-line-height;
            font-family: $tree-item-span-before-font-family;
            font-size: $tree-item-span-before-font-size;
            font-weight: $tree-item-span-before-font-weight;
            color: $tree-item-span-before-color;
            content: $tree-item-span-before-content;
        }
    }
    &--leaf > span::before {
        content:   $tree-item-span-before-leaf-content;
        padding-left: $tree-item-span-before-leaf-padding-left;
        cursor: default;
    }
    &:not(.dlt-tree__item--expanded):not(.dlt-tree__item--leaf) > span::before {
        content: $tree-item-span-before-not-expanded-not-leaf-content;
    }
    &:focus {
        outline: $tree-item-focus-outline;
    }
    &::before {
        position: absolute;
        display: inline-block;
        vertical-align: bottom;
        top: $tree-item-before-top;
        left: $tree-item-before-left;
        height: $tree-item-before-height;
        width: $tree-item-before-width;
        content: " ";
    }
    &:focus::before {
        outline: $tree-item-before-focus-outline;
        outline-offset: $tree-item-before-focus-outline-offset;
    }
    &.dlt-tree__item--hover::before {
        outline: $tree-item-before-hover-outline;
        outline-offset: $tree-item-before-hover-outline-offset;
    }
    &.dlt-tree__item--selected::before {
        outline: $tree-item-before-selected-outline;
        outline-offset: $tree-item-before-selected-outline-offset;
        left: $tree-item-before-selected-left;
        top: $tree-item-before-selected-top;
    }
}

ul.dlt-tree.dlt-tree--sm > li.dlt-tree__item::before {
    top: $tree-item-before-sm-top;
    height: $tree-item-before-sm-height;
    left: $tree-item-before-sm-left;
}

ul.dlt-tree.dlt-tree--lg > li.dlt-tree__item::before {
    top: $tree-item-before-lg-top;
    height: $tree-item-before-lg-height;
    left: $tree-item-before-lg-left;
}

ul.dlt-tree.dlt-tree--data.dlt-tree--sm > li.dlt-tree__item span.dlt-checkbox {
    label::before {
        width: var(--dlt-sizing-xxs, 14px);
        height: var(--dlt-sizing-xxs, 14px);
        top: 2px;
    }
    label::after {
        font-size: var(--dlt-font-size-xs, 1rem);
        left: -1px;
    }
}

ul.dlt-tree.dlt-tree--sm > li.dlt-tree__item > span::before {
    top: $tree-item-span-before-sm-top;
}
ul.dlt-tree.dlt-tree--lg > li.dlt-tree__item > span::before {
    top: $tree-item-span-before-lg-top;
}

.dlt-tree__item--icon {
    vertical-align: text-bottom;
    color: $tree-item-icon-color;
    font-size: $tree-item-icon-font-size;
    line-height: $tree-item-icon-line-height;
    margin-right: $tree-item-icon-margin-right;
    margin-left: $tree-item-icon-margin-left;
}

ul.dlt-tree--sm .dlt-tree__item--icon {
    vertical-align: text-top;
    color: $tree-item-icon-sm-color;
    font-size: $tree-item-icon-sm-font-size;
    line-height: $tree-item-icon-sm-line-height;
    margin-left: $tree-item-icon-sm-margin-left;
}

ul.dlt-tree--lg .dlt-tree__item--icon {
    vertical-align: sub;
    color: $tree-item-icon-lg-color;
    font-size: $tree-item-icon-lg-font-size;
    line-height: $tree-item-icon-lg-line-height;
    margin-left: $tree-item-icon-lg-margin-left;
}

li.dlt-tree__item:not(.dlt-tree__item--expanded) ul.dlt-tree {
    display: none;
}

/**
** Data tree
**/
ul.dlt-tree.dlt-tree--data {
    li.dlt-tree__item {
        border-left: $tree-data-item-border-left;
        margin-left: $tree-data-item-margin-left;
        &::before {
            left: $tree-data-item-before-left;
            top: $tree-data-item-before-top;
        }
    }
    li.dlt-tree__item:last-child {
        margin-left: $tree-data-item-last-child-margin-left;
        border-left: $tree-data-item-last-child-border-left;
    }
    li.dlt-tree__item > span {
        padding-left: $tree-data-item-span-padding-left;
    }
    li.dlt-tree__item > span::before {
        // Override font-size and left:
        font-size: $tree-data-item-span-before-font-size;
        left: $tree-data-item-span-before-left;
        top: $tree-data-item-span-before-top;
        width: $tree-data-item-span-before-width;
        height:$tree-data-item-span-before-height;
        // End override
        content: $tree-data-item-span-before-content;
        background-color: $tree-data-item-span-before-background-color;
        z-index: 1;
    }
    li.dlt-tree__item.dlt-tree__item--leaf > span::before {
        content: $tree-data-item-leaf-span-before-content;
        background-color: $tree-data-item-leaf-span-before-background-color;
    }
    li.dlt-tree__item:not(.dlt-tree__item--expanded):not(.dlt-tree__item--leaf) > span::before {
        content: $tree-data-item-not-expanded-not-leaf-span-before-content;
    }
    li.dlt-tree__item > span::after {
        position: absolute;
        display: inline-block;
        vertical-align: middle;
        box-sizing:  border-box;
        content: "";
        top: $tree-data-item-span-after-top;
        left: $tree-data-item-span-after-left;
        width: $tree-data-item-span-after-width;
        height: $tree-data-item-span-after-height;
        border-left: $tree-data-item-span-after-border-left;
        border-bottom: $tree-data-item-span-after-border-bottom;
        z-index: 0;
    }
}

ul.dlt-tree.dlt-tree--data.dlt-tree--sm > li.dlt-tree__item::before {
    top: $tree-data-item-before-sm-top;
    left: $tree-data-item-before-sm-left;
}
ul.dlt-tree.dlt-tree--data.dlt-tree--sm li.dlt-tree__item > span {
    padding-left: $tree-data-item-span-sm-padding-left;
}
ul.dlt-tree.dlt-tree--data.dlt-tree--sm > li.dlt-tree__item > span::before {
    font-size: $tree-data-item-span-before-sm-font-size;
    top: $tree-data-item-span-before-sm-top;
    width: $tree-data-item-span-before-sm-width;
    height: $tree-data-item-span-before-sm-height;
}
ul.dlt-tree.dlt-tree--data.dlt-tree--lg > li.dlt-tree__item::before {
    top: $tree-data-item-before-lg-top;
    height: $tree-data-item-before-lg-height;
    line-height: $tree-data-item-before-lg-height;
}
ul.dlt-tree--lg.dlt-tree--data > li > span {
    line-height: $tree-data-item-span-lg-line-height;
    height: $tree-data-item-span-lg-height;
}
ul.dlt-tree.dlt-tree--data.dlt-tree--lg > li.dlt-tree__item > span::before {
    top: $tree-data-item-span-before-lg-top;
}
ul.dlt-tree[role="tree"].dlt-tree--data > li.dlt-tree__item > span::after {
    top: $tree-role-tree-data-item-span-after-top;
    height: $tree-role-tree-data-item-span-after-height;
}
ul.dlt-tree.dlt-tree--data.dlt-tree--sm > li.dlt-tree__item > span::after {
    top: $tree-data-item-span-after-sm-top;
    height: $tree-data-item-span-after-sm-height;
    width: $tree-data-item-span-after-sm-width;
}
ul.dlt-tree[role="tree"].dlt-tree--data.dlt-tree--sm > li.dlt-tree__item > span::after {
    top: $tree-role-tree-data-item-span-after-sm-top;
    height: $tree-role-tree-data-item-span-after-sm-height;
}
ul.dlt-tree.dlt-tree--data.dlt-tree--lg > li.dlt-tree__item > span::after {
    top: $tree-data-item-span-after-lg-top;
    height: $tree-data-item-span-after-lg-height;
}
ul.dlt-tree[role="tree"].dlt-tree--data.dlt-tree--lg > li.dlt-tree__item > span::after {
    top: $tree-role-tree-data-item-span-after-lg-top;
    height: $tree-role-tree-data-item-span-after-lg-height;
}

/**
** Tree header (label)
**/

label.dlt-tree.dlt-tree__header {
    font-weight: $tree-header-font-weight;
    line-height: $tree-header-line-height;
    padding: $tree-header-padding;
    margin: $tree-header-margin;
    &.dlt-tree--sm {
        margin-bottom: $tree-header-sm-margin-bottom;
    }
    &.dlt-tree--data {
        margin-bottom: $tree-data-header-margin-bottom;
        margin-left: $tree-data-header-margin-left;
    }
    &.dlt-tree--sm.dlt-tree--data {
        margin-bottom: $tree-data-header-sm-margin-bottom;
        margin-left: $tree-data-header-sm-margin-left;
    }
    &.dlt-tree--lg.dlt-tree--data {
        margin-bottom: $tree-data-header-lg-margin-bottom;
    }
}

/**
** Item content
**/

.dlt-tree__item span.dlt-checkbox {
    position: absolute;
    top: $tree-item-span-checkbox-top;
    padding-left: $tree-item-span-checkbox-padding-left;
    label {
        padding: $tree-item-span-checkbox-label-padding;
    }
}

ul.dlt-tree.dlt-tree--data.dlt-tree--sm > li.dlt-tree__item {
    margin-left: $tree-data-item-sm-margin-left;
    &:last-child {
        margin-left: $tree-data-item-last-child-sm-margin-left;
    }
}

ul.dlt-tree.dlt-tree--data.dlt-tree--sm > li.dlt-tree__item span.dlt-checkbox {
    top: $tree-data-item-span-checkbox-sm-top;
    padding-left: $tree-data-item-span-checkbox-sm-padding-left;
    label {
        padding: $tree-item-span-checkbox-label-sm-padding;
    }
}

ul.dlt-tree.dlt-tree--data.dlt-tree--lg > li.dlt-tree__item span.dlt-checkbox {
    top: $tree-data-item-span-checkbox-lg-top;
    padding-left: $tree-data-item-span-checkbox-lg-padding-left;
}

// Truncation will work when applied in a nested span (and not in the span directly within the li element)
.dlt-tree__item--truncation {
    width: $tree-item-truncation-width;
    position: $tree-item-truncation-position;
    text-overflow: $tree-item-truncation-text-overflow;
    overflow: $tree-item-truncation-overflow;
    white-space: $tree-item-truncation-white-space;
}
