@st-namespace 'TextField-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
  -st-from: "../../common/formatters.st";
  -st-named: applyStyleMethod, fallback, applyOpacity, color, font, unit;
}

:import {
  -st-from: "../internal/WixUiCoreComponents/components/CoreInput/CoreInput.st.css";
  -st-default: Input;
}

:import {
  -st-from: "../../common/palette.st.css";
  -st-named: errorColor as defaultErrorColor, successColor;
}

:import {
  -st-from: "../IconButton/IconButton.deprecated.st.css";
  -st-default: TPAIconButton;
}

:import {
  -st-from: "../internal/WixUiCoreComponents/common/a11y.st.css";
  -st-named: srOnly;
}

:import {
  -st-from: "../../common/palette.st.css";
  -st-named: focusRing;
}

:import {
  -st-from: '../internal/ErrorMessageWrapper/ErrorMessageWrapper.deprecated.st.css';
  -st-default: ErrorMessageWrapper;
}


/*Defaults*/
:vars {
  defaultMainBorderColor: color-5;
  defaultMainBackgroundColor: color-1;
  defaultMainTextColor: color-5;
  defaultLineThemeMainBackgroundColor: transparent;
  defaultMainTextFont: "{theme: 'Body-M', size: '16px'}";
  defaultMainLabelFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
  defaultMainFloatingLabelFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.4'}";
  defaultMainLabelTextColor: color-5;
  defaultCharCountFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
  defaultCharCountColor: color-4;
  defaultMainBorderRadius: 0;
  defaultMainBorderWidth: 1;
  defaultDisabledLabelColor: color-5;
  defaultTextualPrefixColor: color-4;
  defaultIconsPrefixColor: color-5;
  defaultPlaceholderColor: color-4;
  defaultDisabledColor: color-3;
  defaultMainBorderOpacity: 0.6;
  defaultHoverBackgroundOpacity: 1;
  defaultHelperTextColor: color-4;
  defaultHelperTextFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
}

/*Overrides*/
:vars {
  /*
    The corner radius of the component
    @default 0
  */
  MainBorderRadius: --overridable;
  /*
    The width of the component’s border
    @default 1
  */
  MainBorderWidth: --overridable;
  /*
    The color of the input border
    @default color-5
  */
  MainBorderColor: --overridable;
  /*
    The color of the background of the input
    @default color-1
  */
  MainBackgroundColor: --overridable;
  /*
    The color of the text/placeholder. 60% opacity when disabled and for the placeholder
    @default color-5
  */
  MainTextColor: color-5;
  /*
    The font of the text/placeholder
    @default {theme: 'Body-M', size: '16px'}
  */
  MainTextFont: --overridable;
  /*
    The font of the label
    @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
  */
  MainLabelFont: --overridable;
  /*
    The color of the label. 60% opacity when disabled
    @default color-5
  */
  MainLabelTextColor: --overridable;
  /*
    The font of the char count
    @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
  */
  CharCountFont: --overridable;
  /*
    The color of the char count
    @default color-4
  */
  CharCountColor: --overridable;
  /*
    The color of the label when text filed is disabled.
    @default color-3
  */
  DisabledLabelColor: --overridable;
  /*
    The color of the prefix
    @default color-4 for textual prefix, color-5 for icons prefix
  */
  PrefixColor: --overridable;
  /*
    The color representing an error
    @default #DF3131
  */
  ErrorColor: --overridable;
  /*
    A minimum height for the error message element
  */
  ErrorMessageMinHeight: --overridable;
  /*
    Border opacity
    @default 0.6
  */
  MainBorderOpacity: --overridable;
  /*
    Border color
    @default color-5
  */
  HoverBorderColor: --overridable;
  /*
    Hover border width
    @default 1
  */
  HoverBorderWidth: --overridable;
  /*
    Hover border radius
    @default 0
  */
  HoverBorderRadius: --overridable;
  /*
    Hover background color
    @default color-1
  */
  HoverBackgroundColor: --overridable;
  /*
    Hover background color
    @default 1
  */
  HoverBackgroundOpacity: --overridable;
  /*
    Hover text color
    @default color-5
  */
  HoverTextColor: --overridable;
  /*
    Helper text color
    @default color-4
  */
  HelperTextColor: --overridable;
  /*
    Helper text font
    @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
  */
  HelperTextFont: --overridable;
}

/*
 * 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/placeholder. 60% opacity when disabled and for the placeholder
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-text-field-main-text-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
 */
@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 color-5
 */
@property st-global(--wix-ui-tpa-text-field-hover-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);

:vars {
  mainBorderColor: color(fallback(value(MainBorderColor), value(defaultMainBorderColor)));
  mainBackgroundColor: color(fallback(value(MainBackgroundColor), value(defaultMainBackgroundColor)));
  mainTextColor: color(fallback(value(MainTextColor), value(defaultMainTextColor)));
  mainTextFont: fallback(font(value(MainTextFont)), font(value(defaultMainTextFont)));
  mainLabelTextColor: color(fallback(value(MainLabelTextColor), value(defaultMainLabelTextColor)));
  mainFloatingLabelTextColor: color(fallback(value(MainLabelTextColor), color-4));
  mainLabelFont: fallback(font(value(MainLabelFont)), font(value(defaultMainLabelFont)));
  mainFloatingLabelFont: fallback(font(value(MainLabelFont)), font(value(defaultMainFloatingLabelFont)));
  mainCharCountFont: fallback(font(value(CharCountFont)), font(value(defaultCharCountFont)));
  mainCharCountColor: color(fallback(value(CharCountColor), value(defaultCharCountColor)));
  mainBorderRadius: fallback(value(MainBorderRadius), value(defaultMainBorderRadius));
  mainBorderWidth: fallback(value(MainBorderWidth), value(defaultMainBorderWidth));
  disabledLabelColor: color(fallback(value(DisabledLabelColor), value(defaultDisabledLabelColor)));
  mainTextualPrefixColor: color(fallback(value(PrefixColor), value(defaultTextualPrefixColor)));
  mainIconsPrefixColor: color(fallback(value(PrefixColor), value(defaultIconsPrefixColor)));
  mainErrorColor: color(fallback(value(ErrorColor), value(defaultErrorColor)));
  mainBorderOpacity: fallback(value(MainBorderOpacity), value(defaultMainBorderOpacity));
  hoverBorderColor: color(fallback(value(HoverBorderColor), value(mainBorderColor)));
  hoverBorderWidth: fallback(value(HoverBorderWidth), value(mainBorderWidth));
  hoverBorderRadius: fallback(value(HoverBorderRadius), value(mainBorderRadius));
  hoverBackgroundColor: color(fallback(value(HoverBackgroundColor), value(mainBackgroundColor)));
  hoverBackgroundOpacity: fallback(value(HoverBackgroundOpacity), value(defaultHoverBackgroundOpacity));
  hoverTextColor: color(fallback(value(HoverTextColor), value(mainTextColor)));
  helperTextColor: color(fallback(value(HelperTextColor), value(defaultHelperTextColor)));
  helperTextFont: fallback(font(value(HelperTextFont)), font(value(defaultHelperTextFont)));
}


:vars {
  /** default state */
  textColor: value(mainTextColor);
  colorPlaceholder: color(value(defaultPlaceholderColor));
  backgroundColor: value(mainBackgroundColor);
  borderColor: value(mainBorderColor);
  border: 1px solid applyOpacity(value(borderColor), value(mainBorderOpacity));
  successBorderColor: applyOpacity(value(successColor), 0.6);
  errorBorderColor: applyOpacity(value(defaultErrorColor), 0.6);
}

:vars {
  /*Hover*/
  colorHover: value(hoverTextColor);
  backgroundColorHover: applyOpacity(value(hoverBackgroundColor), value(hoverBackgroundOpacity));
  borderColorHover: value(hoverBorderColor);
  successBorderColorHover: value(successColor);
  errorBorderColorHover: value(defaultErrorColor);
}

:vars {
  /*Focus*/
  colorFocus: value(hoverTextColor);
  successBorderColorFocus: value(successColor);
  errorBorderColorFocus: value(defaultErrorColor);
}

:vars {
  /*Disabled*/
  colorDisabled: color(value(defaultDisabledColor));
  backgroundColorDisabled: value(mainBackgroundColor);
  borderColorDisabled: applyOpacity(value(mainBorderColor), 0.6);
}

.root {
  -st-states: disabled, error, success, hasPrefix, hasSuffix, newErrorMessage, hasErrorMessage, hasFloatingLabel, hasFloatingLabelActive;
}

.root:error:newErrorMessage .errorWrapper {
  -st-mixin: ErrorMessageWrapper(
    ErrorColor value(mainErrorColor),
    MinMessageHeight unit(value(ErrorMessageMinHeight), px)
  );
}

.input {
  -st-extends: Input;
  -st-states: theme(enum(line, box));
  box-sizing: border-box;
  border-color: value(borderColor);
  border-radius: 0;
  transition: border-color .1s ease-in, border-width .1s ease-in;
  background-color: value(mainBackgroundColor);
  /* todo - Define fonts somewhere*/
  font: value(mainTextFont);
  display: flex;
  align-items: center;
  padding: 0;
}

.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 value(mainBackgroundColor) inset !important;
  -webkit-text-fill-color: value(mainTextColor);
}

.input:theme(box) {
  border: value(border);
  border-radius: unit(value(mainBorderRadius), px);
  border-width: unit(value(mainBorderWidth), px);
}

.input:theme(line) {
  border-bottom: value(border);
  border-radius: unit(value(mainBorderRadius), px);
  border-width: unit(value(mainBorderWidth), px);
  background-color: color(fallback(value(MainBackgroundColor), value(defaultLineThemeMainBackgroundColor)));
}

.input:hover, .input:focus {
  border-color: value(borderColorHover);
  border-radius: unit(value(hoverBorderRadius), px);
  border-width: unit(value(hoverBorderWidth), px);
}

.input:theme(box):hover, .input:theme(line):hover, .input:theme(box):focus, .input:theme(line):focus {
  background-color: value(backgroundColorHover);
}

.root:disabled .input {
  border-color: value(borderColorDisabled);
}

.root:disabled .input:theme(box) {
  background-color: value(backgroundColorDisabled);
}

.root:success .input {
  border-color: value(successBorderColor);
}

.root:success .input:hover {
  border-color: value(successBorderColorHover);
}

.root:success .input:focus {
  border-color: value(successBorderColorFocus);
}

.root:error:not(:newErrorMessage) .input {
  border-color: value(errorBorderColor);
}

.root:error:newErrorMessage .input {
  border-color: value(mainErrorColor) !important;
}

.root:error:not(:newErrorMessage) .input:hover {
  border-color: value(errorBorderColorHover);
}

.root:error:not(:newErrorMessage) .input:focus {
  border-color: value(errorBorderColorFocus);
}

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

.input::nativeInput {
  width: 100%;
  font: value(mainTextFont);
  line-height: 24px;
  vertical-align: middle;
  border: 0;
  color: value(textColor);
  box-sizing: border-box;
  background-color: transparent;
  padding: 8px 12px;
  margin: 0;
  min-width: 0;
}

.input:theme(line)::nativeInput {
  padding-left: 0;
  padding-right: 0;
}

.input:hover::nativeInput {
  color: value(colorHover);
}

.input:disabled::nativeInput {
  color: value(colorDisabled);
}

.input:focus::nativeInput {
  outline: 0;
  color: value(colorFocus);
}

.input::nativeInput::selection {
  background: applyOpacity(value(mainTextColor), 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: 8px;
}

.suffixWrapper:arrows {
  height: 100%;
}

.input:theme(box) {
  padding-inline-end: 12px;
}

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

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

.clearButton {
  -st-extends: TPAIconButton;
  -st-mixin: TPAIconButton(
    IconColor value(mainTextColor)
  );
  border-radius: 16px;
  outline: 0;
}

/* overrides the IconButton hover & focus styling */
.clearButton:hover, .clearButton:focus {
  opacity: 1;
  background-color: applyOpacity(value(mainTextColor), 0.12);
}

.customSuffix {
  color: value(mainTextColor);
  height: 100%;
  display: flex;
  align-items: center;
}

/* Placeholder color */
.input::nativeInput::-webkit-input-placeholder,
.input::nativeInput::placeholder
{
  color: value(colorPlaceholder);
}

.root:disabled .input::nativeInput::-webkit-input-placeholder,
.root:disabled .input::nativeInput::placeholder
{
  color: value(colorDisabled);
}

.label {
  font: value(mainLabelFont);
  color: value(mainLabelTextColor);
  display: inline-block;
  margin-bottom: 8px;
  -st-states: theme(enum(line, box)), style(enum(regular, floating));
}

.root:disabled .label {
  color: value(disabledLabelColor);
}

.charCount {
  display: flex;
  justify-content: flex-end;
  font: value(mainCharCountFont);
  color: value(mainCharCountColor);
  margin-top: 8px;
}

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

.errorMessage {
  display: none;
}

.errorIcon {
  color: value(defaultErrorColor) !important;
}

.successIcon {
  color: value(successColor);
}

.prefix {
  color: value(mainTextualPrefixColor);
  margin-inline-start: 12px;
  display: flex;
  align-items: center;
}

.prefix svg {
  color: value(mainIconsPrefixColor);
}

.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 {
  border-radius: unit(value(mainBorderRadius), px);
}

.input:hover input,
.input:focus input {
  border-radius: unit(value(hoverBorderRadius), px);
}

.arrowsSuffixWrapper {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 4px;
}

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

.root .helperText {
  font: value(helperTextFont);
  color: value(helperTextColor);
  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 {
  font: value(mainFloatingLabelFont);
  padding-top: 3.6px;
}

.label:style(floating) {
  font: inherit;
  color: value(mainFloatingLabelTextColor);
  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: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: 0px 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.deprecated.st.css" */