/* =====================================================
   GLOBAL BOTTOM NAVIGATION
   FILE : navigation.css
   VERSION : 3.0.0
===================================================== */


/* =====================================================
   CONTAINER
===================================================== */

#bottom-navigation{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    height:76px;

    padding:0 12px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#FCFCFD;

    border-top:1px solid #E5E7EB;

    box-shadow:

        0 -8px 24px rgba(15,23,42,.08);

    z-index:999;

}


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

.nav-item{

    flex:1;

    height:100%;

    border:none;

    background:transparent;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:4px;

    cursor:pointer;

    transition:.25s ease;

}


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

.nav-icon{

    width:46px;

    height:34px;

    border-radius:999px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#9CA3AF;

    transition:.25s ease;

}


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

.material-symbols-rounded{

    font-size:24px;

    font-variation-settings:

        'FILL' 0,

        'wght' 500,

        'GRAD' 0,

        'opsz' 24;

}


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

.nav-label{

    font-size:12px;

    font-weight:500;

    color:#9CA3AF;

    transition:.25s ease;

}


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

.nav-item.active .nav-icon{

    background:#2563EB;

    color:#FFFFFF;

    transform:translateY(-3px);

    box-shadow:
        0 8px 18px rgba(37,99,235,.30);

}


.nav-item.active .material-symbols-rounded{

    font-variation-settings:

        'FILL' 1,

        'wght' 600,

        'GRAD' 0,

        'opsz' 24;

}


.nav-item.active .nav-label{

    color:#2563EB;

    font-weight:700;

}


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

.nav-item:hover .nav-icon{

    background:#F4F7FB;

    color:#2563EB;

}


.nav-item:hover .nav-label{

    color:#2563EB;

}


/* =====================================================
   CLICK
===================================================== */

.nav-item.active{

    background:#F3F4F6;

    border-radius:18px;

}