/* Lexxy Theme Overrides for CAPA
 * Maps lexxy's CSS variables to CAPA's theme system
 * Loaded after lexxy.css from gem to override defaults
 */

:root {
  /* Map lexxy color variables to CAPA theme */
  --lexxy-color-ink: var(--color-text-primary);
  --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);
  --lexxy-color-ink-inverted: var(--color-themed-white);

  --lexxy-color-accent-dark: var(--color-royal);
  --lexxy-color-accent-medium: var(--color-royal-500);
  --lexxy-color-accent-light: var(--color-royal-100);
  --lexxy-color-accent-lightest: var(--color-royal-50);

  --lexxy-color-canvas: var(--color-input-bg);
  --lexxy-color-text: var(--color-text-primary);
  --lexxy-color-text-subtle: var(--color-text-secondary);
  --lexxy-color-link: var(--color-royal);
  --lexxy-color-selected: var(--color-surface-interactive);
  --lexxy-color-selected-hover: var(--color-hover);
  --lexxy-color-selected-dark: var(--color-royal);
  --lexxy-color-code-bg: var(--color-surface);

  /* Sizing overrides - gem uses 2lh which is too large */
  --lexxy-toolbar-button-size: 2rem;
  --lexxy-toolbar-icon-size: 1em;
  --lexxy-dropdown-btn-size: 2rem;

  /* Misc */
  --lexxy-radius: 0.375rem;
  --lexxy-shadow: var(--shadow-card);
}

/* Dark mode: re-resolve lexxy variables in dark context */
@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --lexxy-color-ink: var(--color-text-primary);
    --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);
    --lexxy-color-ink-inverted: var(--color-themed-white);
    --lexxy-color-canvas: var(--color-input-bg);
    --lexxy-color-text: var(--color-text-primary);
    --lexxy-color-text-subtle: var(--color-text-secondary);
    --lexxy-color-link: var(--color-royal);
    --lexxy-color-selected: var(--color-surface-interactive);
    --lexxy-color-selected-hover: var(--color-hover);
    --lexxy-color-code-bg: var(--color-surface);
    --lexxy-color-table-header-bg: var(--color-surface);
  }
}

body.dark {
  --lexxy-color-ink: var(--color-text-primary);
  --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);
  --lexxy-color-ink-inverted: var(--color-themed-white);
  --lexxy-color-canvas: var(--color-input-bg);
  --lexxy-color-text: var(--color-text-primary);
  --lexxy-color-text-subtle: var(--color-text-secondary);
  --lexxy-color-link: var(--color-royal);
  --lexxy-color-selected: var(--color-surface-interactive);
  --lexxy-color-selected-hover: var(--color-hover);
  --lexxy-color-code-bg: var(--color-surface);
  --lexxy-color-table-header-bg: var(--color-surface);
}

/* Editor container - integrate with CAPA form styling */
lexxy-editor {
  border-color: var(--color-border);
  background-color: var(--color-input-bg);
}

/* Toolbar - match CAPA surface colors */
lexxy-toolbar {
  --lexxy-toolbar-icon-size: 1em;

  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  border-radius: 0.375rem 0.375rem 0 0;
  color: var(--color-text-primary);
  display: flex;
  flex-wrap: wrap;
  font-size: inherit;
  gap: 2px;
  margin: 0;
  max-inline-size: 100%;
  padding: 0.25rem;
  position: relative;
}

/* Editor content area */
.lexxy-editor__content {
  min-height: 6rem;
  outline: 0;
  padding: 0.75rem;
}

/* Toolbar buttons - CAPA sizing and hover states */
.lexxy-editor__toolbar-button {
  --toolbar-button-size: 2.5rem;

  appearance: none;
  aspect-ratio: 1;
  background-color: transparent;
  block-size: var(--toolbar-button-size);
  border: none;
  border-radius: 0.25rem;
  color: var(--color-text-primary);
  cursor: pointer;
  display: grid;
  font-size: inherit;
  place-items: center;

  svg {
    -webkit-touch-callout: none;
    block-size: 1em;
    fill: currentColor;
    grid-area: 1/1;
    inline-size: 1em;
    user-select: none;
  }

  &:is(:focus, :hover) {
    background-color: var(--color-hover);
    box-shadow: none;
  }

  &:is(:active),
  &[aria-pressed="true"] {
    background-color: var(--color-surface-interactive);
  }

  @media (min-width: 640px) {
    --toolbar-button-size: 2rem;
  }
}

/* Dropdowns - CAPA elevated surface */
.lexxy-editor__toolbar-dropdown>summary~* {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  padding: 0.5rem;
}

/* Highlight dropdown - constrain button sizes */
lexxy-highlight-dropdown {
  --gap: 0.5ch;

  .lexxy-highlight-colors {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(9, 2rem);
  }

  button {
    block-size: 2rem !important;
    inline-size: 2rem !important;
  }
}

.lexxy-highlight-button {
  block-size: 2rem;
  inline-size: 2rem;
  font-size: 0.75rem;

  &:after {
    content: "Aa";
  }
}

/* Prompt menu (@mentions) - CAPA theme */
.lexxy-prompt-menu {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
}

.lexxy-prompt-menu__item {
  &:hover {
    background-color: var(--color-hover);
  }

  &[aria-selected] {
    background-color: var(--color-surface-interactive);
  }
}

.lexxy-prompt-menu__item--empty {
  color: var(--color-text-muted);
}

/* Placeholder text */
.lexxy-editor--empty .lexxy-editor__content::before {
  color: var(--color-text-placeholder);
}

/* Drag over state */
.lexxy-editor--drag-over {
  background-color: var(--color-hover);
  outline-color: var(--color-border-strong);
}

/* Content area - links use CAPA royal color */
.lexxy-content a {
  color: var(--color-royal);

  &:hover {
    color: var(--color-royal-500);
  }
}

/* Code blocks */
.lexxy-content code,
.lexxy-content pre {
  background-color: var(--color-surface);
}

/* Blockquote */
.lexxy-content blockquote {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Mention styling - CAPA badge colors */
.mention {
  background-color: var(--color-badge-royal-bg);
  border-radius: 0.25rem;
  color: var(--color-badge-royal-text);
  padding: 0.125rem 0.375rem;
  font-weight: 500;
}

/* Inline attachments */
.lexxy-editor__content action-text-attachment,
.lexxy-editor__content action-text-attachment[data-lexxy-decorator] {
  display: inline !important;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

/* Attachment rendering in content — inline for mentions, block for media */
.lexxy-content action-text-attachment {
  display: inline;
  margin: 0;
  padding: 0;
}

.lexxy-content action-text-attachment:has(.attachment) {
  display: block;
  text-align: left;
}

.lexxy-content action-text-attachment .attachment {
  text-align: left;
  margin: 0;
  max-width: 100%;
}

.lexxy-content action-text-attachment .attachment video,
.lexxy-content action-text-attachment .attachment img {
  max-width: 100%;
  height: auto;
}

.lexxy-content action-text-attachment .attachment__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: normal;
}

.lexxy-content action-text-attachment .attachment--file .attachment__name {
  font-weight: normal;
  color: var(--color-text-secondary);
}

/* Fix mark element inside editor — prevent browser default yellow background.
 * The gem resets mark only inside :where(.lexxy-content) with 0 specificity,
 * which doesn't apply inside the editor's .lexxy-editor__content area. */
lexxy-editor mark,
lexxy-editor .lexxy-content__highlight {
  background-color: transparent;
  color: inherit;
}

/* Fix lists — override Tailwind CSS 4 preflight which resets list-style to none.
 * The gem uses :where(.lexxy-content) with 0 specificity, Tailwind always wins. */
.lexxy-content ol,
.lexxy-content ul,
.lexxy-editor__content ol,
.lexxy-editor__content ul {
  margin-inline-start: calc(var(--lexxy-content-margin, 1rem) * 1.5);
  padding: 0;
}

.lexxy-content ul,
.lexxy-editor__content ul {
  list-style-type: disc;
}

.lexxy-content ol,
.lexxy-editor__content ol {
  list-style-type: decimal;
}

.lexxy-content li.lexxy-nested-listitem,
.lexxy-editor__content li.lexxy-nested-listitem {
  list-style-type: none;
}