/* fx.css · hover/fill, colour fills in from one edge · owner: Lizzy East · all rights reserved */

/* A fill layer grows from the left; the label switches to the ink that reads on it. */
[data-fx~="hover/fill"] { position: relative; isolation: isolate; overflow: clip; }
[data-fx~="hover/fill"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fx-fill, #17160f);
  scale: 0 1;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="hover/fill"]::before { transition: scale var(--fx-hover-dur, 220ms) var(--fx-ease); }
}
@media (hover: hover) and (pointer: fine) {
  [data-fx~="hover/fill"]:hover { color: var(--fx-fill-ink, #ffffff); }
  [data-fx~="hover/fill"]:hover::before { scale: 1 1; }
}
[data-fx~="hover/fill"]:focus-visible { color: var(--fx-fill-ink, #ffffff); }
[data-fx~="hover/fill"]:focus-visible::before { scale: 1 1; }