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


@include b(guide){
    border-radius: var(--wet-guide-radius, 2px);
    position: fixed;
    z-index: 1000;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
    --wet-guide-mask-bg:rgba(0, 0, 0, 0.6);

    @include when(mask){
        box-shadow: 0 0 0 0 var(--wet-guide-mask-bg),  var(--wet-guide-mask-bg) 0 0 0 calc(10 * 100vw);
    }

    @include e(gide-mask){
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    @include e(mask-popover){
        background-color: var(--wet-guide-item-bg,getCssVar('color','white'));
    }

    @include e(popover){
        background-color: var(--wet-guide-item-bg,getCssVar('color','primary'))!important;
        .#{$namespace + '-popper__arrow'}::before {
            border: 1px solid getCssVar('color','primary')!important;
            background: getCssVar('color','primary')!important;
            right: 0;
        }
    }


    @include e(reference){
        width: 100%;
        height: 100%;
    }

    @include e(header){
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        color:getCssVar('color','white');
        font-size: 16px;

        .close{
            cursor: pointer;
            color:getCssVar('color','white');
        }
        @include when(mask){
            color: getCssVar('text-color', 'primary');

            .close{
                cursor: pointer;
                color: getCssVar('text-color', 'primary');
            }
        }
    }

    @include e(description){
        width: fit-content;
        padding-bottom: 12px;
        color: getCssVar('color', 'white');
        font-size: 14px;
        @include when(mask){
            color: getCssVar('text-color', 'primary');
        }
    }

    @include e(footer){
        display: flex;
        justify-content: space-between;
        .index-dots{
            margin-right: 10px;
        }
        .index-dot{
            width: 6px;
            height: 6px;
            background-color: getCssVar('color','primary','light-5');
            border-radius: 50%;
            &.is-active{
                background-color: getCssVar('color','primary','light-9');
            }
            @include when(mask){
                background-color: getCssVar('color','primary','light-8');
                &.is-active{
                    background-color: getCssVar('color','primary');
                }
            }
        }
        .actions-btnbox{
            display: flex;
            align-items: center;
        }
    }
}