.c-input {
  width: 100%;
  padding: space(1) space(2);
  color: palette(primary, 900);
  border: none;
  outline: none;

  &:focus {
    color: palette(text, 800);
    background-color: mix(palette(primary, 500), white, 25%);
    box-shadow: inset 0 4px 9px 0 rgba(0, 0, 0, 0.5);
  }

  .has-error & {
    box-shadow: inset 0 0 0 4px palette(action, 500);
    background-color: mix(palette(action, 300), white, 25%);
  }

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