@use '../abstracts/mixins' as *;

.mobile-nav {
    display: none;

    @include media-down(md) {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 30;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        padding: var(--space-1) var(--space-2);
        padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom));

        &__item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            font-size: var(--fs-xs);
            color: var(--color-text-muted);
            text-decoration: none;
            padding: 6px 4px;

            &.is-active { color: var(--color-primary); }
            &.is-disabled { opacity: .4; pointer-events: none; }
        }
        &__icon { line-height: 1; font-size: 1.1rem; }
    }
}