pre {
  background-color: var(--color-bg-alt);
  display: block;
  padding: 1em;
  overflow-x: auto;
  margin-top: 0;
  margin-bottom: 2.5rem;
  font-size: 0.9em;
}

/** The default highlight.css blue isn't good in dark mode */
.highlight {
  pre span {
    font-family:
      ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
      'DejaVu Sans Mono', monospace;
    /* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
    font-weight: 400 !important;
    line-height: var(--body-line-height);
    font-size: var(--font-size);
    /* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
    font-style: normal !important;

    &.nt {
      /* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
      color: hsl(217deg, 92%, 76%) !important;
    }
  }
}

code {
  font-family:
    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;

  /** Monospace font looks a little bit bigger inline, so reduce its size a 
      little */
  font-size: clamp(0.9375rem, 0.8493rem + 0.4412vw, 1.125rem);
  line-height: var(--body-line-height);
}

code,
kbd,
samp {
  color: var(--color-code);
  hyphens: none;
}

pre > code {
  padding: 0;
  background-color: transparent;
  white-space: pre;
}

a:has(code) {
  text-decoration-color: var(--color-code);
}