@props(['state' => 'idle', 'off' => false])

<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-1.5 rounded-md border border-line-soft bg-raised px-2 py-1 text-[11px] font-semibold '.($off ? 'text-ink-3' : 'text-ink-2')]) }}>
    <x-status-dot :state="$state" class="!w-1.5 !h-1.5" />
    {{ $slot }}
</span>