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

@include b(pro-card){

    @include e(header-content){
        
        display: flex;
        justify-content: space-between;
        align-items: center;

        @include m(arrow-icon){
            transition: transform 0.3s;
            transform: rotate(90deg);

            @include when(collapse){
                transform: rotate(0);
            }
        }
    }

    @include when(collapse){

        & .#{$namespace}-card__header{
            border-bottom: none;
        }

        & > .#{$namespace}-card__body{
            display: none;
        }

        & > .#{$namespace}-card__footer{
            display: none;
        }
    }

    @include when(collapsible){
        .#{$namespace}-card__header{
            cursor: pointer;
        }
    }

    @include when(ghost){
        background-color: transparent;
        border: none;
        & > .#{$namespace}-card__header{
            padding: 0 0 calc(#{getCssVar('card', 'padding')} - 2px) 0;
            border-bottom:none;
        }
        & > .#{$namespace}-card__body{
            padding: 0;
        }
    }

    @include when(split){
        & > .#{$namespace}-card__body{
            padding: 0;
        }
    }

    @include when(no-border){
        border: none;
        & > .#{$namespace}-card__header{
            border-bottom:none;
        }
    }

    @include when(split-horizontal){
        border-radius: 0;
        border-inline-end: 1px solid getCssVar('card', 'border-color');
    }

     @include when(split-vertical){
        border-radius: 0;
        border-block-end: 1px solid getCssVar('card', 'border-color');
    }
}