.vl-textarea {
  display: inline-block;
  background: $vl-page-bg;
  font-family: $vl-base-font;
  font-size: $vl-form-font-size;
  color: $vl-text-color;
  max-width: 100%;
  height: auto;
  line-height: normal;
  border-radius: 0;
  border: 0.1rem solid $vl-border-color;
  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
  padding: 0.5rem 1rem;

  @include respond-to(small) {
    font-size: 1.6rem;
  }

  &:hover {
    box-shadow: none;
  }

  &:focus,
  &--focus {
    outline: none;
    border-color: $vl-outline-color;
    box-shadow: inset 0 0 0 0.1rem $vl-outline-color;
  }

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

  // Textarea block modifier
  &--block {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  // Textarea error modifier
  &.invalid.validated,
  &--error {
    @include form-input-error;
  }

  &.valid.validated,
  &--success {
    @include form-input-success;
  }

  // Textarea disabled modifier
  &--disabled,
  &[disabled] {
    background-color: $vl-disabled-bg-color;
  }
}