@import (less) "variables.less";
@import (less) "mixins.less";
/*===============================================
Checkbox
=================================================*/
.input-wrapper{
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label{
    position: relative;
    padding-left: 0;
    cursor: pointer;
  }

  /* checkbox aspect */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before{
    .roundedcorners(20px);
    color: @grey-500;
    content: '';
    font: normal normal normal 18px/1 FontAwesome;
    position: absolute;
    line-height: 1;
    top: 5px; 
    right: -15px;
    width: 15px; 
    height: 15px;
    font-size: 22px;
  }
  [type="checkbox"]:checked + label:before{
    content: '\f096';
  }
  [type="checkbox"]:not(:checked) + label:before{
    content: '\f096';
    .roundedcorners(0);
  }
  /* checked mark aspect */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after{
    font: normal normal normal 18px/1 FontAwesome;
    content: "\f14a";
    position: absolute;
    top: 5px; 
    right: -15px;
    line-height: 1;
    color: @grey-500;
    display: inline-block;
    width: 15px; 
    height: 15px;
    .roundedcorners(20px);
    font-size: 22px;
  }
  /* checked mark aspect changes */
  [type="checkbox"]:not(:checked) + label:after{
    opacity: 0;
  }
  [type="checkbox"]:checked + label:before{
    opacity: 0;  
  }
  [type="checkbox"]:checked + label:after {
    opacity: 1;  
  }
  [type="checkbox"]:checked + label:after{
    content: "\f046";
  }
  /* disabled checkbox */
  [type="checkbox"]:disabled:not(:checked) + label:before,
  [type="checkbox"]:disabled:checked + label:before{
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
  }
  [type="checkbox"]:disabled:checked + label:after{
    color: #999;
  }
  [type="checkbox"]:disabled + label{
    color: #aaa;
  }
}