1/* Popover */
 2@layer components {
 3  /* Shared surface treatment for popover-family panels (popover,
 4     dropdown-menu, hovercard) so theming `--popover` / `--border`
 5     affects all of them in one place. */
 6  [data-popover],
 7  [data-hovercard] {
 8    @apply bg-admin-popover text-admin-popover-foreground border shadow-md;
 9    border-radius: var(--radius-popover);
10  }
11
12  [data-popover] {
13    @apply absolute overflow-x-hidden overflow-y-auto z-50 visible opacity-100 scale-100 min-w-full w-max transition-all;
14
15    &[aria-hidden='true'] {
16      @apply invisible opacity-0 scale-95;
17      
18      &:not([data-side]),
19      &[data-side='bottom'] {
20        @apply -translate-y-2;
21      }
22      &[data-side='top'] {
23        @apply translate-y-2;
24      }
25      &[data-side='left'] {
26        @apply translate-x-2;
27      }
28      &[data-side='right'] {
29        @apply -translate-x-2;
30      }
31    }
32    &:not([data-side]),
33    &[data-side='bottom'] {
34      @apply mt-1 top-full;
35    }
36    &[data-side='top'] {
37      @apply mb-1 bottom-full;
38    }
39    &[data-side='left'] {
40      @apply mr-1 right-full;
41    }
42    &[data-side='right'] {
43      @apply ml-1 left-full;
44    }
45    &:not([data-side]),
46    &[data-side='bottom'],
47    &[data-side='top'] {
48      &:not([data-align]),
49      &[data-align='start'] {
50        @apply left-0;
51      }
52      &[data-align='end'] {
53        @apply right-0;
54      }
55      &[data-align='center'] {
56        @apply left-1/2 -translate-x-1/2;
57      }
58    }
59    &[data-side='left'],
60    &[data-side='right'] {
61      &:not([data-align]),
62      &[data-align='start'] {
63        @apply top-0;
64      }
65      &[data-align='end'] {
66        @apply bottom-0;
67      }
68      &[data-align='center'] {
69        @apply top-1/2 -translate-y-1/2;
70      }
71    }
72  }
73  .admin-popover {
74    @apply relative inline-flex;
75
76    [data-popover] {
77      @apply p-4;
78    }
79  } 
80}