/*
 * mw-link: a text link that stands on its own (docs/design-system.md), as
 * fmo3's .mw-link: a card's call to action ("See how →"), a link in a row of
 * actions, a link in navigation. Link blue, semibold, underlined on hover.
 * A link inside running text needs no class: it is underlined (spec D7).
 * Semantic tokens only; MwComponentPurityTest holds it.
 *
 *   mw-link           link blue on a surface or the ground
 *   mw-link--on-dark  white and underlined, on the navy header or footer
 *
 * Drawn on a <button> (an action that looks like a link), it drops the
 * button's box and keeps a 44px target on a coarse pointer.
 */
.mw-link {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.mw-link:where(button) {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  cursor: pointer;
}

@media (pointer: coarse) {
  .mw-link:where(button) {
    min-height: var(--tap-target);
  }
}

.mw-link--on-dark {
  color: var(--color-on-dark);
  text-decoration: underline;
}

@media (hover: hover) {
  .mw-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .mw-link.mw-link--on-dark:hover {
    color: var(--color-on-dark);
    text-decoration-thickness: 2px;
  }
}

.mw-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}