/**
  @prop --fw-textarea-input-color: Color of the textarea input
  @prop --fw-textarea-margin-bottom: Bottom margin for the textarea
  @prop --fw-hint-color: Color of the hint text.
  @prop --fw-warning-color: Color of the warning text.
  @prop --fw-error-color: Color of the error text.
  @prop --fw-textarea-min-height: Min-Height of the textarea.
  @prop --fw-textarea-width: Width of the textarea.
*/

@import '../../function-components/field-control.scss';

$label-font: $font-stack;
$input-bg: $color-milk;
$help-color: $color-smoke-300;
$error-color: $color-persimmon-800;
$input-disabled-bg: $color-smoke-25;
$input-hover-color: $color-smoke-700;
$input-focus-color: $color-azure-800;
$input-border: $color-smoke-100;
$warning-color: $color-casablanca-300;
$placeholder-color: $color-smoke-300;

@mixin stateStyle($_color) {
  & > textarea {
    border-color: $_color;
  }

  & > textarea:focus {
    box-shadow: none;
    border-color: $_color;
  }

  & > textarea:hover {
    border-color: $_color;
  }

  & + .help-block {
    color: $_color;
  }
}

.textarea-container {
  margin-block-end: var(--fw-textarea-margin-bottom, 0px);
  width: inherit;
}

// textarea Container Style
.textarea-container-inner {
  display: block;
  width: var(--fw-textarea-width, 100%);
  position: relative;

  textarea {
    border: 0;
    border: 1px solid $input-border;
    // margin: 5px 0 0;
    border-radius: 4px;
    padding-block-end: 5px;
    padding-inline: 12px;
    padding-block-start: 4px;
    background-color: $input-bg;
    box-shadow: none;
    min-height: var(--fw-textarea-min-height, 24px);
    font-size: $font-size-14;
    font-weight: $font-weight-semibold;
    letter-spacing: 0;
    line-height: 20px;
    font-family: inherit;
    cursor: text;
    display: inline-block;
    color: var(--fw-textarea-input-color, $color-elephant-900);
    @media screen and (prefers-reduced-motion: reduce) {
      &:hover,
      &:focus {
        transition: none;
      }
    }
    /* stylelint-disable */
    &:hover {
      border: 1px $input-hover-color solid;
      transition: 0.2s linear;
    }

    &:focus {
      outline: none;
      background: $input-bg;
      border: 1px solid transparent;
      box-shadow: 0 0 0 2px $input-focus-color;
    }

    &[disabled] {
      color: $color-smoke-300;
      background-color: $input-disabled-bg;
      border-style: solid;

      &:hover,
      &:focus {
        border: 1px solid $input-border;
        cursor: not-allowed;
      }
    }
  }

  //Help Block
  & + .help-block {
    font-size: $font-size-12;
    margin-block-start: 3px;
    color: $help-color;
    position: inherit;
    margin-block-end: 0;
    display: block;
    padding-inline-start: 2px;
  }

  &.error {
    @include stateStyle($error-color);
  }

  &.warning {
    @include stateStyle($warning-color);
  }
}

::placeholder {
  color: $placeholder-color;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: $placeholder-color;
}

::-moz-placeholder {
  color: $placeholder-color;
}

:-ms-input-placeholder {
  color: $placeholder-color;
}

:-moz-placeholder {
  color: $placeholder-color;
}

.responsive {
  width: 100%;
  box-sizing: border-box;
}
