/*************
 * CODEBLOCKS
 *************/

.codeblock, .codeblock code {
  font-family: var(--font-family-monospace);
}

.codeblock {
  color: var(--foreground);
  background-color: var(--background);
  grid-column: gutter-start / gutter-end;
  overflow: auto;
  padding-block: var(--space-s);

  .line {
    margin-inline: var(--gutter-width);
  }
}





/**********************
 # SYNTAX HIGHLIGHTING
 **********************/

.color-theme__dracula {
  --background: #282A36;
  --foreground: #f8f8f2;
  --selection: #44475A;
  --comment: #6272A4;
  --red: #ff5555;
  --orange: #ffB86C;
  --yellow: #F1FA8C;
  --green: #50FA7B;
  --purple: #BD93F9;
  --cyan: #8BE9FD;
  --pink: #FF79C6;
}


.codeblock {
  .err {
    color: var(--red);
  }

  /* line link */
  .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit;
  }

  .line {
    display: flex;
  }

  /* keyword */
  .k {
    color: var(--purple);
  }

  /* keyword: constant */
  /* keyword: declaration */
  /* keyword: pseudo */
  /* keyword: reserved */
  .kc, .kd, .kp, .kr {
    color: var(--orange);
  }

  /* keyword: namespace */
  .kn {
    color: var(--yellow);
  }

  /* keyword: type */
  .kt {
    color: var(--yellow);
    font-weight: bolder;
  }

  /* line highlight */
  .hl {
    background-color: var(--selection);
  }

  /* line numbers */
  .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: var(--text-color-secondary);
  }

  /* name: attribute */
  /* name: class */
  /* name: decorator */
  .na, .nc, .nd {
    color: var(--green);
  }

  /* name: constant */
  .no {
    color: var(--cyan);
  }

  /* name: exception */
  .ne {
    color: var(--pink);
    font-weight: bolder;
  }

  /* name: function */
  .nf {
    color: var(--green);
  }

  /* name: other */
  .nx {
    color: var(--green);
  }

  /* name: tag */
  .nt {
    color: var(--red);
  }

  /* literal */
  .l {
    color: var(--cyan);
  }

  /* literal: date */
  .ld {
    color: var(--yellow);
  }

  /* literal: string, delimiter */
  /* literal: string */
  /* literal: string, backtick */
  /* literal: string, char */
  .dl, .s, .sb, .sc {
    color: var(--yellow);
  }

  /* literal: number */
  /* literal: number, bin */
  /* literal: number, float */
  /* literal: number, hex */
  /* literal: number, integer */
  /* literal: number, integer, long
  /* literal: number, octal */
  .il, .m, .mb, .mf, .mh, .mi, .mo {
    color: var(--yellow);
    font-weight: bolder;
  }

  /* name: built-in */
  .nb {
    color: var(--green);
  }

  /* Operator */
  .o {
    color: var(--orange);
  }

  /* operator: word */
  .ow {
    color: var(--red);
  }

  /* literal: string, double */
  /* literal: string, doc */
  /* literal: string, heredoc */
  /* literal: string, interpol */
  /* literal: string, other */
  .s2, .sd, .sh, .si, .sx {
    color: var(--yellow);
  }

  /* literal: string escape */
  .se {
    color: var(--purple);
  }

  /* literal: string, regex */
  .sr {
    color: var(--green);
  }

  /* literal: string, affix */
  /* literal: string, single */
  /* literal: string, symbol */
  .sa, .s1, .ss {
    color: var(--yellow);
  }

  /* comment */
  /* comment: hashbang */
  /* comment: multiline */
  /* comment: single */
  /* comment: special */
  /* comment: preproc */
  /* comment: preproc file */
  .c, .ch, .cm, .c1, .cs, .cp, .cpf {
    color: var(--comment);
  }

  /* generic: deleted */
  .gd {
    color: var(--red);
  }

  /* generic: emphasized */
  .ge {
    font-style: italic;
  }

  /* generic: inserted */
  .gi {
    color: var(--green);
  }

  /* generic: string */
  .gs {
    font-weight: bold;
  }

  /* generic: subheading */
  .gu {
    color: var(--text-color-secondary);
  }
}