/* ==========================================================
   VBC Framework
   Bottom Navigation (Mobile Only)
========================================================== */

.vbc-bottom-nav{
    display:none;
}

@media(max-width:1024px){

    .vbc-bottom-nav{
        display:flex;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:900;
        background:var(--vbc-color-primary);
        border-top:1px solid rgba(255,255,255,.12);
        padding-bottom:env(safe-area-inset-bottom);
    }

    .vbc-bottom-nav__item{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:4px;
        padding:8px 0;
        text-decoration:none;
        color:rgba(255,255,255,.65);
        font-size:10px;
        font-weight:600;
        letter-spacing:.02em;
    }

    .vbc-bottom-nav__item i{
        width:20px;
        height:20px;
        background-color:rgba(255,255,255,.65);
    }

    .vbc-bottom-nav__item.is-active{
        color:#fff;
    }

    .vbc-bottom-nav__item.is-active i{
        background-color:var(--vbc-color-accent);
    }

    .vbc-bottom-nav__icon-wrap{
        position:relative;
    }

    .vbc-bottom-nav__count{
        position:absolute;
        top:-4px;
        right:-8px;
        width:15px;
        height:15px;
        border-radius:50%;
        background:var(--vbc-color-accent);
        color:var(--vbc-color-primary);
        font-size:9px;
        font-style:normal;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /*
     * The bar is position:fixed, so it sits on top of page content
     * unless something reserves the space. Push the footer down by
     * the bar's own height rather than adding padding to body --
     * scoped to this component instead of a global base-layout rule.
     */

    .vbc-footer{
        margin-bottom:60px;
    }

}