/* fx.css · hover/underline-grow, an underline grows across · owner: Lizzy East · all rights reserved */

/* Drawn as a background, so it grows without moving anything around it. */
[data-fx~="hover/underline-grow"] {
  text-decoration: none;
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% var(--fx-underline, 2px) no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="hover/underline-grow"] { transition: background-size var(--fx-hover-dur, 220ms) var(--fx-ease); }
}
@media (hover: hover) and (pointer: fine) {
  [data-fx~="hover/underline-grow"]:hover { background-size: 100% var(--fx-underline, 2px); }
}
[data-fx~="hover/underline-grow"]:focus-visible { background-size: 100% var(--fx-underline, 2px); }