@props(['href'])

{{-- Link para outra tela. Texto puro se confundia com legenda; aqui ele tem
     contorno e seta, sem virar botão de ação: o peso continua o de um apoio. --}}
<a href="{{ $href }}" wire:navigate
   {{ $attributes->class([
       'group inline-flex shrink-0 items-center gap-1.5 rounded-sm border border-fio bg-superficie px-2 py-1',
       'text-xs font-medium whitespace-nowrap text-marca-700 shadow-xs transition-colors',
       'hover:border-marca-200 hover:bg-marca-50 hover:text-marca-800',
   ]) }}>
    {{ $slot }}
    <svg class="size-3.5 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 12h15m0 0-5.5-5.5M19 12l-5.5 5.5"/>
    </svg>
</a>