/* Load after the page styles. Only existing text-link underlines use this effect;
   image links, brand marks and the header keep their own presentation. */
a,
.text-button {
  --link-underline-size: 100%;
  --link-underline-image: linear-gradient(currentColor, currentColor);
  --link-underline-decoration: none;
  --link-underline-duration: 320ms;
}

:is(
  a.text-link,
  .text-button,
  a.reference-link,
  a.hero-reference,
  a.product-buy,
  .collection-end a,
  .customer-review figcaption > a:not(.review-photo),
  .review-carousel .review-credit > a,
  details a,
  .questions-responsive .faq-answer-panel a,
  .signup-contact a,
  .signup-privacy a,
  a.contact-address,
  a.signup-etsy-link,
  .work-preview-meta a,
  .work-card .work-current-link,
  .workbench-return a,
  .reference-copy a,
  .reference-footer > a,
  body.not-found-page a
) {
  /* Keep border space so hovering never nudges the surrounding content. */
  border-bottom-color: transparent;
  text-decoration: var(--link-underline-decoration);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  background-image: var(--link-underline-image);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: var(--link-underline-size) 1px;
  /* Inline links can wrap naturally, with an underline on each text fragment. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--link-underline-duration) var(--ease, cubic-bezier(.23, 1, .32, 1)), color 150ms ease;
}

/* Touch links retain a visible affordance. A mouse draws the line from the left. */
@media (hover: hover) and (pointer: fine) {
  a,
  .text-button { --link-underline-size: 0%; }

  a:is(:hover, :focus-visible),
  .text-button:is(:hover, :focus-visible) { --link-underline-size: 100%; }
}

/* Reduced motion keeps the same clear link affordance without drawing it. */
@media (prefers-reduced-motion: reduce) {
  a,
  .text-button {
    --link-underline-size: 100%;
    --link-underline-duration: 0ms;
  }
}

.motion-off a,
.motion-off .text-button {
  --link-underline-size: 100%;
  --link-underline-duration: 0ms;
}

/* Background gradients can disappear in high-contrast mode or on paper. */
@media (forced-colors: active), print {
  a,
  .text-button {
    --link-underline-image: none;
    --link-underline-decoration: underline;
    --link-underline-duration: 0ms;
  }
}