@layer components {
  .rich-text-content {
    --block-margin: 1rem;

    :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:not(.attachment--custom), .attachment:not(.attachment--custom)) {
      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) {
      margin-inline: auto;
      max-block-size: 32rem;
      object-fit: contain;

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

    /* Attachments */
    .attachment:not(.attachment--custom) {
      block-size: auto;
      display: inline-block;
      inline-size: 100%;
      position: relative;
      margin-inline: 0;
      max-inline-size: 100%;

      &:is(figure) img,
      &:is(figure) video {
        block-size: auto;
        display: block;
        margin-inline: auto;
        max-inline-size: 100%;
        user-select: none;
      }

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

    .attachment__caption {
      color: var(--color-ink-dark);
      display: flex;
      font-size: var(--text-small);
      flex-wrap: wrap;
      line-height: 1.3;
      column-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;
        }
      }
    }

    .attachment__figure {
      --hover-size: 0;
    }

    .attachment--file {
      align-items: center;
      display: inline-flex;

      .attachment__caption {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        text-align: start;

        strong {
          color: var(--color-ink);
        }
      }
    }

    .attachment__icon {
      aspect-ratio: 4/5;
      background-color: var(--color-canvas);
      block-size: calc(2.5lh + 0.5ch);
      border: 2px solid var(--color-ink-medium);
      border-radius: 0.3em;
      color: var(--color-ink-dark);
      display: inline-grid;
      font-size: var(--text-small);
      font-weight: 800;
      inline-size: auto;
      overflow: clip;
      padding-block-start: 0.4lh;
      place-content: center;
      position: relative;
      text-transform: uppercase;

      &::before {
        background-color: var(--color-ink-medium);
        block-size: 0.5lh;
        content: "";
        display: block;
        inline-size: 100%;
        inset: 0 0 auto;
        position: absolute;
      }

      .attachment--psd &,
      .attachment--key &,
      .attachment--sketch &,
      .attachment--ai &,
      .attachment--eps &,
      .attachment--indd &,
      .attachment--svg &,
      .attachment--ppt &,
      .attachment--pptx & {
        color: oklch(var(--lch-red-dark));
        background-color: oklch(var(--lch-red-lightest));
        border-color: oklch(var(--lch-red-medium));

        &::before {
          background-color: oklch(var(--lch-red-medium));
        }
      }

      .attachment--css &,
      .attachment--php &,
      .attachment--json &,
      .attachment--htm &,
      .attachment--html &,
      .attachment--rb &,
      .attachment--erb &,
      .attachment--ts &,
      .attachment--js & {
        color: oklch(var(--lch-purple-dark));
        background-color: oklch(var(--lch-purple-lightest));
        border-color: oklch(var(--lch-purple-medium));

        &::before {
          background-color: oklch(var(--lch-purple-medium));
        }
      }

      .attachment--txt &,
      .attachment--pages &,
      .attachment--rtf &,
      .attachment--md &,
      .attachment--doc &,
      .attachment--docx & {
        color: oklch(var(--lch-blue-dark));
        background-color: oklch(var(--lch-blue-lightest));
        border-color: oklch(var(--lch-blue-medium));

        &::before {
          background-color: oklch(var(--lch-blue-medium));
        }
      }

      .attachment--csv &,
      .attachment--numbers &,
      .attachment--xls &,
      .attachment--xlsx & {
        color: oklch(var(--lch-green-dark));
        background-color: oklch(var(--lch-green-lightest));
        border-color: oklch(var(--lch-green-medium));

        &::before {
          background-color: oklch(var(--lch-green-medium));
        }
      }
    }

    .attachment__link {
      --hover-size: 0;

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

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

    /* Code */
    :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);
        }
      }
    }

    /* Custom attachments such as mentions, etc. */
    .attachment--custom {
      display: inline;
      padding: 0;
      margin: 0;
      white-space: normal;
    }

    .attachment--custom,
    action-text-attachment[content-type^='application/vnd.actiontext'] {
      --attachment-image-size: 1em;
      --attachment-selected-color: oklch(var(--lch-blue-dark));

      align-items: center;
      display: inline-flex;
      gap: 0.25ch;
      position: relative;
      vertical-align: bottom;

      lexical-editor & {
        cursor: pointer;
      }

      img {
        block-size: var(--attachment-image-size);
        border-radius: 50%;
        inline-size: var(--attachment-image-size);
      }

      &.node--selected {
        background: var(--attachment-selected-color);
        box-shadow:
          -0.25ch 0 0 var(--attachment-selected-color),
           0.5ch 0 0 var(--attachment-selected-color);
        border-radius: 99rem;
        color: var(--color-ink-inverted);
      }
    }
  }
}
