/*
 * Lexxy + honey-forms bridge overrides.
 *
 * honey-forms' `rich_text_area` was written for Trix: it wraps the editor in a
 * themed, focus-ring border box and applies the `prose` typography classes to
 * the editor element. Lexxy is self-contained (it draws its own border and
 * styles its own content via the `.lexxy-content` class), so the two collide.
 * These rules reconcile them until honey-forms learns about Lexxy directly.
 *
 * Lexxy intentionally uses :where() (zero specificity) for its own styles, so a
 * plain element/class selector here wins without !important.
 */

/* Single border: honey's wrapper already provides a bordered, focus-ring box,
 * so drop Lexxy's own border to avoid a double border. */
lexxy-editor {
  border: none;
  border-radius: 0;
  background-color: transparent;
}

/* `prose` puts a top margin on the first block, which (because the content
 * lives in a nested .lexxy-editor__content, not directly under .prose) is never
 * reset — pushing typed text below the absolutely-positioned placeholder.
 * Lexxy's .lexxy-content rules handle spacing between blocks themselves. */
.lexxy-editor__content > :first-child {
  margin-top: 0;
}

/* honey's wrapper supplies the horizontal padding (px-5): the toolbar and its
 * bottom divider line sit inset from the box edges — matching the previous Trix
 * editor. Drop the wrapper's top padding and give the toolbar equal vertical
 * padding instead, so the icons are centered between the top border and the
 * divider line (the divider is pinned to the toolbar's bottom edge). The
 * [class]/.lexxy-content in :has() outrank the Tailwind padding utilities. */
div:has(> lexxy-editor.lexxy-content) {
  padding-top: 0;
}
lexxy-toolbar {
  padding-block: 0.6rem;
}

/* Toolbar: tighten the icon buttons (were 2lh ≈ 56px around an 18px icon) and
 * space them out like the previous Trix toolbar — wider gaps and a larger gap
 * at group boundaries. */
lexxy-editor {
  --lexxy-toolbar-button-size: 1.4lh;
  --lexxy-toolbar-gap: 0.4rem;
  --lexxy-toolbar-spacing: 0.6rem;
}
/* Trix separated groups with whitespace, not vertical rules; hide Lexxy's
 * group-end divider lines and let the group spacing do the separating. */
lexxy-toolbar .lexxy-editor__toolbar-button.lexxy-editor__toolbar-group-end::after {
  display: none;
}

/* Reorder: move the image + attachment buttons from the start of the toolbar to
 * just before the table button, grouping all the "insert" actions together.
 * (The toolbar is flexbox, so `order` reorders without changing Lexxy's DOM.)
 * undo/redo/overflow keep their trailing, right-pushed position. */
lexxy-toolbar button[name="image"],
lexxy-toolbar button[name="file"] {
  order: 1;
}
lexxy-toolbar button[name="table"],
lexxy-toolbar button[name="divider"],
lexxy-toolbar button[name="undo"],
lexxy-toolbar button[name="redo"],
lexxy-toolbar .lexxy-editor__toolbar-overflow {
  order: 2;
}

/* Match the previous Trix toolbar look: muted gray icons that darken on
 * hover/active, faint when disabled (Lexxy renders them full-dark by default). */
lexxy-toolbar .lexxy-editor__toolbar-button {
  color: rgba(0, 0, 0, 0.6);
}
lexxy-toolbar .lexxy-editor__toolbar-button:hover:not([aria-disabled="true"]),
lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"] {
  color: rgba(0, 0, 0, 0.85);
}
lexxy-toolbar .lexxy-editor__toolbar-button[aria-disabled="true"] {
  color: rgba(0, 0, 0, 0.6);
  opacity: 0.3;
}

/* honey blue-100 fill for the active/selected state. */
lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"],
lexxy-toolbar .lexxy-editor__toolbar-button[aria-pressed="true"]:hover,
lexxy-toolbar .lexxy-editor__toolbar-button:active:not([aria-disabled="true"]) {
  background-color: var(--color-blue-100);
}

/* Horizontal divider: Lexxy ships a 20%-wide rule with an oversized (2.3lh)
 * delete control. Make the rule span the full width and shrink the delete
 * control to a normal size. */
lexxy-editor .horizontal-divider hr {
  inline-size: 100%;
}
lexxy-editor .horizontal-divider lexxy-node-delete-button .lexxy-floating-controls__group {
  --button-size: 1.2lh;
}
/* With a full-width rule, Lexxy's default delete position (inset-inline-start:
 * 100%) lands past the right edge, where honey's overflow:hidden clips it.
 * Pin it just inside the right edge instead. */
lexxy-editor .horizontal-divider lexxy-node-delete-button {
  inset-inline-start: auto;
  inset-inline-end: 0;
}