/*
=================================================
JATAÍ FRAMEWORK

Component: 2 (NAVEGAÇÃO)

Version: 2.4.0

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

/*
=================================================
ITEM 1
VISIBILIDADE POR DISPOSITIVO
=================================================
*/

.jatai-sidebar,
.jatai-mobile,
.jatai-tablet{

    display:none !important;

}

.jatai-sidebar.jatai-sidebar-ativa,
.jatai-mobile.jatai-mobile-ativa,
.jatai-tablet.jatai-tablet-ativa{

    display:flex !important;

}

/*
=================================================
ITEM 2
BOTTOM SHEET
=================================================
*/

.jatai-bottomsheet{

    transform:translateY(120%);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        opacity .25s;

}

.jatai-mobile.jatai-bottomsheet-opened
.jatai-bottomsheet{

    transform:translateY(0);

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

body.jatai-scroll-lock{

    overflow:hidden;

}

/*
=================================================
ITEM 2.1 MOBILE - EVENTOS
=================================================
*/

/*
Container principal não captura cliques
*/

.jatai-mobile{

    pointer-events:none;

}

/*
Barra captura cliques
*/

.jatai-mobile-bar{

    pointer-events:auto;

}

/*
Bottom Sheet captura cliques
*/

.jatai-bottomsheet{

    pointer-events:auto;

}

/*
=================================================
MOBILE BAR ATIVA / HOVER
=================================================
*/

/*
=========================================
ITEM
=========================================
*/

.jatai-mobile-nav-item{

    border-radius:18px;

    transition:

        background-color .35s cubic-bezier(.22,1,.36,1),

        transform .35s cubic-bezier(.22,1,.36,1),

        box-shadow .35s cubic-bezier(.22,1,.36,1);

}

/*
=========================================
ÍCONE
=========================================
*/

.jatai-mobile-nav-icon{

    transition:

        color .30s ease,

        transform .35s cubic-bezier(.22,1,.36,1);

}

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

.jatai-mobile-nav-item:hover{

    background:var(--jatai-nav-active-bg);

    transform:translateY(-3px);

    box-shadow:

        0 10px 24px rgba(0,0,0,.08);

}

.jatai-mobile-nav-item:hover
.jatai-mobile-nav-icon{

    color:var(--jatai-nav-active-text);

}

/*
=========================================
ATIVO
=========================================
*/

.jatai-mobile-nav-item.jatai-nav-active{

    background:var(--jatai-nav-active-bg);

    transform:translateY(-3px);

    box-shadow:

        0 10px 24px rgba(0,0,0,.08);

}

.jatai-mobile-nav-item.jatai-nav-active
.jatai-mobile-nav-icon{

    color:var(--jatai-nav-active-text);

}

/*
=================================================
ITEM 3
TABLET BAR
=================================================
*/

.jatai-tablet-bar{

    width:80px;

    min-width:80px;

    max-width:80px;

    overflow:visible;

    transition:
        width .35s cubic-bezier(.22,1,.36,1),
        min-width .35s cubic-bezier(.22,1,.36,1),
        max-width .35s cubic-bezier(.22,1,.36,1);

}

.jatai-tablet-bar.jatai-tablet-bar-opened{

    width:280px;

    min-width:280px;

    max-width:280px;

}

.jatai-tablet{

    width:100%;

    min-width:100%;

    max-width:100%;

}

.jatai-tablet-navigation{

    width:100%;

}

.jatai-tablet-nav-item{

    width:100%;

}

.jatai-tablet-user-name{

    opacity:0;

    transform:translateX(-18px);

    white-space:nowrap;

    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.22,1,.36,1);

}

.jatai-tablet-bar.jatai-tablet-bar-opened
.jatai-tablet-user-name{

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

}

.jatai-tablet-nav-label{

    opacity:0;

    transform:translateX(-18px);

    white-space:nowrap;

    pointer-events:none;

    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.22,1,.36,1);

}

.jatai-tablet-bar.jatai-tablet-bar-opened
.jatai-tablet-nav-label{

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

}

.jatai-tablet-toggle-button{

    transition:none;

}

.jatai-tablet-toggle-icon{

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

    transform-origin:center;

}

.jatai-tablet-bar.jatai-tablet-bar-opened
.jatai-tablet-toggle-icon{

    transform:scaleX(-1);

}

/*
=================================================
TABLET BAR
ESTADO DOS ITENS
=================================================
*/

/*
=========================================
ITEM
=========================================
*/

.jatai-tablet-nav-item{

    border-radius:18px;

    transition:

        background-color .35s cubic-bezier(.22,1,.36,1),

        transform .35s cubic-bezier(.22,1,.36,1),

        box-shadow .35s cubic-bezier(.22,1,.36,1);

}

/*
=========================================
ÍCONE
=========================================
*/

.jatai-tablet-nav-icon{

    transition:

        color .30s ease,

        transform .35s cubic-bezier(.22,1,.36,1);

}

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

.jatai-tablet-nav-label{

    transition:

        color .30s ease;

}

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

.jatai-tablet-nav-item:hover{

    background:var(--jatai-nav-active-bg);

    box-shadow:

        0 12px 28px rgba(0,0,0,.08);

}

.jatai-tablet-nav-item:hover
.jatai-tablet-nav-icon,

.jatai-tablet-nav-item:hover
.jatai-tablet-nav-label{

    color:var(--jatai-nav-active-text);

}

/*
=========================================
ATIVO
=========================================
*/

.jatai-tablet-nav-item.jatai-nav-active{

    background:var(--jatai-nav-active-bg);

    box-shadow:

        0 12px 28px rgba(0,0,0,.08);

}

.jatai-tablet-nav-item.jatai-nav-active
.jatai-tablet-nav-icon,

.jatai-tablet-nav-item.jatai-nav-active
.jatai-tablet-nav-label{

    color:var(--jatai-nav-active-text);

}

/*
=================================================
ITEM 4
SIDEBAR BAR E CORES POR ROLE
=================================================
*/

/*
=========================================
ROLE - GESTORA
=========================================
*/

.sidebar-gestora,
.tablet-gestora,
.mobile-gestora{

    --jatai-nav-active-bg:#E7DEB2;

    --jatai-nav-active-text:#8E7B0F;

}

/*
=========================================
ROLE - TEACHER
=========================================
*/

.sidebar-teacher,
.tablet-teacher,
.mobile-teacher{

    --jatai-nav-active-bg:#CFE7B8;

    --jatai-nav-active-text:#528C22;

}

/*
=========================================
ROLE - ALUNA
=========================================
*/

.sidebar-aluna,
.tablet-aluna,
.mobile-aluna{

    --jatai-nav-active-bg:#EFD4C8;

    --jatai-nav-active-text:#A85A3D;

}

/*
=========================================
SIDEBAR - HOVER
=========================================
*/

.jatai-sidebar-nav-item{

    transition:

        background-color .35s cubic-bezier(.22,1,.36,1),

        transform .35s cubic-bezier(.22,1,.36,1),

        box-shadow .35s cubic-bezier(.22,1,.36,1);

}

.jatai-sidebar-nav-item:hover{

    background:var(--jatai-nav-active-bg);

    box-shadow:

        0 10px 24px rgba(0,0,0,.06);

}

/*
=========================================
SIDEBAR - LISTA
=========================================
*/

.jatai-sidebar-nav-list{

    transition:

        color .30s ease;

}

.jatai-sidebar-nav-item:hover
.jatai-sidebar-nav-list{

    color:var(--jatai-nav-active-text);

}

/*
=========================================
SIDEBAR - ATIVO
=========================================
*/

.jatai-sidebar-nav-item.jatai-nav-active{

    background:var(--jatai-nav-active-bg);


    box-shadow:

        0 12px 28px rgba(0,0,0,.08);

}

.jatai-sidebar-nav-item.jatai-nav-active
.jatai-sidebar-nav-list{

    color:var(--jatai-nav-active-text);

}