// @page Pattern Library/Forms
// @name Inputs
//
// @description
//   Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.
//
//   #### Best practices
//   * Specifying an appropriate [type attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type) (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.
//   * Where appropriate use the [autocomplete attribute](https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete) to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.
//
// @state .us-form-input--large - Larger input style
// @state .us-form-input--blocked - Fluid input style
// @state .us-form-input--error - Visual feedback for when the input has an error
// @state .us-form-input--success - Visual feedback for when success needs to be communicated to the user
// @state .us-form-input--disabled - Inactive state for form inputs that can't be interacted with
//
// @markup
//   <input class="us-form-input {$modifiers}" type="text" placeholder="Placeholder">

$input-placeholder-color: $c-inputgrey !default;

/// Creates a larger version of a form input, allows us to set the styles
/// in a responsive manner
///
/// @author David Annez
/// @group Forms
///
/// @param {String} $input-size [base]
///   Name of the size used in the form element list
///
/// @param {List} $input-sizes [$form-element-sizes]
///   List of sizes to pass through. Should contain 4 values per item,
///   `(size-name, height, padding, font-size)`

@mixin input-sizing($input-size: base, $input-sizes: $form-element-sizes) {
  @each $size in $input-sizes {
    @if nth($size, 1) == $input-size {
      height: nth($size, 2);
      padding: nth($size, 3);
      font-size: nth($size, 4);
    }
  }
}

.us-form-input {
  @extend %base-form-element;
  @extend %input-background--normalise;
  @include placeholder($input-placeholder-color);
  @include input-sizing();
  outline: 0;
  box-shadow: none;

  &:focus {
    @include placeholder(darken($input-placeholder-color, 15%));
  }

  .ie8 & {
    height: auto;
  }
}

.us-form-input.large,
.us-form-input--large {
  @include input-sizing(large);
}

.us-form-input--blocked {
  width: 100%;
}

.us-form-input--error {
  @extend %base-form-element--error;
}

.us-form-input--success {
  @extend %base-form-element--success;
}

.us-form-input:disabled,
.us-form-input--disabled {
  @include form-element-disabled;
}