.dialog {
  @apply bg-background fixed bottom-0 left-0 z-50 grid h-auto max-h-[calc(100%-2rem)] w-full gap-6 overflow-y-auto rounded-xl border border-border p-6 shadow-lg duration-200 sm:top-1/2 sm:left-1/2 sm:bottom-auto sm:-translate-x-1/2 sm:-translate-y-1/2;
}

.dialog:not(.dialog--lg) {
  @apply sm:max-w-100;
}

.dialog--lg {
  @apply sm:max-w-lg;
}

.dialog-backdrop {
  @apply fixed inset-0 z-50 bg-black/80;
}

.dialog-content {
  @apply relative flex flex-col gap-1 text-center sm:text-left;
}

.dialog-close {
  @apply absolute top-0 right-0;
}

.dialog-title {
  @apply text-lg text-foreground font-semibold;
}

.dialog-subtitle {
  @apply text-sm text-muted-foreground mt-2;
}

.dialog-body {
  @apply text-muted-foreground text-sm;
}

.dialog-actions {
  @apply flex flex-col-reverse gap-2 sm:flex-row;
}