Custom checkbox / radio button

checkbox.pug

.checkbox-wrapper
  input(type="checkbox", id="checkboxId", name="checkboxName")
  label(for="checkboxId") м. Семеновская
      span

checkbox.scss

@mixin customCheckReset() {
  display:none;
  & + label span {
    display:inline-block;
    vertical-align:middle;
    cursor: pointer;
  }
}
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}
.checkbox-wrapper input[type="checkbox"] {
  @include customCheckReset();
  & + label {
    width: 50%;
    position: relative;
  }
  & + label span {
    position: absolute;
    @include size(rem(35));
    margin: 0;
    border: 2px solid #666;
    background-color: #fff;
    border-radius: 2px;
    right: rem(-35);
    top:-2px;
  }
  &:checked + label span {
    &:before {
      content: '';
      display: block;
      position: absolute;
      @include size(rem(25));
      background: url(../images/check.svg) no-repeat;
      background-size: contain;
      bottom: 3px;
      left: rem(7);
    }
  }
}