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

@php
    /*
    A status pill: the tone tinted behind, the tone's legible ink in front.

    Five screens each built this by hand — the same rounded-full, the same 14%
    color-mix, and the same mistake of setting the text to the fill colour.
    #f59e0b as 10px text on white is about 2:1; as a wash behind it, it is
    exactly right. Two different jobs, two different values.
    */
    [$fill, $ink] = match ($tone) {
        'success' => ['var(--brand-success)', 'var(--portal-success-ink)'],
        'warning' => ['var(--brand-warning)', 'var(--portal-warning-ink)'],
        'danger' => ['var(--brand-danger)', 'var(--portal-danger-ink)'],
        'brand' => ['var(--brand-500)', 'var(--portal-link)'],
        default => ['var(--portal-muted)', 'var(--portal-muted)'],
    };
@endphp

<span {{ $attributes->merge(['class' => 'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-bold']) }}
      style="background: color-mix(in oklab, {{ $fill }} 14%, var(--portal-surface)); color: {{ $ink }};">
    {{ $slot }}
</span>
