@if (!!navButtons().length) {
  <footer class="tw-bg-background tw-border-0 tw-border-t tw-border-border-base tw-border-solid">
    <div class="tw-max-w-screen-sm tw-mx-auto">
      <nav>
        <ul class="tw-flex tw-flex-1 tw-mb-0 tw-p-1">
          @for (button of navButtons(); track button.page) {
            <li class="tw-flex-1 tw-list-none tw-relative">
              <button
                class="tw-w-full tw-rounded-md tw-flex tw-flex-col tw-gap-0.5 tw-items-center tw-py-1 tw-px-2 bit-compact:tw-py-1 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-fg-brand tw-group/tab-nav-btn hover:tw-bg-bg-brand-softer focus-visible:tw-ring-2 focus-visible:tw-ring-inset focus-visible:tw-ring-border-focus focus-visible:tw-outline-none focus-visible:tw-text-fg-brand focus-visible:tw-bg-bg-brand-softer [&:hover:not([aria-current=page])_svg_path]:tw-fill-fg-brand [&:focus-visible:not([aria-current=page])_svg_path]:tw-fill-fg-brand"
                [class.tw-font-semibold]="rla.isActive"
                [class.tw-text-fg-brand]="rla.isActive"
                [class.tw-text-fg-body]="!rla.isActive"
                [routerLink]="button.page"
                [appA11yTitle]="buttonTitle(button)"
                routerLinkActive
                #rla="routerLinkActive"
                ariaCurrentWhenActive="page"
                type="button"
                role="link"
              >
                <div class="tw-relative">
                  @if (button.showBerry) {
                    <div class="tw-flex tw-absolute tw-top-0 tw-right-0">
                      <bit-berry type="status" variant="danger"></bit-berry>
                    </div>
                  }
                  <bit-svg
                    [content]="rla.isActive ? button.iconActive : button.icon"
                    aria-hidden="true"
                    class="tw-leading-3"
                  ></bit-svg>
                </div>
                <span class="tw-text-xs tw-truncate tw-max-w-full">
                  {{ button.label | i18n }}
                </span>
              </button>
            </li>
          }
        </ul>
      </nav>
    </div>
  </footer>
}