box:not(:checked)::before {
  transition: background-color 0.3s 0.5s ease-in-out, width 0.5s ease-in-out;
}

.checkbox:checked::before {
  background-color: var(--primary-clr-1);
  top: calc(var(--dimension) * 0.65);
  left: 0;
  width: calc(var(--dimension) / 2);
  transition: background-color 0.3s 0.3s ease-in-out,
    width 0.5s 0.75s ease-in-out;
}

.checkbox::after {
  background-color: transparent;
  top: 0;
  left: calc((var(--dimension) * 0.5) - var(--tick-dimension));
  height: var(--tick-dimension