@import "../core/index-noreset.scss";

@import "./scss/variable";
@import "./scss/mixin";

#{$tree-prefix} {
    @include box-sizing;

    &,
    &-child-tree {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    &-node {
        white-space: nowrap;
    }

    &-node-inner {
        font-size: 0;
        outline: none;
    }

    &-node-label-wrapper {
        font-size: 0;
        outline: none;
        display: inline-block;
        margin: 0 $tree-node-title-margin;
        vertical-align: middle;
    }

    &-node-label {
        height: $tree-node-title-height;
        line-height: $tree-node-title-height;
        padding: 0 $tree-node-title-padding;
        border-radius: $tree-node-title-border-radius;
        font-size: $tree-node-title-font-size;

        .#{$css-prefix}icon {
            font-size: calc(#{$tree-node-title-font-size} + 2px);

            &::before {
                font-size: $tree-node-title-font-size;
                width: $tree-node-title-font-size;
                margin-right: .5em;
            }
        }
    }

    &-node-input.#{$css-prefix}input {
        margin: 0 $tree-node-title-margin;
    }

    &-node-indent-unit {
        display: inline-block;
        width: $tree-child-indent;
        vertical-align: middle;
        position: relative;

        &.#{$css-prefix}line::before {
            content: '';
            position: absolute;
            display: inline-block;
            border-left: $tree-line;
            height: calc(#{$tree-node-padding} + #{$line-2} * 2 + #{$tree-node-title-height});
            left: calc((#{$tree-switch-size} - #{$tree-line-width}) / 2);
        }
    }

    &-switcher {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        margin-right: $tree-switch-margint-right;
    }

    // --------- this is for config platform
    .#{$css-prefix}tree-unfold-icon::before {
        content: $tree-unfold-icon-content;
    }

    // --------- this is for config platform

    &-switcher.#{$css-prefix}noline {
        width: $tree-switch-arrow-size;
        height: $tree-switch-arrow-size;
        line-height: $tree-switch-arrow-size;
        cursor: pointer;

        #{$tree-prefix}-switcher-icon {
            @include icon-size($tree-switch-arrow-size);
            transition: transform $motion-duration-immediately $motion-linear;
            color: $tree-switch-arrow-color;
        }

        .#{$css-prefix}tree-fold-icon::before {
            content: $tree-fold-icon-content;
        }

        &.#{$css-prefix}close #{$tree-prefix}-switcher-icon {
            @if get-compiling-value($tree-unfold-icon-content) != get-compiling-value($icon-reset) {
                &::before {
                    content: $tree-unfold-icon-content;
                }
            }

            @else {
                @include icon-size(
                    $size: $tree-switch-arrow-size,
                    $transform: rotate(-90deg)
                );
            }
        }

        &:not(.#{$css-prefix}disabled):hover #{$tree-prefix}-switcher-icon {
            color: $tree-switch-hover-arrow-color;
        }

        &.#{$css-prefix}disabled {
            cursor: not-allowed;

            #{$tree-prefix}-switcher-icon {
                color: $tree-node-disabled-color;
            }
        }
    }

    &-switcher.#{$css-prefix}noop-noline {
        flex: none;
        width: $tree-switch-arrow-size;
        height: $tree-switch-arrow-size;
    }

    &-switcher.#{$css-prefix}line {
        width: $tree-switch-size;
        height: $tree-switch-size;
        line-height: calc(#{$tree-switch-size} - #{$tree-switch-border-width} * 2);
        border: $tree-switch-border-width $line-solid $tree-switch-border-color;
        border-radius: $tree-switch-corner;
        background-color: $tree-switch-bg-color;
        cursor: pointer;

        #{$tree-prefix}-switcher-icon {
            @include icon-size($tree-switch-icon-size, calc((#{$tree-switch-size} - #{$tree-switch-icon-size} - #{$tree-switch-border-width} * 2) / 2));
            color: $tree-switch-icon-color;
        }

        .#{$css-prefix}tree-switcher-fold-icon::before {
            content: $tree-switcher-fold-icon-content;
        }

        .#{$css-prefix}tree-switcher-unfold-icon::before {
            content: $tree-switcher-unfold-icon-content;
        }

        &:not(.#{$css-prefix}disabled):hover {
            border-color: $tree-switch-hover-border-color;
            background-color: $tree-switch-hover-bg-color;

            #{$tree-prefix}-switcher-icon {
                color: $tree-switch-hover-icon-color;
            }
        }

        &.#{$css-prefix}disabled {
            border-color: $color-line1-1;
            background-color: $color-white;
            cursor: not-allowed;

            #{$tree-prefix}-switcher-icon {
                color: $tree-node-disabled-color;
            }
        }
    }

    &-switcher.#{$css-prefix}noop-line {
        width: $tree-switch-size;
        height: $tree-switch-size;
    }

    &-switcher.#{$css-prefix}noop-line-noroot {
        height: 0;
        border-left: $tree-switch-border-width $line-solid $tree-line-color;
        border-bottom: $tree-line;

        #{$tree-prefix}-right-angle {
            bottom: calc(0px - #{$tree-line-width});
        }
    }

    &-switcher.#{$css-prefix}loading {
        &.#{$css-prefix}loading-noline {
            width: $tree-switch-arrow-size;
            height: $tree-switch-arrow-size;
            line-height: $tree-switch-arrow-size;
        }

        &.#{$css-prefix}loading-line {
            width: $tree-switch-size;
            height: $tree-switch-size;
            line-height: calc(#{$tree-switch-size} - #{$tree-switch-border-width} * 2);
            border: $tree-switch-border-width $line-solid $color-transparent;
        }

        #{$tree-prefix}-switcher-icon {
            @include icon-size($tree-switch-arrow-size);
            color: $color-brand1-6;
        }
    }

    &-right-angle {
        position: absolute;
        bottom: calc((#{$tree-switch-size} - #{$tree-switch-border-width} * 2 - #{$tree-line-width}) / 2);
        left: $tree-child-right-angle-left;
        display: block;
        width: $tree-child-right-angle-width;
        height: calc(#{$tree-node-title-height} + #{$tree-node-padding} - #{$tree-line-width} * 2);
        border-left: $tree-line;
        border-bottom: $tree-line;
    }

    &.#{$css-prefix}label-block {
        #{$tree-prefix}-node-inner {
            display: flex;
            align-items: center;
        }

        #{$tree-prefix}-node-label-wrapper {
            flex: 1 1 auto;
            outline: none;
        }
    }

    &.#{$css-prefix}node-indent {
        #{$tree-prefix}-node #{$tree-prefix}-node {
            margin-left: $tree-child-indent;
        }

        #{$tree-prefix}-node-inner {
            padding-top: calc(#{$tree-node-padding} / 2);
            padding-bottom: calc(#{$tree-node-padding} / 2);
        }

        #{$tree-prefix}-node-label-wrapper {
            border-top: $line-2 solid $color-transparent;
            border-bottom: $line-2 solid $color-transparent;

            &:focus {
                #{$tree-prefix}-node-label {
                    @include tree-node-state($tree-node-hover-color, $tree-node-hover-bg-color);
                }
            }
        }

        #{$tree-prefix}-node-label {
            transition: color $motion-duration-immediately $motion-linear, background-color $motion-duration-immediately $motion-linear;
            cursor: default;
            @include tree-node-state($tree-node-normal-color, $tree-node-normal-background);
        }

        #{$tree-prefix}-node-label-selectable {
            cursor: pointer;
        }

        #{$tree-prefix}-node-label:hover {
            @include tree-node-state($tree-node-hover-color, $tree-node-hover-bg-color);
        }

        #{$tree-prefix}-node-inner.#{$css-prefix}selected #{$tree-prefix}-node-label {
            @include tree-node-state($tree-node-selected-color, $tree-node-selected-background);
        }

        #{$tree-prefix}-node-inner.#{$css-prefix}disabled #{$tree-prefix}-node-label,
        #{$tree-prefix}-node-inner.#{$css-prefix}disabled #{$tree-prefix}-node-label:hover {
            @include tree-node-state($tree-node-disabled-color, $tree-node-disabled-background);
            cursor: not-allowed;
        }

        #{$tree-prefix}-node-inner.#{$css-prefix}drag-over #{$tree-prefix}-node-label {
            background-color: $color-brand1-6;
            color: $color-white;
            opacity: .8;
        }

        #{$tree-prefix}-node-inner.#{$css-prefix}drag-over-gap-top #{$tree-prefix}-node-label-wrapper {
            border-top-color: $color-brand1-6;
        }

        #{$tree-prefix}-node-inner.#{$css-prefix}drag-over-gap-bottom #{$tree-prefix}-node-label-wrapper {
            border-bottom-color: $color-brand1-6;
        }
    }

    &.#{$css-prefix}node-block #{$tree-prefix}-node-inner {
        padding-top: $tree-node-padding;
        padding-bottom: $tree-node-padding;
        transition: color $motion-duration-immediately $motion-linear, background-color $motion-duration-immediately $motion-linear;
        display: flex;
        align-items: center;

        #{$tree-prefix}-node-label-wrapper {
            cursor: pointer;
            flex-grow: 1;
            @include tree-node-state($tree-node-normal-color, $tree-node-normal-background);

            &:hover,
            &:focus {
                @include tree-node-state($tree-node-hover-color, $tree-node-hover-bg-color);
            }
        }

        &.#{$css-prefix}selected #{$tree-prefix}-node-label {
            @include tree-node-state($tree-node-selected-color, $tree-node-selected-background);
        }

        &.#{$css-prefix}disabled,
        &.#{$css-prefix}disabled:hover {
            #{$tree-prefix}-node-label {
                @include tree-node-state($tree-node-disabled-color, $tree-node-disabled-background);
                cursor: not-allowed;
            }
        }
    }


    &.#{$css-prefix}show-line &-node &-node:not(:last-child) {
        margin-left: $tree-child-indent-left;
        border-left: $tree-line;
        padding-left: $tree-child-indent-right;
    }

    &-node.#{$css-prefix}filtered>#{$tree-prefix}-node-inner #{$tree-prefix}-node-label {
        color: $color-brand1-6;

        &:hover {
            color: $color-brand1-6;
        }
    }
}

@import './rtl.scss';