Underline Hover

---
/**
 * UnderlineHover — the line enters from the left and leaves to the right.
 * One background gradient: its size grows on hover while anchored left,
 * and shrinks on leave while anchored right, so the exit runs the same
 * direction as the entrance. Works on the element or from the link or
 * button around it. Zero JS.
 */
import type { HTMLAttributes, HTMLTag } from 'astro/types';

interface Props extends HTMLAttributes<'span'> {
  /** Element to render. */
  as?: HTMLTag;
  /** Line thickness, any CSS length. */
  thickness?: string;
  /** Gap between the text and the line. */
  offset?: string;
  /** Line colour. */
  color?: string;
}

const { as: Tag = 'span', thickness = '0.08em', offset = '0.12em', color = 'currentColor', class: className, style, ...rest } = Astro.props;
const vars = [`--ma-underline-w:${thickness}`, `--ma-underline-offset:${offset}`, `--ma-underline-color:${color}`, typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<Tag class:list={['ma-underline', className]} style={vars} {...rest}><slot /></Tag>

<style is:global>
  @layer components {
    :where(.ma-underline) {
      text-decoration: none;
      padding-bottom: var(--ma-underline-offset, 0.12em);
      background-image: linear-gradient(var(--ma-underline-color, currentColor), var(--ma-underline-color, currentColor));
      background-repeat: no-repeat;
      background-size: 0% var(--ma-underline-w, 0.08em);
      background-position: 100% 100%;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      transition: background-size var(--ma-duration-fast) var(--ma-ease-out);
    }
    @media (hover: hover) {
      :where(.ma-underline:hover),
      :where(:is(a, button):hover .ma-underline) {
        background-size: 100% var(--ma-underline-w, 0.08em);
        background-position: 0% 100%;
        transition-duration: var(--ma-duration);
        transition-timing-function: var(--ma-ease);
      }
    }
    :where(.ma-underline:focus-visible),
    :where(:is(a, button):focus-visible .ma-underline) {
      background-size: 100% var(--ma-underline-w, 0.08em);
      background-position: 0% 100%;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-underline) {
        transition: none;
      }
    }
  }
</style>