/*
 * Provides styling for the lexxy-editor content (whether displayed or under editing).
 * Migrated from Trix to Lexxy.
 */

/* The gem's lexxy-variables.css is older and missing this variable needed for the color grid */
:root {
  --lexxy-toolbar-button-size: 2lh;
}

lexxy-editor,
.lexxy-content {
  width: 100%;
}

lexxy-editor h1,
.lexxy-content h1 {
  font-size: 1.25rem !important;
  line-height: 1.25rem !important;
  margin-bottom: 1rem;
  font-weight: 600;
}

lexxy-editor ul,
.lexxy-content ul {
  list-style-type: disc;
  padding-left: 1rem;
}

lexxy-editor ol,
.lexxy-content ol {
  list-style-type: decimal;
  padding-left: 1rem;
}

lexxy-editor pre,
.lexxy-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 1.5em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}

lexxy-editor blockquote,
.lexxy-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0px;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}

lexxy-editor img,
.lexxy-content img {
  margin: auto;
}

lexxy-editor a,
.lexxy-content a {
  color: #8B5CF6 !important;
  text-decoration: underline;
}

.attachment__name a {
  color: #8B5CF6 !important;
  text-decoration: none;
}

.attachment__name a:hover {
  color: #6D28D9 !important;
  text-decoration: none;
}

.attachment__size {
  display: none;
}

.attachment__caption {
  text-align: center;
}

/* Text alignment — applied by Lexical's FORMAT_ELEMENT_COMMAND as inline styles */
lexxy-editor [style*="text-align: center"],
.lexxy-content [style*="text-align: center"] {
  text-align: center;
}

lexxy-editor [style*="text-align: right"],
.lexxy-content [style*="text-align: right"] {
  text-align: right;
}

lexxy-editor [style*="text-align: justify"],
.lexxy-content [style*="text-align: justify"] {
  text-align: justify;
}

/* Scrollable editor with sticky toolbar — keeps toolbar visible for long content */
lexxy-editor {
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

lexxy-editor .lexxy-editor__content {
  overflow-y: auto;
  flex: 1;
}

lexxy-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  background-color: var(--lexxy-toolbar-bg-color, white);
}

/* Align button active state */
.lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: var(--lexxy-toolbar-button-active-background-color, rgba(0, 0, 0, 0.08));
}

/* ── Toolbar presets ─────────────────────────────────────────────────────
 * Lexxy renders its default toolbar via innerHTML (safe inside forms).
 * We hide buttons that don't belong to each preset with CSS.
 * Button names from Lexxy: bold, italic, strikethrough, highlight (dropdown),
 * link (dropdown), quote, heading, code, unordered-list, ordered-list,
 * upload, table, divider, undo, redo.
 * Align buttons (align-left, align-center, align-right) added via JS extension.
 */

/* Buttons only visible in :full — hidden for all other presets */
[data-toolbar]:not([data-toolbar="full"]) {
  & button[name="quote"],
  & button[name="code"],
  & button[name="table"],
  & button[name="divider"],
  & button[name="undo"],
  & button[name="redo"] {
    display: none;
  }
}

/* :default — additionally hide strikethrough */
[data-toolbar="default"] button[name="strikethrough"] {
  display: none;
}

/* :simple — additionally hide strikethrough, highlight, heading, upload, align */
[data-toolbar="simple"] {
  & button[name="strikethrough"],
  & details:has(> summary[name="highlight"]),
  & button[name="heading"],
  & button[name="upload"],
  & button[name="align-left"],
  & button[name="align-center"],
  & button[name="align-right"] {
    display: none;
  }
}

/* :minimal — additionally hide strikethrough, highlight, heading, lists, upload, align */
[data-toolbar="minimal"] {
  & button[name="strikethrough"],
  & details:has(> summary[name="highlight"]),
  & button[name="heading"],
  & button[name="unordered-list"],
  & button[name="ordered-list"],
  & button[name="upload"],
  & button[name="align-left"],
  & button[name="align-center"],
  & button[name="align-right"] {
    display: none;
  }
}

/* Force white text for lexxy content inside own message bubbles,
   but preserve user-chosen colors applied via <mark> highlights */
.own-message .lexxy-content,
.own-message .lexxy-content p,
.own-message .lexxy-content span:not([style*="color"]) {
  color: white !important;
}

/* Reset browser default yellow background on <mark> inside editor and content display */
lexxy-editor mark,
lexxy-editor .lexxy-content__highlight,
.lexxy-content mark,
.lexxy-content .lexxy-content__highlight {
  background-color: transparent;
  color: inherit;
}

/* Color highlight grid — gem CSS targets [data-button-group] but npm JS generates .lexxy-highlight-colors */
lexxy-highlight-dropdown .lexxy-highlight-colors {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(9, 1fr);
  min-inline-size: 340px;
}

lexxy-highlight-dropdown .lexxy-highlight-colors .lexxy-highlight-button {
  position: relative;
  background-color: white;
  aspect-ratio: 1;
  block-size: auto;
  inline-size: 100%;
  min-block-size: 0;
}

lexxy-highlight-dropdown .lexxy-highlight-colors .lexxy-highlight-button[data-style="background-color"] {
  background-color: unset;
}

lexxy-highlight-dropdown .lexxy-highlight-colors button::after {
  content: "Aa";
  font-family: system-ui, sans-serif;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

lexxy-highlight-dropdown .lexxy-highlight-colors button[aria-pressed="true"]::after {
  content: "\2713";
}

/* Reset button below the color grid */
lexxy-highlight-dropdown > .lexxy-editor__toolbar-dropdown-reset {
  background-color: var(--lexxy-color-ink-lightest, #f0f0f0);
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: unset;
  padding-block: 0.5ch;
}

lexxy-highlight-dropdown > .lexxy-editor__toolbar-dropdown-reset:disabled {
  display: none;
}