/*
 * Rich text: Lexxy's editor (<lexxy-editor>) and what it produces (.lexxy-content), on the app's
 * tokens so both follow light and dark mode. Lexxy's own stylesheet (the gem's lexxy.css) sets its
 * variables on :root after ours; these selectors are more specific, so they win
 */
lexxy-editor,
.lexxy-content {
  --lexxy-color-canvas: var(--color-surface);
  --lexxy-color-text: var(--color-text);
  --lexxy-color-text-subtle: var(--color-text-subtle);
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-medium: var(--color-text-muted);
  --lexxy-color-ink-light: var(--color-text-subtle);
  --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-link: var(--color-primary-text);
  --lexxy-color-accent-dark: var(--color-primary);
  --lexxy-color-accent-light: var(--color-primary-subtle-hover);
  --lexxy-color-accent-lightest: var(--color-primary-subtle);
  --lexxy-color-selected: var(--color-primary-subtle);
  --lexxy-color-selected-hover: var(--color-primary-subtle-hover);
  --lexxy-color-code-bg: var(--color-surface-sunken);
  --lexxy-font-base: var(--font-sans);
}

lexxy-editor {
  display: block;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);

  &:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
  }

  .lexxy-editor__content {
    min-height: 12rem;
    padding: var(--space-3);
  }
}

.lexxy-content {
  color: var(--color-text);
  line-height: var(--leading-relaxed);

  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
  }
}