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

PremiumZone

Version :
0.0.0

File :
assets/css/button/button.css

Description :
PremiumZone Button Style

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

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

.pz-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-width:120px;

    min-height:42px;

    padding:0 18px;

    border:1px solid var(--pz-border);

    background:transparent;

    color:var(--pz-text);

    font-family:inherit;

    font-size:14px;

    cursor:pointer;

    user-select:none;

    transition:
        background .2s,
        color .2s,
        border-color .2s,
        transform .15s;

}

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

.pz-button:hover{

    background:var(--pz-hover);

}

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

.pz-button:active{

    transform:scale(.98);

}

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

.pz-button:disabled,

.pz-button.disabled{

    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;

}

/* ==========================================================
   FULL
========================================================== */

.pz-button-full{

    width:100%;

}

/* ==========================================================
   PRIMARY
========================================================== */

.pz-button-primary{

    background:var(--pz-border);

    color:var(--pz-bg);

}

.pz-button-primary:hover{

    opacity:.85;

}

/* ==========================================================
   DANGER
========================================================== */

.pz-button-danger{

    border-color:#ff4444;

    color:#ff4444;

}

.pz-button-danger:hover{

    background:rgba(255,68,68,.12);

}

/* ==========================================================
   SUCCESS
========================================================== */

.pz-button-success{

    border-color:#44ff88;

    color:#44ff88;

}

.pz-button-success:hover{

    background:rgba(68,255,136,.12);

}

/* ==========================================================
   SMALL
========================================================== */

.pz-button-small{

    min-height:34px;

    min-width:80px;

    padding:0 12px;

    font-size:12px;

}

/* ==========================================================
   LARGE
========================================================== */

.pz-button-large{

    min-height:52px;

    padding:0 24px;

    font-size:16px;

}

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

.pz-button-icon{

    width:42px;

    min-width:42px;

    padding:0;

}

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

@media(max-width:480px){

    .pz-button{

        width:100%;

    }

}