@props(['name' => ''])

<select
    name="{{ $name }}"
    {{ $attributes->merge(['class' => 'form-select small-input focus-glow custom-select' . ($errors->has($name) ? ' is-invalid' : '')]) }}
>
    {{ $slot }}
</select>

@if($errors->has($name))
    <div class="text-sm text-danger mt-1">
        {{ $errors->first($name) }}
    </div>
@endif

@once
    <style>
        .focus-glow:focus {
            outline: none;
            border-color: #3baeff !important;
            box-shadow: 0 0 5px 2px rgba(72, 127, 255, 0.3);
            transition: all 0.2s ease-in-out;
        }

        .small-input {
            font-size: 0.875rem !important;
            padding: 0.375rem 0.5rem !important;
            height: 2.25rem !important;
        }
        .custom-select {
            appearance: none;            /* Hides the default arrow */
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1.2em;
            padding-right: 2.5rem;       /* space for the custom arrow */
            border: 1px solid #ccc;
            border-radius: 0.375rem;
            padding: 0.5rem;
        }
    </style>
@endonce