$form-spacing: rem-calc(20);

//inputs
$input-radius: 4px;
$input-font-size: $font-size-x-small;
$input-caret-color: $color-cerulean;
$input-color: $color-outer-space;
$input-disable-color: $color-pale-sky;
$input-placeholder-color: $color-gray-chateau;
$input-background: $color-white !default;
$input-background-focus: $color-white;
$input-background-disabled: $color-catskill-white;
$input-border: 1px solid $color-athens-gray;
$input-border-focus: 1px solid $color-cerulean;
$input-border-disabled: 1px solid $color-athens-gray;
$input-cursor-disabled: not-allowed !default;
$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;
$input-number-spinners: true;

@mixin form-element {
  $height: rem-calc(30);

  // display: block;
  box-sizing: border-box;
  width: 100%;
  height: $height;
  margin: 0;
  padding: $form-spacing / 4 $form-spacing / 2;

  border: $input-border;
  border-radius: $input-radius;
  background-color: $input-background;
  caret-color: $input-caret-color;
  font-size: $input-font-size;
  color: $input-color;

  @if has-value($input-transition) {
    transition: $input-transition;
  }

  &::placeholder {
    color: $input-placeholder-color;
  }

  &:disabled,
  &[readonly] {
    background-color: $input-background-disabled;
    cursor: $input-cursor-disabled;
  }

  // Focus state
  &:focus,
  &.focus {
    outline: none;
    border: $input-border-focus;
    background-color: $input-background-focus;
    // box-shadow: $input-shadow-focus;

    @if has-value($input-transition) {
      transition: $input-transition;
    }
  }
  &.form-control-large {
    height: rem-calc(40);
    line-height: rem-calc(40);
    font-size: rem-calc(16);
    margin-bottom: rem-calc(20);
  }
}

@mixin form-text {
  .form-control {
    @include form-element;
  }

  textarea.form-control {
    max-width: 100%;
    min-height: rem-calc(130);
    resize: none;

    &[rows] {
      height: auto;
    }
  }

  // Reset Normalize setting content-box to search elements
  input[type='search'].form-control {
    box-sizing: border-box;
  }

  // Number input styles
  [type='number'].form-control {
    @if not $input-number-spinners {
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;
      }
    }
  }
  .input-suffix {
    font-size: $font-size-x-small;
    color: $color-gray-chateau;
    position: absolute;
    right: rem-calc(10);
    top: rem-calc(8);
  }
}

@include form-text;