@wonderflow/react-components/dist/components/textfield/textfield.module.css

UI components from Wonderflow's Wanda design system

@layer components{.Textfield{appearance:none;padding:0;position:relative}.Textfield[data-textfield-dimension=small]{--field-height:1.500rem;--field-padding:0.33rem;--font-size:0.875rem}.Textfield[data-textfield-dimension=regular]{--field-height:2.25rem;--field-padding:0.875rem;--font-size:0.875rem}.Textfield[data-textfield-dimension=big]{--field-height:3.000rem;--field-padding:1.000rem;--font-size:1rem}.Textfield[data-textfield-fullwidth=true]{inline-size:100%}textarea.Textarea{max-height:var(--textarea-max-height);min-height:var(--textarea-min-height);overflow-y:var(--textarea-overflow-y);padding:.5rem 1rem}.FieldContainer{position:relative}.InputField{--factor:4}[data-textfield-has-icon=true][data-textfield-icon-position=right] .InputField{padding:0 calc(var(--field-padding)*var(--factor)) 0 var(--field-padding)}[data-textfield-has-icon=true][data-textfield-icon-position=left] .InputField{padding:0 var(--field-padding) 0 calc(var(--field-padding)*var(--factor))}[data-textfield-dimension*=big] .InputField,[data-textfield-dimension*=regular] .InputField{--factor:3}.Icon{border-radius:.25rem;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}[data-textfield-icon-position=left] .Icon{left:var(--field-padding);right:auto}[data-textfield-icon-position=right] .Icon{left:auto;right:var(--field-padding)}.Textfield[data-textfield-invalid=true] .Icon{fill:var(--highlight-red-foreground)}.Icon[aria-disabled=true] svg{color:var(--global-disabled-foreground);cursor:not-allowed}.InputField:invalid+.Icon{fill:var(--highlight-red-foreground)}label.Label[aria-disabled=true]{color:var(--global-disabled-foreground);cursor:not-allowed}}@layer overrides{.IconButton{--x:25%;outline-offset:-.25em;position:absolute;top:50%;transform:translateY(-50%) translateX(var(--x))}.IconButton[data-button-kind=flat]:is(:hover,:active,:focus,[data-button-disabled=true]){-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent}.IconButton[aria-disabled=true]{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:unset;block-size:unset;cursor:not-allowed}[data-textfield-icon-position=left] .IconButton{--x:-19%;left:var(--field-padding);right:auto}[data-textfield-icon-position=right] .IconButton{left:auto;right:var(--field-padding)}.Textfield[data-textfield-invalid=true] .IconButton{color:var(--highlight-red-foreground)}}