/* fx.css · micro/ripple-press, a ring spreads from where the button was pressed · owner: Lizzy East · all rights reserved */

/* fx.js adds one ring per press (data-fx-ring, decorative) at the press point, or the
   middle for Enter and Space, grows it from nothing while it fades, then removes it.
   The ring sits above the button's background and below its words. At rest nothing
   is added, so without script, or with motion off, the button is simply a button. */
[data-fx~="micro/ripple-press"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-fx~="micro/ripple-press"] [data-fx-ring] {
  position: absolute;
  z-index: -1;
  top: var(--fx-y, 50%);
  left: var(--fx-x, 50%);
  width: var(--fx-d, 100%);
  aspect-ratio: 1;
  margin: calc(var(--fx-d, 100%) / -2) 0 0 calc(var(--fx-d, 100%) / -2);
  border: var(--fx-ring-width, 2px) solid var(--fx-ring, currentColor);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fx-ring, currentColor) 24%, transparent);
  opacity: 0;
  scale: 0;
  pointer-events: none;
}