@include b(checkbox-group) {
  & .mc-checkbox {
    margin-right: 22px;
  }
}


@include b(checkbox) {
  cursor: pointer;
  @include e(inner) {
    width: 17px;
    height: 17px;
    padding: 1px;
    display: inline-flex;
    border: 1px solid ;
    border-color: $checkbox-inner-border-color;
    background: none;
    margin-right: 6px;
    & i {
      visibility: hidden;
      font-size: 13px;
    }
    @include when(checked) {
      border-color:  $checkbox-inner-background-color;
      background-color: $checkbox-inner-background-color;
      & i {
        color: $white-color;
        visibility: visible;
      }
    }
    &:hover {
      border-color: $checkbox-inner-background-color;
    }

    @include when(disabled) {
      cursor: not-allowed;
      border-color: $checkbox-inner-disabled;
      background-color: $checkbox-inner-disabled;
      & i {
        color: $checkbox-inner-i-disabled;
        visibility: visible;
      }
    }
  }

  @include e(original) {
    width: 0;
    height: 0;
    display: none;
  }

  @include e(label) {
    font-size: 14px;
    @include when(disabled) {
      cursor: not-allowed;
    }
  }
}