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

PremiumZone

Sprint :
PZ-002

File :
assets/css/boot/progress.css

Description :
Boot Progress Style

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

/* ==========================================================
   PZ COMPONENT : PROGRESS
========================================================== */

#pz-progress{

    display:flex;

    gap:12px;

    align-items:center;

    height:24px;

}

/* ==========================================================
   PZ COMPONENT : BLOCK
========================================================== */

.pz-block{

    width:18px;

    height:18px;

    border:1px solid #FFFFFF;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:rotate(0deg);

    transition:
        transform .16s cubic-bezier(.22,1,.36,1);

}

/* ==========================================================
   PZ COMPONENT : CORE
========================================================== */

.pz-core{

    width:0%;

    height:0%;

    background:#FFFFFF;

    transform:rotate(0deg) scale(0);

    transition:
        transform .10s ease,
        width .08s linear,
        height .08s linear;

}

/* ==========================================================
   PZ STATE : WAVE
========================================================== */

.pz-wave{

    transform:rotate(52deg);

}

.pz-wave .pz-core{

    width:50%;

    height:50%;

    transform:rotate(-7deg) scale(1);

}

/* ==========================================================
   PZ STATE : ACTIVE
========================================================== */

.pz-active{

    transform:rotate(0deg);

}

.pz-active .pz-core{

    width:100%;

    height:100%;

    transform:rotate(0deg) scale(1);

}

/* ==========================================================
   PZ EFFECT : POP
========================================================== */

.pz-active{

    animation:pzPop .10s ease;

}

/* ==========================================================
   PZ ANIMATION : POP
========================================================== */

@keyframes pzPop{

    0%{

        transform:scale(.90);

    }

    70%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}