/// Custom checkbox factory. Customizations not
/// available through parametes can be applied to the label
/// element child of classname `$class` as follows:
///
/// + Using the mixins defaults, the colors and appearence of the checkbox
/// can be targeted via `.checkbox label`.
/// + For the checkmark itself,
/// target `.checkbox input:checked + label:after`
///
/// See the example for required markup:
///
/// @example html
///   <div class="checkbox">
///     <input type="checkbox" checked>
///     <label></label>
///   </div>
///
/// @param {Number} $class [checkbox] the classname for your checkbox container
/// @param {Number} $size [18px]
/// @param {Number} $color [#222]
/// @param {Number} $background [#ddd]
/// @param {Number} $border [2px solid lighten($color, 10%)]
/// @param {Number} $border-radius [0]
/// @link http://codepen.io/Lokua/pen/jWOZJd?editors=110
/// @group form
@mixin o-checkbox(

    $class: checkbox,
    $size: 18px,
    $color: #222,
    $background: #ddd,
    $border: 2px solid lighten($color, 10%),
    $border-radius: 0

  ) {

  .#{$class} {

    position: relative;
    display: inline-block;

    input[type=checkbox] {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: $size;
      height: $size;
      margin: 0;
      padding: 0;
      cursor: pointer;
      baseline-shift: super;

      &:checked + label:after {
        position: absolute;
        top: $size * 0.125 * -1;
        display: inline-block;
        margin: 0;
        padding: 0;
        text-align: center;
        content: '\2713';
        font-family: monospace;
        font-weight: bold;
        font-size: $size;
        width: $size;
        height: $size;
      }

      &:not(checked) + label {
        content: '';
      }
    }

    label {
      display: inline-block;
      width: $size; height: $size;
      color: $color;
      background: $background;
      border: $border;
      border-radius: $border-radius;
      pointer-events: none;
    }

  }
}