/* highlight */
:root {
  --highlight-comment-color: #8e908c;
  --highlight-red-color: #e71818;
  --highlight-orange-color: #e67c19;
  --highlight-yellow-color: #d1a505;
  --highlight-green-color: #8fb300;
  --highlight-aqua-color: #40b7bf;
  --highlight-blue-color: #528fe0;
  --highlight-purple-color: #ab5fdd;
  --highlight-stack: "Roboto Mono", "Noto Serif SC", monospace;
}

code {
  font-family: var(--highlight-stack);
}

.highlight td, .highlight th, .highlight table caption, .highlight table td, .highlight table th {
  border: none;
  padding: 0;
}

pre {
  background-color: var(--code-bg-color);
  border: 1px solid var(--tertiary-color);
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0.8em;
  font-family: var(--highlight-stack);
  /* The margin lives here rather than on a wrapper. Under Giallo, Zola emits
     <pre class="giallo z-code"> directly; the original Hexo markup wrapped it
     in <figure class="highlight">, which is what `.highlight { margin: 1em 0 }`
     below used to space out. With no wrapper, and with `p` carrying only a
     bottom margin, a block used to sit flush against the paragraph after it.
     1.25em resolves to the body's 1rem paragraph rhythm at every size. */
  margin: 1.25em 0;
  overflow-x: auto;
  padding: 0.5em;
  /* A thin bar whose track stays transparent, so the block's own background and
     its rounded bottom corners show through. Only the standard properties are
     used, deliberately: the original theme styled ::-webkit-scrollbar instead
     (painting track and bar --code-bg-color to hide the default track), which
     forces a classic scrollbar on macOS where the platform would draw an
     overlay one -- a permanent grey band under every block, even the ones that
     were not wide enough to need it. Chrome ignores ::-webkit-scrollbar rules
     anyway as soon as these two are set, so mixing the two is worse than
     useless. */
  scrollbar-color: var(--tertiary-color) transparent;
  scrollbar-width: thin;
}

.highlight {
  margin: 1em 0;
  width: 100%;
}

/* The rules from here down are scoped to `.highlight`, the wrapper the Hexo
   theme put around every block. Giallo does not emit it, so they are inert on
   a Zola site; the parts that still matter (the line-number gutter, the code
   cell width) are reimplemented against Giallo's markup in css/syntax.css.
   Kept for parity with the original stylesheet. */

.highlight .gutter pre {
  background-color: var(--bg-color);
  color: var(--secondary-color);
  padding: 0 0.5em 0 0;
  text-align: right;
}

.highlight table, .highlight .gutter pre {
  overflow-x: hidden;
  width: 2em;
}

.highlight .code pre {
  max-width: 30rem;
  width: calc(100vw - 4rem);
}

pre .comment, pre .title {
  color: var(--highlight-comment-color);
}

pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
  color: var(--highlight-red-color);
}

pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
  color: var(--highlight-orange-color);
}

pre .class, pre .ruby .class .title, pre .css .rules .attribute {
  color: var(--highlight-green-color);
}

pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
  color: var(--highlight-green-color);
}

pre .css .hexcolor {
  color: var(--highlight-aqua-color);
}

pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
  color: var(--highlight-blue-color);
}

pre .keyword, pre .javascript .function {
  color: var(--highlight-purple-color);
}

.highlight .gutter {
  position: relative;
  top: -0.2em;
}

@media all and (min-width:620px) {
  .highlight .gutter, .highlight .code {
    left: -2em;
    position: relative;
  }

  .highlight .code pre {
    max-width: 37.5em;
  }

  .article-entry {
    overflow: visible;
  }
}