/* fx.css · micro/liquid-fill, colour rises through the button like liquid · owner: Lizzy East · all rights reserved */

/* A wide, dome-topped layer waits below the button; on hover or keyboard focus it
   rises until its flat base meets the bottom edge and the button is full. The label
   is white with mix-blend-mode: difference inside the button's own isolated layer, so
   it reads as ink on the empty button and as paper on the fill, at every moment in
   between. The button needs an opaque base colour (--fx-liquid-base). CSS only. */
[data-fx~="micro/liquid-fill"] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--fx-liquid-base, #f4f5f7);
  border-color: var(--fx-liquid-fill, #111117);
}
[data-fx~="micro/liquid-fill"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 100%;
  left: -20%;
  width: 140%;
  height: 160%;
  border-radius: 46% 54% 0 0 / 34% 38% 0 0;
  background: var(--fx-liquid-fill, #111117);
  pointer-events: none;
}
[data-fx~="micro/liquid-fill"] [data-fx-label] {
  color: #ffffff;
  mix-blend-mode: difference;
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="micro/liquid-fill"]::before {
    transition: translate var(--fx-liquid-dur, 750ms) var(--fx-liquid-ease, cubic-bezier(0.45, 0.05, 0.2, 1));
  }
}
@media (hover: hover) and (pointer: fine) {
  [data-fx~="micro/liquid-fill"]:hover::before { translate: 0 -100%; }
}
[data-fx~="micro/liquid-fill"]:focus-visible::before { translate: 0 -100%; }