input,
label,
select {
  display: block;
  font-family: $base-font-family;
  font-size: $base-font-size;  @include transition(opacity 0.125s ease-in-out, color 0.125s ease-in-out, background-color 0.125s ease-in-out, border-color 0.125s ease-in-out);
}

// Label
//
// Markup:
//   <label for="form-androidVersions">Android Version</label>
//   <input id="form-androidVersions" name="form-androidVersions" type="text" placeholder="Ex. 4.3" />
//
// Styleguide 3.11.1.
label {
  font-weight: 600;
  margin-bottom: modular-scale($base-font-size, 0, $base-ratio);

  &[required=required]:after {
    content: "*";
  }
}

// Inputs
//
// Overall base styling for inputs and textareas
//
// No styleguide reference.
textarea,
#{$all-text-inputs},
select[multiple=multiple] {
  @include box-sizing(border-box);
  @include transition(border-color);
  color: $color-text;

  background-color: $color-cw-white;
  border-radius: $base-border-radius;
  border: 1px solid $color-gray-dark;
  box-shadow: inset 0 0 $base-border-radius rgba($color-text, 0.5);
  font-family: $base-font-family;
  font-size: $base-font-size;
  margin-bottom: modular-scale($base-font-size, 2, $base-ratio);
  padding: modular-scale($base-font-size, 0, $base-ratio);
  width: 100%;

  &:hover {
    border-color: $color-gray-darker;
  }

  &:focus {
    border-color: $color-gray-darker;
    box-shadow: inset 0 0 $base-border-radius rgba($color-text, 0.75);
    outline: none;
  }
}

// Textarea
//
// Markup:
// <textarea placeholder="Tell us about your experience with Crosswalk."></textarea>
//
// Styleguide 3.11.3.
textarea {
  resize: vertical;
}

// Search Input
//
// Markup:
// <input type="search" placeholder="Search, ex. Cordova…" />
//
// Styleguide 3.11.4.
input[type="search"] {
  @include appearance(none);
}

// Checkboxes
//
// Markup:
// <label>Tizen</label>
// <input type="checkbox" />
// <label>Android</label>
// <input type="checkbox" checked="checked" />
//
// Styleguide 3.11.5.
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin-right: $gutter;
}

// File
//
// Markup:
// <input type="file" />
//
// Styleguide 3.11.6.
input[type="file"] {
  padding-bottom: modular-scale($base-font-size, 2, $base-ratio);
  width: 100%;
}

// Select
//
// Markup:
// <select>
// <option>1</option>
// <option>2</option>
// <option>3</option>
// </select>
//
// Styleguide 3.11.7.
select {
  margin-bottom: modular-scale($base-font-size, 2, $base-ratio);
  max-width: 100%;
  width: auto;
}

// Filedset
//
// Markup:
// <form>
// <fieldset>
//   <legend>Versions</legend>
//   <label for="form-androidVersions">Android Version</label>
//   <input id="form-androidVersions" name="form-androidVersions" type="text" placeholder="Ex. 4.3" />
// </fieldset>
// </form>
//
// Styleguide 3.11.8.
fieldset {
  margin: 0 0 modular-scale($base-font-size, 2, $base-ratio) 0;
  padding: modular-scale($base-font-size, 2, $base-ratio)
}

// Form
//
// Additional form styling
//
// Markup:
// <form class="form">
// </form>
//
// No styleguide reference.
.form {

}

// Form Button Group
//
// An input paired with a button
//
// Markup:
// <form class="form">
//   <fieldset class="form-buttonGroup">
//     <input type="email" placeholder="Add your email, learn Android development" />
//     <input type="submit" value="join" class="button button--secondary" />
//   </fieldset>
// </form>
//
// Styleguide 3.11.9.
.form-buttonGroup {
  padding: 0;
  margin: 0;
  border: 0;
  margin-bottom: modular-scale($base-font-size, 2, $base-ratio);

  @include media($narrow) {
    #{$all-text-inputs} {
      @include span-columns(3 of 5);
      margin-bottom: 0;
      margin-right: 0;
      border-radius: $base-border-radius 0 0 $base-border-radius;
      border-right: 0;
      height: modular-scale($base-font-size, 6, $base-ratio);
      line-height: 1.5;
    }
    .button,
    button,
    input[type="button"] {
      height: modular-scale($base-font-size, 6, $base-ratio);
      line-height: 1;
      @include span-columns(2 of 5);
      border-radius: 0 $base-border-radius $base-border-radius 0;
    }
  }
}
