/* gsap.com's stroke-button hover: a circle grows from the pointer and
   fills the pill, following the pointer while it is inside. The host
   pill adds the class and the fill span; keeps its own stroke on a
   ::after so the fill does not paint over it. Driven by button-flair.js. */
.button-flair {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.button-flair__fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform-origin: 0 0;
  transform: scale(0);
  will-change: transform;
}
.button-flair__fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* Radius = the pill's width, so it covers the far end even when the
     pointer enters at an edge (gsap.com's 170% leaves a sliver on wide
     pills). */
  width: 200%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--button-flair-color, var(--color-accent-buttons));
  transform: translate(-50%, -50%);
}