/* ==========================================
   MOBILE BOTTOM NAVIGATION
========================================== */

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


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

@media (max-width: 600px) {

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: 64px;

        display: flex;
        align-items: stretch;
        justify-content: space-around;

        background: #ffffff;

        border-top: 1px solid #e5e7eb;

        box-shadow:
            0 -4px 16px rgba(0, 0, 0, 0.08);

        z-index: 2000;

        padding-bottom: env(safe-area-inset-bottom);

        box-sizing: content-box;
    }


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

    .mobile-bottom-nav-item {
        position: relative;

        flex: 1;
        min-width: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        padding: 6px 2px;

        color: #6b7280;

        text-decoration: none;

        transition:
            color 0.2s ease,
            background 0.2s ease;
    }


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

    .mobile-bottom-nav-item
    .material-symbols-outlined {
        font-size: 23px;
        line-height: 1;

        transition:
            transform 0.2s ease,
            font-variation-settings 0.2s ease;
    }


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

    .mobile-bottom-nav-label {
        font-size: 10px;
        line-height: 1.2;

        font-weight: 600;

        white-space: nowrap;
    }


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

    .mobile-bottom-nav-item.active {
        color: #0050aa;
    }

    .mobile-bottom-nav-item.active
    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 1,
            'wght' 600,
            'GRAD' 0,
            'opsz' 24;

        transform: translateY(-1px);
    }


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

    .mobile-bottom-nav-item.active::before {
        content: "";

        position: absolute;

        top: 0;
        left: 50%;

        width: 28px;
        height: 3px;

        transform: translateX(-50%);

        border-radius: 0 0 4px 4px;

        background: #0050aa;
    }


    /* ==========================================
       PRESS FEEDBACK
    ========================================== */

    .mobile-bottom-nav-item:active {
        background: #f5f7fa;
    }


    /* ==========================================
       ADMIN
    ========================================== */

    #mobile-admin-nav[hidden] {
        display: none !important;
    }

}