@layer components {
.singlestage-alert,
.singlestage-alert-destructive {
@apply [&>svg]:size-4
[&>svg]:text-current
[&>svg]:translate-y-0.5
border
gap-y-0.5
grid
grid-cols-[0_1fr]
has-[>svg]:gap-x-3
has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
items-start
px-4
py-3
relative
rounded-lg
text-sm
w-full;
h2 {
@apply col-start-2
font-medium
line-clamp-1
min-h-4
tracking-tight;
}
section {
@apply [&_p]:leading-relaxed
col-start-2
gap-1
grid
justify-items-start
text-muted-foreground
text-sm;
ul {
@apply list-disc
list-inside
text-sm;
}
}
}
.singlestage-alert {
@apply bg-card
text-card-foreground;
}
.singlestage-alert-destructive {
@apply [&>svg]:text-current
bg-card
text-destructive;
section {
@apply text-destructive;
}
}
}