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

<input
    name="{{ $name }}"
    value="{{ old($name, $value) }}"
    {{ $attributes->merge(['class' => 'form-control focus-glow small-input']) }}
    style="border-color: #eae8e8 !important"
/>

@error($name)
<p class="text-sm text-danger mt-1">{{ $message }}</p>
@enderror

@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;
        }
    </style>
@endonce