{{-- Alternador que por padrão alterna o dado 'ativo' do alpine --}}
@props([
    'nome',
    'ref' => 'ativo',
    'selecionado',
    'href'
])
<{{empty($href) ? 'button' : 'a'}}
    {{ $attributes->merge(['href' => empty($href) ? null : $href, 'class' => 'cursor-pointer pointer px-3 py-2 sm:px-6 sm:py-4 border-2 border-solid rounded-full border-transparent' . (!empty($selecionado) ? ' bg-white border-midnightblue-100' : '')]) }}
    @click="{{ empty($href) }} && 'startViewTransition' in document ? document.startViewTransition(() => {{$ref}} = '{{ $nome }}') : {{$ref}} = '{{ $nome }}'"
    :class="{'bg-white border-midnightblue-100': {{$ref}} === '{{ $nome }}', 'border-transparent': {{$ref}} !== '{{ $nome }}' }">
    {{ $slot }}
</{{empty($href) ? 'button' : 'a'}}>