@let mainContentId = "main-content";
<div class="tw-flex tw-size-full" [class.tw-bg-background-alt3]="rounded()">
  <div class="tw-flex tw-size-full" cdkTrapFocus>
    <div
      class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
    >
      <nav class="tw-bg-background-alt3 tw-rounded-md tw-rounded-t-none tw-py-2 tw-text-alt2">
        <a
          #skipLink
          bitLink
          class="tw-mx-6 focus-visible:before:!tw-ring-0"
          [fragment]="mainContentId"
          [routerLink]="[]"
          (click)="focusMainContent()"
          linkType="light"
          >{{ "skipToContent" | i18n }}</a
        >
      </nav>
    </div>
    <ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
    <main
      #main
      [id]="mainContentId"
      tabindex="-1"
      bitScrollLayoutHost
      class="tw-overflow-auto tw-max-h-full tw-min-w-0 tw-flex-1 tw-bg-background tw-p-8 tw-pt-6 tw-@container"
      [class.tw-rounded-tl-2xl]="rounded()"
    >
      <!-- ^ If updating this padding, also update the padding correction in bit-banner! ^ -->
      <ng-content></ng-content>
    </main>
    <!-- overlay backdrop for side-nav -->
    <div
      class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-bg-opacity-0 motion-safe:tw-transition-colors md:tw-hidden"
      [class]="sideNavService.open() ? 'tw-bg-opacity-30 md:tw-bg-opacity-0' : 'tw-bg-opacity-0'"
    >
      @if (sideNavService.open()) {
        <div (click)="sideNavService.toggle()" class="tw-pointer-events-auto tw-size-full"></div>
      }
    </div>
  </div>
  <div class="tw-absolute tw-z-50 tw-left-0 md:tw-sticky tw-top-0 tw-h-full md:tw-w-auto">
    <ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
  </div>
</div>