@start-base/react-form-elements/AmountInput/styles.css

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

.SUI-AmountInput-module-root-DmMLf{margin-bottom:var(--rfe-spacing)}.SUI-AmountInput-module-inputRoot-DUIeP{position:relative;width:100%}.SUI-AmountInput-module-label-jCFRn{color:var(--rfe-color);cursor:text;font-size:var(--rfe-font-size);left:16px;line-height:1;margin-bottom:0;pointer-events:all;position:absolute;top:0;transform:translateY(21px);transition:transform .25s,font-size .25s}.SUI-AmountInput-module-label-jCFRn.SUI-AmountInput-module-disableShrink-X7g2x{color:var(--rfe-color);display:block;margin-bottom:10px;position:static;transform:none}.SUI-AmountInput-module-focusedLabel-HNFBu{font-size:var(--rfe-focused-font-size);transform:translateY(9px)}.SUI-AmountInput-module-disabledLabel-1cOpe{cursor:not-allowed;pointer-events:none}.SUI-AmountInput-module-input-D1Pda{background:var(--rfe-background);border:1px solid var(--rfe-border);border-radius:var(--rfe-border-radius);color:var(--rfe-color);height:var(--rfe-input-height);line-height:24px;padding:20px 16px 0;transition:all .25s;width:100%}.SUI-AmountInput-module-input-D1Pda:focus{box-shadow:var(--rfe-focus)}.SUI-AmountInput-module-input-D1Pda:focus::placeholder{color:var(--rfe-color-placeholder)}.SUI-AmountInput-module-input-D1Pda::placeholder{color:var(--rfe-color-placeholder);font-size:var(--rfe-placeholder-font-size)}.SUI-AmountInput-module-input-D1Pda:-webkit-autofill:not(.SUI-AmountInput-module-disableShrink-X7g2x)~.SUI-AmountInput-module-label-jCFRn,.SUI-AmountInput-module-input-D1Pda:focus:not(.SUI-AmountInput-module-disableShrink-X7g2x)~.SUI-AmountInput-module-label-jCFRn,.SUI-AmountInput-module-input-D1Pda:not([value=""]):not(.SUI-AmountInput-module-disableShrink-X7g2x)~.SUI-AmountInput-module-label-jCFRn{font-size:var(--rfe-focused-font-size);transform:translateY(9px)}.SUI-AmountInput-module-input-D1Pda.SUI-AmountInput-module-disableShrink-X7g2x{padding:16px}.SUI-AmountInput-module-append-TgPrI,.SUI-AmountInput-module-prepend-oNwFo{align-items:center;color:var(--rfe-color);display:flex;justify-content:center;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.SUI-AmountInput-module-prepend-oNwFo{border-right:1px solid var(--rfe-border);font-size:var(--rfe-placeholder-font-size);height:var(--rfe-input-height);left:16px;line-height:16px;padding-right:13px}.SUI-AmountInput-module-prepend-oNwFo~.SUI-AmountInput-module-label-jCFRn{left:62px}.SUI-AmountInput-module-prepend-oNwFo~.SUI-AmountInput-module-input-D1Pda{padding:20px 16px 0 60px}.SUI-AmountInput-module-prepend-oNwFo~.SUI-AmountInput-module-input-D1Pda.SUI-AmountInput-module-disableShrink-X7g2x{padding:16px 16px 16px 60px}.SUI-AmountInput-module-append-TgPrI{height:56px;right:16px}.SUI-AmountInput-module-append-TgPrI~.SUI-AmountInput-module-input-D1Pda{padding:20px 50px 0 16px}.SUI-AmountInput-module-append-TgPrI~.SUI-AmountInput-module-input-D1Pda.SUI-AmountInput-module-disableShrink-X7g2x{padding:0 50px 0 16px}.SUI-AmountInput-module-appendDisabledShrink-qgeyC,.SUI-AmountInput-module-prependDisabledShrink-S8YwO{top:26px;transform:none}.SUI-AmountInput-module-noLabel-MkZBO{padding:16px}.SUI-AmountInput-module-errorLabel-DoF7g{color:var(--rfe-color-error);font-size:var(--rfe-error-font-size);margin-top:var(--rfe-label-spacing);pointer-events:none}.SUI-AmountInput-module-inputError-KTWVt{border-color:var(--rfe-color-error)!important}.SUI-AmountInput-module-disabled-WFO7z{background:var(--rfe-background-disabled);color:var(--rfe-color);cursor:not-allowed;opacity:1}