.base-input-wrapper{align-items:center;display:inline-flex;position:relative}.base-input-wrapper--sm{--height:28px;--padding-x:8px;--icon-size:16px}.base-input-wrapper--sm .base-input{font-size:13px;font-weight:400;letter-spacing:-.13px;line-height:18px}.base-input-wrapper--md{--height:40px;--padding-x:12px;--icon-size:24px}.base-input-wrapper--lg{--height:48px;--padding-x:16px;--icon-size:28px}.base-input-wrapper--icon-only{background-color:var(--color-surface-neutral-100);border-radius:999px;height:var(--height);transition:all .5s cubic-bezier(.4,0,.2,1);width:var(--height)}.base-input-wrapper--icon-only .base-input{background-color:transparent;border:none;opacity:0;padding:0;width:0}.base-input-wrapper--icon-only.base-input-wrapper--expanded{background-color:var(--color-surface-neutral-0);border:1px solid var(--color-border-primary-default);border-radius:12px;width:100%}.base-input-wrapper--icon-only.base-input-wrapper--expanded .base-input{background-color:transparent;border:none;opacity:1;padding-left:calc(var(--height) + 4px);padding-right:calc(var(--height) + 4px);width:100%}.base-input{--padding-y:0px;--border-color:var(--color-border-default);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-surface-neutral-0);border:1px solid var(--border-color);border-radius:12px;height:var(--height);padding:var(--padding-y) var(--padding-x);transition:all .5s cubic-bezier(.4,0,.2,1);width:100%}.base-input:active,.base-input:focus-visible,.base-input:hover{border-color:var(--color-border-primary-default);outline:none}.base-input:invalid{border-color:var(--color-border-critical-default)}.base-input-icon{color:var(--color-text-neutral-subdued);cursor:pointer;font-size:var(--icon-size);left:calc(var(--height)/2);pointer-events:auto;position:absolute;top:50%;transform:translate(-50%,-50%);transition:color .3s cubic-bezier(.4,0,.2,1);z-index:2}.base-input-icon:hover{color:var(--color-text-neutral)}.base-input-close{color:var(--color-text-neutral-subdued);cursor:pointer;font-size:var(--icon-size);position:absolute;right:calc(var(--height)/2);top:50%;transform:translate(50%,-50%);transition:color .3s cubic-bezier(.4,0,.2,1);z-index:2}.base-input-close:hover{color:var(--color-text-neutral)}