.prismjs {
  --tw-prose-pre-bg: rgba(245, 245, 245, .05);
  --tw-prose-pre-code: theme('colors.zinc.600');
  background: linear-gradient(to top, rgba(235, 235, 235, .3) 0%, rgba(255, 255, 255, 0.1) 100%);
  font-size: 12px;
  padding: 1rem;
  @apply antialiased;
}

[data-blockid]:not([data-filename]) > .prismjs {
  @apply rounded-t-3xl;
}

@screen md {
  .prismjs {
    font-size: 0.875rem;
    padding: 1.5rem;
  }
}

.dark {
  .prismjs {
    --tw-prose-pre-bg: rgba(5, 5, 5, .05);
    --tw-prose-pre-code: theme('colors.zinc.300');
    background: linear-gradient(to bottom, rgba(35, 35, 35, .4) 0%, rgba(0, 0, 0, 0.2) 100%);
  }
}

.token.tag,
.token.class-name,
.token.selector,
.token.selector .class,
.token.selector.class,
.token.function {
  @apply text-blue-700;
}

.token.attr-name,
.token.keyword,
.token.module,
.token.rule,
.token.pseudo-class,
.token.important {
  @apply text-orange-700;
}

.token.attr-value,
.token.class,
.token.string {
  @apply text-sky-700;
}

.token.attr-value * {
  @apply text-sky-700;
}

.token.property {
  @apply text-sky-700;
}

.token.unit {
  @apply text-teal-800;
}

.language-css .token.function {
  @apply text-teal-800;
}

.dark {
  .token.tag,
  .token.class-name,
  .token.selector,
  .token.selector .class,
  .token.selector.class,
  .token.function {
    @apply text-blue-300;
  }

  .token.attr-name,
  .token.keyword,
  .token.module,
  .token.rule,
  .token.pseudo-class,
  .token.important {
    @apply text-orange-300;
  }

  .token.attr-value,
  .token.class,
  .token.string {
    @apply text-sky-300;
  }

  .token.attr-value * {
    @apply text-sky-300;
  }

  .token.property {
    @apply text-sky-300;
  }

  .token.unit {
    @apply text-teal-200;
  }

  .language-css .token.function {
    @apply text-teal-200;
  }
}

.token.punctuation,
.token.attr-equals {
  @apply text-zinc-500;
}

.token.attr-value .attr-equals,
.token.attr-value .attr-equals + .punctuation,
.token.attr-value > .punctuation:last-child {
  @apply text-zinc-500;
}

.language-shell .token:not(.comment),
.token.atapply .token:not(.rule):not(.important):not(.punctuation) {
  color: inherit;
}

.token.comment,
.token.operator,
.token.combinator {
  @apply text-zinc-400;
}

.token.unchanged {
  @apply block;
}

.token.deleted,
.token.inserted {
  @apply block relative -mx-9 pl-8 pr-5 border-l-4 before:absolute before:top-0 before:left-4;
}

.token.inserted {
  @apply bg-teal-400/[0.15] border-teal-400 before:content-['+'] before:text-teal-400;
}

.token.deleted {
  @apply bg-rose-500/[0.15] border-rose-400 before:content-['-'] before:text-rose-400;
}

pre[class^='language-diff-'] {
  @apply flex px-9;
}

pre[class^='language-diff-'] > code {
  @apply flex-none min-w-full;
}

/* targets the `&shy;` in a code example */
span.code-highlight.bg-code-highlight:has(> span[title*="\AD"]) {
  @apply bg-pink-500/10 text-pink-400 mx-[1px];
}

.comment.linenumber {
  @apply opacity-40;
}
