<script lang="ts">
	interface Props {
		children: import('svelte').Snippet;
		color?: string;
		bg?: string;
		mono?: boolean;
		style?: string;
	}
	let { children, color, bg, mono = false, style = '' }: Props = $props();
</script>

<span
	class="ic-chip"
	style="
		{bg ? `background: ${bg};` : ''}
		{color ? `color: ${color};` : ''}
		{mono ? `font-family: var(--font-mono);` : ''}
		{style}
	"
>
	{@render children()}
</span>

<style>
	.ic-chip {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.2px;
		padding: 4px 8px;
		border-radius: 999px;
		background: var(--surface-2);
		color: var(--ink-2);
		white-space: nowrap;
	}
</style>
