@layer components {
  .rich-text {
    --lexxy-color-ink: var(--color-ink);
    --lexxy-color-ink-medium: var(--color-ink-muted);
    --lexxy-color-ink-light: var(--color-ink-faint);
    --lexxy-color-ink-lighter: var(--color-border-strong);
    --lexxy-color-ink-lightest: var(--color-surface-sunken);
    --lexxy-color-ink-inverted: var(--color-surface);
    --lexxy-color-accent-dark: var(--color-info);
    --lexxy-color-accent-light: var(--color-chip);
    --lexxy-color-accent-lightest: var(--color-surface-sunken);
    --lexxy-color-link: var(--color-link);
    --lexxy-color-canvas: var(--color-surface);
    --lexxy-color-text: var(--color-ink);
    --lexxy-color-text-subtle: var(--color-ink-muted);
    --lexxy-color-selected: var(--color-surface-sunken);
    --lexxy-color-selected-hover: var(--color-chip);
    --lexxy-color-selected-dark: var(--color-info);
    --lexxy-color-code-bg: var(--color-surface-sunken);
    --lexxy-color-table-header-bg: var(--color-surface-sunken);
    --lexxy-color-table-cell-border: var(--color-border-strong);
    --lexxy-focus-ring-color: transparent;
    --lexxy-font-base: var(--font-body);
    --lexxy-font-mono: var(--font-mono);
    --lexxy-radius: var(--radius-sm);
    --lexxy-toolbar-button-size: var(--tap-min);
    --lexxy-shadow: var(--elev-3);
  }

  .field--invalid.rich-text {
    --lexxy-color-ink-lighter: var(--color-danger);
  }

  .rich-text__toolbar {
    --icon-size: var(--input-icon-size);
  }

  .rich-text__editor .lexxy-editor__content {
    padding-inline: var(--space-5) !important;
  }

  .rich-text__prose,
  .rich-text__editor .lexxy-editor__content {
    font: var(--type-body);
    color: var(--color-ink);
    text-wrap: pretty;
    overflow-wrap: break-word;
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) :is(p, ul, ol, h1, h2, h3, h4, blockquote, pre) + :is(p, ul, ol, h1, h2, h3, h4, blockquote, pre) {
    margin-block-start: var(--space-4);
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) :is(h1, h2, h3, h4) {
    font: var(--type-heading);
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) a {
    color: var(--color-link);
    text-decoration: underline;
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) :is(ul, ol) {
    padding-inline-start: var(--space-7);
    list-style: revert;
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) .lexxy-nested-listitem {
    list-style: none;
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) blockquote {
    padding-inline-start: var(--space-5);
    border-inline-start: var(--border-width-strong) solid var(--color-border-strong);
    color: var(--color-ink-muted);
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) :is(code, pre) {
    font: var(--type-mono);
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) pre {
    white-space: pre-wrap;
  }

  .rich-text__embed {
    display: block;
    margin-block: var(--space-5);
    overflow: hidden;
    border-radius: var(--radius-sm);
  }

  .rich-text__embed :is(iframe, img, video),
  .rich-text__embed-photo {
    display: block;
    max-inline-size: var(--size-fill);
  }

  .rich-text__link-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-block: var(--space-5);
    padding: var(--space-5) var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
  }

  :is(.rich-text__prose, .rich-text__editor .lexxy-editor__content) a.rich-text__link-card {
    color: var(--color-ink);
    text-decoration: none;
  }

  .rich-text__link-card-title {
    font: var(--type-heading);
  }

  .rich-text__link-card-url {
    font: var(--type-caption);
    color: var(--color-ink-faint);
    overflow-wrap: anywhere;
  }

  .rich-text__attachment {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block: var(--space-5);
  }

  .rich-text__attachment-caption {
    display: flex;
    gap: var(--space-4);
    font: var(--type-caption);
    color: var(--color-ink-muted);
  }

  .rich-text__attachment-size {
    color: var(--color-ink-faint);
  }

  .mention {
    --avatar-size: var(--space-7);

    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    vertical-align: bottom;
  }

  .mention .avatar {
    font: var(--type-caption);
  }

  .mention__name {
    font-weight: 600;
  }
}