@import '../../../styles/core.scss';

.TextArea {
  appearance: none;
  background-color: get(color 'ivory');
  border: 2px solid transparent;
  border-radius: 6px;
  box-sizing: border-box;
  color: get(color 'slate');
  font: inherit;
  max-width: 100%;
  min-height: 70px;
  outline: none;
  padding: ms(-1);
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;

  &:focus {
    background: #fff;
    border: 2px solid get(color 'blue');
    box-shadow: 0 0 0 3px rgba(get(color 'blue'), 0.25);
    color: get(grays, 1);
  }

  &:disabled {
    background: get(color 'ivory');
    color: get(color 'graphite');
    cursor: not-allowed;
  }

  // uncontrolled
  &:not(.TextArea_clean):not(.TextArea_dirty):invalid:focus {
    border-color: get(color 'red');
    box-shadow: 0 0 0 3px rgba(get(color 'red'), 0.4);
  }

  // controlled
  &_dirty:invalid {
    border-color: get(color 'red');

    &:focus {
      box-shadow: 0 0 0 3px rgba(get(color 'red'), 0.4);
    }
  }

  &::placeholder {
    color: get(color 'shale');
  }

  &_both {
    resize: both;
  }

  &_vertical {
    resize: vertical;
  }

  &_horizontal {
    resize: horizontal;
  }

  &_none {
    resize: none;
  }

  &_sm {
    font-size: ms(-1);
  }

  &_md {
    font-size: ms(0);
  }

  &_lg {
    font-size: ms(1);
  }
}