/*
==========================================================

PremiumZone

Version :
1.0.0

File :
assets/css/google.css

Description :
PremiumZone Google Button

==========================================================
*/

/* ==========================================================
   BUTTON
========================================================== */

.pz-google-button{

    position:relative;

    width:100%;

    max-width:340px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    cursor:pointer;

    user-select:none;

    overflow:hidden;

    background:

        rgb(

            12,

            12,

            12

        );

    border:

        1px solid

        rgba(

            255,

            255,

            255,

            .18

        );

    transition:

        background .18s,

        border-color .18s,

        transform .18s,

        box-shadow .18s;

}

/* ==========================================================
   HOVER
========================================================== */

.pz-google-button:hover{

    border-color:

        rgba(

            0,

            243,

            255,

            .55

        );

    box-shadow:

        0 0 8px

        rgba(

            0,

            243,

            255,

            .12

        );

}

/* ==========================================================
   ACTIVE
========================================================== */

.pz-google-button:active{

    transform:

        scale(

            .985

        );

}

/* ==========================================================
   ICON
========================================================== */

.pz-google-icon{

    width:18px;

    height:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

/* ==========================================================
   LABEL
========================================================== */

.pz-google-label{

    color:

        #F5F5F5;

    font-size:

        13px;

    letter-spacing:

        1px;

    font-weight:

        600;

}

/* ==========================================================
   SCAN LINE
========================================================== */

.pz-google-scan{

    position:absolute;

    left:

        -40%;

    top:

        0;

    width:

        24%;

    height:

        100%;

    opacity:

        .18;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(

                0,

                243,

                255,

                .85

            ),

            transparent

        );

    animation:

        pz-google-scan

        3.8s

        linear

        infinite;

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes pz-google-scan{

    from{

        left:

            -40%;

    }

    to{

        left:

            120%;

    }

}

/* ==========================================================
   DISABLED
========================================================== */

.pz-google-button.loading{

    pointer-events:none;

    opacity:.7;

}

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

@media(

    max-width:768px

){

    .pz-google-button{

        max-width:100%;

        height:46px;

    }

}