/*
 * When updating the theme colors, also update them in success-closed.svg and
 * success-open.svg!
 */

:root {
  --bg: #d3d3d3;
  --fg: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2c2c2c;
    --fg: ghostwhite;
  }
}

html {
  background-color: var(--bg);
  color: var(--fg);
}

h1, p, summary, noscript {
  font-family: sans-serif;
}

noscript {
  font-size: 16pt;
}

.root {
  margin: 1rem 0;
}

details.test-node {
  margin-left: 1rem;
  padding: 0.2rem 0.5rem;
  border-left: 2px dashed var(--fg);
  > summary {
    cursor: pointer;
  }
  &.success > summary::marker {
    /*
     * WebKit only supports color and font-size properties in ::marker [1], and
     * its ::-webkit-details-marker only supports hiding the marker entirely
     * [2], contrary to mdn's example [3]; thus, set a color as a fallback:
     * while it may not be accessible for colorblind individuals, it's better
     * than no indication of a test's state for anyone, as that there's no other
     * way to include an indication in the marker on WebKit.
     *
     * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::marker#browser_compatibility
     * [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#default_style
     * [3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#changing_the_summarys_icon
     */
    color: var(--fg);
    content: url("./success-closed.svg") / "success";
  }
  &.success[open] > summary::marker {
    content: url("./success-open.svg") / "success";
  }
  &.failure > summary::marker {
    color: red;
    content: url("./failure-closed.svg") / "failure";
  }
  &.failure[open] > summary::marker {
    content: url("./failure-open.svg") / "failure";
  }
  &.skip > summary::marker {
    color: blue;
    content: url("./skip-closed.svg") / "skip";
  }
  &.skip[open] > summary::marker {
    content: url("./skip-open.svg") / "skip";
  }
}

p.test-desc {
  margin: 0 0 0 1rem;
  padding: 2px 0;
  > pre {
    margin: 0;
  }
}

.italic {
  font-style: italic;
}
