.search-bar{position:relative;display:flex;align-items:center;width:100%;max-width:480px}.search-bar-icon{position:absolute;left:var(--space-3);color:rgba(var(--color-snow-rgb),.4);pointer-events:none}.search-bar-input{width:100%;height:40px;padding-left:36px;padding-right:36px;border-radius:var(--radius-md);border:var(--border-width-hairline) solid rgba(var(--color-snow-rgb),.15);background:rgba(var(--color-snow-rgb),.06);color:var(--color-foreground);font-family:var(--font-roboto);font-size:16px;outline:none;transition:border-color .15s}.search-bar-input::placeholder{color:rgba(var(--color-snow-rgb),.4)}.search-bar-input:focus{border-color:var(--color-dark-sky)}.search-bar-clear{position:absolute;right:var(--space-2);display:inline-flex;align-items:center;justify-content:center;padding:4px;background:none;border:none;cursor:pointer;color:rgba(var(--color-snow-rgb),.4)}.search-bar-clear:hover{color:var(--color-snow)}.search-bar-clear:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);box-shadow:0 0 0 5px var(--color-midnight);outline-offset:2px;border-radius:var(--radius-sm)}.search-bar--lg .search-bar-input{height:var(--control-height-lg);border-color:var(--color-border);background:var(--color-card);font-size:var(--text-control-size)}