@use 'mixins/mixins' as *;

@include b('type-tree') {
    display: flex;
    flex-direction: column;
    background-color: var(--el-color-white);
    border-radius: 5px;
    height: 100%;

    @include e('head') {
        position: relative;
        padding: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--el-border-color);
        zoom: 1; 
        
        &::after {
            content: '';
            display: block; 
            height: 0; 
            visibility: hidden;  
            clear: both; 
        }
    }

    @include e('body') {
        flex: 1;

        .el-tree-node__content {
            position: relative;
            height: auto;
        }
        
        .el-tree-node.is-current > .el-tree-node__content {
            background-color: var(--el-color-primary-light-9);

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 5px;
                bottom: 5px;
                width: 3px;
                background-color: var(--el-color-primary);
                border-radius: 3px;
            }

        }
    }

    @include e('content') {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 10px 0;

        &-icon {
            margin-right: 5px;
        }
    }

    @include e('empty') {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    @include e('foot') {
        padding: 15px;
        box-sizing: border-box;
        border-top: 1px solid var(--el-border-color);
        zoom: 1; 
        
        &::after {
            content: '';
            display: block; 
            height: 0; 
            visibility: hidden;  
            clear: both; 
        }
    }
}