$inputBorder: 2px;

.c-input {
  @include font-size(m);
  @include border-radius(s);
  width: 100%;
  padding: (space(1) - $inputBorder) space(2);
  color: palette(text);
  border: $inputBorder solid palette(neutral, 300);
  outline: none;
  transition: all 200ms linear;

  .has-error & {
    border-color: palette(warning);
  }

  &:hover {
    border-color: palette(neutral, 400);
  }

  &:focus {
    box-shadow: 0 0 7px -3px rgba(palette(action), 0.75);
    border-color: palette(action);
  }

  @at-root textarea#{&} {
    display: block;
    padding: space(2);
    min-height: space(20) - double($inputBorder);
    line-height: space(3);
    resize: vertical;
  }
}