/* Site icon before external links in page content (not the footer, which
   has its own social icons), by domain. The GitHub mark is a mask in
   the text colour so it follows light and dark mode; the others are the
   sites' own favicons. */
section.body a[href^="https://github.com/"]::before,
section.body a[href^="https://linuxcontainers.org/"]::before,
section.body a[href^="https://docs.nvidia.com/"]::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  vertical-align: -0.125em;
  background: no-repeat center / contain;
}

section.body a[href^="https://github.com/"]::before {
  background-color: currentColor;
  -webkit-mask: url("../icons/github.svg") no-repeat center / contain;
  mask: url("../icons/github.svg") no-repeat center / contain;
}

section.body a[href^="https://linuxcontainers.org/"]::before {
  background-image: url("../icons/linuxcontainers.png");
}

section.body a[href^="https://docs.nvidia.com/"]::before {
  background-image: url("../icons/nvidia.png");
}

/* tabi draws its hover highlight with a link's ::before (absolute, behind
   the text, in the accent colour), which hid the icon on hover. Keep the
   icon in place; the link itself still gets tabi's hover background. */
section.body a[href^="https://github.com/"]:hover::before,
section.body a[href^="https://linuxcontainers.org/"]:hover::before,
section.body a[href^="https://docs.nvidia.com/"]:hover::before {
  position: static;
  z-index: auto;
  inset: auto;
  max-inline-size: none;
}

section.body a[href^="https://linuxcontainers.org/"]:hover::before,
section.body a[href^="https://docs.nvidia.com/"]:hover::before {
  background-color: transparent;
}

section.body a[href^="https://github.com/"]:hover::before {
  background-color: currentColor;
}