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

@include b(pro-list){

    @include e(form){
        background-color: #fff;
        padding: 20px 20px 0 20px;
        margin-bottom: 15px;
        @include when(ghost){
            background-color: transparent;
            padding: 0;
            margin-bottom:0;
        }
    }

    @include e(tool-bar){
        padding:20px 10px 0 10px;
        @include when(card){
            padding: 0;
        }
    }

    @include e(panel){
        background-color: #fff;
        &.is-card{
            padding: var(--wet-prolist-gutter,0);
        }

        @include when(ghost){
            background-color: transparent;
            padding: 0;
        }
    }
    
    @include e(item){
        display: flex;
        align-items: center;
        list-style: none;
        // background-color: #fff;
        border-bottom: getCssVar('border');
        padding: 20px;
        &.is-card{
            display: block;
            border-bottom:none;
            padding: var(--wet-prolist-gutter) 0;
        }

        @include when(selected){
            background-color: getCssVar('color','primary-light-8');
        }
    }

    @include e(selection){
        padding-right: 12px;
    }

    @include e(selection-tip){
        padding-bottom: 12px;
        .#{$namespace}-alert__content{
            width: 100%;
        }

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

    @include e(hd){
        flex: 0 0 auto;

        @include e(image){
            width: 50px;
            height: 50px;
        }
    }

    @include e(body){
        padding: 0 12px;
        flex: 1;
    }

    @include e(pagination){
        background-color: #fff;
        padding: 10px;
        &.center{
            text-align: center;
        }
        &.left{
            text-align: left;
        }
        &.right{
            text-align: right;
        }

        @include when(ghost){
            background-color: transparent;
        }
    }

    @include e(pagination-inner){
        display: inline-block;
    }

    @include m(content-image){
        width: var(--wet-pro-list-image-s,50px);
        height: var(--wet-pro-list-image-s,50px);
    }

    @include e(card){
        &:hover{
            cursor: pointer;
            border-color: getCssVar('color','primary');
        }

        @include m(content){
            display: flex;
        }

        @include m(content-image){
            width: var(--wet-pro-list-image-s,60px);
            height: var(--wet-pro-list-image-s,60px);
        }

        @include m(content-text){
            flex: 1;
            padding-left:10px;
        }
    }
}