pre {
  @apply rounded-xl;
  @apply my-7;
  @apply p-5;
  background-color: var(--code-bg);
  color: var(--code-fg);
  @apply text-sm;
  @apply scrollbar-hide overflow-y-auto max-h-[30.5em];
}

:not(pre) > code {
  @apply inline font-mono break-all leading-snug p-1;
  background-color: var(--code-bg);
  color: var(--code-fg);
}

.line-number::before {
  @apply inline-block w-4 text-right mr-5 -ml-2 text-zinc-400;
  content: attr(line);
}

pre.mermaid {
  @apply bg-transparent flex justify-center;
}

html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}
