@import (reference) "fonts";
@import (reference) "colors";

.input {
  .font--content;
  transition: background-color 0.15s ease-in-out;
  display: inline-block;
  padding-left: 1rem;
  padding: 0.8rem 1rem;
  font-size: 1rem; // maybe
  border-radius: 5px;
  outline: none;
  box-sizing: border-box;
  border: 1px solid @color--gray-lighter;
  background-color  : @color--off-white;

  &:focus {
    border-color: @color--gray;
    background-color: @color--white;
  }

  &--invalid {
    border-color: @color--gray;
  }
}


.textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid @color--gray-light;
}

// Webkit, Blink, Edge
::-webkit-input-placeholder {
  color: @color--gray;
}

// Firefox 4-18
:-moz-placeholder {
  color: @color--gray;
}

// Firefox 19+
::-moz-placeholder {
  color: @color--gray;
}

// IE 10-11
:-ms-input-placeholder {
  color: @color--gray;
}