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

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

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

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

/*Defaults*/
:vars {
  DefaultContainerWidth: 280px;
  DefaultContainerHeight: 92px;
  DefaultBorderColor: color-5;
  DefaultBackgroundColor: color-1;
  DefaultTextColor: color-5;
  DefaultDisabledTextColor: color-3;
  DefaultPlaceholderColor: color-4;
  DefaultFocusFontColor: color-1;
  DefaultDisabledBorderColor: color-3;
  DefaultTextFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5em'}";
  DefaultMainLabelFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
  DefaultMainLabelTextColor: color-5;
  DefaultMainBorderRadius: 0;
  DefaultMainBorderWidth: 1;
  DefaultDisabledLabelColor: color-5;
  DefaultCharCountFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
  DefaultCharCountColor: color-4;
  DefaultBorderOpacity: 0.6;
}

/*Overrides*/
:vars {
  /*
   The corner radius of the component
   @default 0
 */
  MainBorderRadius: --overridable;
  /*
    The width of the component’s border
    @default 1
  */
  MainBorderWidth: --overridable;
  /* Container width */
  ContainerWidth: --overridable;

  /* Container height */
  ContainerHeight: --overridable;

  /* Border color */
  BorderColor: --overridable;

  /* Background color */
  BackgroundColor: --overridable;

  /* Color of value text */
  TextColor: --overridable;

  /* Color of value text when text area is disabled */
  DisabledTextColor: --overridable;

  /* Placeholder text color */
  PlaceholderColor: --overridable;

  /*
      Text font
      @default {theme: 'Body-M', size: '16px', lineHeight: '1.5em'}
   */
  TextFont: --overridable;

  /*
      Border color in case of error
      @default #DF3131
      @deprecated replaced by ErrorColor which is part of the implementation of the newErrorMessage
  */
  ErrorBorderColor: --overridable;

  /*
      Border color in case of success
      @default #008250
  */
  SuccessBorderColor: --overridable;

  /* Border color when text area is disabled */
  DisabledBorderColor: --overridable;
  /*
    The font of the label
    @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
  */
  MainLabelFont: --overridable;
  /*
    The color of the label.
    @default color-5
  */
  MainLabelTextColor: --overridable;
  /*
        The color of the label when text area is disabled.
        @default color-3
      */
  DisabledLabelColor: --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 representing an error
      @default #DF3131
  */
  ErrorColor: --overridable;
  /*
      A minimum height for the error message element
  */
  ErrorMessageMinHeight: --overridable;
  /*
      Main border opacity
      @default 0.6
  */
  MainBorderOpacity: --overridable;
  /*
     Hover border color
     @default BorderColor
 */
  HoverBorderColor: --overridable;
  /*
      Hover border width
      @default MainBorderWidth
  */
  HoverBorderWidth: --overridable;
  /*
      Hover border radius
      @default MainBorderRadius
  */
  HoverBorderRadius: --overridable;
  /*
      Hover Background color
      @default BackgroundColor
  */
  HoverBackgroundColor: --overridable;
  /*
      Hover Background color
      @default 1
  */
  HoverBackgroundOpacity: --overridable;
  /*
      Hover Text color
      @default MainLabelTextColor
  */
  HoverTextColor: --overridable;
}

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

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

/*
 * Container width
 * @type size
 */
@property st-global(--wix-ui-tpa-text-area-container-width);

/*
 * Container height
 * @type size
 */
@property st-global(--wix-ui-tpa-text-area-container-height);

/*
 * Border color
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-border-color);

/*
 * Background color
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-background-color);

/*
 * Color of value text
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-text-color);

/*
 * Color of value text when text area is disabled
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-disabled-text-color);

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

/*
 * Text font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px', lineHeight: '1.5em'}
 */
@property st-global(--wix-ui-tpa-text-area-text-font);

/*
 * Border color in case of error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-text-area-error-border-color);

/*
 * Border color in case of success
 * @type color
 * @default #008250
 */
@property st-global(--wix-ui-tpa-text-area-success-border-color);

/*
 * Border color when text area is disabled
 * @type color
 */
@property st-global(--wix-ui-tpa-text-area-disabled-border-color);

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

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

/*
 * The color of the label when text area is disabled.
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-text-area-disabled-label-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-area-char-count-font);

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

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

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

/*
 * Main border opacity
 * @default 0.6
 */
@property st-global(--wix-ui-tpa-text-area-main-border-opacity);

/*
 * The color of the component’s border when hovered
 * @type color
 * @default --wix-ui-tpa-text-area-border-color
 */
@property st-global(--wix-ui-tpa-text-area-hover-border-color);

/*
 * The width of the component’s border when hovered
 * @type size
 * @default --wix-ui-tpa-text-area-hover-border-width
 */
@property st-global(--wix-ui-tpa-text-area-hover-border-width);

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

/*
 * The corner radius of the component when hovered
 * @type color
 * @default --wix-ui-tpa-text-area-background-color
 */
@property st-global(--wix-ui-tpa-text-area-hover-background-color);

/*
 * The corner radius of the component when hovered
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-text-area-hover-background-opacity);

/*
 * The corner radius of the component when hovered
 * @type color
 * @default --wix-ui-tpa-text-area-main-label-text-color
 */
@property st-global(--wix-ui-tpa-text-area-hover-text-color);

:vars {
  containerWidth: fallback(value(ContainerWidth), value(DefaultContainerWidth));
  containerHeight: fallback(value(ContainerHeight), value(DefaultContainerHeight));
  borderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
  backgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
  textColor: color(fallback(value(TextColor), value(DefaultTextColor)));
  textFont: fallback(font(value(TextFont)), font(value(DefaultTextFont)));
  disabledTextColor: color(fallback(value(DisabledTextColor), value(DefaultDisabledTextColor)));
  placeholderColor: color(fallback(value(PlaceholderColor), value(DefaultPlaceholderColor)));
  successBorderColor: color(fallback(value(SuccessBorderColor), value(successColor)));
  errorBorderColor: color(fallback(value(ErrorBorderColor), value(defaultErrorColor)));
  mainLabelFont: fallback(font(value(MainLabelFont)), font(value(DefaultMainLabelFont)));
  mainLabelTextColor: color(fallback(value(MainLabelTextColor), value(DefaultMainLabelTextColor)));
  mainBorderRadius: fallback(value(MainBorderRadius), value(DefaultMainBorderRadius));
  mainBorderWidth: fallback(value(MainBorderWidth), value(DefaultMainBorderWidth));
  disabledLabelColor: color(fallback(value(DisabledLabelColor), value(DefaultDisabledLabelColor)));
  charCountFont: fallback(font(value(CharCountFont)), font(value(DefaultCharCountFont)));
  charCountColor: color(fallback(value(CharCountColor), value(DefaultCharCountColor)));
  borderWidth: unit(value(mainBorderWidth), px);
  mainErrorColor: color(fallback(value(ErrorColor), value(defaultErrorColor)));
  mainBorderOpacity: fallback(value(MainBorderOpacity),value(DefaultBorderOpacity));
  hoverBorderColor: color(fallback(value(HoverBorderColor), value(borderColor)));
  hoverBorderWidth: unit(fallback(value(HoverBorderWidth), value(mainBorderWidth)), px);
  hoverBorderRadius: unit(fallback(value(HoverBorderRadius), value(mainBorderRadius)), px);
  hoverBackgroundColor: color(fallback(value(HoverBackgroundColor), value(backgroundColor)));
  hoverBackgroundOpacity: fallback(value(HoverBackgroundOpacity), 1);
  hoverTextColor: color(fallback(value(HoverTextColor), value(textColor)));
}

.root {
  -st-states: theme(enum(line, box)), disabled, error, success, rtl, errorMessage, newErrorMessage, hasErrorMessage;
  width: value(containerWidth);
}

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

.textAreaWrapper {
  -st-states: withResize;
  background-color: value(backgroundColor);
  box-sizing: border-box;
  display: flex;
  position: relative;
  height: value(containerHeight);

  border-radius: unit(value(mainBorderRadius), px);
  border-width: 0;
  border-color: applyOpacity(value(borderColor), value(mainBorderOpacity));
  border-style: solid;
}

.textAreaWrapper:withResize {
  overflow: hidden;
  resize: both;
}

.root:theme(box) .textAreaWrapper {
  border-width: value(borderWidth);
  padding: 8px 0;
}

.root:theme(box) .textAreaWrapper:active,
.root:theme(box) .textAreaWrapper:hover,
.root:theme(box) .textAreaWrapper:focus,
.root:theme(box) .textAreaWrapper:focus-within
{
  border-radius: value(hoverBorderRadius);
  border-width: value(hoverBorderWidth);
}

.root:theme(line) .textAreaWrapper {
  border-bottom-width: value(borderWidth);
  padding: 0;
}

.root:theme(line) .textAreaWrapper:active,
.root:theme(line) .textAreaWrapper:hover,
.root:theme(line) .textAreaWrapper:focus,
.root:theme(line) .textAreaWrapper:focus-within
{
  border-bottom-width: value(hoverBorderWidth);
  padding: 0;
}

.root:theme(box) .textAreaWrapper:active,
.root:theme(box) .textAreaWrapper:hover,
.root:theme(box) .textAreaWrapper:focus,
.root:theme(box) .textAreaWrapper:focus-within
{
  border-width: value(hoverBorderWidth);
}

.textAreaWrapper:active,
.textAreaWrapper:hover,
.textAreaWrapper:focus,
.textAreaWrapper:focus-within
{
  border-color: value(hoverBorderColor);
  border-radius: value(hoverBorderRadius);
  background-color: applyOpacity(value(hoverBackgroundColor), value(hoverBackgroundOpacity));
}

.textAreaWrapper:active > textarea,
.textAreaWrapper:hover > textarea,
.textAreaWrapper:focus > textarea,
.textAreaWrapper:focus-within > textarea
{
  color: value(hoverTextColor);
  background-color: initial;
}

.textArea {
  resize: none;
  border: none;
  height: 100%;
  width:  100%;
  box-sizing: border-box;
  color: value(textColor);
  padding: 0 12px;
  overflow: hidden;
  background-color: inherit;
  font: value(textFont);
  border-radius: unit(value(mainBorderRadius), px);
}

.textArea:hover,
.textArea:focus
{
  overflow: auto;
}

.textArea::placeholder,
.textArea::-webkit-input-placeholder
{
  color: value(placeholderColor);
}

.errorIconWrapper {
  height: 24px;
  position: absolute;
  display: flex;
  padding: 0 8px;
  box-sizing: border-box;
  top: 5px;
  width: 100%;
  justify-content: flex-end;
  pointer-events: none;
}

.root:theme(line) .errorIconWrapper {
  padding-inline-end: 0;
}

.iconTooltip {
  pointer-events: auto;
}

.root:theme(line) .iconTooltip {
  margin: 0 -4px;
}

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

.root:theme(line) .textAreaWrapper .textArea {
  padding-left: 0;
  padding-right: 0;
}

.root:error:not(:newErrorMessage) .textAreaWrapper {
  border-color: applyOpacity(value(errorBorderColor), 0.6) !important;
}

.root:error:newErrorMessage .textAreaWrapper {
  border-color: var(--wut-error-color, value(defaultErrorColor)) !important;
}

.root:hover:error:not(:newErrorMessage) .textAreaWrapper,
.root:focus:error:not(:newErrorMessage) .textAreaWrapper
{
  border-color: value(errorBorderColor) !important;
}

.root:hover:error:newErrorMessage .textAreaWrapper,
.root:focus:error:newErrorMessage .textAreaWrapper
{
  border-color: var(--wut-error-color, value(defaultErrorColor)) !important;
}

.root:error:errorMessage:not(:rtl) .textAreaWrapper .textArea {
  padding-right: 38px;
}

.root:error:errorMessage:rtl .textAreaWrapper .textArea {
  padding-left: 38px;
}

.root:success  .textAreaWrapper{
  border-color: applyOpacity(value(successBorderColor), 0.6);
}

.root:hover:success .textAreaWrapper,
.root:focus:success .textAreaWrapper
{
  border-color: value(successBorderColor);
}

.root:disabled .textAreaWrapper {
  border-color: color(fallback(value(DisabledBorderColor), value(DefaultDisabledBorderColor)));
}

.root:disabled .textAreaWrapper:hover {
  border-color: color(fallback(value(DisabledBorderColor), value(DefaultDisabledBorderColor)));
}

.root:disabled .textAreaWrapper .textArea {
  color: value(disabledTextColor);
}

.root .label{
  font: value(mainLabelFont);
  color: value(mainLabelTextColor);
  display: block;
  margin-bottom: 8px;
}

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

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

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

:global(#SITE_CONTAINER.focus-ring-active) .focused {
  -st-mixin: focusRing();
}

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