/* ============================================================
   Rich text: the Lexxy composers for posts, replies and chat,
   and the @mentions they carry
   ============================================================ */

/* Lexxy's own editor styles, prompt menu included. They sit in the
   components layer so the product rules below refine them. */
@import url("/assets/lexxy-editor-cc059d12.css") layer(components);

@layer app {
  :root {
    --lexxy-color-canvas: transparent;
    --lexxy-color-ink: var(--color-body);
    --lexxy-color-text: var(--color-body);
    --lexxy-color-selected: color-mix(in srgb, var(--color-primary) 12%, transparent);
    --lexxy-focus-ring-color: var(--color-primary);
    --lexxy-font-base: var(--font-sans);
    --lexxy-radius: 8px;
  }

  /* A composer reads as the form control it replaced: the form-control
     class draws the box, so the editor's own border and padding go. */
  lexxy-editor.rich-text-input {
    --lexxy-editor-padding: var(--input-padding-y) var(--input-padding-x);
    --lexxy-editor-rows: 2lh;

    padding: 0;

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

    .lexxy-editor__content {
      max-block-size: 12lh;
      overflow-y: auto;
    }

    .lexxy-editor__content::before {
      color: var(--input-placeholder-color);
      opacity: 1;
    }

    p {
      margin: 0;
    }
  }

  lexxy-editor.room-composer__input,
  lexxy-editor.reply-composer__input {
    --lexxy-editor-rows: 1lh;
  }

  lexxy-editor.reply-composer__input {
    --lexxy-editor-padding: 0;

    border: 0;

    &:focus-within {
      box-shadow: none;
    }
  }

  /* The menu is drawn inside its editor, so an editor that clears
     --color-body-bg for its own background would leave the list see-through. */
  .lexxy-prompt-menu {
    --lexxy-color-canvas: var(--color-body-bg);

    border: 1px solid var(--color-border);
    max-inline-size: min(28ch, calc(100% - var(--lexxy-prompt-offset-x)));
  }

  /* A glass card's backdrop filter makes it a stacking context, so the
     prompt's own z-index stops at the card's edge and the post that follows
     paints over the list. Lift the card itself while its prompt is open. */
  .glass-card:has(.lexxy-prompt-menu--visible) {
    position: relative;
    z-index: var(--lexxy-z-popup);
  }

  .mention-prompt-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    min-inline-size: 0;

    span:last-child {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* A mention is an inline chip: the person's avatar and name. Inside the
     editor its markup keeps formatting whitespace, which the editor's
     white-space: pre-wrap would otherwise turn into line breaks. */
  action-text-attachment[content-type="application/vnd.actiontext.mention"] {
    display: inline;
    white-space: normal;
  }

  /* The name aligns to the baseline, so the chip's baseline is the name's and
     it sits on the line like the words around it; the avatar is centred on
     its own. Aligning everything to the centre would hand the chip the
     avatar's baseline, the bottom of its circle, and lift it off the line. */
  .mention {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    padding: 0 0.45em 0 0.1em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-dark);
    font-weight: 600;
    line-height: 1.4;
    vertical-align: baseline;
    white-space: nowrap;

    /* Both sizes resolve against the avatar's own, already shrunk, font
       size: initials at 0.55em of the text, a circle about 1.25em across. */
    .avatar {
      --avatar-font-size: 0.55em;
      --avatar-size: 2.25em;

      align-self: center;
    }
  }
}