/* Lexxy editor chrome — redesign.
 *
 * Restyles the Lexxy rich-text editor's own structure (content area, toolbar,
 * buttons) to match the redesign aesthetic. Paired with lexxy-tokens.css
 * which maps Lexxy's color variables onto --rd-* tokens.
 *
 * The composer wrapper (.cm-compose / .cm-compose-body) owns the outer
 * border + focus ring; this file only styles Lexxy's inner surfaces.
 */

@layer components {
  /* When Lexxy lives inside a composer, drop the editor's own border — the
     composer wrapper provides the frame. */
  .cm-compose-body lexxy-editor,
  .wi-section-desc lexxy-editor {
    display: block;
    position: relative;
    border: 0;
    background: transparent;
    font-family: inherit;
  }

  /* Toolbar row. Rounded top corners so the composer frame reads as one
     surface once .cm-compose-body drops overflow:hidden. */
  .cm-compose-body lexxy-toolbar,
  .wi-section-desc lexxy-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--rd-bg-raised);
    border-top-left-radius: calc(var(--rd-radius-lg) - 1px);
    border-top-right-radius: calc(var(--rd-radius-lg) - 1px);
  }

  .cm-compose-body .lexxy-editor__toolbar-button,
  .wi-section-desc .lexxy-editor__toolbar-button {
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    block-size: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rd-fg-subtle);
    border-radius: var(--rd-radius-sm);
    cursor: pointer;
    transition: background var(--rd-dur-fast) var(--rd-ease),
                color var(--rd-dur-fast) var(--rd-ease);
  }
  .cm-compose-body .lexxy-editor__toolbar-button:hover,
  .wi-section-desc .lexxy-editor__toolbar-button:hover {
    background: var(--rd-bg-hover);
    color: var(--rd-fg);
  }
  .cm-compose-body .lexxy-editor__toolbar-button[aria-pressed="true"],
  .wi-section-desc .lexxy-editor__toolbar-button[aria-pressed="true"] {
    background: var(--rd-accent-soft);
    color: var(--rd-accent);
  }

  .cm-compose-body lexxy-toolbar svg,
  .cm-compose-body .lexxy-editor__toolbar-button svg,
  .wi-section-desc lexxy-toolbar svg,
  .wi-section-desc .lexxy-editor__toolbar-button svg {
    display: inline-block;
    block-size: var(--lexxy-toolbar-icon-size, 15px);
    inline-size: var(--lexxy-toolbar-icon-size, 15px);
  }

  .cm-compose-body lexxy-toolbar details,
  .cm-compose-body lexxy-toolbar summary,
  .cm-compose-body .lexxy-editor__toolbar-dropdown,
  .wi-section-desc lexxy-toolbar details,
  .wi-section-desc lexxy-toolbar summary,
  .wi-section-desc .lexxy-editor__toolbar-dropdown {
    display: inline-flex;
    align-items: center;
  }

  .cm-compose-body .lexxy-editor__toolbar-spacer,
  .wi-section-desc .lexxy-editor__toolbar-spacer {
    flex: 1;
    min-inline-size: 0.5em;
  }

  /* Content area */
  .cm-compose-body .lexxy-editor__content,
  .wi-section-desc .lexxy-editor__content {
    padding: 10px 12px;
    min-block-size: 4lh;
    font-size: var(--rd-text-base);
    line-height: var(--rd-leading-normal);
    color: var(--rd-fg);
  }
  .cm-compose-body .lexxy-editor__content p,
  .wi-section-desc .lexxy-editor__content p {
    margin: 0 0 6px;
  }

  /* Nothing inside the editor should force its own focus outline — the
     composer wrapper shows the ring. */
  .cm-compose-body lexxy-editor:focus-within,
  .wi-section-desc lexxy-editor:focus-within {
    outline: none;
  }

  /* Attachments inside the editor (images, files) */
  .cm-compose-body lexxy-editor action-text-attachment,
  .wi-section-desc lexxy-editor action-text-attachment {
    display: inline-block;
    padding: 2px 4px;
    border-radius: var(--rd-radius-sm);
  }
}