/* ==========================================================================
   Mobile Navigation (Updated to MD3 Navbar Spec May 2025)
   ========================================================================== */

.mobile-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px; /* Updated to MD3 spec: 64dp */
    z-index: var(--layer-top);
    box-shadow: var(--elevation-2); /* Nav bar container elevation: md.sys.elevation.level2 */
}

.navigation-bar {
    display: flex;
    justify-content: space-around;
    height: 100%;
    width: 100%;
    background: var(--layer-container); /* Nav bar container color */
    border-radius: 0; /* Nav bar shape: md.sys.shape.corner.none */

    .navigation-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        color: var(--on-layer-widget); /* Nav bar item inactive label and icon */
        text-decoration: none;
        padding: var(--size-2) 0;
        transition: all 0.2s var(--ease-standard);
        position: relative;
        font-size: 12px; /* Nav bar item label font size: 12sp */
        /* Font-tracking */
        letter-spacing: 0.5px;;
        border-radius: var(--radius-full); /* Nav bar item shape: md.sys.shape.corner.full */
        .filled {
            border-radius: var(--radius-large);
            background-color: var(--primary); /* Nav bar item filled color */
            color: var(--on-primary); /* Nav bar item filled label text color */
        }
        
        svg {
            width: 24px; /* Nav bar item icon size: 24dp */
            height: 24px;
            margin-bottom: 4px; /* Space between icon and label: 4dp */
        }
        
        span {
            font-size: var(--font-size-label-medium);
            text-transform: capitalize;
        }
        
        &.active {
            color: var(--secondary); /* Nav bar item active label text color */
            
            svg {
                color: var(--on-secondary-container); /* Nav bar item active icon color */
            }
            
            &::before {
                content: "";
                position: absolute;
                top: 10px;
                left: 50%;
                transform: translateX(-50%);
                width: 56px;
                height: 32px;
                background-color: var(--secondary-container); /* Nav bar item indicator color */
                border-radius: var(--radius-full);
                z-index: -1;
            }
        }

        /* State interactions */
        &:not(.active):hover {
            background-color: transparent;
            
            &::after {
                content: "";
                position: absolute;
                inset: 8px;
                background-color: var(--on-layer-widget);
                opacity: 0.08;
                border-radius: var(--radius-full);
                z-index: -1;
            }
        }
        
        &:not(.active):focus-visible {
            outline: none;
            
            &::after {
                content: "";
                position: absolute;
                inset: 8px;
                background-color: var(--on-layer-widget);
                opacity: 0.12;
                border-radius: var(--radius-full);
                z-index: -1;
            }
        }
        
        &:not(.active):active::after {
            content: "";
            position: absolute;
            inset: 8px;
            background-color: var(--on-layer-widget);
            opacity: 0.12;
            border-radius: var(--radius-full);
            z-index: -1;
        }
    }
}


/* Medium screen adaptation for horizontal nav items */
@media (min-width: 600px) and (max-width: 1023px) {
    .mobile-navigation {
        height: 64px;
    }
    
    .bottom-nav-item {
        flex-direction: row;
        justify-content: center;
        gap: 4px;
        
        svg {
            margin-bottom: 0;
        }
        
        &.active::before {
            top: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 16px);
            max-width: 80px;
            height: 40px;
        }
    }
}