@layer components {

  .rich-text-content {
    --block-margin: 0.5lh;

    :where(h1, h2, h3, h4, h5, h6) {
      display: block;
      font-weight: 800;
      letter-spacing: -0.02ch;
      line-height: 1.1;
      margin-block: 0 var(--block-margin);
      overflow-wrap: break-word;
      text-wrap: balance;
    }

    :where(h1) { font-size: 2em; }
    :where(h2) { font-size: 1.5em; }
    :where(h3) { font-size: 1.17em; }
    :where(h4) { font-size: 1em; }
    :where(h5) { font-size: 0.83em; }
    :where(h6) { font-size: 0.67em; }

    :where(p, ul, ol, dl, blockquote, figure, .attachment) {
      margin-block: 0 var(--block-margin);

      &:not(lexxy-editor &) {
        overflow-wrap: break-word;
        text-wrap: pretty;
      }
    }

    :where(b, strong, .lexxy-content__bold) {
      font-weight: 700;
    }

    :where(i, em, .lexxy-content__italic) {
      font-style: italic;
    }

    :where(s, .lexxy-content__strikethrough) {
      text-decoration: line-through;
    }


    :where(p, blockquote) {
      letter-spacing: -0.005ch;
    }

    :where(blockquote) {
      border-inline-start: 0.25em solid #f0f0f0;
      font-style: italic;
      margin: var(--block-margin) 0;
      padding-inline-start: 2ch;
    }

    /* Avoid extra space due to empty paragraphs */
    p:empty {
      display: none;
    }

    :where(hr) {
      color: currentColor;
      block-size: 0;
      border: none;
      border-block-end: 2px solid currentColor;
      inline-size: 20%;
      margin: calc(var(--block-margin) * 2) 0;
    }

    .horizontal-divider  {
      margin: var(--block-margin) 0;
      padding-block: var(--block-margin);
    }

    /* Code */
    :where(code, pre) {
      background-color: #ffffff;
      border: 1px solid #f0f0f0;
      border-radius: 0.3em;
      color: #1a1a1a;
      font-size: 0.85em;
      font-weight: 500;
      margin-block: var(--block-margin);
      padding: 0.1em 0.3em;

      &:is(pre),
      &[data-language] {
        border-radius: 0.5em;
        display: block;
        overflow-x: auto;
        padding: 0.5lh 2ch;
        tab-size: 2;
        text-wrap: nowrap;
        white-space: pre;
        word-break: break-word;

        /* Keywords and attributes */
        .code-token__attr,
        .token.atrule,
        .token.attr,
        .token.keyword {
          color: #0066cc;
        }

        /* Constants, booleans, numbers, properties, tags */
        .code-token__property,
        .token.boolean,
        .token.constant,
        .token.deleted,
        .token.number,
        .token.property,
        .token.symbol,
        .token.tag {
          color: #7c3aed;
        }

        /* Strings, selectors, and built-in constructs */
        .code-token__selector,
        .token.builtin,
        .token.char,
        .token.inserted,
        .token.selector,
        .token.string {
          color: #059669;
        }

        /* Comments and meta information */
        .code-token__comment,
        .token.cdata,
        .token.comment,
        .token.doctype,
        .token.prolog {
          color: #6b7280;
          font-style: italic;
        }

        /* Operators and symbolic entities */
        .code-token__operator,
        .token.entity,
        .token.operator,
        .token.url {
          color: #dc2626;
        }

        /* Functions and class names */
        .code-token__function,
        .token.class,
        .token.class-name,
        .token.function {
          color: #7c3aed;
        }

        /* Variables, regex, namespaces, important */
        .code-token__variable,
        .token.important,
        .token.namespace,
        .token.regex,
        .token.variable {
          color: #dc2626;
        }

        /* Punctuation */
        .code-token__punctuation,
        .token.punctuation {
          color: #374151;
        }
      }
    }
  }
}

/* Revert to default Lexxy styles that Tailwind messes up */
.lexxy-content.lexxy-content ul,
.lexxy-content.lexxy-content ol,
.lexxy-content.lexxy-content dl {
    list-style: revert;
    margin: revert;
    padding: revert;
}