// Dependencies.
@import '../normalize';
@import 'components/button/button';

// Forms
//
// Weight: 2
//
// Style guide: base.forms

//
// The following 8 rules are from normalize.css and help to fix inconsistencies
// across various browsers. You should probably leave these rules as is and jump
// to the "Buttons" rule on line 98 before you start editing this file.
//

// Correct margin displayed oddly in IE 6/7.
@if support-legacy-browser(ie, '7') {
  form {
    margin: 0;
  }
}

button,
input,
optgroup,
select,
textarea {
  // Keep form elements constrained in their containers.
  @include box-sizing(border-box);
  max-width: 100%;
  // Correct color not being inherited.
  // Known issue: affects color of disabled elements.
  color: inherit;
  // Correct font properties not being inherited.
  font: inherit;
  // Address margins set differently in Firefox 4+, Safari, and Chrome.
  margin: 0;
  @if support-legacy-browser(ie, '7') {
    // Address `font-family` inconsistency between `textarea` and other form in IE 7
    *font-family: $font-body;
    // Improve appearance and consistency with IE 6/7.
    *vertical-align: middle;
  }
}

// Address `overflow` set to `hidden` in IE 8/9/10/11.
button {
  overflow: visible;
}

// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
// Correct `select` style inheritance in Firefox.
button,
select {
  text-transform: none;
}

// Remove inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
//    and `video` controls.
// 2. Correct inability to style clickable `input` types in iOS.
html input[type="button"], // 1
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; // 2
}

// Fix the cursor style for Chrome's increment/decrement buttons. For certain
// `font-size` values of the `input`, it causes the cursor style of the
// decrement button to change from `default` to `text`.
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  // Address `appearance` set to `searchfield` in Safari and Chrome.
  -webkit-appearance: textfield;

  // Remove inner padding and search cancel button in Safari and Chrome on OS X.
  // Safari (but not Chrome) clips the cancel button when the search input has
  // padding (and `textfield` appearance).
  &::-webkit-search-cancel-button,
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }
}

// Buttons
//
// Buttons built with the `<button>` element are the most flexible for styling
// purposes. But `<input>` elements with `type` set to `submit`, `image`,
// `reset`, or `button` are also supported.
//
// Below is the default button styling. To see variations on the button styling
// see the [button component](section-components.html#kssref-components-button).
//
// Markup: forms-button.hbs
//
// :hover  - Hover styling.
//
// Style guide: base.forms.button

button,
[type="button"],
[type="reset"],
[type="submit"] {
  @extend %button;
}

// The %form-element can be used to style different kinds of form elements at
// the same time.
%form-element {
  width: 100%;
  padding: (50px - 3px - $base-line-height)/2 18px;
  border: 1px solid color(form-element-border);
  border-bottom: 2px solid color(form-element-border-bottom);
  // Needed for select elements in webkit.
  background-color: color(form-element-bg);
  // Address Firefox 4+ setting `line-height` on `input` using `!important` in
  // the UA stylesheet.
  line-height: $base-line-height;

  &:hover,
  &:focus {
    background-color: color(button-bg);
    border-bottom-color: color(form-element-border-hover);
  }

  &[disabled] {
    @include opacity(.65);

    &:hover,
    &:focus {
      background: none;
      border-bottom-color: color(form-element-border-bottom);
    }
  }
}

// Inputs
//
// 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`.
//
// Markup: forms-input.hbs
//
// :hover - Hover styling.
//
// Style guide: base.forms.input

input {
  &[type="text"],
  &[type="search"],
  &[type="tel"],
  &[type="url"],
  &[type="email"],
  &[type="password"],
  &[type="date"],
  &[type="time"],
  &[type="number"] {
    @extend %form-element;
  }

  &[type="range"] {
    // Add your styles.
  }

  &[type="color"] {
    height: 42px;
    width: 42px;
    padding: 2px;
  }

  &[type="file"] {
    @extend %form-element;
  }
}

// Checkboxes
//
// If an `<input>` element has the `type="checkbox"` attribute set, the form
// field is displayed as a checkbox.
//
// It's recommended that you don't attempt to style these elements. Firefox's
// implementation doesn't respect `box-sizing`, `padding`, or `width`.
//
// Markup: forms-input-checkbox.hbs
//
// Style guide: base.forms.input-checkbox

// Radio buttons
//
// If an `<input>` element has the `type="radio"` attribute set, the form field
// is displayed as a radio button.
//
// It's recommended that you don't attempt to style these elements. Firefox's
// implementation doesn't respect `box-sizing`, `padding`, or `width`.
//
// Markup: forms-input-radio.hbs
//
// Style guide: base.forms.input-radio

input[type="checkbox"],
input[type="radio"] {
  @if support-legacy-browser(ie, '10') {
    // Address box sizing set to `content-box` in IE 8/9/10.
    @include box-sizing(border-box);
    // Remove excess padding in IE 8/9/10.
    padding: 0;
  }
  // Remove excess padding in IE 7.
  // Known issue: excess padding remains in IE 6.
  @if support-legacy-browser(ie, '7') {
    *height: 13px;
    *width: 13px;
  }
}

// Fieldsets
//
// The `<fieldset>` element groups a set of form fields, optionally under a
// common name given by the `<legend>` element.
//
// Markup: forms-fieldset.hbs
//
// Style guide: base.forms.fieldset

fieldset {
  @include output-rhythm(padding, rhythm(.35) rhythm(.625) rhythm(.65));
  border: 1px solid color(border);
  // Define consistent border, margin, and padding.
  margin: 0 2px;
}

legend {
  // Correct `color` not being inherited in IE 8/9/10/11.
  @if support-legacy-browser(ie, '11') {
    border: 0;
  }
  // Align legend text with a fieldset's text while removing left padding so
  // people aren't caught out if they zero out fieldset padding.
  margin-left: -5px;
  padding: 0 5px;
  // Correct alignment displayed oddly in IE 6/7.
  @if support-legacy-browser(ie, '7') {
    *margin-left: -7px;

    @include rtl {
      *margin-left: 0;
      *margin-right: -7px;
    }
  }
}

// Labels
//
// The `<label>` element represents a caption of a form field. The label can be
// associated with a specific form control by using the `for` attribute or by
// putting the form control inside the label element itself.
//
// Markup: forms-label.hbs
//
// Style guide: base.forms.label

label {
  // Drupal-style form labels.
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
}

// Select list
//
// The `<select>` element represents a form field for selecting amongst a set of
// options.
//
// Known limitation: by default, Chrome and Safari on OS X allow very limited
// styling of `<select>`, unless a `border` property is set.
//
// Markup: forms-select.hbs
//
// Style guide: base.forms.select

select {
  @extend %form-element;
}

optgroup {
  // Don't inherit the `font-weight` (applied by a rule above).
  // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
  font-weight: bold;
}

// Text areas
//
// The `<textarea>` element represents a multi-line plain text form field.
//
// Markup: forms-textarea.hbs
//
// :hover - Hover styling.
//
// Style guide: base.forms.textarea

textarea {
  @extend %form-element;
  // Remove default vertical scrollbar in IE 8/9/10/11.
  overflow: auto;
}
