.sb{width:100%;margin:0;display:block;position:relative}.sb__input{background:var(--color-surface-2);width:100%;height:44px;color:var(--color-text-primary);font:400 16px var(--font-sans);appearance:none;border:1px solid #0000;border-radius:10px;padding:0 44px;transition:background .15s,border-color .15s,box-shadow .15s}.sb__input::-webkit-search-cancel-button{appearance:none}.sb__input::-webkit-search-decoration{appearance:none}.sb__input::placeholder{color:var(--color-text-caption)}.sb__input:hover{background:color-mix(in srgb, var(--color-surface-2) 80%, var(--color-text-primary) 4%)}.sb__input:focus{background:var(--color-surface-1);border-color:var(--color-text-primary);box-shadow:0 0 0 4px color-mix(in srgb, var(--color-text-primary) 12%, transparent);outline:0}.sb__input:focus-visible{box-shadow:0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer)}.sb__lens,.sb__clear{color:var(--color-text-caption);justify-content:center;align-items:center;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.sb__lens{cursor:pointer;background:0 0;border:0;border-radius:8px;width:36px;height:36px;padding:0;left:4px}.sb__lens:hover{color:var(--color-text-primary)}.sb__clear{background:var(--color-surface-2);cursor:pointer;width:24px;height:24px;color:var(--color-text-secondary);border:0;border-radius:50%;place-items:center;display:grid;right:12px}.sb__clear:after{content:"";position:absolute;inset:-10px}.sb__clear:hover{background:var(--color-border-emphasis);color:var(--color-text-primary)}.sb--sm .sb__input{border-radius:8px;height:36px;padding:0 38px;font-size:14px}.sb--sm .sb__lens{width:32px;height:32px;left:2px}.sb--sm .sb__clear{right:10px}.sb--lg .sb__input{border-radius:12px;height:56px;padding:0 52px;font-size:16px}.sb--lg .sb__lens{width:40px;height:40px;left:8px}.sb--lg .sb__clear{right:18px}.sb--pill .sb__input,.sb--pill .sb__lens{border-radius:999px}.sb--outline .sb__input{border:1px solid var(--color-border-emphasis);background:0 0}.sb--outline .sb__input:hover{border-color:var(--color-text-primary)}.sb--outline .sb__clear{border:1px solid var(--color-border-emphasis);background:0 0}
