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

PremiumZone

Version :
0.0.0

File :
assets/css/navigation/navigation.css

Description :
PremiumZone Navigation Style

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

/* ==========================================================
   NAVIGATION
========================================================== */

.pz-navigation{

    position:absolute;

    inset:0;

    overflow:hidden;

    touch-action:pan-y;

}

/* ==========================================================
   STACK
========================================================== */

.pz-navigation-stack{

    position:absolute;

    inset:0;

}

/* ==========================================================
   SCREEN
========================================================== */

.pz-screen{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    opacity:0;

    pointer-events:none;

    transform:translateX(0);

    transition:

        transform .25s ease,

        opacity .25s ease;

}

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

.pz-screen-active{

    opacity:1;

    pointer-events:auto;

    z-index:20;

}

/* ==========================================================
   LEFT
========================================================== */

.pz-screen-left{

    transform:translateX(-100%);

}

/* ==========================================================
   CENTER
========================================================== */

.pz-screen-center{

    transform:translateX(0);

}

/* ==========================================================
   RIGHT
========================================================== */

.pz-screen-right{

    transform:translateX(100%);

}

/* ==========================================================
   ENTER
========================================================== */

.pz-screen-enter{

    animation:

        pz-enter

        .25s

        ease;

}

@keyframes pz-enter{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ==========================================================
   EXIT
========================================================== */

.pz-screen-exit{

    animation:

        pz-exit

        .25s

        ease;

}

@keyframes pz-exit{

    from{

        opacity:1;

        transform:translateX(0);

    }

    to{

        opacity:0;

        transform:translateX(-30px);

    }

}

/* ==========================================================
   SWIPE
========================================================== */

.pz-swipe-disabled{

    pointer-events:none;

}

.pz-swipe-active{

    cursor:grab;

}

.pz-swipe-active:active{

    cursor:grabbing;

}

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

@media(

    max-width:480px

){

    .pz-screen{

        transition:

            transform .2s ease,

            opacity .2s ease;

    }

}