/**
 * Syntax highlighting styles - GitHub style
 */
.highlight {
  background: var(--highlight-background);
  margin-bottom: calc(var(--spacing-unit) / 2);
  color: var(--highlight-text);

  /* Target the <pre> inside the highlight divs */
  pre {
    border: 1px solid var(--grey-muted);
    border-radius: 3px;
    background-color: var(--code-background);
    padding: 8px 12px;
    margin: 0; /* Remove margin from pre, handled by .highlight */
    overflow-x: auto; /* Ensure horizontal scroll for code */
    font-size: calc(
      var(--base-font-size) * 0.9375
    ); /* Match inline code size */
    font-family: var(--mono-font-family, monospace); /* Ensure mono font */

    /* Ensure code inside highlight blocks doesn't get extra borders/padding/background */
    & > code {
      border: 0;
      padding: 0;
      background-color: transparent; /* Inherit from parent pre */
      font-size: inherit; /* Inherit from parent pre */
      font-family: inherit; /* Inherit from parent pre */
      color: inherit; /* Inherit text color from parent pre */
    }
  }

  /* Table styling within highlight blocks */
  table {
    td {
      padding: 5px;
    }

    pre {
      margin: 0;
    }
  }

  /* Text and whitespace */
  .w {
    color: var(--highlight-text);
    background-color: var(--highlight-background);
  }

  /* Keywords */
  .k,
  .kd,
  .kn,
  .kp,
  .kr,
  .kt,
  .kv {
    color: var(--highlight-keyword);
  }

  /* Errors and deleted */
  .gr {
    color: var(--highlight-background);
  }

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

  .err {
    color: var(--highlight-background);
    background-color: var(--highlight-deleted);
  }

  /* Built-ins and namespaces */
  .nb,
  .nc,
  .no,
  .nn {
    color: var(--highlight-attribute);
  }

  /* Names, attributes, and tags */
  .sr,
  .na,
  .nt {
    color: var(--highlight-tag);
  }

  /* Inserted code */
  .gi {
    color: var(--highlight-inserted);
    background-color: var(--highlight-inserted-bg);
  }

  /* Numbers, literals, operators and other values */
  .kc,
  .l,
  .ld,
  .m,
  .mb,
  .mf,
  .mh,
  .mi,
  .il,
  .mo,
  .mx,
  .sb,
  .bp,
  .ne,
  .nl,
  .py,
  .nv,
  .vc,
  .vg,
  .vi,
  .vm,
  .o,
  .ow {
    color: var(--highlight-number);
  }

  /* Headers and users */
  .gh,
  .gu {
    color: var(--highlight-number);
    font-weight: bold;
  }

  /* Strings */
  .s,
  .sa,
  .sc,
  .dl,
  .sd,
  .s2,
  .se,
  .sh,
  .sx,
  .s1,
  .ss {
    color: var(--highlight-string);
  }

  /* Functions and methods */
  .nd,
  .nf,
  .fm {
    color: var(--highlight-function);
  }

  /* Comments */
  .c,
  .ch,
  .cd,
  .cm,
  .cp,
  .cpf,
  .c1,
  .cs,
  .gl,
  .gt {
    color: var(--highlight-comment);
  }

  /* Other elements */
  .ni,
  .si {
    color: var(--highlight-text);
  }

  /* Emphasized styles */
  .ges {
    font-weight: bold;
    font-style: italic;
  }

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

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

/* Remove the older, less specific rule for code inside highlight */
/*
  & code {
    background-color: transparent;
    border: none;
    padding: 0;
    font-size: calc(var(--base-font-size) * 0.9375);
  }
*/

/* Remove redundant rule as .highlight already sets the background */
/*
.highlighter-rouge .highlight {
  background: var(--highlight-background);
}
*/