@import '../../scss/variables/colors';

.textarea {
  resize: none;
  border: 1px solid $border-primary-color;
  border-radius: 4px;
  line-height: 20px;
  padding: 8px 10px;
  width: 100%;
  font-size: 15px;
  color: $font-primary-color;
  box-sizing: border-box;
  transition: border 0.25s ease-in-out;
  will-change: border-color;
  background-clip: padding-box;

  &::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: $font-primary-color;
    opacity: 0.4; /* Firefox */
  }

  &::-ms-input-placeholder { /* Microsoft Edge */
    color: $font-primary-color;
    opacity: 0.4;
  }

  &:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: $font-primary-color;
    opacity: 0.4;
  }

  &:focus {
    border-color: $primary-color;
    outline: 0;
  }

  &:hover {
    border-color: $field-hover-border-color;
    outline: 0;
  }

  &--error,
  &--error:focus {
    border-color: $error-color;
  }

  &:disabled {
    color: $font-primary-color;
    opacity: 0.4;
    cursor: not-allowed;
  }
}