@import "@deco/ui/styles/global.css";

/* include the ui package */
@source "../../packages/ui";

@layer base {
  .tiptap p.is-editor-empty:first-child::before {
    color: var(--muted-foreground);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }

  * {
    .prose {
      @apply whitespace-pre-wrap break-words;
      overflow-wrap: anywhere;
    }

    .prose p {
      @apply mb-2;
    }

    .prose ul {
      @apply list-disc pl-6 mb-2;
    }

    .prose ol {
      @apply list-decimal pl-6 mb-2;
    }

    .prose h1 {
      @apply text-2xl font-bold mb-2;
    }

    .prose h2 {
      @apply text-xl font-bold mb-2;
    }

    .prose h3 {
      @apply text-lg font-bold mb-2;
    }

    .prose h4 {
      @apply text-base font-bold mb-2;
    }

    .prose h5 {
      @apply text-sm font-bold mb-2;
    }

    .prose h6 {
      @apply text-xs font-bold mb-2;
    }

    .prose a {
      @apply text-primary-light underline;
    }

    .prose pre {
      @apply whitespace-pre-wrap break-words;
      overflow-wrap: anywhere;
    }

    .prose span[data-type="comment"] {
      @apply rounded bg-muted-foreground/10 border border-muted-foreground/20
        whitespace-pre-wrap px-1 leading-normal block break-words pl-6 relative
        before:content-["//"] before:absolute before:left-1 before:top-1
        text-muted-foreground italic before:text-muted-foreground
        before:opacity-60 before:text-xs/tight before:font-mono my-1;
      overflow-wrap: anywhere;
    }

    .prose blockquote {
      @apply border-l-2 border-muted-foreground/20 pl-4;
    }

    .prose pre code {
      @apply my-2 rounded-lg bg-primary-light/10 border border-primary-light
        block whitespace-pre-wrap !p-2 break-words;
      overflow-wrap: anywhere;
    }

    .prose code {
      @apply rounded bg-muted-foreground/10 border border-muted-foreground/20
        whitespace-pre-wrap px-1 leading-normal inline break-words;
      overflow-wrap: anywhere;
    }

    .prose hr {
      @apply my-4 border-border;
    }
  }
}
