1/*
 2 * Alert — multi-class API
 3 *
 4 *   <div class="alert alert-success">…</div>
 5 *   <div class="alert alert-warning">…</div>
 6 *
 7 * Always pair `.admin-alert` (structure) with a tone modifier when you want
 8 * a status look: `.alert-{success,warning,danger,info}`. Plain `.admin-alert`
 9 * is the neutral surface (card background + foreground).
10 *
11 * The icon column is reserved when either a `<svg>` (raw SVG icon)
12 * or `<i>` (Bootstrap Icons font glyph via admin.Icon) is the first
13 * child. Authors can use either.
14 */
15@layer components {
16  .admin-alert {
17    @apply relative w-full border px-4 py-3 text-sm grid grid-cols-[0_1fr] gap-y-0.5 items-start;
18    border-radius: var(--radius-alert);
19    @apply bg-admin-card text-admin-card-foreground;
20
21    &:has(> svg),
22    &:has(> i) {
23      grid-template-columns: calc(var(--spacing) * 4) 1fr;
24      column-gap: calc(var(--spacing) * 3);
25    }
26
27    > svg {
28      @apply size-4 translate-y-0.5 text-current;
29    }
30    > i {
31      @apply translate-y-0.5 text-current;
32    }
33
34    > h2,
35    > h3,
36    > h4,
37    > h5,
38    > h6,
39    > strong,
40    > [data-title] {
41      @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
42    }
43    > section {
44      @apply text-admin-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
45
46      ul {
47        @apply list-inside list-disc text-sm;
48      }
49    }
50  }
51
52  .admin-alert-success {
53    @apply text-admin-success;
54
55    > section {
56      @apply text-admin-success;
57    }
58  }
59  .admin-alert-warning {
60    @apply text-admin-warning;
61
62    > section {
63      @apply text-admin-warning;
64    }
65  }
66  .admin-alert-danger {
67    @apply text-admin-danger;
68
69    > section {
70      @apply text-admin-danger;
71    }
72  }
73  .admin-alert-info {
74    @apply text-admin-info;
75
76    > section {
77      @apply text-admin-info;
78    }
79  }
80}