<c-vars variant="default" type="default"></c-vars>

<div
  class="
    relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7

    {% if variant == 'default' %}bg-background text-foreground
    {% elif variant == 'destructive' %}border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive
    {% endif %}

    {% if class %}
        {{ class }}
    {% endif %}
  "
  role="alert"
  {{ attrs }}
>
  {{ slot }}
</div>
