<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">
    <div class="tw-flex tw-flex-1">
      <a
        *ngFor="let button of navButtons"
        class="tw-group tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-w-1/4 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-500"
        [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
        [title]="button.label"
        [routerLink]="button.page"
        routerLinkActive
        #rla="routerLinkActive"
        ariaCurrentWhenActive="page"
      >
        <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"
          [ngClass]="!rla.isActive && 'group-hover:tw-underline'"
        >
          {{ button.label }}
        </span>
      </a>
    </div>
  </div>
</footer>
