.aw-bottom-bar {
    --icon-color: rgba(var(--c-on-surface-rgb), 0.5);
    --icon-color-active: var(--c-accent, currentColor);

    @apply bg-surface;

    display: flex;
    box-shadow: none;
    border-top: 1px solid rgba(var(--c-on-surface-rgb), 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0);

    position: fixed;
    bottom: 0;
    min-height: 3.5rem;
    width: 100%;
    z-index: 19;

    & > * {
        flex-basis: 9rem;
        flex-grow: 1;
        flex-shrink: 1;
    }

    .aw-icon-menu-item {
        max-width: 9rem;
        max-width: min(var(--item-width-percent, 100%), 9rem);
    }

    &:before,
    &:after {
        content: '';
        display: block;
        flex-grow: 1;
        flex-shrink: 10;
    }
}