@layer components {[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-neutral-100);--pi-input-trailing-reserve: min(var(--h), var(--pi-size-button-medium));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-input-border-radius-override, var(--pi-size-border-radius-12));margin-top:6px;max-width:min-content;position:relative;z-index:0}[pi-input]:hover{--bc: var(--pi-input-border-color-hover-override, var(--pi-color-accent-1-300));--pi-input-bw: var(--pi-input-border-width-hover-override, var(--pi-input-border-width-override, 1px))}[pi-input]:is(:focus-within,[pi-pressed]){--bc: var(--pi-input-border-color-active-override, var(--pi-color-accent-1-400));--pi-input-bw: var(--pi-input-border-width-active-override, var(--pi-input-border-width-override, 1px))}[pi-input] label{--y: calc(var(--h) / 2 - 50%);grid-row:1/3;grid-column:1/5;position:absolute;align-content:center;height:fit-content;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-input-border-color-override, var(--pi-color-neutral-300)));box-shadow:inset 0 0 0 calc(var(--pi-input-bw, var(--pi-input-border-width-override, 1px)) - 1px) var(--bc, var(--pi-input-border-color-override, var(--pi-color-neutral-300)));transition:border .2s ease-in-out,box-shadow .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,[pi-pressed])>label{--s: 0.8461538462;--y: var(--yo);background-color:var(--pi-input-label-background);color:var(--lc, var(--pi-color-neutral-800));z-index:3}[pi-input]:has(input[placeholder]:not([placeholder=""]),label[pi-elevated])>label{--s: 0.8461538462;--y: var(--yo);background-color:var(--pi-input-label-background);color:var(--lc, var(--pi-color-neutral-800));z-index:3}@supports not (background: -webkit-named-image(i)){[pi-input]:has(input[placeholder=""]:not(:placeholder-shown))>label{--s: 0.8461538462;--y: var(--yo);background-color:var(--pi-input-label-background);color:var(--lc, var(--pi-color-neutral-800));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-bw: var(--pi-input-border-width-status-override, var(--pi-input-border-width-override, 1px))}[pi-input][pi-status=warning]{--bc: var(--pi-color-warning-600);--ic: var(--pi-color-warning-600);--pi-input-bw: var(--pi-input-border-width-status-override, var(--pi-input-border-width-override, 1px))}[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-bw: var(--pi-input-border-width-status-override, var(--pi-input-border-width-override, 1px))}[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,[pi-pressed])>label{--x: calc(-1 * (var(--lo) - var(--vlp)) / var(--s))}[pi-input]:has(>[pi-icon]~label):has(input[placeholder]:not([placeholder=""]),label[pi-elevated])>label{--x: calc(-1 * (var(--lo) - var(--vlp)) / var(--s))}@supports not (background: -webkit-named-image(i)){[pi-input]:has(>[pi-icon]~label):has(input[placeholder=""]:not(:placeholder-shown))>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]:has(input+[pi-icon]),[pi-input]:has(>[pi-button~=icon]){--vrp: calc(var(--pi-size-spacing-12) + var(--pi-input-trailing-reserve))}[pi-input]:has(input+[pi-icon]):has(>[pi-button~=icon]),[pi-input]:has(>[pi-button~=icon]+[pi-button~=icon]){--vrp: calc(var(--pi-size-spacing-12) + 2 * var(--pi-input-trailing-reserve))}[pi-input]:has(input+[pi-icon]):has(>[pi-button~=icon]+[pi-button~=icon]){--vrp: calc(var(--pi-size-spacing-12) + 3 * var(--pi-input-trailing-reserve))}[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]>[pi-button~=icon]+[pi-button~=icon]{grid-column:5/6}[pi-input]:has(>[pi-button~=icon]+[pi-button~=icon])>input,[pi-input]:has(>[pi-button~=icon]+[pi-button~=icon])>label{grid-column:1/6}[pi-input]:not([pi-input=bottom])>[pi-button~=icon]:last-of-type{margin-right:1px}[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]:hover{--lc: var(--pi-input-label-color-hover-override, var(--pi-color-accent-1-300))}[pi-input=bottom]:is(:focus-within,[pi-pressed]){--lc: var(--pi-input-label-color-active-override, var(--pi-color-accent-1-400))}[pi-input=bottom][pi-status=success],[pi-input=bottom][pi-status=auto]:has(input:user-valid){--lc: var(--pi-color-success-600)}[pi-input=bottom][pi-status=warning]{--lc: var(--pi-color-warning-700)}[pi-input=bottom][pi-status=danger],[pi-input=bottom][pi-status=auto]:has(input:user-invalid){--lc: var(--pi-color-danger-600)}[pi-input=bottom] input{margin:0;border:none;box-shadow: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{--pi-input-notch-depth: calc(var(--pi-input-bw, var(--pi-input-border-width-override, 1px)) + 1px);clip-path:polygon(-1px 0, 8px 0, 8px var(--pi-input-notch-depth), var(--clip-end) var(--pi-input-notch-depth), var(--clip-end) 0, calc(100% + 1px) 0, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px))}[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}}