@custom-variant active {
  &:where(&:active, [data-trix-active]) {
    @slot;
  }
}

.trix-content {
  @apply prose leading-[1.5];
  @apply prose-h1:text-xl prose-h1:mt-0 prose-h1:mb-2;
  @apply prose-p:mt-0 prose-p:mb-2;
  @apply prose-a:underline;
  @apply prose-blockquote:mt-0 prose-blockquote:mb-2;
  @apply prose-pre:mt-0 prose-pre:mb-2;
  @apply prose-ol:mt-0 prose-ol:mb-2;
  @apply prose-ul:mt-0 prose-ul:mb-2;
  @apply prose-li:my-0;

  & :is(div, p) + h1 {
    @apply mt-4;
  }

  & :first-child {
    @apply mt-0;
  }

  & :last-child {
    @apply mb-0;
  }

  --tw-prose-body: var(--p-text-color);
  --tw-prose-headings: var(--p-primary-color);
  --tw-prose-lead: var(--p-primary-color);
  --tw-prose-links: var(--p-primary-color);
  --tw-prose-bold: var(--p-text-hover-color);
  --tw-prose-counters: var(--p-text-color);
  --tw-prose-bullets: var(--p-primary-color);
  --tw-prose-hr: var(--p-text-muted-color);
  --tw-prose-quotes: var(--p-text-color);
  --tw-prose-quote-borders: var(--p-primary-color);
  --tw-prose-captions: var(--p-text-hover-color);
  --tw-prose-code: var(--p-text-muted-color);
  --tw-prose-pre-code: var(--p-content-hover-color);
  --tw-prose-pre-bg: var(--p-content-hover-background);
  --tw-prose-th-borders: var(--p-content-border-color);
  --tw-prose-td-borders: var(--p-content-border-color);

  /*
  --tw-prose-invert-body: var(--color-pink-200);
  --tw-prose-invert-headings: var(--color-white);
  --tw-prose-invert-lead: var(--color-pink-300);
  --tw-prose-invert-links: var(--color-white);
  --tw-prose-invert-bold: var(--color-white);
  --tw-prose-invert-counters: var(--color-pink-400);
  --tw-prose-invert-bullets: var(--color-pink-600);
  --tw-prose-invert-hr: var(--color-pink-700);
  --tw-prose-invert-quotes: var(--color-pink-100);
  --tw-prose-invert-quote-borders: var(--color-pink-700);
  --tw-prose-invert-captions: var(--color-pink-400);
  --tw-prose-invert-code: var(--color-white);
  --tw-prose-invert-pre-code: var(--color-pink-300);
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: var(--color-pink-600);
  --tw-prose-invert-td-borders: var(--color-pink-700);
  */
}