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

<input
    name="{{ $name }}"
    value="{{ old($name, $value) }}"
    {{ $attributes->merge([
        'class' => 'form-control focus-glow small-input' . ($errors->has($name) ? ' is-invalid' : ''),
        'style' => $errors->has($name)
            ? 'border-color: #dc3545 !important; border-style: solid !important; border-width: 1px !important;'
            : 'border-color: #eae8e8 !important; border-style: solid !important; border-width: 1px !important;'
    ]) }}
/>

@error($name)
<p class="invalid-feedback d-block 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