@import url("../../_style/_mixins.less");
@import url("../../_style/_theme.less");

.form-checkbox {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
label.label-checkbox, .form-checkbox {
  cursor: pointer;
  input[type="checkbox"], input[type="radio"] {
      display: none;
  }
}
label.label-checkbox i.icon-form-checkbox, .form-checkbox i {
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 22px;
  border: 1px solid #c7c7cc;
  box-sizing: border-box;
  display: block;
  &:after {
      content:' ';
      position: absolute;
      left: 50%;
      margin-left: -6px;
      top: 50%;
      margin-top: -4px;
      width: 12px;
      height: 9px;
  }
}
label.label-checkbox input[type="checkbox"]:checked + .item-media i.icon-form-checkbox,
label.label-checkbox input[type="radio"]:checked + .item-media i.icon-form-checkbox,
.form-checkbox input[type="checkbox"]:checked ~ i {
  border: none;
  background-color: @themeColor;
  &:after {
      background: no-repeat center;
      .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 12 9' xml:space='preserve'><polygon fill='#ffffff' points='12,0.7 11.3,0 3.9,7.4 0.7,4.2 0,4.9 3.9,8.8 3.9,8.8 3.9,8.8 '/></svg>");
      -webkit-background-size: 12px 9px;
      background-size: 12px 9px;
  }
}

label.label-checkbox, label.label-radio {
  .transition(300ms);
  html:not(.watch-active-state) &:active, &.active-state {
      .transition(0ms);
      background-color: #d9d9d9;
      .item-inner {
          .hairline-color(bottom, transparent);
      }
  }
}