{{--
    « Suivre » en toutes lettres tant qu'on ne suit pas, « Suivi » avec une coche
    une fois actif. Le changement de mot porte l'état à lui seul : un bouton dont
    seule la couleur changerait laisserait deviner lequel des deux sens est en
    cours.
--}}
<button
    type="button"
    wire:click="toggle"
    wire:loading.attr="disabled"
    title="{{ $isFollowed ? 'Ne plus suivre' : 'Suivre — recevoir les notifications de cet objet' }}"
    aria-pressed="{{ $isFollowed ? 'true' : 'false' }}"
    aria-label="{{ $isFollowed ? 'Ne plus suivre' : 'Suivre' }}"
    @class([
        'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-semibold transition',
        'border-primary-200 bg-primary-50 text-primary-700 hover:bg-primary-100 dark:border-primary-500/30 dark:bg-primary-500/10 dark:text-primary-300' => $isFollowed,
        'border-gray-200 bg-white text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/5' => ! $isFollowed,
        $width_adjusted,
    ])
>
    <x-filament::icon
        :icon="$isFollowed ? 'heroicon-m-check' : 'heroicon-o-bell-alert'"
        class="h-3.5 w-3.5 shrink-0"
    />
    @unless ($compact)
        <span>{{ $isFollowed ? 'Suivi' : 'Suivre' }}</span>
    @endunless
</button>