/* *************************************************************************** */
/* Dark mode toggle - active state.
   The dark_mode module's JS sets aria-pressed="true" on the toggle whenever
   dark mode is in effect (explicit choice or system preference), but its
   CSS gives that state no look, so the moon icon is indistinguishable from
   the inactive one. Show it as a moon filled with --ip-accent instead.

   The module's icon is an <img>-loaded outline SVG, whose fill CSS can't
   reach, so the active state hides that <img> and paints a filled moon
   (icons/dark-mode-filled.svg, same path) as a mask over --ip-accent in a
   ::before, at the <img>'s 20px size.

   html:root bumps specificity above dark-mode.css's
   "html.dark-mode body:not(.a11y-contrast) .dark-mode-toggle__button img"
   rule. High contrast mode (body.a11y-contrast) replaces dark mode
   entirely, so it's excluded here too. */
/* *************************************************************************** */

html:root body:not(.a11y-contrast) .dark-mode-toggle__button[aria-pressed="true"] img {
  display: none;
}

html:root body:not(.a11y-contrast) .dark-mode-toggle__button[aria-pressed="true"]::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--ip-accent);
  -webkit-mask: url("../../icons/dark-mode-filled.svg") center / contain no-repeat;
  mask: url("../../icons/dark-mode-filled.svg") center / contain no-repeat;
}

html:root body:not(.a11y-contrast) .dark-mode-toggle__button[aria-pressed="true"]:hover::before {
  background-color: var(--ip-accent-dark);
}