/* Hi-Whyders rolling digits (TCH-016 AP8): the mechanical counter wheels of an old petrol pump.
 * The markup is built by hw-rolldigits.js; the digits take the surrounding font and colour.
 * Use tabular figures (font-variant-numeric: tabular-nums) so the wheels keep their width.
 * Add the class hw-roll--drum to the element for visible wheels on large countdowns.
 */
.hw-roll__sr {                            /* the readable copy, visually hidden */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hw-roll__vis {                           /* the wheels: not selectable, so a copy gives the value once (the sr copy) */
  -webkit-user-select: none;
  user-select: none;
}
.hw-roll__d {                             /* one wheel, seen through its window */
  position: relative;
  display: inline-block;
  line-height: 1.15;                      /* a tight window, as on a real counter; the strip steps by it */
  clip-path: inset(0 -.15em);             /* clip-path, not overflow, so the text baseline holds */
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);   /* the drum's curve */
          mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.hw-roll__ghost { visibility: hidden; }   /* sizes the window and sets its baseline */
.hw-roll__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  white-space: pre;                       /* one digit per line while it rolls */
  will-change: transform;
}

/* visible wheels, for a large countdown (for example the design pages' .hw-countdown) */
.hw-roll--drum .hw-roll__d {
  margin: 0 .04em;
  padding: 0 .06em;
  border-radius: .12em;
  background: linear-gradient(var(--hw-bg-0), var(--hw-bg-2) 50%, var(--hw-bg-0));
  box-shadow: inset 0 0 0 1px var(--hw-edge);
}