// tree树形结构样式
.info-tree {
    height: 100%;
    padding: 10px 8px;
    :deep(.el-tree)  {
        height: 100%;
        overflow: auto;
        .el-tree-node__content {
            height: 30px;
            .el-tree-node__expand-icon:not(.is-leaf) {
                color: var(--text-color);
            }
        }
        .is-current > .el-tree-node__content {
            .custom-tree-node .name {
                color: var(--info-primary-color);
            }
        }
    }
    :deep(.el-tree-node__label) {
        width: calc(100% - 34px);
    }
    :deep(.el-tree.info-design){
        .el-tree-node {
            &:focus>.el-tree-node__content {
                // background-color: transparent;
            }
            .el-tree-node__content {
                &:hover {
                    // background-color: transparent;
                    .custom-tree-node {
                        background-color: var(--info-primary-color-2);
                    }
                }
            }
            // children 边线
            .el-tree-node__children {
                padding-left: 20px;
                .el-tree-node {
                    border-left: 1px solid var(--border-color);
                    position: relative;
                    &:last-child {
                        &::before {
                            content: '';
                            width: 2px;
                            height: 15px;
                            background-color: var(--bg-color);
                            position: absolute;
                            left: -1px;
                            bottom: 0;
                        }
                    }
                    &::after {
                        content: '';
                        width: 12px;
                        border-top: 1px solid var(--border-color);
                        position: absolute;
                        left: -1px;
                        top: 15px;
                    }
                    .el-tree-node__content {
                        padding-left: 8px !important;
                    }
                }
            }
        }
        >.el-tree-node { // level 1
            >.el-tree-node__children {
                padding-left: 12px;
            }
        }

        .el-tree-node.is-current {
            &>.el-tree-node__content {
                background-color: var(--info-primary-color-2);
                .name {
                    color: var(--info-primary-color);
                }
                .length {
                    color: var(--info-primary-color);
                }
            }
        }
    }
    :deep(.custom-tree-node) {
        width: 100%;
        height: 100%;
        color: var(--text-color);
        display: flex;
        align-items: center;
        padding: 0 5px;
        overflow: hidden;

        i {
            width: 18px;
        }
        .custom-button {
            color: var(--text-color);
        }
        .icon-img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
        }

        .name {
            -ms-flex: 1;
            flex: 1;
            height: 18px;
            line-height: 18px;
        }
        &.no-selected .name {
            opacity: 0.7;
        }

        .length {}
    }
    
    .is-filter {
        height: calc(100% - 50px);
    }
}