<div x-data="{open: false}">
  <div @click="open = true">
    {{ .modal_button }}
  </div>
  <div
    x-cloak
    x-show="open"
    x-transition:enter.opacity.duration.200ms
    x-transition:leave.opacity.duration.300ms
    x-trap.inert.noscroll="open"
    @keydown.esc.window="open = false"
    @click.self="open = false"
    class="fixed inset-0 z-30 flex items-end justify-center bg-black/50 pb-8 backdrop-blur-xs sm:items-center"
    role="dialog"
    aria-modal="true"
    aria-label="Modal">
    <div
      x-show="open"
      x-transition:enter.opacity.scale.60.origin.top.right.duration.300ms.delay.200ms
      class="flex content-center items-center justify-center max-w-lg flex-col overflow-hidden bg-white dark:bg-blue-950 border-2 border-gray-300 dark:border-gray-800 shadow-lg sm:shadow-xl">
      <div
        class="border-b border-outline border-gray-300 dark:border-gray-800 p-2 lg:p-4">
        <h3 class="text-sm font-semibold">
          {{ .modal_title }}
        </h3>
      </div>
      {{ .modal_content }}
    </div>
  </div>
</div>
