// ---
// title: Forms
// description: Form variations.
// ---

// <div class="example html">
//   <form>
//     <div class="lego-form__header">
//       <div class="lego-form__title">Title</div>
//       <p>Form information might go here if there was reason to do it.</p>
//     </div>
//     <fieldset>
//       <ol class="lego-form-fields">
//         <li class="lego-form-field__item">
//           <label class="lego-label">
//             Single Input
//             <span class="lego-label__optional">(Optional)</span>
//           </label>
//           <input type="text" class="lego-text-input">
//           <div class="lego-form-note">This is a form note.</div>
//         </li>
//         <li class="lego-form-field__item">
//           <label class="lego-label">Diabled Input</label>
//           <input type="text" class="lego-text-input" disabled>
//         </li>
//         <li class="lego-form-field__item">
//           <label class="lego-label">Add/Remove Row</label>
//           <table class="lego-table lego-table--add-row width-1">
//             <tr>
//               <td><input type="text" class="lego-text-input"></td>
//               <td><input type="text" class="lego-text-input"></td>
//               <td class="lego-table--add-row__controls">
//                 <div class="flex">
//                   <button class="lego-button push--right">
//                     <svg class="lego-icon">
//                       <use xlink:href="#add"></use>
//                     </svg>
//                   </button>
//                 </div>
//               </td>
//             </tr>
//             <tr>
//               <td><input type="text" class="lego-text-input"></td>
//               <td><input type="text" class="lego-text-input"></td>
//               <td class="lego-table--add-row__controls">
//                 <div class="flex">
//                   <button class="lego-button push--right">
//                     <svg class="lego-icon">
//                       <use xlink:href="#add"></use>
//                     </svg>
//                   </button>
//                   <button class="lego-button">
//                     <svg class="lego-icon">
//                       <use xlink:href="#close"></use>
//                     </svg>
//                   </button>
//                 </div>
//               </td>
//             </tr>
//             <tr>
//               <td><input type="text" class="lego-text-input"></td>
//               <td><input type="text" class="lego-text-input"></td>
//               <td class="lego-table--add-row__controls">
//                 <div class="flex">
//                   <button class="lego-button push--right">
//                     <svg class="lego-icon">
//                       <use xlink:href="#add"></use>
//                     </svg>
//                   </button>
//                   <button class="lego-button">
//                     <svg class="lego-icon">
//                       <use xlink:href="#close"></use>
//                     </svg>
//                   </button>
//                 </div>
//               </td>
//             </tr>
//           </table>
//         </li>
//       </ol>
//     </fieldset>
//     <div class="lego-form__footer lego-button-row lego-button-row--right">
//       <button class="lego-button">Cancel</button>
//       <button class="lego-button lego-button--highlight">Submit</button>
//     </div>
//   </form>
// </div>

// <div class="example html">
//   <form>
//     <fieldset>
//       <ol class="lego-form-fields">
//         <li class="lego-form-field__item">
//           <label class="lego-label">Textarea</label>
//           <textarea class="lego-textarea"></textarea>
//         </li>
//         <li class="lego-form-field__item">
//           <label class="lego-label">Fixed-width Input</label>
//           <input type="text" class="lego-text-input width-150">
//         </li>
//         <li class="lego-form-field__item">
//           <label class="lego-label">Fixed-width Input</label>
//           <input type="text" class="lego-text-input width-250">
//         </li>
//         <li class="lego-form-field__item">
//           <div class="lego-grid">
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//           </div>
//         </li>
//         <li class="lego-form-field__item">
//           <div class="lego-grid">
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <select name="zoo" id="zoo" class="lego-select">
//                 <option value="one">This is option one</option>
//                 <option value="two">And this is option two</option>
//               </select>
//             </div>
//           </div>
//         </li>
//         <li class="lego-form-field__item">
//           <div class="lego-grid">
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//             <div class="lego-grid__cell">
//               <label class="lego-label">Split Inputs</label>
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//           </div>
//         </li>
//         <li class="lego-form-field__item">
//           <label class="lego-label">Fill Space</label>
//           <div class="lego-grid">
//             <div class="lego-grid__cell">
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//             <div class="push-double--left">
//               <button class="lego-button lego-button--brand">Do This</button>
//             </div>
//           </div>
//         </li>
//         <li class="lego-form-field__item">
//           <label class="lego-label">Fill Space</label>
//           <div class="lego-grid">
//             <div class="lego-grid__cell">
//               <input type="text" class="lego-text-input" placeholder="This is placeholder">
//             </div>
//             <div class="push-double--left">
//               <select name="zoo" id="zoo" class="lego-select">
//                 <option value="one">This is option one</option>
//                 <option value="two">And this is option two</option>
//               </select>
//             </div>
//           </div>
//         </li>
//       </ol>
//     </fieldset>
//     <div class="lego-or">or</div>
//     <fieldset>
//       <ol class="lego-form-fields">
//         <li class="lego-label">Checklist</li>
//         <li class="lego-form-field__item">
//           <ul class="lego-input-list">
//             <li>
//               <input name="foo-1" id="foo-1" type="checkbox" checked=""> <label class="lego-label" for="foo-1">Send me email notifications when I am projected to or have exceeded my plan limits</label>
//             </li>
//             <li>
//               <input name="foo-2" id="foo-2" type="checkbox"> <label class="lego-label" for="foo-2">Send me email summaries of my experiment results</label>
//             </li>
//           </ul>
//         </li>
//       </ol>
//     </fieldset>
//     <fieldset>
//       <ol class="lego-form-fields">
//         <li class="lego-form-field__item">
//           <label class="lego-label">Select one thing or another</label>
//           <select name="zoo" id="zoo" class="lego-select">
//             <option value="one">This is option one</option>
//             <option value="two">And this is option two</option>
//           </select>
//         </li>
//         <li class="lego-form-field__item">
//           <ul class="lego-input-list">
//             <li>
//               <input name="radio-1" id="bar-1" type="radio" checked=""> <label class="lego-label" for="bar-1">Radio 1</label>
//             </li>
//             <li>
//               <input name="radio-1" id="bar-2" type="radio" disabled> <label class="lego-label lego-label--disabled" for="bar-2">Radio 2 with disabled label</label>
//             </li>
//             <li>
//               <input name="radio-1" id="bar-3" type="radio"> <label class="lego-label" for="bar-3">Radio 3</label>
//             </li>
//           </ul>
//         </li>
//       </ol>
//     </fieldset>
//     <fieldset>
//       <ol class="lego-form-fields">
//         <li class="lego-form-field__item">
//           <label class="lego-label">Horizontal Inputs</label>
//           <p>Use these only for short inputs where there's no chance they will wrap.</p>
//           <ul class="lego-input-list lego-input-list--horizontal">
//             <li>
//               <input name="radio-1" id="bar-1" type="radio" checked=""> <label class="lego-label" for="bar-1">Radio 1</label>
//             </li>
//             <li>
//               <input name="radio-1" id="bar-2" type="radio" disabled> <label class="lego-label lego-label--disabled" for="bar-2">Radio 2 with disabled label</label>
//             </li>
//             <li>
//               <input name="radio-1" id="bar-3" type="radio"> <label class="lego-label" for="bar-3">Radio 3</label>
//             </li>
//           </ul>
//         </li>
//         <li class="lego-label">Checklist</li>
//         <li class="lego-form-field__item">
//           <ul class="lego-input-list lego-input-list--horizontal">
//             <li>
//               <input name="foo-1" id="foo-1" type="checkbox" checked=""> <label class="lego-label" for="foo-1">Short option</label>
//             </li>
//             <li>
//               <input name="foo-2" id="foo-2" type="checkbox"> <label class="lego-label" for="foo-2">Another short option</label>
//             </li>
//           </ul>
//         </li>
//       </ol>
//     </fieldset>
//     <div class="lego-form__footer lego-button-row lego-button-row--right">
//       <button class="lego-button">Cancel</button>
//       <button class="lego-button lego-button--highlight">Submit</button>
//     </div>
//   </form>
// </div>
// <div class="example html">
//   <form>
//     <div class="lego-form__header">
//       <div class="lego-form__title">Error States</div>
//     </div>
//     <fieldset>
//       <ol class="lego-form-fields">
//         <li class="lego-form-field__item lego-form-bad-news">
//           <label class="lego-label lego-label--required">Address</label>
//           <input type="text" class="lego-text-input">
//           <div class="lego-form-note lego-form-note--bad-news">This field is required.</div>
//         </li>
//         <li class="lego-form-field__item lego-form-bad-news">
//           <label class="lego-label lego-label--required">Fill Space</label>
//           <select name="zoo" id="zoo" class="lego-select">
//             <option value="one">This is option one</option>
//             <option value="two">And this is option two</option>
//           </select>
//           <div class="lego-form-note lego-form-note--bad-news">This field is required.</div>
//         </li>
//         <li class="lego-form-field__item lego-form-bad-news">
//           <label class="lego-label lego-label--required">Textarea</label>
//           <textarea class="lego-textarea"></textarea>
//           <div class="lego-form-note lego-form-note--bad-news">This field is required.</div>
//         </li>
//       </ol>
//     </fieldset>
//   </form>
// </div>

// [---]

// ## Text inputs
//
// Instead of a `[type]` selector for each kind of form input, we just use a
// class to target any/every one, e.g.:

//[c]
//   <input type="text" class="lego-text-input">
//[/c]

.#{$namespace}form--small {
  font-size: map-fetch($font, size micro);
}

%#{$namespace}text-input,
%#{$namespace}textarea,
.#{$namespace}text-input,
.#{$namespace}textarea {
  @include transition(border-color map-fetch($transition-duration, base));
  width: 100%;
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);
  padding: 7px;
  vertical-align: middle;
  line-height: 1.3;

  &--small {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  &:hover {
    border-color: map-fetch($color, ui medium);
  }

  &:focus {
    border-color: map-fetch($color, ui brand-light);
  }

  &[disabled],
  &--disabled {
    background: map-fetch($color, background faint);
    color: map-fetch($color, ui medium);
    cursor: default;

    &:hover,
    &:focus {
      border-color: map-fetch($color, ui base);
    }
  }
}

.#{$namespace}textarea {
  height: 62px;
  resize: vertical;

  &--tall {
    height: 100px;
  }
}

.#{$namespace}select {
  @include transition(border-color map-fetch($transition-duration, base));
  box-sizing: content-box;
  display: inline-block;
  height: map-fetch($button, size base height);
  background: map-fetch($color, background white);
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);
  padding: 0 spacer(0.5);
  max-width: 100%;

  &:hover {
    border-color: map-fetch($color, ui medium);
  }

  &[disabled] {
    background: map-fetch($color, background faint);
    cursor: default;

    &:hover {
      border-color: map-fetch($color, ui base);
    }
  }
}

.#{$namespace}form__header {
  margin-bottom: spacer(2);
}

.#{$namespace}form__footer {
  margin-top: spacer(3);
}

.#{$namespace}form__title {
  font-size: map-fetch($font, size gamma);
  margin-bottom: spacer(1);
  line-height: 1;
}

.#{$namespace}form-fields {
  @extend %kill-last-child-margin;
  list-style: none;
  margin: 0;
}

.#{$namespace}form-field__item {
  margin-bottom: spacer(1.5);
}

fieldset {
  margin-bottom: spacer(4);
}

//## Labels
//
// Define a `.label` class as well as a `<label>` element. This means we can apply
// label-like styling to meta-labels for groups of options where a `<label>`
// element is not suitable.

.#{$namespace}label {
  display: block;
  margin-bottom: spacer(0.5);
  font-weight: 500;

  &__optional {
    margin-left: spacer(0.5);
    color: map-fetch($color, text muted);
    font-size: map-fetch($font, size micro);
    font-weight: 400;
  }

  &--required::after {
    content: '*';
    margin-left: spacer(0.5);
    color: map-fetch($color, text bad-news);
    font-weight: 400;
    font-size: map-fetch($font, size delta);
    line-height: 1;
    position: relative;
    top: 2px; // Corrects position.
  }

  &--rule {
    border-bottom: 1px solid map-fetch($color, ui base);
    padding-bottom: spacer(0.5);
  }

  &--disabled {
    color: map-fetch($color, text muted);
    cursor: default !important;
  }
}

// Labels in lego-input-lists

.#{$namespace}check-label,
.#{$namespace}input-list .#{$namespace}label {
  display: table-cell;
  padding-left: spacer(1);
  font-weight: 400;
}

//  Groups of checkboxes and radios.

.#{$namespace}input-list {
  list-style: none;
  margin: 0;

  > li {
    display: table;
    margin-bottom: spacer(0.5);
  }

  input {
    display: table-cell;
  }

  .#{$namespace}label {
    width: 100%;
  }

  // Horizontal version of inputs.

  &--horizontal {

    > li {
      padding-right: spacer(2);
      display: inline-block;
    }

    .#{$namespace}label {
      display: inline;
      padding-left: 6px; // Should be 10px but this compensates for white space.
    }
  }
}

.#{$namespace}or {
  text-align: center;
  color: map-fetch($color, text base);
  text-transform: uppercase;
  margin: spacer(1.5) auto;
  position: relative;

  &::before,
  &::after {
    content: '';
    border-top: 1px dotted map-fetch($color, ui base);
    width: 40%;
    position: absolute;
    left: 0;
    top: 50%;
  }

  &::after {
    left: auto;
    right: 0;
  }
}

// ## Icons in inputs
// This places an svg icon "inside" an input, to the right.

.#{$namespace}icon-input {
  @include display(flex);
  @include align-items(center);

  > input {
    z-index: 1;
    background: transparent;
  }

  .#{$namespace}icon-input__icon {
    margin-left: -(spacer(2.5));
    line-height: 1;
  }
}

// ## Form Notes

.#{$namespace}form-note {
  padding-top: spacer(0.5);
  font-size: map-fetch($font, size micro);
}

.#{$namespace}form-note--good-news {
  color: map-fetch($color, text good-news);
}

.#{$namespace}form-note--bad-news {
  color: map-fetch($color, text bad-news);
}

.#{$namespace}form-note--warning {
  color: map-fetch($color, text warning);
}

// ## Form Validations

.#{$namespace}form-good-news {
  .#{$namespace}label {
    color: map-fetch($color, text good-news);
  }

  .#{$namespace}text-input,
  .#{$namespace}select,
  .#{$namespace}textarea {
    border-color: map-fetch($color, ui good-news);
  }
}

.#{$namespace}form-bad-news {
  .#{$namespace}label {
    color: map-fetch($color, text bad-news);
  }

  .#{$namespace}text-input,
  .#{$namespace}select,
  .#{$namespace}textarea {
    border-color: map-fetch($color, ui bad-news);
  }
}

.#{$namespace}form-warning {
  .#{$namespace}label {
    color: map-fetch($color, text warning);
  }

  .#{$namespace}text-input,
  .#{$namespace}select,
  .#{$namespace}textarea {
    border-color: map-fetch($color, ui warning);
  }
}

// ## Form Validation Browser Overrides
// This prevents Firefox from adding an ugly red box shadow around required inputs.

[required] {
  box-shadow: none;
}