// .checkbox-item {
//   display: block;
//   position: relative;
//   padding-left: 30px;
//   margin-bottom: 7px;
//   width: 100%;
//   cursor: pointer;
//   input[type='checkbox'],
//   input[type='radio'] {
//     position: absolute;
//     opacity: 0;
//     cursor: pointer;
//     height: 1px;
//     width: 1px;
//     left: 0;
//     top: 50%;
//     pointer-events: none;
//   }

//   .checkmark {
//     position: absolute;
//     top: 49%;
//     transform: translateY(-50%);
//     left: 0;
//     height: 18px;
//     width: 18px;
//     border: 1px solid $primary-color;
//     &--radio {
//       border-radius: 50%;
//     }
//   }
//   &:hover input ~ .checkmark {
//     background-color: lighten($primary-color, 30%);
//   }
//   input:checked ~ .checkmark {
//     background-color: $primary-color;
//   }

//   .checkmark:after {
//     content: '';
//     position: absolute;
//     display: none;
//   }
//   input:checked ~ .checkmark:after {
//     display: block;
//   }
// }

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  // margin-bottom: 12px;
  cursor: pointer;
  // font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 17px;
  width: 17px;
  background-color: #fff;
  border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: white;
  border: 1px solid black;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid black;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

// How to use in HTML
// <div class="form-item">
//   <label class="checkbox-item fs-base">
//     Checkbox Label
//     <input type="checkbox" v-model="checkboxVModel" />
//     <span class="checkmark"></span>
//   </label>
// </div>