.checkbox {
  position: relative;
}

.checkbox input,
.checkbox svg {
  width: 24px;
  height: 24px;
  display: block;
}

.checkbox input {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  outline: none;
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  transition: box-shadow .3s ease;
  box-shadow: inset 0 0 0 1px #D1D6EE;
}

.checkbox input:hover {
  box-shadow: inset 0 0 0 2px hsl(231, 39%, 81%);
}

.checkbox input:checked {
  box-shadow: inset 0 0 0 2px #6b7280;
  transition-delay: 0.4s;
}

.checkbox svg {
  pointer-events: none;
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #6b7280;
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  transform: scale(1) translateZ(0);
  stroke-dasharray: 86.12;
  stroke-dashoffset: 86.12;
  transition: stroke-dasharray .6s ease, stroke-dashoffset .6s ease;
}

.checkbox input:checked+svg {
  stroke-dasharray: 16.1 86.12;
  stroke-dashoffset: 102.22;
}