@import "tailwindcss";
@plugin "@tailwindcss/typography";
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@layer components {
  .prose-compact {
    @apply prose prose-slate max-w-none;

    --tw-prose-body: theme(colors.gray.700);
    --tw-prose-headings: theme(colors.gray.900);
    --tw-prose-links: theme(colors.blue.600);
    --tw-prose-code: theme(colors.gray.800);
  }

  .prose-compact p {
    @apply mb-2 mt-0;
  }

  .prose-compact h1 {
    @apply pb-2 mb-3 border-b-2 border-gray-100;
  }

  .prose-compact h2 {
    @apply mt-4 pb-2 mb-3 border-b-2 border-gray-100 font-semibold;
  }

  .prose-compact h3 {
    @apply mt-3 mb-1;
  }

  .prose-compact h4,
  .prose-compact h5,
  .prose-compact h6 {
    @apply mt-2 mb-1;
  }

  .prose-compact ul,
  .prose-compact ol {
    @apply my-2 space-y-0;
  }

  .prose-compact li {
    @apply my-0;
  }

  .prose-compact blockquote {
    @apply my-3 py-2;
  }

  .prose-compact img {
    @apply m-0 align-top;
  }

  .prose-compact a:has(img) {
    @apply no-underline border-0 inline-block align-top;
  }

  .prose-compact a img {
    @apply inline-block align-top;
  }

  .prose-compact :not(pre) > code {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono font-normal;
  }

  .prose-compact :not(pre) > code::before,
  .prose-compact :not(pre) > code::after {
    content: none !important;
  }

  .prose-compact pre {
    @apply my-3 p-4 bg-gray-100 text-gray-800 rounded-sm overflow-x-auto border border-gray-200;
    overflow-x: auto;
    max-width: 100%;
    width: 0;
    min-width: 100%;
  }

  .prose-compact pre code {
    @apply bg-transparent text-gray-800 p-0 rounded-none;
  }

  .prose-compact pre code::before,
  .prose-compact pre code::after {
    content: none !important;
  }
}