/* ==========================================================
Project : Compro Doodle
Module  : Page
File    : login.css
Version : 2.2.0
Author  : Doodle Engineering
========================================================== */


/* ==========================================================
   LOGIN PAGE
========================================================== */

.login-page{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    width:100%;

    padding-top:
        var(--space-64);

    padding-right:
        var(--space-20);

    padding-bottom:
        var(--space-64);

    padding-left:
        var(--space-20);

}


/* ==========================================================
   LOGIN CONTAINER
========================================================== */

.login-container{

    width:100%;

    max-width:460px;

    background:
        var(--color-surface);

    border-radius:
        var(--radius-2xl);

    padding:
        var(--space-48)
        var(--space-40);

    text-align:center;

    box-shadow:
        var(--shadow-lg);

}


/* ==========================================================
   LOGIN LOGO
========================================================== */

.login-logo{

    display:block;

    width:140px;

    height:auto;

    margin-right:auto;

    margin-bottom:
        var(--space-8);

    margin-left:auto;

}


/* ==========================================================
   LOGIN SUBTITLE
========================================================== */

.login-subtitle{

    margin-bottom:
        var(--space-24);

    color:
        var(--color-primary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-normal);

}


/* ==========================================================
   LOGIN TITLE
========================================================== */

.login-container h1{

    margin:
        0 0 var(--space-16);

    color:
        var(--color-text);

    font-family:
        var(--font-family-heading);

    font-size:
        var(--font-3xl);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-tight);

}


/* ==========================================================
   LOGIN DESCRIPTION
========================================================== */

.login-description{

    margin-bottom:
        var(--space-32);

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-regular);

    line-height:
        var(--line-relaxed);

}


/* ==========================================================
   GOOGLE LOGIN BUTTON
========================================================== */

.google-login-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:
        var(--space-12);

    width:100%;

    min-height:
        var(--button-height-md);

    padding:
        var(--space-16)
        var(--space-20);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius:
        var(--radius-pill);

    background:
        var(--color-surface);

    text-decoration:none;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);

}


/* ==========================================================
   GOOGLE LOGIN BUTTON HOVER
========================================================== */

.google-login-btn:hover{

    border-color:
        var(--color-primary);

    transform:
        translateY(
            calc(var(--space-4) * -1)
        );

    box-shadow:
        var(--shadow-md);

}


/* ==========================================================
   GOOGLE LOGIN ICON
========================================================== */

.google-icon{

    display:block;

    width:
        var(--icon-md);

    height:
        var(--icon-md);

    object-fit:
        contain;

}


/* ==========================================================
   GOOGLE LOGIN TEXT
========================================================== */

.google-login-btn span{

    color:
        var(--color-text);

    font-family:
        var(--font-family-primary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-normal);

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .login-page{

        padding-top:
            var(--space-48);

        padding-right:
            var(--space-16);

        padding-bottom:
            var(--space-48);

        padding-left:
            var(--space-16);

    }


    .login-container{

        padding:
            var(--space-40)
            var(--space-24);

        border-radius:
            var(--radius-xl);

    }


    .login-logo{

        width:
            140px;

    }


    .login-container h1{

        font-size:
            var(--font-2xl);

    }

}