.tiptap.ProseMirror {
  --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
  --tt-inline-code-text-color: var(--tt-gray-light-a-700);
  --tt-inline-code-border-color: var(--tt-gray-light-a-200);
  --tt-codeblock-bg: var(--tt-gray-light-a-50);
  --tt-codeblock-text: var(--tt-gray-light-a-800);
  --tt-codeblock-border: var(--tt-gray-light-a-200);

  .dark & {
    --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
    --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
    --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
    --tt-codeblock-bg: var(--tt-gray-dark-a-50);
    --tt-codeblock-text: var(--tt-gray-dark-a-800);
    --tt-codeblock-border: var(--tt-gray-dark-a-200);
  }
}

/* =====================
   CODE FORMATTING
   ===================== */
.tiptap.ProseMirror {
  // Inline code
  code {
    background-color: var(--tt-inline-code-bg-color);
    color: var(--tt-inline-code-text-color);
    border: 1px solid var(--tt-inline-code-border-color);
    font-family: 'JetBrains Mono NL', monospace;
    font-size: 0.875em;
    line-height: 1.4;
    border-radius: 6px/0.375rem;
    padding: 0.1em 0.2em;
  }

  // Code blocks
  pre {
    background-color: var(--tt-codeblock-bg);
    color: var(--tt-codeblock-text);
    border: 1px solid var(--tt-codeblock-border);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    padding: 1em;
    font-size: 1rem;
    border-radius: 6px/0.375rem;

    code {
      background-color: transparent;
      border: none;
      border-radius: 0;
      -webkit-text-fill-color: inherit;
      color: inherit;
    }
  }
}