:root {
  --interaction-blue: var(--blue-700, #1268b7);
  --interaction-focus: rgba(51, 126, 234, 0.34);
}

:where(a, button, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, [role="button"]):focus {
  outline: none;
}

:where(
  button,
  [role="button"],
  .btn,
  .nav-cta,
  .primary-link,
  .button,
  .platform-option,
  .copy-button,
  .skip-link
):focus-visible {
  outline: 3px solid var(--interaction-focus);
  outline-offset: 3px;
  border-radius: 12px;
}

:where(
  .nav-links a,
  .nav-login,
  .footer-links a,
  .icp-record,
  .article a,
  .contact-panel a,
  .toc a,
  .download-fallback
) {
  position: relative;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.14s ease;
}

:is(.article a, .contact-panel a) {
  text-decoration: none;
}

:where(
  .nav-links a,
  .nav-login,
  .footer-links a,
  .icp-record,
  .article a,
  .contact-panel a,
  .download-fallback
)::after,
.brand .brand-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--interaction-blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.22s ease;
}

.brand .brand-text {
  position: relative;
  transition: color 0.18s ease;
}

:where(
  .nav-links a,
  .nav-login,
  .footer-links a,
  .icp-record,
  .article a,
  .contact-panel a,
  .download-fallback
):focus-visible,
.brand:focus-visible {
  color: var(--interaction-blue);
}

:where(
  .nav-links a,
  .nav-login,
  .footer-links a,
  .icp-record,
  .article a,
  .contact-panel a,
  .download-fallback
):focus-visible::after,
.brand:focus-visible .brand-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.toc a:focus-visible {
  color: var(--interaction-blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .nav-links a,
    .nav-login,
    .footer-links a,
    .icp-record,
    .article a,
    .contact-panel a,
    .download-fallback
  ):hover::after,
  .brand:hover .brand-text::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

:where(
  .nav-links a,
  .nav-login,
  .footer-links a,
  .icp-record,
  .article a,
  .contact-panel a,
  .toc a,
  .download-fallback
):active,
.brand:active {
  color: var(--interaction-blue);
  transform: scale(0.985);
}

:where(
  .nav-links a,
  .nav-login,
  .footer-links a,
  .icp-record,
  .article a,
  .contact-panel a,
  .download-fallback
):active::after,
.brand:active .brand-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

:where(
  button:not(:disabled),
  .btn,
  .nav-cta,
  .primary-link,
  .button,
  .platform-option,
  .copy-button
):active {
  transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
  :where(a, button, [role="button"]),
  .brand .brand-text,
  .brand .brand-text::after {
    transition: none !important;
  }

  :where(a, button, [role="button"]):active {
    transform: none !important;
  }
}