$line-height-input: $line-height-base !default;
$border-color-input: $color-gray-dark !default;
$color-input-active: $color-primary !default;
$minimum-textarea-lines: 4 !default;

@mixin input($color-input: $color-content-background) {
  @include screen-small() {
    min-width: 295px;
    width: auto;
  }

  @include auto-text-color($color-input);

  min-width: 0;
  width: 100%;
  position: relative;
  font-weight: normal;
  font-style: normal;
  margin: 0;
  max-width: 100%;
  outline: none;
  line-height: $line-height-input;

  /*
    IE or FF do not display the height of the inputfield correctly so
    we have to set the height manually.
  */
  height: $line-height-input + 2 * $padding-horizontal - 1em;

  padding: $padding-vertical $padding-horizontal;

  background: $color-input;
  border: 1px solid $border-color-input;
  border-radius: $border-radius-primary;

  &:focus {
    border-color: $color-input-active;
  }
}

@mixin input-error($color-input: $color-danger) {
  @include input();
  color: darken($color-input, 20%);
  border-color: $color-input;
  &:focus {
    color: $color-text;
  }
}

@mixin input-success($color-input: $color-success) {
  @include input();
  color: darken($color-input, 20%);
  border-color: $color-input;
  &:focus {
    color: $color-text;
  }
}

@mixin textarea {
  @include input();
  @include screen-small() {
    width: 100%;
  }
  width: 100%;
  resize: vertical;
  min-height: $padding-vertical * 2 + $line-height-base * $minimum-textarea-lines;
  box-sizing: border-box;
}
