@import 'mixins/size';

@include b(textarea) {
  @include utils-input;

  display: block;
  width: 100%;
  padding: 3px calc(var(--#{$rd-prefix}horizontal-space-size) - 1px);
  margin: 0;
  color: var(--#{$rd-prefix}text-color);
  resize: vertical;
  background-color: var(--#{$rd-prefix}background-color-input);
  border: 1px solid var(--#{$rd-prefix}color-border);
  border-radius: var(--#{$rd-prefix}border-radius);
  transition: border-color var(--#{$rd-prefix}animation-duration-base) linear;

  &[data-form-invalid-warning='true'] {
    border-color: var(--#{$rd-prefix}color-warning) !important;
    caret-color: var(--#{$rd-prefix}color-warning) !important;
  }

  &[data-form-invalid-error='true'] {
    border-color: var(--#{$rd-prefix}color-danger) !important;
    caret-color: var(--#{$rd-prefix}color-danger) !important;
  }

  &:hover {
    border-color: var(--#{$rd-prefix}color-primary-lighter);
  }

  &:focus {
    border-color: var(--#{$rd-prefix}color-primary);
  }

  &::placeholder {
    color: $rd-placeholder-color;
  }

  &:disabled {
    color: var(--#{$rd-prefix}color-disabled);
    pointer-events: none;
    background-color: var(--#{$rd-prefix}background-color-disabled);

    &::placeholder {
      color: $rd-placeholder-disabled-color;
    }
  }

  @include component-size;

  @include e(count) {
    font-variant-numeric: tabular-nums;
    line-height: 28px;
    color: var(--#{$rd-prefix}text-color-sub);
    text-align: right;
  }
}