/* ===========================================================================
   Pillow Client — Counter stylesheet                      ported 2026-10-16
   ---------------------------------------------------------------------------
   The React Bits "Counter" component's stylesheet, unchanged and standalone:
   no imports, no Tailwind, no variables from another stylesheet. The custom
   properties the rules read (--counter-fade, --counter-gap, --counter-padding)
   and the one they write (--counter-shown) are all set on the root by
   src/scripts/counter.js, so this file can be loaded on its own.
   =========================================================================== */

.counter {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.counter__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.counter__row {
  display: inline-flex;
  align-items: baseline;
  margin: 0 calc(var(--counter-gap, 0px) / -2);
  user-select: none;
  -webkit-user-select: none;
}

.counter__affix,
.counter__digit,
.counter__symbol {
  margin: 0 calc(var(--counter-gap, 0px) / 2 * var(--counter-shown, 1));
  opacity: var(--counter-shown, 1);
}

.counter__affix {
  white-space: pre;
}

.counter__digit {
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  line-height: calc(1em + var(--counter-padding, 0px));
  text-align: center;
}

.counter__sizer {
  visibility: hidden;
}

.counter__window {
  position: absolute;
  top: calc(var(--counter-fade, 0em) * -1);
  right: 0;
  bottom: calc(var(--counter-fade, 0em) * -1);
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

.counter__strip {
  position: absolute;
  inset: 0;
}

.counter__numeral {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.counter__symbol {
  position: relative;
  display: inline-flex;
  justify-content: center;
  clip-path: inset(-0.5em 0);
}

.counter__symbol-text {
  display: inline-block;
  white-space: pre;
}

.counter__blur {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.counter__measure {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}

.counter__measure > span {
  display: inline-block;
}