@use 'element-plus/theme-chalk/src/mixins/mixins.scss' as *;

@include b(pro-table){
    display: flex;
    flex-direction: column;
    
    @include when(fill){
        height: 100%;
    }

    @include when(card-bordered){
        .#{$namespace}-pro-table__header{
            border: 1px solid getCssVar('border-color');
        }
        .#{$namespace}-pro-table__body{
            border: 1px solid getCssVar('border-color');
        }
    }

    @include e(header){
        &{
            border-radius: getCssVar('border-radius-base');
            padding: 20px 20px 2px 20px;
            background-color: #fff;
            margin-bottom: 15px;
        }
        .search-actions{
            display: flex;
            align-items: center;
            flex: 1;
            justify-content: flex-end;
        }
        @include when(small){
            padding: 10px 10px 2px 10px;
        }
    }

    @include e(body){
        flex: 1;
        background-color: #fff;
        border-radius: getCssVar('border-radius-base');
        padding: 20px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: auto;
        .tabel-body-inner{
            flex: 1;
            overflow: auto;
        }
        @include when(small){
            padding: 10px;
        }
    }

    @include e(footer){
        flex: 0 0 auto;
        background-color: #fff;
        padding: 20px 20px 0 20px;
        &.center{
            text-align: center;
        }
        &.left{
            text-align: left;
        }
        &.right{
            text-align: right;
        }

        .#{$namespace}-pager{
            padding-left: 0;
        }
        @include when(small){
            padding: 10px 10px 0 10px;
        }
    }
    @include e(pagination-inner){
        display: inline-block;
    }

    .tabel-body-tool{
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        align-items: center;
        &--title{
            color: getCssVar('text-color','primary');
            font-size: getCssVar('font-size','base');
        }
    }

    @include b('tabel-tools'){
        display: flex;
        align-items: center;
        &>.table-tool-icon{
            margin: 0 8px;
            cursor: pointer;
            &:hover{
                color: getCssVar(color,primary);
            }
        }

        @include e(cols-display){
            .check-all__inner{
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .cols__inner{
                padding-left: 15px;
            }
        }
    }

    @include e(toolsizeitem){
        @include when(actived){
            color: getCssVar('dropdown','menuItem-hover-color');
        }
    }
}