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

@include b(pro-form){
    overflow-x: hidden;
    @include e(row){
        flex-wrap: wrap;
    }

    @include e(actions){
        flex: 1;
    }

    @include e(actions-slot){
        display: flex;
        justify-content: flex-end;
    }
}

@include b(form-group){
    @include e(title){
        margin-bottom: 10px;
    }
}

@include b(setps-form){
    @include when(vertical){
        display: flex;
    }
    @include e(body){
        padding: 10px 20px;
    }

    @include e(body-content){
        width: var(--wet-body-content-w,100%);
        margin: 0 auto;
    }
}

@include b(query-form){
    .search-actions{
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;
    }
}

@include b(condition-fliter-form){
    background-color: #fff;
    padding: 20px;
    @include e(hd){
        margin-bottom: 15px;
    }

    @include e(body){
        display: flex;
    }

    @include e(body__hd){
        flex: 0 0 50px;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
    }
    @include e(body__conent){
        flex: 1;
    }

    @include e(condition-item){
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    @include e(body__hd-r){
        position: relative;
        overflow: hidden;
        flex: 1;

        &::after{
            content: '';
            position: absolute;
            left: 7px;
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 8px;
            border: 1px solid #ccc;
        }
        &.is-t{
            &::after{
                 top: 15px;
            }
        }

        &.is-b{
            &::after{
                 bottom: 15px;
            }
        }
    }

    @include e(footer){
        display: flex;
        justify-content: space-between;
    }
}