[pi-input]{--h: 42px;--vlp: var(--pi-size-spacing-12);--vrp: var(--pi-size-spacing-12);--vbp: var(--pi-size-spacing-12);--lbm: var(--pi-size-spacing-12);--lim: var(--pi-size-spacing-8);--lip: var(--pi-size-spacing-4);--lo: var(--pi-size-spacing-8);--is: 20px;--ic: var(--pi-color-neutral-500);--yo: -50%;--pi-input-label-background: var(--pi-color-white, #fff);--pi-input-autofill: var(--pi-color-accent-1-100);display:inline-grid;grid-template-rows:auto;grid-template-columns:auto;align-items:stretch;box-sizing:border-box;position:relative;vertical-align:--webkit-baseline-middle;vertical-align:middle;border-radius:var(--pi-size-border-radius-12);margin-top:6px;max-width:min-content;position:relative;z-index:0}[pi-input]:hover{--bc: var(--pi-color-accent-1-300)}[pi-input]:focus-within{--bc: var(--pi-color-accent-1-400)}[pi-input] label{--y: calc(var(--h) / 2 - 50%);grid-row:1/3;grid-column:1/5;position:absolute;align-content:center;z-index:0;transform-origin:left center;padding:0 var(--lip);transition:transform .2s ease-out,inset .2s ease-out;transition-delay:120ms;font-size:var(--pi-size-font-single-line-13-text);line-height:var(--pi-size-font-single-line-13-line);letter-spacing:var(--pi-size-font-single-line-13-spacing);font-weight:var(--pi-font-weight-medium);color:var(--pi-color-neutral-800);transform:translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));margin:auto;margin-left:var(--lo, var(--lim))}[pi-input] input{all:unset;grid-row:1/3;grid-column:1/5;position:relative;z-index:2;height:var(--h);flex-grow:1;box-sizing:border-box;color:var(--pi-color-neutral-800);padding:var(--vbp) var(--vrp) var(--vbp) var(--vo, var(--vlp));margin:0;border:1px solid var(--bc, var(--pi-color-neutral-300));transition:border .2s ease-in-out,clip-path .2s ease-in-out;transition-delay:0;background:rgba(0,0,0,0);border-radius:inherit;outline:0 solid rgba(0,0,0,0);outline-offset:0;font-size:var(--pi-size-font-single-line-13-text);line-height:var(--pi-size-font-single-line-13-line);letter-spacing:var(--pi-size-font-single-line-13-spacing);font-weight:var(--pi-font-weight-medium);color:var(--pi-color-neutral-800)}[pi-input] input::placeholder{color:var(--pi-color-neutral-600)}[pi-input] input:is(-webkit-autofill,:autofill){box-shadow:0 0 0px 1000px var(--pi-input-autofill) inset}[pi-input]:has(input:where(-webkit-autofill,:autofill)){background-color:var(--pi-input-autofill)}[pi-input]:is(.pi-elevated,:focus-within)>label{--s: 0.8461538462;--y: var(--yo);background-color:var(--pi-input-label-background);z-index:3}[pi-input]:has(input[placeholder=""]:not(:placeholder-shown),input[placeholder]:not([placeholder=""]),label[pi-elevated])>label{--s: 0.8461538462;--y: var(--yo);background-color:var(--pi-input-label-background);z-index:3}[pi-input][pi-size=small]{--h: 42px}[pi-input][pi-size=medium]{--h: 54px}[pi-input][pi-status=success],[pi-input][pi-status=auto]:has(input:user-valid){--bc: var(--pi-color-success-500);--ic: var(--pi-color-success-500)}[pi-input][pi-status=warning]{--bc: var(--pi-color-warning-600);--ic: var(--pi-color-warning-600)}[pi-input][pi-status=danger],[pi-input][pi-status=auto]:has(input:user-invalid){--bc: var(--pi-color-danger-500);--ic: var(--pi-color-danger-500)}[pi-input]>[pi-icon]{--pi-icon-size: var(--is);grid-row:1/3;grid-column:1/2;align-self:center;margin:auto 0;padding:0 var(--pi-size-spacing-4) 0 var(--vlp);color:var(--pi-color-neutral-400)}[pi-input]:has(>[pi-icon]~label){--lo: calc(var(--is) + var(--vlp));--vo: calc(var(--pi-size-spacing-4) + var(--is) + var(--vlp))}[pi-input]:has(>[pi-icon]~label):is(.pi-elevated,:focus-within)>label{--x: calc(-1 * (var(--lo) - var(--vlp)) / var(--s))}[pi-input]:has(>[pi-icon]~label):has(input[placeholder=""]:not(:placeholder-shown),input[placeholder]:not([placeholder=""]),label[pi-elevated])>label{--x: calc(-1 * (var(--lo) - var(--vlp)) / var(--s))}[pi-input] input+[pi-icon]{padding:10px;color:var(--ic, inherit);grid-column:3/var(--gce, 4);justify-self:end;box-sizing:content-box}[pi-input] input+[pi-icon]+[pi-button~=icon]{overflow:visible}[pi-input] input+[pi-icon]+[pi-button~=icon]::before{content:"";width:1px;background-color:var(--pi-color-neutral-300);display:block;position:absolute;top:2px;bottom:2px;left:-1px}[pi-input]:not(:has([pi-button~=icon])){--gce: 5}[pi-input]>[pi-button~=icon]{margin:auto 0;align-self:center;grid-row:1/3;grid-column:4/5;z-index:3;justify-self:end}[pi-input=bottom]{--vlp: 0px;--lim: 0px;--lip: 0px;--lo: 0px;--yo: -100%;border:0;border-bottom:2px solid var(--bc, transparent);border-radius:0;margin-top:14px}[pi-input=bottom] input{margin:0;border:none}[pi-input=bottom]:has(>[pi-icon]~label){--lip: var(--pi-size-spacing-4)}[pi-input=bottom][pi-size=small]{--h: 44px}[pi-input=bottom][pi-size=medium]{--h: 54px}[pi-input]:not([pi-input=bottom]) input{clip-path:polygon(0% 0%, 8px 0%, 8px 2px, var(--clip-end) 2px, var(--clip-end) 0%, 100% 0%, 100% 100%, 0% 100%)}[pi-input]:has(input:disabled){opacity:.5;pointer-events:none}[pi-input]:has(input:disabled) input{cursor:not-allowed;color:var(--pi-color-neutral-400)}[pi-input]:has(input[readonly]) input{color:var(--pi-color-neutral-600);cursor:default}