/* ==========================================================================
   Base block
   ========================================================================== */

.highlight {
  display: block;
  overflow-x: auto;
  color: var(--code-text);
  background: var(--hl-bg);
}

/* ==========================================================================
   Keywords / control flow
   ========================================================================== */

.highlight .k,
.highlight .kp,
.highlight .kn,
.highlight .kr,
.highlight .kc,
.highlight .cp,
.highlight .nn,
.highlight .na {
  color: var(--hl-keyword);
}

/* ==========================================================================
   Types / tags
   ========================================================================== */

.highlight .kt,
.highlight .nc,
.highlight .nt {
  color: var(--hl-type);
}

/* ==========================================================================
   Functions
   ========================================================================== */

.highlight .nf,
.highlight .fm {
  color: var(--hl-function);
}

/* ==========================================================================
   Constants / identifiers
   ========================================================================== */

.highlight .no,
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi,
.highlight .ni {
  color: var(--hl-identifier);
}

/* Numbers */

.highlight .m,
.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .mo,
.highlight .il {
  color: var(--hl-number);
}

/* Operators */

.highlight .o,
.highlight .ow {
  color: var(--hl-operator);
}

/* ==========================================================================
   Strings & regexps
   ========================================================================== */

.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s2,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .s1 {
  color: var(--hl-string);
}

.highlight .se,
.highlight .sr {
  color: var(--hl-escape);
}

/* ==========================================================================
   Booleans
   ========================================================================== */

.highlight .kc,
.highlight .kp {
  color: var(--hl-boolean);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: var(--hl-comment);
  font-style: normal;
}

/* ==========================================================================
   Punctuation
   ========================================================================== */

.highlight .p {
  color: var(--hl-punctuation);
}

/* ==========================================================================
   Meta / embedded
   ========================================================================== */

.highlight .cp,
.highlight .gh,
.highlight .gu {
  color: var(--hl-meta);
}

/* ==========================================================================
   Section headers
   ========================================================================== */

.highlight .gh,
.highlight .gu {
  color: var(--hl-section);
  font-weight: bold;
}

/* ==========================================================================
   Lists / bullets
   ========================================================================== */

.highlight .gt {
  color: var(--hl-list);
}

/* ==========================================================================
   Emphasis
   ========================================================================== */

.highlight .ge {
  font-style: italic;
  color: var(--hl-fg);
}

.highlight .gs {
  font-weight: bold;
  color: var(--hl-fg);
}

/* ==========================================================================
   Diff
   ========================================================================== */

.highlight .gi {
  color: var(--hl-add);
  background-color: var(--hl-add-bg);
}

.highlight .gd {
  color: var(--hl-del);
  background-color: var(--hl-del-bg);
}