.search-bar{align-items:center;width:100%;max-width:640px;margin-inline:auto;display:flex;position:relative}.search-bar__icon{pointer-events:none;left:calc(var(--spacing,.25rem) * 5);color:var(--ink-muted);position:absolute}.search-bar__input{width:100%;height:3.75rem;padding-right:calc(var(--spacing,.25rem) * 12);padding-left:calc(var(--spacing,.25rem) * 14);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:var(--foreground);background:var(--surface-card);border:1px solid var(--border-default);box-shadow:0 6px 22px var(--foreground);border-radius:3.40282e38px}@supports (color:color-mix(in lab, red, red)){.search-bar__input{box-shadow:0 6px 22px color-mix(in srgb, var(--foreground) 7%, transparent)}}.search-bar__input{transition:border-color .15s,box-shadow .15s}.search-bar__input::placeholder{color:var(--ink-muted)}.search-bar__input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 4px var(--accent-primary), 0 6px 22px var(--foreground);outline:none}@supports (color:color-mix(in lab, red, red)){.search-bar__input:focus{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-primary) 16%, transparent), 0 6px 22px color-mix(in srgb, var(--foreground) 7%, transparent)}}.search-bar__input::-webkit-search-cancel-button{appearance:none}.search-bar__clear{right:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 7);width:calc(var(--spacing,.25rem) * 7);color:var(--ink-soft);background:var(--surface-icon);border-radius:3.40282e38px;justify-content:center;align-items:center;transition:color .2s,background .2s;display:flex;position:absolute}.search-bar__clear:hover{color:var(--foreground);background:var(--surface-badge)}