.checkbox {
  -webkit-box-align: center;
          align-items: center;
  cursor: pointer;
  display: -webkit-box;
  display: flex;
  position: relative;
}
.checkbox:hover .checkbox__input ~ .checkbox__checkmark {
  background-color: #aaa;
}
.checkbox__input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
.checkbox__input:checked ~ .checkbox__checkmark, .checkbox__input:checked:hover ~ .checkbox__checkmark {
  background-color: #0ca4f2;
}
.checkbox__input:checked ~ .checkbox__checkmark::after, .checkbox__input:checked:hover ~ .checkbox__checkmark::after {
  display: block;
}
.checkbox__input:focus ~ .checkbox__checkmark {
  border-color: #0ca4f2;
}
.checkbox__checkmark {
  -webkit-box-align: center;
          align-items: center;
  background-color: #cacaca;
  border: 1px solid transparent;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  margin-right: 0.5rem;
  min-height: 1.5625rem;
  min-width: 1.5625rem;
}
.checkbox__checkmark::after {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  content: "";
  display: none;
  height: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 5px;
}