@st-namespace 'TextField-st-css';
@st-import [ --wix-color-1, --wix-color-5, --wix-color-4, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb, --wst-shade-3-color-rgb, --wst-system-disabled-color-rgb, --wst-system-success-color-rgb, --wst-system-error-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createFont, createColor, setColor, setVar, color, font, fallback, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor-rgb, successColor-rgb, focusRing ] from '../../common/palette.st.css';
@st-import Input from '../internal/WixUiCoreComponents/components/CoreInput/CoreInput.st.css';
@st-import [srOnly] from '../internal/WixUiCoreComponents/common/a11y.st.css';

@property st-global(--wut-error-color);

/*
 * The corner radius of the component
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-text-field-main-border-radius);

/*
 * The width of the component’s border
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-field-main-border-width);

/*
 * The color of the input border
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-text-field-main-border-color);

/*
 * The color of the background of the input
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-text-field-main-background-color);

/*
 * The color of the text of the input
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-text-field-main-text-color);

/*
 * The color of the text of the disabled input
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-text-field-main-text-disabled-color);

/*
 * The color of the suffix of the disabled input
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-text-field-suffix-disabled-color);

/*
 * The color of the placeholder
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-text-field-placeholder-color);

/*
 * The color of the placeholder when disabled
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-text-field-disabled-placeholder-color);

/*
 * The font of the text/placeholder
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px'}
 */
@property st-global(--wix-ui-tpa-text-field-main-text-font);

/*
 * The font of the label
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-text-field-main-label-font);

/*
 * The color of the label. 60% opacity when disabled
 * @type color
 * @default --wix-color-5 for regular label, --wix-color-4 for floating label
 */
@property st-global(--wix-ui-tpa-text-field-main-label-text-color);

/*
 * The font of the char count
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-text-field-char-count-font);

/*
 * The color of the char count
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-text-field-char-count-color);

/*
 * The color of the label when text filed is disabled.
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-text-field-disabled-label-color);

/*
 * The color of the prefix
 * @type color
 * @default --wix-color-4 for textual prefix, --wix-color-5 for icons prefix
 */
@property st-global(--wix-ui-tpa-text-field-prefix-color);

/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-text-field-error-color);

/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-text-field-error-message-min-height);

/*
 * Border opacity
 * @type size
 * @default 0.6
 */
@property st-global(--wix-ui-tpa-text-field-main-border-opacity);

/*
 * Hover border color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-text-field-hover-border-color);

/*
 * Disabled border color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-text-field-main-disabled-border-color);

/*
 * Error border color
 * @type color
 * @default value(errorColor-rgb)
 */
@property st-global(--wix-ui-tpa-text-field-main-error-border-color);

/*
 * Hover border width
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-field-hover-border-width);

/*
 * Hover border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-text-field-hover-border-radius);

/*
 * Hover background color
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-text-field-hover-background-color);

/*
 * Hover background opacity
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-field-hover-background-opacity);

/*
 * Hover text color
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-text-field-hover-text-color);

/*
 * Helper text color
 * @type color
 * @default color-4
 */
@property st-global(--wix-ui-tpa-text-field-helper-text-color);

/*
 * Helper text font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-text-field-helper-text-font);

/*
 * Readonly background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-text-field-readonly-background-color);

/*
 * Readonly border color, 20% opacity when readonly
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-text-field-readonly-border-color);

/*
 * Readonly border width
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-field-readonly-border-width);

/*
 * Readonly border radius
 * @type size
 * @default 0
 */
@property st-global(--wix-ui-tpa-text-field-readonly-border-radius);

 /*
 * Readonly label color
 * @type color
 * @default --wix-color-5 for regular label, --wix-color-4 for floating label
 */
@property st-global(--wix-ui-tpa-text-field-readonly-label-text-color);

/*
 * Readonly label font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-text-field-readonly-label-font);

 /*
 * Readonly text color
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-text-field-readonly-text-color);

/*
 * Readonly text font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px'}
 */
@property st-global(--wix-ui-tpa-text-field-readonly-text-font);

/*
 * Placeholder text font
 * @type font
 */
@property st-global(--wix-ui-tpa-text-field-placeholder-font);

 /*
 * Readonly prefix color
 * @type color
 * @default --wix-color-4 for textual prefix, --wix-color-5 for icons prefix
 */
@property st-global(--wix-ui-tpa-text-field-readonly-prefix-color);

/*
 * Inline start padding for input and prefix
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-text-field-padding-inline-start);

/*
 * Inline end padding for input
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-text-field-padding-inline-end);

/*
 * Block start padding
 * @type size
 * @default 8px
 */
@property st-global(--wix-ui-tpa-text-field-padding-block-start);

/*
 * Block end padding
 * @type size
 * @default 8px
 */
@property st-global(--wix-ui-tpa-text-field-padding-block-end);

/*
 * Spacing between prefix and input
 * @type size
 * @default 4px
 */
@property st-global(--wix-ui-tpa-text-field-prefix-padding-inline-end);

/*
 * Spacing between suffix and input
 * @type size
 * @default 4px
 */
@property st-global(--wix-ui-tpa-text-field-suffix-padding-inline-start);

/*
 * Vertical padding of arrows suffix
 * @type size
 * @default 4px
 */
@property st-global(--wix-ui-tpa-text-field-arrows-suffix-vertical-padding);

.root {
  -st-states: disabled, error, success, hasPrefix, hasSuffix, newErrorMessage, hasErrorMessage, hasFloatingLabel, hasFloatingLabelActive, readOnlyCustom;
  --default-main-border-width: 1px;
}

.root:error:newErrorMessage {
  -st-mixin:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-text-field-error-color, value(errorColor-rgb)),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-text-field-error-message-min-height);
}

.input {
  -st-extends: Input;
  -st-states: theme(enum(line, box));
  box-sizing: border-box;
  border-color: createColor(--wix-ui-tpa-text-field-main-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-text-field-main-border-opacity, 0.6));
  border-radius: 0;
  background-color: createColor(--wix-ui-tpa-text-field-main-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  /* todo - Define fonts somewhere*/
  -st-mixin: createFont(--wix-ui-tpa-text-field-main-text-font, 'Body-M', '{ "size": "16px" }');
  display: flex;
  align-items: center;
  padding: 0;
}

.root:readOnlyCustom .input {
  border-color: createColor(--wix-ui-tpa-text-field-readonly-border-color, (var(--wix-color-5), 0.2));
  background-color: createColor(--wix-ui-tpa-text-field-readonly-background-color, var(--wix-color-1));
  -st-mixin: createFont(--wix-ui-tpa-text-field-readonly-text-font, 'Body-M', '{ "size": "16px" }');
}

.withHelperText {
  margin-bottom: 8px;
}

:global(#SITE_CONTAINER.focus-ring-active) .root .input:focus-within,
:global(#SITE_CONTAINER.focus-ring-active) .root .passwordVisibilityButton:focus:not(:hover) {
  -st-mixin: focusRing();
}

.input input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1.5em createColor(--wix-ui-tpa-text-field-main-background-color, var(--wix-color-1)) inset !important;
  -webkit-text-fill-color: createColor(--wix-ui-tpa-text-field-main-text-color, var(--wix-color-5));
}

.input:theme(box) {
  border: 1px solid createColor(--wix-ui-tpa-text-field-main-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-text-field-main-border-opacity, 0.6));
  border-radius: var(--wix-ui-tpa-text-field-main-border-radius, 0px);
  border-width: var(--wix-ui-tpa-text-field-main-border-width, var(--default-main-border-width, 1px));
}

.root:readOnlyCustom .input:theme(box) {
  border-color: createColor(--wix-ui-tpa-text-field-readonly-border-color, (var(--wix-color-5), 0.2));
  border-radius: var(--wix-ui-tpa-text-field-readonly-border-radius, 0px);
  border-width: var(--wix-ui-tpa-text-field-readonly-border-width, 1px);
  background-color: createColor(--wix-ui-tpa-text-field-readonly-background-color, var(--wix-color-1));
}

.input:theme(line) {
  border-bottom: 1px solid createColor(--wix-ui-tpa-text-field-main-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-text-field-main-border-opacity, 0.6));
  border-radius: var(--wix-ui-tpa-text-field-main-border-radius, 0px);
  border-width: var(--wix-ui-tpa-text-field-main-border-width, var(--default-main-border-width, 1px));
  background-color: createColor(--wix-ui-tpa-text-field-main-background-color, var(--wst-primary-background-color-rgb, transparent));
}

.root:readOnlyCustom .input:theme(line) {
  --transparent: 0, 0, 0, 0;
  border-bottom: 1px solid createColor(--wix-ui-tpa-text-field-readonly-border-color, (var(--wix-color-5), 0.2));
  border-radius: var(--wix-ui-tpa-text-field-readonly-border-radius, 0px);
  border-width: var(--wix-ui-tpa-text-field-readonly-border-width, 1px);
  background-color: createColor(--wix-ui-tpa-text-field-readonly-background-color, var(--transparent));
}

.input:hover,
.input:focus {
  border-color: createColor((--wix-ui-tpa-text-field-hover-border-color, --wix-ui-tpa-text-field-main-border-color), var(--wix-color-5));
  border-width: var(--wix-ui-tpa-text-field-hover-border-width, var(--default-main-border-width, 1px));
  border-radius: var(--wix-ui-tpa-text-field-hover-border-radius, 1px);
}

.input:theme(box):hover,
.input:theme(line):hover,
.input:theme(box):focus,
.input:theme(line):focus {
  background-color: createColor((--wix-ui-tpa-text-field-hover-background-color, --wix-ui-tpa-text-field-main-background-color), transparent, var(--wix-ui-tpa-text-field-hover-background-opacity, 1));
}

.root:disabled .input {
  border-color: createColor((--wix-ui-tpa-text-field-main-disabled-border-color, --wix-ui-tpa-text-field-main-border-color), var(--wix-color-5), 0.6);
}

.root:disabled .input:theme(box) {
  background-color: createColor(--wix-ui-tpa-text-field-main-background-color, var(--wix-color-1));
}

.root:success .input {
  border-color: rgb(var(--wst-system-success-color-rgb, value(successColor-rgb)), 0.6);
}

.root:success .input:hover {
  border-color: rgb(value(successColor-rgb))
}

.root:success .input:focus {
  border-color: rgb(value(successColor-rgb))
}

.root:error:not(:newErrorMessage) .input {
  border-color: rgb(var(--wix-ui-tpa-text-field-main-error-border-color, var(--wst-system-error-color-rgb, value(errorColor-rgb))), 0.6);
}

.root:error:newErrorMessage .input {
  --wix-ui-tpa-text-field-border-color-internal: rgb(var(--wix-ui-tpa-text-field-main-error-border-color, var(--wst-system-error-color-rgb)));
  border-color: var(--wix-ui-tpa-text-field-border-color-internal, var(--wut-error-color, rgb(value(errorColor-rgb)))) !important;
}

.root:error:not(:newErrorMessage) .input:hover {
  border-color: rgb(var(--wix-ui-tpa-text-field-main-error-border-color, value(errorColor-rgb)));
}

.root:error:not(:newErrorMessage) .input:focus {
  border-color: rgb(var(--wix-ui-tpa-text-field-main-error-border-color, value(errorColor-rgb)));
}

.root:hasPrefix .input::nativeInput {
  padding-inline-start: var(--wix-ui-tpa-text-field-prefix-padding-inline-end, 4px);
}

.input::nativeInput {
  width: 100%;
  -st-mixin: createFont(--wix-ui-tpa-text-field-main-text-font, 'Body-M', '{ "size": "16px" }');
  line-height: 24px;
  vertical-align: middle;
  border: 0;
  color: createColor(--wix-ui-tpa-text-field-main-text-color, var(--wix-color-5));
  box-sizing: border-box;
  background-color: transparent;
  padding-block-start: var(--wix-ui-tpa-text-field-padding-block-start, 8px);
  padding-block-end: var(--wix-ui-tpa-text-field-padding-block-end, 8px);
  padding-inline-start: var(--wix-ui-tpa-text-field-padding-inline-start, 12px);
  margin: 0;
  min-width: 0;
}

.root:readOnlyCustom .input::nativeInput {
  -st-mixin: createFont(--wix-ui-tpa-text-field-readonly-text-font, 'Body-M', '{ "size": "16px" }');
  color: createColor(--wix-ui-tpa-text-field-readonly-text-color, var(--wix-color-5));
  line-height: 24px;
}

.input:theme(line)::nativeInput {
  padding-left: var(--wix-ui-tpa-text-field-padding-inline-start, 0px);
  padding-right: var(--wix-ui-tpa-text-field-padding-inline-end, 0px);
  padding-top: var(--wix-ui-tpa-text-field-padding-block-start, 8px);
  padding-bottom: var(--wix-ui-tpa-text-field-padding-block-end, 8px);
}

.input:hover::nativeInput,
.input:focus::nativeInput {
  color: createColor((--wix-ui-tpa-text-field-hover-text-color, --wix-ui-tpa-text-field-main-text-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

/* XXX: This contradicts description of main text color variable where
   it says that text should be 60% of --wix-ui-tpa-text-field-main-text-color. */
.input:disabled::nativeInput,
.root:disabled .customSuffix svg {
  color: createColor(--wix-ui-tpa-text-field-main-text-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  fill: createColor(--wix-ui-tpa-text-field-suffix-disabled-color, var(--wst-system-disabled-color-rgb));
}

.input:focus::nativeInput {
  outline: 0;
}

.input::nativeInput::selection {
  background: createColor(--wix-ui-tpa-text-field-main-text-color, var(--wix-color-5), 0.2);
}

.suffixWrapper {
  -st-states: arrows;
  display: flex;
  margin: 0 -4px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
  padding: 0;
  padding-inline-start: var(--wix-ui-tpa-text-field-suffix-padding-inline-start, 8px);
}

.suffixWrapper:arrows {
  height: 100%;
}

.input:theme(box) {
  padding-inline-end: var(--wix-ui-tpa-text-field-padding-inline-end, 12px);
}

.clearButtonWrapper {
  height: 100%;
  display: flex;
  align-items: center;
}

.clearButtonGap {
  width: 4px;
  height: 100%;
  display: inline-block;
}

.root .clearButton {
  -st-mixin: setColor(--wix-ui-tpa-icon-button-icon-color, --wix-ui-tpa-text-field-main-text-color, --wix-color-5);
  display: block;
  border-radius: 20px;
  outline: 0;
}

/* overrides the IconButton hover & focus styling */
.root .clearButton:hover,
.root .clearButton:focus {
  opacity: 1;
  background-color: transparent;
}

.customSuffix {
  color: createColor(--wix-ui-tpa-text-field-main-text-color, var(--wix-color-5));
  height: 100%;
  display: flex;
  align-items: center;
}

/* Placeholder color */
.input::nativeInput::-webkit-input-placeholder,
.input::nativeInput::placeholder {
  color: createColor(--wix-ui-tpa-text-field-placeholder-color, var(--wst-shade-3-color-rgb, var(--wix-color-4)));
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{}'),
  createFont((--wix-ui-tpa-text-field-placeholder-font, --wst-paragraph-2-overriden-font), null);
}

.root:disabled .input::nativeInput::-webkit-input-placeholder,
.root:disabled .input::nativeInput::placeholder {
  color: createColor(--wix-ui-tpa-text-field-disabled-placeholder-color, var(--wix-color-29));
}

.label {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4", "size": "14px" }'),
  createFont((--wix-ui-tpa-text-field-main-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
  -st-states: theme(enum(line, box)), style(enum(regular, floating));
  color: createColor(--wix-ui-tpa-text-field-main-label-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  display: inline-block;
  margin-bottom: 8px;
}

.root:disabled .label {
  color: createColor(--wix-ui-tpa-text-field-disabled-label-color, var(--wix-color-29));
}

.root:readOnlyCustom .label {
  color: createColor(--wix-ui-tpa-text-field-readonly-label-text-color, var(--wix-color-5));
  -st-mixin: createFont(--wix-ui-tpa-text-field-readonly-label-font, 'Body-M', '{ "line-height": "1.4", "size": "14px" }');
}

.charCount {
  display: flex;
  justify-content: flex-end;
  -st-mixin: createFont(--wix-ui-tpa-text-field-char-count-font, 'Body-M', '{ "line-height": "1.4", "size": "14px" }');
  color: createColor(--wix-ui-tpa-text-field-char-count-color, var(--wst-shade-3-color-rgb, var(--wix-color-4)));
  margin-top: 8px;
}

.root:error:newErrorMessage:hasErrorMessage .charCount {
  margin-top: 0px;
}

.errorWrapper {
  /* Used only in deprecated version. */
}

.errorMessage {
  display: none;
}

.errorIcon {
  color: rgb(value(errorColor-rgb)) !important;
}

.successIcon {
  color: rgb(var(--wst-system-success-color-rgb, value(successColor-rgb)));
}

.prefix {
  color: createColor(--wix-ui-tpa-text-field-prefix-color, var(--wix-color-4));
  margin-inline-start: var(--wix-ui-tpa-text-field-padding-inline-start, 12px);
  display: flex;
  align-items: center;
}

.root:readOnlyCustom .prefix {
  color: createColor(--wix-ui-tpa-text-field-readonly-prefix-color, var(--wix-color-4));
}

.prefix svg {
  color: createColor(--wix-ui-tpa-text-field-prefix-color, var(--wix-color-5));
}

.root:readOnlyCustom .prefix svg {
  color: createColor(--wix-ui-tpa-text-field-readonly-prefix-color, var(--wix-color-5));
}

.input:theme(line) .prefix {
  margin-inline-start: 0px;
}

.prefixLabel {
  -st-mixin: srOnly;
}

/* disables default input arrows */
.input input[type=number]::-webkit-inner-spin-button,
.input input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.input input[type="number"] {
  appearance: textfield;
}

.input input {
  border-radius: var(--wix-ui-tpa-text-field-main-border-radius, 0px);
}

.root:readOnlyCustom .input input {
  border-radius: var(--wix-ui-tpa-text-field-readonly-border-radius, 0px);
}

.input:hover input,
.input:focus input {
  border-radius: var(--wix-ui-tpa-text-field-hover-border-radius, 1px);
}

.arrowsSuffixWrapper {
  display: flex;
  flex-direction: column;
  padding-top: var(--wix-ui-tpa-text-field-arrows-suffix-vertical-padding, 4px);
  padding-bottom: var(--wix-ui-tpa-text-field-arrows-suffix-vertical-padding, 4px);
}

.arrowBtn {
  all: unset;
  cursor: pointer;
  height: 16px;
  line-height: 16px;
}

.root .helperText {
  -st-mixin: createFont(--wix-ui-tpa-text-field-helper-text-font, 'Body-M', '{ "size": "14px", "line-height": 1.4 }');
  color: createColor(--wix-ui-tpa-text-field-helper-text-color, var(--wix-color-4));
  display: block;
  margin-top: 8px;
}

.passwordVisibilityButton {
  -st-states: disabled;
  display: block;
  width: calc(max(24px, 1em));
  height: calc(max(24px, 1em));
  cursor: pointer;
}

.passwordVisibilityButton:disabled {
  cursor: default;
}

.floatingInput {
  position: relative;
  width: 100%;
}

.floatingLabelWrapper {
  -st-mixin: createFont(--wix-ui-tpa-text-field-main-label-font, 'Body-M', '{ "line-height": "1.4", "size": "16px" }');
  padding-top: 3.6px;
}

.label:style(floating) {
  font: inherit;

  color: createColor(--wix-ui-tpa-text-field-main-label-text-color, var(--wix-color-4));
  position: absolute;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  width: calc(100% - 20px);
  margin-bottom: 0;
  padding-top: 0;

  top: 50%;
  transform: translateY(-50%);

  transition: all 0.1s ease-out;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
}

.root:readOnlyCustom .label:style(floating) {
  font: inherit;
  color: createColor(--wix-ui-tpa-text-field-readonly-label-text-color, var(--wix-color-4));
}

.root:hasFloatingLabelActive .label:style(floating) {
  top: 6px;
  transform: translateY(0%);
  font-size: 0.875em;
  padding-top: 2px;
}

.root:hasFloatingLabel .label:theme(box) {
  padding-inline-start: 20px;
}

.root:hasFloatingLabel .input:theme(box)::nativeInput {
  padding: 0 0 6px;
  padding-inline-start: 20px;
}

.root:hasFloatingLabel .input:theme(line)::nativeInput {
  padding: 0 0 4px;
}

.root:hasFloatingLabel:hasPrefix .input::nativeInput,
.root:hasFloatingLabel:hasPrefix .label {
  padding-inline-start: 4px;
}

.root:hasFloatingLabel:hasSuffix .input::nativeInput,
.root:hasFloatingLabel:hasSuffix .label {
  padding-inline-end: 4px;
}

.root:hasFloatingLabel .input:theme(box) {
  padding-inline-end: 20px;
}

.root:hasFloatingLabel .input:theme(box) .prefix {
  margin-inline-start: 20px;
}

/* st-namespace-reference="../../../../src/components/TextField/TextField.st.css" */