{{ $textColor := "text-gray-300" }}
{{ $fillColor := "fill-slate-400 dark:fill-slate-500" }}
{{ if .standalone }}
  {{ $textColor = "text-gray-800 dark:text-gray-300 " }}
  {{ $fillColor = "fill-slate-500 dark:fill-slate-400" }}
{{ end }}


<button
  {{ if .standalone }}
    x-data @click="$dispatch('search-toggle')"
  {{ end }}
  type="button"
  aria-label="Search"
  class="{{ $textColor }} grid cursor-pointer w-full lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
  <svg
    class="{{ $fillColor }} pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4">
    <use href="#icon--search"></use>
  </svg>
  <span class="hidden lg:inline">Search docs</span>
  <span class="hidden lg:inline">/</span>
</button>
