@import "tailwindcss";
@reference "../../../globals.css";

strong {
  color: inherit !important;
}

.ProseMirror {
  h1,
  h2,
  h3,
  h4 {
    color: var(--dw-editor-foreground);
    @apply m-0 mt-3;
  }

  h1 {
    @apply font-bold text-3xl;
  }

  h2 {
    @apply font-bold text-2xl;
  }
  h3 {
    @apply font-bold text-lg;
  }
  h4 {
    @apply font-semibold text-lg;
  }
  hr {
    @apply mb-2 opacity-30;
  }
  p {
    @apply my-1;
  }

  pre {
    code {
      .hljs-comment,
    .hljs-quote {
      color: #616161;
    }

    .hljs-variable,
    .hljs-template-variable,
    .hljs-attribute,
    .hljs-tag,
    .hljs-regexp,
    .hljs-link,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class {
      color: #f98181;
    }

    .hljs-number,
    .hljs-meta,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params {
      color: #fbbc88;
    }

    .hljs-string,
    .hljs-symbol,
    .hljs-bullet {
      color: #b9f18d;
    }

    .hljs-title,
    .hljs-section {
      color: #faf594;
    }

    .hljs-keyword,
    .hljs-selector-tag {
      color: #70cff8;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: 700;
    }
    }
  }
}
