/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  --wcs-textarea-text-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-textarea-value-color: var(--wcs-semantic-color-text-primary);
  --wcs-textarea-value-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-textarea-placeholder-color: var(--wcs-semantic-color-text-tertiary);
  --wcs-textarea-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);
  --wcs-textarea-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);
  --wcs-textarea-icon-color-default: var(--wcs-semantic-color-foreground-brand);
  --wcs-textarea-icon-color-disabled: var(--wcs-semantic-color-foreground-disabled);
  --wcs-textarea-icon-color-focus: var(--wcs-semantic-color-foreground-brand);
  --wcs-textarea-border-color-default: var(--wcs-semantic-color-border-primary);
  --wcs-textarea-border-color-disabled: var(--wcs-semantic-color-border-disabled);
  --wcs-textarea-border-color-error: var(--wcs-semantic-color-border-critical);
  --wcs-textarea-border-color-focus: var(--wcs-semantic-color-border-control-focus);
  --wcs-textarea-border-style-default: solid;
  --wcs-textarea-border-style-error: solid;
  --wcs-textarea-border-style-focus: var(--wcs-semantic-border-style-focus-control);
  --wcs-internal-textarea-border-radius-left: var(--wcs-textarea-border-radius-left, var(--wcs-semantic-border-radius-base));
  --wcs-internal-textarea-border-radius-right: var(--wcs-textarea-border-radius-right, var(--wcs-semantic-border-radius-base));
  --wcs-textarea-border-width: var(--wcs-semantic-border-width-default);
  --wcs-textarea-border-width-focus: var(--wcs-semantic-border-width-large);
  --wcs-textarea-gap: var(--wcs-semantic-spacing-base);
  --wcs-textarea-padding-top: var(--wcs-semantic-spacing-base);
  --wcs-textarea-padding-bottom: var(--wcs-semantic-spacing-base);
  --wcs-internal-textarea-padding-left: var(--wcs-textarea-padding-left, var(--wcs-semantic-spacing-large));
  --wcs-internal-textarea-padding-right: var(--wcs-textarea-padding-right, var(--wcs-semantic-spacing-large));
  --wcs-textarea-min-height: var(--wcs-semantic-size-m);
  --wcs-internal-textarea-max-height: var(--wcs-textarea-max-height, unset);
  --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-default);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--wcs-textarea-gap);
  width: 100%;
  border-radius: var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);
  background-color: var(--wcs-textarea-background-color);
  outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-default);
  outline-offset: calc(-1 * var(--wcs-textarea-border-width));
  background-clip: padding-box;
  box-sizing: border-box;
}
:host textarea {
  box-sizing: border-box;
  font-family: inherit;
  overflow: auto;
  flex: 1;
  width: 100%;
  min-height: var(--wcs-textarea-min-height);
  max-height: var(--wcs-internal-textarea-max-height);
  background-color: transparent;
  color: var(--wcs-textarea-value-color);
  font-weight: var(--wcs-textarea-value-font-weight) !important;
  border: none;
  padding-top: var(--wcs-textarea-padding-top);
  padding-bottom: var(--wcs-textarea-padding-bottom);
  padding-left: var(--wcs-internal-textarea-padding-left);
  padding-right: var(--wcs-internal-textarea-padding-right);
  font-size: 1rem;
  line-height: 1.5;
}
:host textarea::placeholder {
  color: var(--wcs-textarea-placeholder-color);
  opacity: 1;
  font-weight: var(--wcs-textarea-placeholder-font-weight);
  font-style: var(--wcs-textarea-placeholder-font-style);
}
:host textarea:focus {
  box-shadow: none;
  outline: 0;
}
:host wcs-mat-icon {
  margin-left: var(--wcs-internal-textarea-padding-left);
  color: var(--wcs-textarea-icon-color-default);
}

:host([disabled]) {
  --wcs-textarea-background-color: var(--wcs-semantic-color-background-control-disabled);
  outline: var(--wcs-textarea-border-style-default) var(--wcs-textarea-border-width) var(--wcs-textarea-border-color-disabled);
}
:host([disabled]) textarea {
  color: var(--wcs-textarea-text-color-disabled);
  cursor: not-allowed;
}
:host([disabled]) textarea::placeholder {
  color: var(--wcs-textarea-text-color-disabled);
}
:host([disabled]) wcs-mat-icon {
  color: var(--wcs-textarea-icon-color-disabled);
}

:host([icon]) textarea {
  padding-left: 0;
}

:host([state=error]) {
  outline-color: var(--wcs-textarea-border-color-error) !important;
}

:host(:focus-within) {
  outline: var(--wcs-textarea-border-style-focus) var(--wcs-textarea-border-width-focus) var(--wcs-textarea-border-color-focus);
  outline-offset: calc(var(--wcs-textarea-border-width-focus) * -1);
}
:host(:focus-within) wcs-mat-icon {
  color: var(--wcs-textarea-icon-color-focus);
}