<script lang="ts">
let { text, color = 'var(--fg-dim)' }: { text: string; color?: string } = $props();
</script>
<span
class="badge"
style:background="color-mix(in srgb, {color} 20%, transparent)"
style:color={color}
>{text}</span>
<style>
.badge {
display: inline-block;
font-size: 0.7rem;
padding: 0.1rem 0.4rem;
border-radius: 3px;
letter-spacing: 0.03em;
white-space: nowrap;
vertical-align: middle;
}
</style>