// Forms - Option Field
//
// Checkboxes and radio boxes. Progressively enhanced to look beautiful on modern browsers.
// Older browsers (such as Internet Explorer 8) will see platform-native controls.
//
// Markup:
//   <label class="field-label">Some checkboxes</label>
//   <div class="form-item">
//     <label class="option -checkbox">
//       <input checked type="checkbox" id="option1">
//       <span class="option__indicator"></span>
//       <span>Choose this option.</span>
//     </label>
//     <label class="option -checkbox">
//       <input type="checkbox" id="option2">
//       <span class="option__indicator"></span>
//       <span>Choose that option.</span>
//     </label>
//     <label class="option -checkbox">
//       <input type="checkbox" id="option3">
//       <span class="option__indicator"></span>
//       <span>Choose this unreasonably long-winded and ultimately pointless option.</span>
//     </label>
//   </div>
//   <label class="field-label">Some radio buttons</label>
//   <div class="form-item">
//     <label class="option -radio">
//       <input checked type="radio" name="choice" id="choice1">
//       <span class="option__indicator"></span>
//       <span>Choose one option.</span>
//     </label>
//     <label class="option -radio">
//       <input type="radio" name="choice" id="choice2">
//       <span class="option__indicator"></span>
//       <span>Choose the other option.</span>
//     </label>
//   </div>
//
// Styleguide Forms - Option Field
.option {
  position: relative;
  display: block;
  height: auto;
  padding-left: $base-spacing;
  margin: ($base-spacing / 4) 0;
  cursor: pointer;

  .option__indicator {
    display: none;
  }

  input {
    position: absolute;
    top: 2px;
    left: 0;
  }
}

.modernizr-checked.modernizr-label-click .option {
  overflow: hidden;

  // Hat tip to Mark Otto's [WTF, Forms](http://wtfforms.com)
  // for markup inspiration and Open Iconic for check and radio icons.
  //
  // https://useiconic.com/open/
  // Open Iconic released under MIT License.

  .option__indicator {
    position: absolute;
    top: 4px;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    color: $light-gray;
    background-color: #eee;
    background-size: 50% 50%;
    background-position: center center;
    background-repeat: no-repeat;
    user-select: none;
  }

  input {
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1; // Put the input behind the label so it doesn't overlay text
  }

  input:active ~ .option__indicator {
    color: #fff;
    background-color: darken($light-gray, $tint);
  }

  input:checked ~ .option__indicator {
    color: #fff;
    background-color: $blue;
  }

  input:checked:active ~ .option__indicator {
    background-color: darken($blue, $tint);
  }

  &.-checkbox {
    .option__indicator {
      border-radius: $lg-border-radius;
    }

    input:checked ~ .option__indicator {
      background-image: data-url($data-check-svg);
    }
  }

  &.-radio {
    .option__indicator {
      border-radius: 50%;
    }

    input:checked ~ .option__indicator {
      background-image: data-url($data-disc-svg);
    }
  }
}