.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--control-block-size-compact);
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-ui);
  cursor: pointer;
  transition:
    color var(--duration-state) var(--easing-state),
    translate var(--duration-state) var(--easing-state);
}

.choice:has(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-accent);
  outline-offset: var(--focus-ring-offset);
}

.choice__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--control-indicator-size);
  block-size: var(--control-indicator-size);
  border: var(--control-indicator-border-width) solid var(--color-control-border);
  background-color: var(--color-surface);
  transition:
    border-color var(--duration-state) var(--easing-state),
    background-color var(--duration-state) var(--easing-state);
}

@media (hover: hover) {
  .choice:hover .choice__indicator {
    border-color: var(--color-outline);
  }
}

.choice:has(:checked) .choice__indicator {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.choice__box {
  --icon-stroke-width: var(--icon-stroke-width-bold);

  border-radius: var(--radius-sm);
  color: var(--color-accent-contrast);
  font-size: var(--font-size-ui);
}

.choice__mark {
  scale: 0;
  opacity: 0;
  transition:
    scale var(--duration-enter) var(--easing-enter),
    opacity var(--duration-state) var(--easing-state);
}

.choice:has(:checked) .choice__mark {
  scale: none;
  opacity: 1;
}