/* Ticker tooltip, after 1minus1 (docs/design/references.md): a pill whose text runs past like a
   ticker. Two copies of the text slide one copy's width and loop; the second is aria-hidden.
   It sits over the row of stamps, shown while the slot that describes it is hovered or focused. */
@layer components {
  .tooltip {
    position: absolute;
    inset-block-start: calc(-1 * var(--block-space-half)); translate: 0 -100%; /* just above the row of stamps */
    inset-inline: 0;
    z-index: 1;
    display: none;
    overflow: hidden;
    padding-block: 0.375rem;
    font-size: var(--text-x-small);
    font-weight: 700;
    color: var(--color-text-on-reward);
    background: var(--color-reward);
    border-radius: var(--radius-pill);
    border-end-start-radius: 0; /* the square corner points at the stamps, as 1minus1's points at the cursor */
    box-shadow: var(--shadow);
    opacity: 1;
    transition: opacity var(--duration-press) var(--ease-press), display var(--duration-press) allow-discrete;

    @starting-style { opacity: 0; }
  }

  .stamp-progress:has([aria-describedby]:focus-visible) .tooltip { display: block; }

  @media (hover: hover) {
    .stamp-progress:has([aria-describedby]:hover) .tooltip { display: block; }
  }

  .tooltip__ticker {
    display: flex;
    inline-size: max-content;

    & > span {
      padding-inline: var(--inline-space-double);
      white-space: nowrap;
      animation: ticker 10s linear infinite;
    }
  }

  /* Reduced motion: the text stands still and wraps. */
  @media (prefers-reduced-motion: reduce) {
    .tooltip__ticker {
      inline-size: auto;

      & > span { white-space: normal; animation: none; }
      & > span + span { display: none; }
    }
  }

  @keyframes ticker {
    to { translate: -100%; }
  }
}