@import "mixins/mixins";
@import "common/var";
@import "virtual-scroller.scss";
@import "common/colorPalette";

@include b(virtual-tree) {
    cursor: default;
    background-color: $--color-white;
    color: $--tree-font-color;
    .el-virtual-tree-ceil {
        cursor: pointer;
        // 一般状态
        &:not(.is-disabled) {
            .el-virtual-tree-ceil__content {
                // width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                overflow:hidden; //超出的文本隐藏
                text-overflow:ellipsis; //溢出用省略号显示
                white-space:nowrap; //溢出不换行
                &.is-current {
                    background-color: $--tree-node-hover-background-color;
                }
                &.foucs {
                    background-color: $--tree-node-hover-background-color;
                }
                &:hover {
                    background-color: $--tree-node-hover-background-color;
                }
    
                label.el-checkbox {
                    margin-right: 8px;
                }
    
                .el-virtual-tree-ceil-text {
                    font-size: $--font-size-base;
                }
            }

            // 高亮状态
            &.el-virtual-tree--highlight-current {
                & > .el-virtual-tree-ceil__content.is-current {
                    color: $--color-white;
                    background-color: $--color-primary;
                    // .el-virtual-tree-ceil-text{
                    //     color: $--color-white;
                    // }
                }
            }
        }

        // 禁用状态样式
        &.is-disabled {
            & > .el-virtual-tree-ceil__content {
                height: 100%;
                display: flex;
                align-items: center;
                overflow:hidden; //超出的文本隐藏
                text-overflow:ellipsis; //溢出用省略号显示
                white-space:nowrap; //溢出不换行
                &.is-checked {
                    background-color: $--tree-node-hover-background-color;
                }
            }
            // 高亮状态
            &.el-virtual-tree--highlight-current {
                & > .el-virtual-tree-ceil__content.is-checked {
                    color: $--color-white;
                    background-color: genColor($--color-primary, 4);
                    // .el-virtual-tree-ceil-text{
                    //     color: $--color-white;
                    // }
                }
            }
        }

        // 一般状态和禁用状态通用样式
        .el-virtual-tree-ceil__content {
            .el-virtual-tree-ceil-icon {
                padding: 6px;
                cursor: pointer;
                color: $--tree-expand-icon-color;
                font-size: 12px;
                text-indent: 0px;
    
                transform: rotate(0deg);
                transition: transform 0.3s ease-in-out;
    
                &.expanded {
                    transform: rotate(90deg);
                }
    
                &.is-leaf {
                    color: transparent;
                    cursor: default;
                }
            }
        }

    }

    &.el-virtual-tree--mini {
        .el-virtual-tree-ceil {
            .el-virtual-tree-ceil__content {
                .el-virtual-tree-ceil-text {
                    font-size: $--font-size-extra-small;
                }
            }
        }
        .el-tree__empty-text {
          font-size: $--font-size-extra-small;
        }
    }
    
    &.el-virtual-tree--small {
        .el-virtual-tree-ceil {
            .el-virtual-tree-ceil__content {
                .el-virtual-tree-ceil-text {
                    font-size: $--font-size-extra-small;
                }
            }
        }
        .el-tree__empty-text {
          font-size: $--font-size-extra-small;
        }
    }

    @include e(empty-block) {
        position: relative;
        min-height: 60px;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    
    @include e(empty-text) {
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translate(-50%, 0);
        color: $--color-text-secondary;
        font-size: $--font-size-base;
    }
}
