/*
Add an icon after external links. Be careful to handle both light mode and dark mode.
The icons come from https://fontawesome.com/icons/external-link-alt?f=classic&s=solid
*/

article a[href^="http://"]::after, article a[href^="https://"]::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

/* Light mode */
body[data-theme="light"] {
  article a[href^="http://"]::after, article a[href^="https://"]::after {
    background-image: url("../img/light_mode_external_link_icon.svg");
  }
}

/* Auto mode when the device scheme is light mode */
@media (prefers-color-scheme: light) {
  body[data-theme="auto"] {
    article a[href^="http://"]::after, article a[href^="https://"]::after {
      background-image: url("../img/light_mode_external_link_icon.svg");
    }
  }
}

/* Dark mode */
body[data-theme="dark"] {
  article a[href^="http://"]::after, article a[href^="https://"]::after {
    background-image: url("../img/dark_mode_external_link_icon.svg");
  }
}

/* Auto mode when the device scheme is dark mode */
@media (prefers-color-scheme: dark) {
  body[data-theme="auto"] {
    article a[href^="http://"]::after, article a[href^="https://"]::after {
      background-image: url("../img/dark_mode_external_link_icon.svg");
    }
  }
}