);
}

.checkbox:not(:checked)::after {
  transition: background-color 0.3s 0.5s ease-in-out, height 0.5s ease-in-out;
}

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

.checkbox__label {
  --hover: #cdcdcd;
  --checked: #8f8f8f49;
  --stroke-dimension: 0.05em;

  cursor: pointer;
  user-se