@props(['tone' => 'muted'])

@php
    $classes = match ($tone) {
        'ok' => 'bg-emerald-100 text-emerald-700',
        'warn' => 'bg-amber-100 text-amber-700',
        'bad' => 'bg-red-100 text-red-700',
        'info' => 'bg-blue-100 text-blue-700',
        default => 'bg-slate-200 text-slate-600',
    };
@endphp

<span
    {{ $attributes->class(['inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap', $classes]) }}>
    {{ $slot }}
</span>