code[data-theme],
code[data-theme] span {
  @apply text-[color:var(--shiki-light)] bg-[color:var(--shiki-light-bg)];
}

.dark code[data-theme],
.dark code[data-theme] span {
  @apply text-[color:var(--shiki-dark)] bg-[color:var(--shiki-dark-bg)];
}

.prose pre {
  @apply m-1 rounded-lg block whitespace-pre-wrap break-all;

  color: var(--color-foreground);
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,)
    var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
    var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
    var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
    var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
    var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
    var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
    var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
    var(--tw-backdrop-sepia,);

  border-radius: var(--radius-md);
  background-color: var(--color-background);
  margin-inline: calc(var(--spacing) * 0) !important;
  min-width: calc(var(--spacing) * 0) !important;
}

.prose pre:focus-within {
  outline: none;
}

.prose pre code [data-line] {
  @apply block relative pl-[3em];

  counter-increment: line;
}

.prose pre code > [data-line]::before {
  @apply absolute left-0 w-[2em] pr-[1em] text-right text-foreground/60 border-r-2 border-foreground/20;

  content: counter(line);
}

.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  padding-top: 0.857143em;
  padding-inline-end: 1.14286em;
  padding-bottom: 0.857143em;
  border-radius: 0.375rem;
  margin-top: 1.71429em;
  margin-bottom: 1.71429em;
  padding-inline-start: 1.14286em;
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.71429;
  overflow-x: auto;
}

.prose
  :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
}

.prose a {
  @apply underline underline-offset-3 decoration-secondary-foreground hover:decoration-primary;
}

.prose a.anchor {
  @apply no-underline mx-2 opacity-50 hover:opacity-100;
}

.prose blockquote {
  font-style: normal;
}

.prose blockquote p:first-of-type::before {
  content: none;
}

.prose blockquote p:last-of-type::after {
  content: none;
}
