/* Lexxy editor styles */

/* Map Lexxy gem variables to app color system for dark mode support.
   Set on elements (not :root) because the gem's unlayered :root wins by cascade. */
lexxy-editor,
.lexxy-content {
  --lexxy-color-ink: var(--color-ink);
  --lexxy-color-ink-medium: var(--color-ink-muted);
  --lexxy-color-ink-light: var(--color-ink-light);
  --lexxy-color-ink-lighter: var(--color-gray);
  --lexxy-color-ink-lightest: var(--color-gray-lightest);
  --lexxy-color-ink-inverted: var(--color-bg);
  --lexxy-color-canvas: var(--color-bg);
  --lexxy-color-text: var(--color-ink);
  --lexxy-color-text-subtle: var(--color-ink-muted);
  --lexxy-color-link: var(--color-blue);
  --lexxy-color-accent-dark: var(--color-blue);
  --lexxy-color-accent-medium: var(--color-blue-bright);
  --lexxy-color-accent-light: var(--color-blue-light);
  --lexxy-color-accent-lightest: var(--color-blue-light);
  --lexxy-color-selected: var(--color-blue-light);
  --lexxy-color-selected-hover: var(--color-blue-light);
  --lexxy-color-code-bg: var(--color-gray-lightest);
  --lexxy-color-table-header-bg: var(--color-gray-lightest);
  --lexxy-color-table-cell-border: var(--color-gray);
}

body:has(lexxy-editor:not(.comment--new lexxy-editor)) {
  overflow-x: clip;
}

:where(lexxy-editor:not(.comment--new lexxy-editor)) {
  border: var(--border) !important;
  outline: none;
  transition:
    box-shadow 250ms,
    border-color 250ms;
}

:where(lexxy-editor:not(.comment--new lexxy-editor)):focus-within {
  box-shadow: 0 0 0 2px var(--color-blue-bright);
  border-color: color-mix(in oklch, var(--color-blue-bright), transparent 50%);
}

/* All toolbars: sticky (override gem's position: relative) */
lexxy-toolbar {
  background-color: var(--lexxy-bg-color, var(--color-bg));
  inset-block-start: 0;
  position: sticky !important;
  z-index: 1;
}

/* Website (non-comment) toolbar: offset below fixed header */
:where(lexxy-toolbar:not(.comment--new lexxy-toolbar)) {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.website-body lexxy-toolbar {
  inset-block-start: 2.7rem !important;
}