@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lepcha&display=swap');

$input-pd:1.25rem; //20px
$icon-pd:3.75rem; //60px
$boder-radius:1.875rem; //30px
$theme-color: rgba(var(--bs-brown-quicksand), 0.8);
$theme-color02:rgb(var(--bs-blue-soft));

@mixin effect($second:0.3s) {
    transform: translateY(150%); visibility:hidden; transition: all linear $second;
    &.effect{transform: translateY(0%); visibility:visible;}
}
 // 로그인 시안 A
.exam-container{height: 100vh; text-align: center; color:rgb(var(--bs-white)); background: linear-gradient(339deg, rgba(var(--bs-dark-green),0.8) 0%, rgb(var(--bs-orange-sand)) 100%, rgb(var(--bs-brown-taupe)) 50%); font-family: 'Noto Sans Lepcha', sans-serif;   

    .card{--bs-card-bg:inherit; width:100%; max-width:505px; border:none; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
        .card-body{--bs-card-bg: inherit;      
            .card-title{font-size:3rem; font-weight:900; margin-bottom:3rem;}
        }
    }
    
    form { 
        input.form-control{color:rgb(var(--bs-white)); background-color:rgba(var(--bs-brown-taupe), 0.3) !important; border-color:transparent; border-radius: $boder-radius; padding:$input-pd $input-pd $input-pd $icon-pd; margin-bottom:24px; 
            &::placeholder{color:rgb(var(--bs-white));}
            &:focus{box-shadow:0 0 0 0.25rem $theme-color;} 
            &:-webkit-autofill,    
            &:-internal-autofill-selected {transition: background-color 5000s ease-in-out 0s; color: rgb(var(--bs-white));  -webkit-text-fill-color: rgb(var(--bs-white));}                
        }   
        

        > div{transition:all linear 0.5s; @include effect;          
            i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem;}           
        }
    
        .form-check{text-align:left; padding-left: 2rem;    
            span{display: inline-block; vertical-align: sub;}
        }
        .forgot{position: absolute; top:50%; transform: translateY(-50%); right:5%;
            &:hover{animation: flash 2s infinite;}
        }

        a:hover,a:active{color:$theme-color;}
    }    
    
    .btn-primary{background-color:transparent; border-color:rgb(var(--bs-brown-quicksand)); border-radius: $boder-radius; padding:$input-pd; width:100%;
        &:active{--bs-btn-active-bg:rgb(var(--bs-white));  --bs-btn-active-color: rgb(var(--bs-brown-taupe)); border-color:transparent;}   
    }
    .text-start{position: relative; @include effect;}
    
}

 // 로그인 시안 B
.exam02-container{height:100%; background-color:rgb(var(--bs-gray-100)); padding-bottom:5%;
    .btn{border-radius: 30px; font-size:0.8rem; margin:2rem auto;  cursor: pointer;
        &:hover{background-color:inherit; color:var(--bs-btn-color);}

        button{padding:0.9vw 2.2vw; position:relative;
            .item{position: absolute; top:3%; left: 0; width:3rem; height:3rem; background-color: $theme-color02; border-radius: 50%;}
        }
    }
    .card{width:80%; max-width:550px; border:none; padding:8% 5% 5%; box-shadow: 5px 5px 10px rgb(var(--bs-gray-pastel)); border-radius: 0 30px 30px 0; background: url('/img/login_bg.png') no-repeat 50%; background-size:cover;
        .card-body{--bs-card-bg: inherit;      
            .card-title{font-size:1.8rem; font-weight:900; margin-bottom:3rem; text-align: center; color:$theme-color02; letter-spacing: 4px;}
        }
    }
    input:-internal-autofill-selected{background-color: transparent;}

    
    form {
        .form-control{
            background-color: transparent; border-width:0px 0px 1px 0px; border-color:rgb(var(--bs-black)); border-radius:0px; padding:0.93rem 0.75rem; 
        }        
        > div p {font-size:0.9rem; padding:0.75rem; font-weight:800; color:rgb(var(--bs-gray-cottonSeed));}
            
        .btn-primary{width:100%; margin:4rem 0 2rem; padding:15px 0; border-radius: 30px; background-color:$theme-color02;}
    
        .forgot{color:$theme-color02;}
    }


}
 // 가입하기 시안 B
.exam02-container.toggle{
    &::after{display:block; content: ''; clear: both;}
    .btn{float:right;}
    .card{float:right; clear:both; box-shadow:0px 1px 15px rgb(var(--bs-gray-pastel)); border-radius:30px 0 0 30px;}
}

//drag event
.drag-over {border: dashed 3px rgb(var(--bs-white));}
.hide {display: none;}

@keyframes flash { //text 깜빡임
    0%, 20%, 40%, to { opacity: 1; } 10%, 30% { opacity: 0; } 
}

// 반응형 사용 
@include mobile-500{
    .exam-container {
        .card {
            .card-body {
                .card-title{margin-bottom:2rem;}
            }
        }    

        form {padding:0 5%;            
            > div {
                i{top:54%; font-size:1.2rem;}
            }
            .forgot {font-size:0.95rem;}
        }
    }

    // login 시안 B
    .wrap:has(.exam02-container){min-width:unset;}
    .exam02-container{
        .btn{
            button{
                .item{width:2rem; height:2rem; left:-3%;}
            }
        }
        .card{width:85%;
            .card-body{
                .card-title{margin-bottom:2rem;}
            }
        }
        form{
            .btn-primary{margin:3vw 0 2rem;}
        }
    }
}
@include mobile-415{
    $input-pd:0.93rem; 
    $icon-pd:3.125rem;  

    .exam-container {
        form {
            .form-control {               
                padding:$input-pd $input-pd $input-pd $icon-pd;    
            }
            .btn-primary{
                padding:$input-pd;   
            }
        }
    }

    .exam02-container{
        .btn{
            button{
                .item{width:1.8rem; height:1.8rem;}
            }
        }
        
    }
}