.c-custom-checkbox {
  $d: 14px;
  display: flex;
  align-items: center;

  label {
    @include userSelectNone();
    display: flex;
    align-items: center;
  }

  &__box {
    @include nice-input();
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: $d;
    width: $d;
    height: $d;
    margin-right: $interiorMarginSm;
  }

  input {
    opacity: 0;
    position: absolute;

    &:checked + label > .c-custom-checkbox__box {
      background: $colorKeyBg;
      &:before {
        color: $colorKeyFg;
        content: $glyph-icon-check;
        font-family: symbolsfont;
        font-size: 0.6em;
      }
    }

    &:not(:disabled) + label {
      cursor: pointer;
    }

    &:disabled + label {
      opacity: 0.5;
    }
  }
}