<c-vars variant="default"></c-vars>
<div
    class="
    inline-flex items-center rounded-full
    border px-2.5 py-0.5 text-xs font-semibold
    transition-colors focus:outline-none
    focus:ring-2 focus:ring-ring focus:ring-offset-2

    {% if variant == 'default' %}border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80
    {% elif variant == 'secondary' %}border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80
    {% elif variant == 'destructive' %}border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80
    {% elif variant == 'outline' %}text-foreground
    {% endif %}

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