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

@include b(login-page){
    background-image: var(--wet-login-bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    .#{$namespace}-tabs__nav{
        width: fit-content;
        margin: 0 auto;
        justify-content: center;
        float: none;
    }

    
    @include when(page){
        height: 100vh;
        width: 100vw;
        position: relative;
    }

    @include e(login-form){
        width: 350px;
        background-color: var(--wet-login-inner-bgcolor,#fff);
        padding: 20px;
        border-radius: 4px;

        @include when(page){
            background-color: var(--wet-login-inner-bgcolor,rgba(255,255,255,0.9));
            position: absolute;
            right: 200px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 50;
            box-shadow: 0px 0px 24px 0px rgb(0 0 0 / 10%);
            @media (max-width: 768px) {
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
    }

    @include m(form-logo){
        display: flex;
        justify-content: center;
        align-items: center;

        .title{
            inset-block-start: 2px;
            font-weight: 600;
            font-size: 32px;
            padding-left: 10px;
        }
    }

    @include m(form-subtitle){
        width: 80%;
        margin: 10px auto;
        font-size: 14px;
        color: getCssVar('text-color','secondary');
        text-align: center;
    }

    @include m(form-footer){
        margin-top: 15px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item{
            cursor: pointer;
        }
    }
}