.ProseMirror {
  .codeBlock {
    /* #146: flex column so the menu (rendered AFTER <pre> in the DOM, so the
       editable contentDOM is first) is lifted back above the code via `order`. */
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-radius: var(--mantine-radius-default);
    background-color: light-dark(var(--mantine-color-gray-0),  var(--mantine-color-dark-8));
    }

  pre {
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
    margin: 4px;
    font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
    border-radius: var(--mantine-radius-default);
    tab-size: 4;

    @mixin light {
      background-color: var(--mantine-color-gray-0);
      color: var(--mantine-color-gray-9);
    }

    @mixin dark {
      background-color: var(--mantine-color-dark-8);
      color: var(--mantine-color-dark-1);
    }

    code {
      color: inherit;
      padding: 0;
      background: none;
      font-size: var(--mantine-font-size-sm);
    }

    /* Code styling */
    .hljs-comment,
    .hljs-quote {
      color: light-dark(
        var(--mantine-color-gray-6),
        var(--mantine-color-dark-2)
      );
    }

    .hljs-variable,
    .hljs-template-variable,
    .hljs-attribute,
    .hljs-tag,
    .hljs-name,
    .hljs-regexp,
    .hljs-link,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
    }

    .hljs-number,
    .hljs-meta,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params {
      color: light-dark(
        var(--mantine-color-blue-7),
        var(--mantine-color-cyan-5)
      );
    }

    .hljs-string,
    .hljs-symbol,
    .hljs-bullet {
      color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
    }

    .hljs-title,
    .hljs-section {
      color: light-dark(
        var(--mantine-color-pink-7),
        var(--mantine-color-yellow-5)
      );
    }

    .hljs-keyword,
    .hljs-selector-tag {
      color: light-dark(
        var(--mantine-color-violet-7),
        var(--mantine-color-violet-3)
      );
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: 700;
    }
  }

  :not(pre) > code {
    font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
    line-height: var(--mantine-line-height);
    padding: 2px calc(var(--mantine-spacing-xs) / 2);
    border-radius: var(--mantine-radius-sm);
    margin: 0;

    @mixin where-light {
      background-color: var(--mantine-color-gray-1);
      color: var(--mantine-color-text);
    }

    @mixin where-dark {
      background-color: var(--mantine-color-dark-5) !important;
      color: var(--mantine-color-text);
    }
  }
}