@props(['legenda', 'id', 'largura' => 'min-w-56'])

{{-- Caixa de escolha no desenho da barra de filtros (seletor de mês,
     alternador): mesma altura, borda, sombra e peso do texto. A seta é
     própria — a nativa muda de navegador para navegador. --}}
<div class="text-sm">
    <label for="{{ $id }}" class="block text-xs font-medium text-suave">{{ $legenda }}</label>
    <div class="relative mt-1">
        <select id="{{ $id }}" {{ $attributes->class([
            'block h-[2.125rem] w-full cursor-pointer appearance-none rounded-md border border-fio bg-superficie pr-9 pl-3',
            $largura,
            'font-medium text-tinta shadow-xs transition-colors hover:bg-chao',
            'disabled:cursor-not-allowed disabled:bg-chao disabled:text-suave',
            'focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-marca-600',
        ]) }}>
            {{ $slot }}
        </select>
        <svg class="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-suave" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
        </svg>
    </div>
</div>