1/* Tooltip */
 2@layer components {
 3  [data-tooltip] {
 4    @apply relative;
 5
 6    &:before {
 7      @apply absolute content-[attr(data-tooltip)] bg-admin-foreground text-admin-background z-[60] truncate max-w-xs w-fit px-3 py-1.5 text-xs invisible opacity-0 scale-95 transition-all pointer-events-none;
 8      border-radius: var(--radius-tooltip);
 9    }
10    &:hover:before {
11      @apply visible opacity-100 scale-100;
12    }
13    &:focus-visible:not(:hover):before {
14      @apply hidden;
15    }
16    &:not([data-side]),
17    &[data-side='top'] {
18    @apply before:bottom-full before:mb-1.5 before:translate-y-2 hover:before:translate-y-0 ;
19    }
20    &[data-side='bottom'] {
21      @apply before:top-full before:mt-1.5 before:-translate-y-2 hover:before:translate-y-0 ;
22    }
23    &:not([data-side]),
24    &[data-side='top'],
25    &[data-side='bottom'] {
26      &[data-align='start'] {
27        @apply before:left-0;
28      }
29      &[data-align='end'] {
30        @apply before:right-0;
31      }
32      &:not([data-align]),
33      &[data-align='center'] {
34        @apply before:left-1/2 before:-translate-x-1/2; 
35      }
36    }
37    &[data-side='left'] {
38      @apply before:right-full before:mr-1.5 before:translate-x-2 hover:before:translate-x-0;
39    }
40    &[data-side='right'] {
41      @apply before:left-full before:ml-1.5 before:-translate-x-2 hover:before:translate-x-0;
42    }
43    &[data-side='left'],
44    &[data-side='right'] {
45      &[data-align='start'] {
46        @apply before:top-0;
47      }
48      &[data-align='end'] {
49        @apply before:bottom-0;
50      }
51      &:not([data-align]),
52      &[data-align='center'] {
53        @apply before:top-1/2 before:-translate-y-1/2;
54      }
55    }
56  }
57}