basecoat/src/css/components/dialog.css

/* Dialog */
@layer components {
  .dialog {
    @apply inset-y-0 opacity-0 transition-all transition-discrete;

    &:is([open],:popover-open) {
      @apply opacity-100;

      &::backdrop {
        @apply opacity-100;
      }
      > * {
        @apply scale-100;
      }

      @starting-style {
        @apply opacity-0;

        &::backdrop {
          @apply opacity-0;
        }
        > * {
          @apply scale-95;
        }
      }
    }
    &::backdrop {
      @apply bg-black/50 opacity-0 transition-all transition-discrete;
    }
    > * {
      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%_-_2rem)];
      @apply transition-all scale-95;

      > header {
        @apply flex flex-col gap-2 text-center sm:text-left;

        > h2 {
          @apply text-lg leading-none font-semibold;
        }
        > p {
          @apply text-muted-foreground text-sm;
        }
      }
      > section {
        @apply flex-1 -mx-6 px-6;
      }
      > footer {
        @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
      }
      > button,
      > form[method='dialog'] {
        @apply absolute top-4 right-4;
      }
      > button,
      > form[method='dialog'] > button {
        @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
      }
    }
  }
}