.container {
  --checkbox-size: 30px;
  --checkbox-width: 3px;
  --checkbox-border-radius: 4px;
  --tickmark-width: 5;
  --checkmark-box-color: purple;
  --checkmark-color: white;
}
.checkbox {
  display: none;
}
.checkbox-container {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  position: relative;
}
.checkbox-container .box {
  width: 100%;
  height: 100%;
  border: var(--checkbox-width) solid rgba(0, 0, 0, 0.5);
  border-radius: var(--checkbox-border-radius);
  transition: all 1s ease;
}
.checkbox-container:hover .box {
  border-color: var(--checkmark-box-color);
  border-width: calc(var(--checkbox-width) + 1px);
}

.checkbox-container .checkmark::before,
.checkbox-container .checkmark::after {
  content: "";
  background: var(--checkmark-box-color);
  width: 0%;
  height: 0%;
  position: absolute;
  top: 50%;
  transition: all 0.5s ease;
  z-index: -1;
}
.checkbox-container .checkmark:hover::before,
.checkbox:checked + .checkbox-label .checkmark::before {
  border-radius: var(--checkbox-border-radius);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.checkbox-container .checkmark:hover::after,
.checkbox:checked + .checkbox-label .checkmark::after {
  border-radius: var(--checkbox-border-radius);
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.checkbox-container .checkmark::after {
  right: 0;
}

.checkbox-container .checkmark {
  z-index: 2;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.checkbox:checked + .checkbox-label .checkmark::before,
.checkbox:checked + .checkbox-label .checkmark::after {
  width: 50%;
  height: 100%;
  top: 0;
}

.tick-container {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox:checked + .checkbox-label .tickmark {
  position: absolute;
  top: 0px;
  width: 100%;
  stroke: var(--checkmark-color);
  stroke-width: var(--tickmark-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.checkbox:checked + .checkbox-label .tickmark-check {
  stroke-dasharray: 36; /* Total length of the tick path */
  stroke-dashoffset: 36; /* Initially hidden */
  animation: draw-check 0.6s ease-out forwards 0.6s;
}

@keyframes draw-check {
  to {
    stroke-dashoffset: 0;
  }
}