<div class="tw-h-full tw-overflow-y-auto [&>*]:tw-h-full [&>*]:tw-overflow-y-auto">
  <ng-content></ng-content>
</div>
<footer class="tw-bg-background tw-border-0 tw-border-t tw-border-secondary-300 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-0">
        <li *ngFor="let button of navButtons" class="tw-flex-1 tw-list-none">
          <button
            class="tw-w-full tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 bit-compact:tw-pb-1 tw-pt-3 bit-compact:tw-pt-2 tw-bg-transparent tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
            [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
            title="{{ button.label | i18n }}"
            [routerLink]="button.page"
            routerLinkActive
            #rla="routerLinkActive"
            ariaCurrentWhenActive="page"
            type="button"
            role="link"
          >
            <i
              *ngIf="!rla.isActive"
              class="bwi bwi-lg bwi-{{ button.iconKey }}"
              aria-hidden="true"
            ></i>
            <i
              *ngIf="rla.isActive"
              class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
              aria-hidden="true"
            ></i>
            <span class="tw-truncate tw-max-w-full">
              {{ button.label | i18n }}
            </span>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</footer>
