.search-bar{border:1px solid var(--color-border);background:var(--color-bg-primary);height:30px;color:var(--color-text-faint);box-sizing:border-box;border-radius:4px;flex:1;align-items:center;gap:8px;min-width:0;max-width:400px;padding:0 .75rem;transition:background-color .1s,border-color .1s;display:flex}.search-bar:hover{background-color:var(--color-bg-hover);border-color:var(--color-text-muted)}.search-bar:focus-within{border-color:var(--color-border-focus);color:var(--color-text)}.search-bar--sm{border-radius:3px;gap:6px;max-width:none;height:auto;padding:.25rem .5rem;font-size:.75rem}.search-bar__input{color:var(--color-text);background:0 0;border:none;outline:none;width:100%;font-size:.8rem}.search-bar--sm .search-bar__input{font-size:.75rem}.search-bar__clear{appearance:none;width:16px;height:16px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.search-bar__clear:hover{background:var(--color-bg-hover);color:var(--color-text)}.search-bar__clear:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:1px}