.ds-checkbox__box {
  border-radius: var(--ds-radius-sm);
}

.ds-checkbox__box > svg {
  display: block;
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity var(--ds-duration-fast) var(--ds-ease-standard);
}

/* Scoped for the same reason as the fill rule in choice.css — an unanswered
   radio group matches :indeterminate. Harmless here (radios have no
   .ds-checkbox__box) but kept consistent so the pattern is never copied wrong. */
.ds-choice__input:checked + .ds-checkbox__box > svg,
.ds-choice__input[type='checkbox']:indeterminate + .ds-checkbox__box > svg {
  opacity: 1;
}