/* The word of a choice (choice-word; owner, 2026-10-30: like elements have one look; DECISIONS 36.11). Written by
   hand; checked by design/_tools/check_web_css.py as a component's sheet is. The word is placed with the box of its
   tick or its radio (`at box-…` of the box, and `tick` or `ring`): it starts one gap after the box drawn in the middle
   of that place and stands in the middle of its height, whatever its length. */
.choice-word {
  display: flex;
  align-items: center;
  inline-size: max-content;
  padding-inline-start: calc((var(--box-width) + var(--mark)) / 2 + var(--choice-word-gap));
  font: var(--text-17-medium);
  white-space: nowrap;
}

.choice-word.tick {
  --mark: var(--tick-mark-size);
}

.choice-word.ring {
  --mark: var(--choice-ring-size);
}

/* the control of the browser that takes the press lies over its box and over the start of the word; the rest of the
   word is part of the same label and takes the press too */
.at.drawn-control {
  z-index: 1;
}

@media (max-width: 767.98px) {
  .mobile .choice-word {
    font: var(--text-10-regular);
  }
}