@props(['static' => false, 'invert' => true])
<form {{ $attributes->merge(['class' => 'h-auto flex items-stretch']) }} action="" method="get">
    <div class="relative h-auto w-full flex items-stretch">
        <input name="q" type="search" value="{{ request()->get('q') }}"
            class="{{ $invert ? 'pl-14' : 'pr-14' }} c-search block w-full h-auto p-4 text-sm border border-solid border-babyblue rounded-full placeholder:text-deepblue"
            placeholder="{{ __('messages._search.placeholder') }}" />
        <button type="submit" {{ $static ? 'disabled' : '' }} aria-label="{{ __('messages.buscar') }}"
            class="absolute {{ $invert ? 'start-4' : 'end-4' }} bottom-[50%] translate-y-[50%] focus:outline-none  text-deepblue font-medium rounded-lg text-sm px-2 py-2">
            <svg viewBox="0 0 18.146 18.146" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                    stroke-width="1.778px" transform="translate(2.179 3.387)">
                    <circle cx="7.111" cy="7.111" r="7.111" transform="translate(-1.29 -2.498)" />
                    <path d="m14.71 13.502-3.867-3.867" />
                </g>
            </svg>
        </button>
    </div>
</form>
<style>
    .c-search::-webkit-search-decoration,
    .c-search::-webkit-search-cancel-button,
    .c-search::-webkit-search-results-button,
    .c-search::-webkit-search-results-decoration {
        display: none;
    }
</style>