
// The %form-element can be used to style different kinds of form elements at
// the same time.
%form-element {
  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);
  color: color(text);

  @include input-placeholder() {
    color: color(grey-medium);
  }

  &: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`.

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

// 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).

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

// Fieldsets
//
// The `<fieldset>` element groups a set of form fields, optionally under a
// common name given by the `<legend>` element.

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

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;
    }
  }
}
