@if (open()) {
  <div class="fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-6">
    <div class="absolute inset-0 bg-black/50 animate-fade-in" (click)="onMaskClick()"></div>
    <div
      class="relative w-[85vw] max-w-sm rounded-xl border border-edge bg-surface p-5 shadow-overlay animate-scale-in"
      role="alertdialog"
      aria-modal="true"
      [attr.aria-label]="title() || null"
    >
      @if (title()) {
        <h3 class="text-center text-base font-semibold text-ink">{{ title() }}</h3>
      }
      @if (message()) {
        <p class="mt-2 text-center text-sm leading-relaxed text-muted">{{ message() }}</p>
      }
      <div class="mt-5 flex gap-3">
        @if (showCancel()) {
          <button
            type="button"
            class="h-11 flex-1 rounded-lg border border-edge bg-surface-2 text-sm font-medium text-ink transition-colors active:bg-surface-active"
            (click)="onCancel()"
          >
            {{ cancelText() }}
          </button>
        }
        <button
          type="button"
          class="h-11 flex-1 rounded-lg bg-primary text-sm font-medium text-primary-content transition-opacity active:opacity-90"
          (click)="onConfirm()"
        >
          {{ confirmText() }}
        </button>
      </div>
    </div>
  </div>
}