#eef2ff
1<label class="group flex h-11 w-11 cursor-text items-center gap-2 overflow-hidden rounded-full bg-white px-3 shadow-lg shadow-indigo-900/10 ring-1 ring-indigo-100 transition-all duration-500 ease-out hover:w-[200px] focus-within:w-[200px] focus-within:ring-2 focus-within:ring-indigo-500 has-[input:not(:placeholder-shown)]:w-[200px]">2 <svg class="size-5 shrink-0 text-slate-500 transition group-focus-within:text-indigo-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>3 <input class="w-full min-w-0 bg-transparent text-sm text-slate-800 outline-none placeholder:text-slate-400" placeholder="Buscar receitas..." />4</label>