.search-bar{position:relative;display:flex;align-items:center}.search-bar svg{position:absolute;left:var(--space-3);color:var(--ui-500);pointer-events:none;width:18px;height:18px}.search-bar input{width:100%;padding:var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) * 2 + 18px);border-radius:var(--radius-2);border:var(--border);background-color:var(--ui-100);font-size:var(--font-s);color:var(--ui-800);transition:border-color .2s,background-color .2s}.search-bar input::placeholder{color:var(--ui-500)}.search-bar input:focus{outline:var(--focus-ring);border-color:var(--accent);background-color:#fff}