/* ===== LEXXY EDITOR OVERRIDES ===== */
/* Loaded after lexxy.css to override default Lexxy variables with design tokens */
:root {
  --lexxy-color-canvas: var(--surface);
  --lexxy-color-ink: var(--ink);
  --lexxy-color-ink-medium: var(--ink-dim);
  --lexxy-color-ink-light: var(--ink-mute);
  --lexxy-color-ink-lighter: var(--hair-strong);
  --lexxy-color-ink-lightest: var(--surface-2);
  --lexxy-color-ink-inverted: var(--bg);
  --lexxy-color-accent-dark: var(--accent);
  --lexxy-color-text: var(--ink);
  --lexxy-color-text-subtle: var(--ink-dim);
  --lexxy-color-link: var(--accent);
  --lexxy-color-selected: var(--surface-2);
  --lexxy-color-selected-hover: var(--hair-strong);
  --lexxy-color-code-bg: var(--surface-2);
  --lexxy-color-code-token-punctuation: var(--ink-dim);
  --lexxy-focus-ring-color: var(--accent);
  --lexxy-font-base: var(--font-sans);
  --lexxy-font-mono: var(--font-mono);
}

body[data-theme="light"] {
  --lexxy-color-canvas: var(--surface);
  --lexxy-color-ink: var(--ink);
  --lexxy-color-ink-medium: var(--ink-dim);
  --lexxy-color-ink-light: var(--ink-mute);
  --lexxy-color-ink-lighter: var(--hair-strong);
  --lexxy-color-ink-lightest: var(--surface-2);
  --lexxy-color-ink-inverted: var(--bg);
  --lexxy-color-text: var(--ink);
  --lexxy-color-text-subtle: var(--ink-dim);
  --lexxy-color-selected: var(--surface-2);
  --lexxy-color-selected-hover: var(--hair-strong);
  --lexxy-color-code-bg: var(--surface-2);
  --lexxy-color-code-token-punctuation: var(--ink-dim);
}

lexxy-editor {
  border-color: var(--hair-strong);
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

lexxy-editor:focus-within {
  border-color: var(--accent);
}

lexxy-editor lexxy-toolbar {
  border-color: var(--hair-strong);
}

.lexxy-content {
  color: var(--ink);
}

/* ===== TAG TYPEAHEAD ===== */
.tag-typeahead {
  position: relative;
}

.tag-typeahead__input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.tag-typeahead__input {
  width: 100%;
  padding: 0.5rem;
  padding-right: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: calc(infinity * 1px);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tag-typeahead__input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tag-typeahead__clear-button {
  position: absolute;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.tag-typeahead__clear-button:hover {
  color: #374151;
}

.tag-typeahead__clear-button.hidden {
  display: none;
}

.tag-typeahead__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background-color: white;
  border: 1px solid --brand-primary;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 50;
  max-height: 15rem;
  overflow-y: auto;
}

.tag-typeahead__dropdown li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tag-typeahead__dropdown li:hover {
  background-color: #f3f4f6;
}

.tag-typeahead__dropdown li.hidden {
  display: none;
}