-items: center;
  gap: 0.5em;
}

.checkbox {
  --dimension: 1.5em;
  --tick-dimension: 0.15em;

  appearance: none;
  margin: 0;
  position: relative;
  width: var(--dimension);
  height: var(--dimension);
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  rotate: 45deg;
}

.checkbox:checked {
  animation: shrink 0.5s ease forwards;
}

.checkbox:not(:checked) {
  animation: grow 0.5s 0.75s ease forwards;
}

@keyframes shrink {
  0% {
    scale: 1;
    background-color: var(--checkbo