@import "../styles/imgVar.less";
.check-box {
  &__wrapper {
    cursor: pointer;
    font-size: 30px;
    display: inline-block;
    &.disabled {
      opacity: 0.5;
    }
  }
  &__inner {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
  }
  &__input {
    -webkit-appearance: checkbox;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    & + .unchecked {
      display: inline-block !important;
    }
    &:checked + .unchecked {
      display: none !important;
    }
    &:checked + .unchecked + .checked {
      display: inline-block !important;
    }
  }
  .icon {
    &--checkbox,
    &--radio {
      display: none;
      width: 30px;
      height: 30px;
      position: relative;
      top: 0;
      left: 0;
    }
    &--checkbox.unchecked {
      .bg100(@cb_nor_2x)
    }
    &--checkbox.checked {
      .bg100(@cb_sel_2x)
    }
    &--radio.unchecked {
      .bg100(@rb_nor_2x)
    }
    &--radio.checked {
      .bg100(@rb_sel_2x)
    }
  }
}
