@layer components{.search-field{inline-size:min(100%,32rem);margin-block-start:var(--space-xs);position:relative}.search-field__icon{block-size:1.25rem;inline-size:1.25rem;color:var(--ink-muted);pointer-events:none;position:absolute;inset-block-start:50%;inset-inline-start:1.125rem;translate:0 -50%}.search-field__input{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);min-block-size:3.5rem;inline-size:100%;color:var(--ink);font:400 1rem / 1 var(--font-text);transition:border-color .15s var(--ease-hover), background-color .15s var(--ease-hover), box-shadow .15s var(--ease-hover);padding:0 1.25rem 0 3.25rem}.search-field__input::placeholder{color:var(--ink-muted)}.search-field__input:hover{border-color:color-mix(in srgb, var(--ink) 40%, var(--border))}.search-field__input:focus{border-color:var(--ink);background:var(--ground);box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent);outline:none}.search-field__input::-webkit-search-cancel-button{cursor:pointer}}