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

PremiumZone

Sprint :
PZ-005

File :
assets/css/dashboard/switch.css

Description :
Quick Switch Component

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

/* ==========================================================
   PZ COMPONENT : SWITCH
========================================================== */

.pz-switch{

    position:fixed;

    top:0;

    right:-300px;

    width:300px;

    height:100vh;

    background:#000000;

    border-left:1px solid #FFFFFF;

    display:flex;

    flex-direction:column;

    transition:right .25s ease;

    z-index:1000;

}

/* ==========================================================
   PZ STATE : OPEN
========================================================== */

.pz-switch-open{

    right:0;

}

/* ==========================================================
   PZ COMPONENT : HEADER
========================================================== */

.pz-switch-header{

    height:52px;

    border-bottom:1px solid #FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;

    letter-spacing:2px;

    color:#FFFFFF;

}

/* ==========================================================
   PZ COMPONENT : BUTTON
========================================================== */

.pz-switch-button{

    width:100%;

    height:50px;

    background:transparent;

    color:#FFFFFF;

    border:none;

    border-bottom:1px solid #222222;

    text-align:left;

    padding:0 20px;

    cursor:pointer;

    transition:
        background .15s ease,
        color .15s ease;

}

.pz-switch-button:hover{

    background:var(--pz-cyan);

    color:#000000;

}

/* ==========================================================
   PZ COMPONENT : TOGGLE
========================================================== */

.pz-switch-toggle{

    position:fixed;

    top:50%;

    right:0;

    transform:translateY(-50%);

    width:34px;

    height:120px;

    border:1px solid #FFFFFF;

    border-right:none;

    background:#000000;

    color:#FFFFFF;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:1001;

    transition:.2s;

}

.pz-switch-toggle:hover{

    background:#FFFFFF;

    color:#000000;

}

/* ==========================================================
   PZ COMPONENT : OVERLAY
========================================================== */

.pz-switch-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.2s;

    z-index:999;

}

.pz-switch-overlay-open{

    opacity:1;

    visibility:visible;

}