@if (rendered) {
  <div class="light-bottomsheet-mask" (click)="onMaskClick()"></div>

  <section class="light-bottomsheet-panel" [ngStyle]="style || { 'max-height': mobileDrawerHeight, height: 'auto' }">
    <div class="light-bottomsheet-content">
      @if (header || closable) {
        <header class="light-bottomsheet-header border-surface-border border-b">
          <span class="text-xl font-bold">{{ header }}</span>
          @if (closable) {
            <p-button
              type="button"
              icon="pi pi-times"
              text
              size="small"
              class="light-bottomsheet-close"
              (click)="onVisibilityChange(false)"
              aria-label="Close">
            </p-button>
          }
        </header>
      }
      <div class="light-bottomsheet-body p-4">
        <ng-content></ng-content>
      </div>
    </div>
  </section>
}