1/* Dialog */
 2@layer components {
 3  .admin-dialog {
 4    @apply inset-y-0 opacity-0 transition-all transition-discrete;
 5
 6    &:is([open],:popover-open) {
 7      @apply opacity-100;
 8
 9      &::backdrop {
10        @apply opacity-100;
11      }
12      > * {
13        @apply scale-100;
14      }
15
16      @starting-style {
17        @apply opacity-0;
18
19        &::backdrop {
20          @apply opacity-0;
21        }
22        > * {
23          @apply scale-95;
24        }
25      }
26    }
27    &::backdrop {
28      @apply bg-black/50 opacity-0 transition-all transition-discrete;
29    }
30    > * {
31      @apply bg-admin-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 border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%_-_2rem)];
32      border-radius: var(--radius-dialog);
33      @apply transition-all scale-95;
34
35      > header {
36        @apply flex flex-col gap-2 text-center sm:text-left;
37
38        > h2 {
39          @apply text-lg leading-none font-semibold;
40        }
41        > p {
42          @apply text-admin-muted-foreground text-sm;
43        }
44      }
45      > section {
46        @apply flex-1 -mx-6 px-6;
47      }
48      > footer {
49        @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
50      }
51      > button,
52      > form[method='dialog'] {
53        @apply absolute top-4 right-4;
54      }
55      > button,
56      > form[method='dialog'] > button {
57        @apply ring-offset-admin-background focus:ring-admin-ring data-[state=open]:bg-admin-accent data-[state=open]:text-admin-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;
58      }
59    }
60  }
61}