/* shortwind: dialog@0.0.1 sha:b4dbf853e99fce75 */

/* @guide
   A modal is three layers: @dialog-overlay (dimmed backdrop), @dialog (the
   centering wrapper), and @dialog-content (the panel). Structure the panel with
   @dialog-header and @dialog-footer. Don't put content styling on @dialog
   itself — it's only the positioner.
*/

/* Modal dialog wrapper — covers the viewport, centers content. */
@recipe dialog {
  fixed inset-0 z-50 flex items-center justify-center p-4
}

/* Dimmed overlay behind the dialog. */
@recipe dialog-overlay {
  fixed inset-0 z-40 bg-black/50
}

/* Dialog content panel. */
@recipe dialog-content {
  relative z-50 w-full max-w-md rounded-lg border border-border bg-popover text-popover-foreground p-6 shadow-xl
}

/* Dialog header region with title. */
@recipe dialog-header {
  mb-4 flex flex-col gap-1
}

/* Dialog footer with right-aligned actions. */
@recipe dialog-footer {
  mt-6 flex items-center justify-end gap-2
}