/*
 * Lexxy editor and content styles, themed and overridden.
 *
 * Lexxy's own stylesheets are imported into the base layer (#1297), so every app layer
 * outranks them by layer order alone: no unlayered overrides and no !important. Lexxy is
 * themed through its --lexxy-* variables, mapped to our tokens so it follows dark mode.
 */

@import url("/assets/lexxy-content-b2bd89df.css") layer(base);
@import url("/assets/lexxy-editor-cc059d12.css") layer(base);

@layer base {
  /* Declared after the imports, so these win over lexxy-variables.css's :root. */
  :root {
    --lexxy-color-ink: var(--color-text);
    --lexxy-color-ink-medium: var(--color-text-secondary);
    --lexxy-color-ink-light: var(--color-text-muted);
    --lexxy-color-ink-lighter: var(--color-border);
    --lexxy-color-ink-lightest: var(--color-surface-sunken);
    --lexxy-color-ink-inverted: var(--color-bg);
    --lexxy-color-link: var(--color-primary);
    --lexxy-focus-ring-color: var(--color-focus);
  }
}

@layer components {
  /* Lexxy's own form controls (link URL field, code language picker) keep Lexxy's styling
     instead of picking up the app's generic .input and select rules in components/core.css. */
  .lexxy-editor__toolbar-dropdown--link input.input,
  select.lexxy-code-language-picker {
    all: revert-layer;
  }
  .lexxy-editor__toolbar-dropdown--link input.input { font-family: inherit; }
  select.lexxy-code-language-picker { cursor: pointer; }

  .lexxy-editor--compact > .lexxy-editor__content {
    max-block-size: 4lh;
    min-block-size: 2lh;
    overflow-y: auto;
    padding-block: 4px;
  }

  /* Fix bullet and numbered list indentation */
  .lexxy-editor__content {
    ul,
    ol {
      margin-inline-start: 0;
      padding-inline-start: 1.5em;
    }
    ul li,
    ol li {
      margin-inline-start: 0;
      padding-inline-start: 0.25em;
    }
    /* The editor content lacks the .lexxy-content class Lexxy's own rule needs, so the wrapper
       li that holds a sub-list would show a stray marker of its own. */
    li.lexxy-nested-listitem {
      counter-increment: list-item 0; /* the wrapper takes no number either */
      list-style-type: none;
    }
    /* Nested lists */
    ul ul,
    ol ol,
    ul ol,
    ol ul {
      margin-block: 0.25em;
      padding-inline-start: 2em;
    }
  }

  /* Exam display prefs (#23): the student's chosen exam colours reach the rich text editor
     through Lexxy's canvas and ink. Toolbar button icons use `color: currentColor` all the way
     up the chain, so the ink is also what makes the toolbar icons follow the chosen font
     colour. Falls back to the themed defaults when no colour is chosen. */
  lexxy-editor.item-student-richtext {
    background-color: var(--exam-bg-colour, var(--lexxy-color-ink-inverted));
    color: var(--exam-font-colour, var(--lexxy-color-ink));
  }

  .item-student-richtext {
    .lexxy-editor__toolbar-button {
      background: var(--exam-bg-colour, transparent);
    }
    /* Link insertion isn't appropriate for exam responses either (see #979), but unlike
       image/file it has no config flag — Lexxy's toolbar only exposes `data-attachments` and
       `data-upload`, nothing for the link dropdown. `.lexxy-editor__toolbar-dropdown--link`
       wraps both the trigger button and its popover, so hiding it removes the whole control.
       The Cmd+K/Ctrl+K hotkey that opens the same dialog is bound directly on the editor
       element regardless of this button's visibility — blocked separately in
       lib/lexxy_student_link_lockdown.js. */
    .lexxy-editor__toolbar-dropdown--link {
      display: none;
    }
  }

  /* Per-figure display size control (#1163): the author's size buttons above an image
     or video inside the editor. Editor chrome only, so it is styled here rather than in
     the content stylesheets that the student/preview/marker views share. It sits above
     the media and at a fixed size, so resizing the figure never moves or shrinks the
     control being used. */
  lexxy-editor {
    .attachment__size {
      align-items: center;
      color: var(--lexxy-color-text-subtle, inherit);
      display: flex;
      font-size: var(--lexxy-text-small, 0.8rem);
      gap: 0.25rem;
      justify-content: center;
      padding-block: 0.25rem;
    }
    .attachment__size-step,
    .attachment__size-auto {
      background: transparent;
      border: 1px solid var(--lexxy-color-border, currentColor);
      border-radius: 4px;
      color: inherit;
      cursor: pointer;
      font-size: inherit;
      line-height: 1.4;
      padding: 0.1rem 0.45rem;
    }
    .attachment__size-value {
      background: transparent;
      border: 1px solid var(--lexxy-color-border, currentColor);
      border-radius: 4px;
      color: inherit;
      font-size: inherit;
      font-variant-numeric: tabular-nums;
      inline-size: 4.5rem;
      padding: 0.1rem 0.25rem;
      text-align: center;
    }
  }
}