fizzy/app/assets/stylesheets/rich-text-content.css

@layer components {
  .rich-text-content {
    --block-margin: 0.65lh;

    :where(h1, h2, h3, h4, h5, h6) {
      display: block;
      font-weight: 800;
      hyphens: auto;
      letter-spacing: -0.02ch;
      line-height: 1.1;
      margin-block: 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) {
      margin-block: var(--block-margin);
      overflow-wrap: break-word;
      text-wrap: pretty;
    }

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

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

    :where(blockquote) {
      border-inline-start: 0.25em solid var(--color-ink-lighter);
      font-style: italic;
      margin: var(--block-margin) 0;
      padding: 0.5lh 2ch;
    }

    :where(img, video, embed, object) {
      max-inline-size: 25rem;
      max-block-size: 32rem;

      /* Links should hug media contained within */
      a:has(&) {
        display: inline-block;
      }
    }

    /* Attachments */
    :where(figure) {
      block-size: auto;
      display: inline-block;
      inline-size: 100%;
      position: relative;
      margin-inline: 0;
      max-inline-size: 100%;

      :where(img) {
        block-size: auto;
        display: block;
        margin-inline: auto;
        max-inline-size: 100%;
        user-select: none;
      }

      :where(figcaption) {
        color: var(--color-ink-dark);
        display: flex;
        font-size: var(--text-small);
        flex-wrap: wrap;
        line-height: 1.3;
        gap: 0.5ch;
        justify-content: center;
        margin: var(--block-space-half) var(--inline-space);
        text-align: center;

        .input {
          inline-size: 100%;
          max-inline-size: 100%;
          text-align: center;

          @supports (field-sizing: content) {
            field-sizing: content;
            inline-size: auto;
            min-inline-size: 20ch;
          }
        }
      }

      :where(a) {
        --hover-size: 0;

        color: var(--color-link);
        text-decoration: underline;
      }

      :where(progress) {
        inline-size: 100%;
        margin: auto;
      }
    }

    .attachment__size {
      &:before {
        content: "· ";
      }

      &:after {
        content: " ·";
      }
    }

    /* Attachment junk get wrapped in a paragraph causing unwanted space */
    p:has(action-text-attachment) {
      display: none;

      + * {
        margin-block-start: 0;
      }
    }

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

    :where(code, pre) {
      background-color: var(--color-canvas);
      border: 1px solid var(--color-ink-lighter);
      border-radius: 0.3em;
      color: var(--color-ink);
      font-family: var(--font-mono);
      font-size: 0.85em;
      font-weight: 500;
      margin-block: var(--block-margin);
      padding: 0.1em 0.3em;

      &[data-language] {
        border-radius: 0.5em;
        display: block;
        hyphens: none;
        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: var(--color-code-token__att);
        }

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

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

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

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

        /* Functions and class names */
        .code-token__function,
        .token.class,
        .token.class-name,
        .token.function {
          color: var(--color-code-token__function);
        }

        /* Variables, regex, namespaces, important */
        .code-token__variable,
        .token.important,
        .token.namespace,
        .token.regex,
        .token.variable {
          color: var(--color-code-token__variable);
        }

        /* Punctuation */
        .code-token__punctuation,
        .token.punctuation {
          color: var(--color-code-token__punctuation);
        }
      }
    }
  }
}