@layer components {
.singlestage-card {
@apply bg-card
border
flex
flex-col
gap-6
py-6
rounded-xl
shadow-sm
text-card-foreground;
> header {
@apply @container/card-header
[.border-b]:pb-6
auto-rows-min
gap-1.5
grid
grid-rows-[auto_auto]
has-data-[slot=card-action]:grid-cols-[1fr_auto]
items-start
px-6;
h2 {
@apply font-semibold
leading-none;
}
p {
@apply text-muted-foreground
text-sm;
}
}
> section {
@apply px-6;
}
> footer {
@apply [.border-t]:pt-6
flex
items-center
px-6;
}
}
}