/* ==========================================================================
   PUDL for highlight.js. Load after pudl.css, in place of a highlight.js
   theme, and highlighted code takes its colours from the --syntax tokens,
   so it follows the page's theme and agrees with an editor that uses them.

     <pre class="code"><code class="language-js">…</code></pre>

   The block itself is PUDL's pre.code, flat because it is for reading.
   ========================================================================== */

.hljs { color: var(--text); background: transparent; }

.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-type, .hljs-doctag { color: var(--syntax-keyword); }
.hljs-string, .hljs-regexp, .hljs-template-string, .hljs-char.escape_, .hljs-addition { color: var(--syntax-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_ { color: var(--syntax-number); }
.hljs-comment, .hljs-quote { color: var(--syntax-comment); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-title.class_, .hljs-function, .hljs-variable, .hljs-params { color: var(--syntax-name); }
.hljs-tag, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-selector-pseudo, .hljs-meta { color: var(--syntax-tag); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr { color: var(--syntax-attr); }
.hljs-section { color: var(--syntax-heading); font-weight: 700; }
.hljs-link { color: var(--syntax-link); text-decoration: underline; }
.hljs-deletion { color: var(--syntax-error); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* In Windows' high-contrast mode the system's colours replace these, and
   emphasis carries on through the italic and bold. */
@media (forced-colors: active) {
  .hljs * { color: CanvasText !important; }
  .hljs-link { color: LinkText !important; }
}