// Normalize form controls
//
// While most of our form styles require extra classes, some basic normalization
// is required to ensure optimum display with or without those classes to better
// address browser inconsistencies.

// Input
//
// The `<input>` element is mostly used for text-based inputs that include the
// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
// `time`, `number`, `range`, `color`, and `file`.
//
// ### Styling
// The border should light up simply and clearly indicating which field the user is currently editing.
//
// ### Requirements
// Element should have a .form-control class.
//
// text - Type text
// email - Type email
// password - Type password
// color - Type color
// file - Type file
//
// markup: form-input.twig
//
// Weight: 0
//
// Style guide: atoms.form-controls.input

// Override content-box in Normalize (* isn't specific enough)
input[type="search"] {
  box-sizing: border-box;
}

// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9
; // IE8-9
  line-height: normal;
}

input[type="file"] {
  display: inline-block;
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


// Search inputs in iOS
//
// This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.

input[type="search"] {
  -webkit-appearance: none;
}
