@mixin custom-checkbox() {
  position: relative;
  margin: 0 1rem 0 0;
  cursor: pointer;
  margin-bottom: 5px;
  width: 22px;
  height: 22px;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: none;
  }
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    cursor: pointer;
  }
  &:checked {
    &:before {
      border: 4px solid #4caf50;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      width: 14px;
      height: 6px;
      top: 6px;
      left: 5px;
      border-top-style: none;
      border-right-style: none;
    }
    &:after {
      background: #f2f2f2;
    }
  }
}

// Checkbox & Multicheck Controls
.customize-control-checkbox,
.customize-control-multicheck {
  input[type="checkbox"] {
    @include custom-checkbox();
  }
}
