<div
  x-show="open"
  x-transition:enter="ease-out duration-300"
  x-transition:enter-start="opacity-0"
  x-transition:enter-end="opacity-100"
  x-transition:leave="ease-in duration-200"
  x-transition:leave-start="opacity-100"
  x-transition:leave-end="opacity-0"
  class="fixed inset-0 z-50 flex items-center justify-center"
  x-cloak
  role="dialog"
  aria-modal="true"
>
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-background/80 backdrop-blur-xs" aria-hidden="true" @click="hideDialog"></div>

  <!-- Dialog -->
  <div
    x-transition:enter="ease-out duration-300"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="ease-in duration-200"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    @click.away="hideDialog"
    class="fixed z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full {% if class %}{{ class }}{% endif %}"
    x-init="$nextTick(() => { $el.querySelector('button, [tabindex], input, select, textarea') && $el.querySelector('button, [tabindex], input, select, textarea').focus() })"
    tabindex="-1"
    {{ attrs }}
  >
    <c-button
        type="button"
        variant="ghost"
        class="absolute right-4 top-4 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
        @click="hideDialog"
    >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
      <span class="sr-only">Close</span>
    </c-button>
    {{ slot }}
  </div>
</div>
