/* Lexxy Editor with Flowbite Styling */

:root {
  /* Flowbite-inspired colors for light mode */
  --lexxy-color-canvas: rgb(249 250 251); /* gray-50 */
  --lexxy-color-text: rgb(17 24 39); /* gray-900 */
  --lexxy-color-text-subtle: rgb(107 114 128); /* gray-500 */
  --lexxy-color-ink-lighter: rgb(209 213 219); /* gray-300 */
  --lexxy-color-ink-lightest: rgb(243 244 246); /* gray-100 */
  --lexxy-color-ink-inverted: white;

  --lexxy-color-accent-dark: rgb(29 78 216); /* blue-700 */
  --lexxy-color-accent-medium: rgb(59 130 246); /* blue-500 */
  --lexxy-color-accent-lightest: rgb(219 234 254); /* blue-100 */

  --lexxy-color-selected: rgb(219 234 254); /* blue-100 */
  --lexxy-color-selected-dark: rgb(59 130 246); /* blue-500 */

  --lexxy-color-link: rgb(37 99 235); /* blue-600 */
  --lexxy-color-code-bg: rgb(243 244 246); /* gray-100 */

  /* Flowbite border color */
  --lexxy-border-color: rgb(209 213 219); /* gray-300 */

  /* Focus ring to match Flowbite */
  --lexxy-focus-ring-color: rgb(59 130 246); /* blue-500 */
  --lexxy-focus-ring-offset: 0px;
  --lexxy-focus-ring-size: 3px;

  /* Border radius to match Flowbite */
  --lexxy-radius: 0.5rem; /* rounded-lg */
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    --lexxy-color-canvas: rgb(55 65 81); /* gray-700 */
    --lexxy-color-text: white;
    --lexxy-color-text-subtle: rgb(156 163 175); /* gray-400 */
    --lexxy-color-ink-lighter: rgb(75 85 99); /* gray-600 */
    --lexxy-color-ink-lightest: rgb(75 85 99); /* gray-600 */
    --lexxy-color-ink-inverted: rgb(17 24 39); /* gray-900 */

    --lexxy-color-accent-dark: rgb(96 165 250); /* blue-400 */
    --lexxy-color-accent-medium: rgb(59 130 246); /* blue-500 */
    --lexxy-color-accent-lightest: rgb(30 58 138); /* blue-900 */

    --lexxy-color-selected: rgb(30 58 138); /* blue-900 */
    --lexxy-color-selected-dark: rgb(96 165 250); /* blue-400 */

    --lexxy-color-link: rgb(96 165 250); /* blue-400 */
    --lexxy-color-code-bg: rgb(31 41 55); /* gray-800 */

    --lexxy-border-color: rgb(75 85 99); /* gray-600 */
  }
}

/* Override Lexxy editor styles to match Flowbite text inputs */
:where(lexxy-editor) {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-border-color);
  border-radius: var(--lexxy-radius);
  color: var(--lexxy-color-text);
  font-size: 0.875rem; /* text-sm */
  transition: border-color 150ms, box-shadow 150ms;
}

:where(lexxy-editor:focus-within) {
  border-color: var(--lexxy-focus-ring-color);
  outline: none;
  ring: 2px;
  ring-color: var(--lexxy-focus-ring-color);
  box-shadow: 0 0 0 var(--lexxy-focus-ring-size) rgba(59, 130, 246, 0.5);
}

/* Toolbar styling */
:where(lexxy-toolbar) {
  background-color: var(--lexxy-color-canvas);
  border-bottom: 1px solid var(--lexxy-border-color);
  border-radius: var(--lexxy-radius) var(--lexxy-radius) 0 0;
}

:where(.lexxy-editor__toolbar-button) {
  color: var(--lexxy-color-text);
}

:where(.lexxy-editor__toolbar-button:hover) {
  background-color: var(--lexxy-color-ink-lightest);
}

:where(.lexxy-editor__toolbar-button[aria-pressed="true"]) {
  background-color: var(--lexxy-color-selected);
  color: var(--lexxy-color-accent-dark);
}

/* Editor content */
:where(.lexxy-editor__content) {
  background-color: var(--lexxy-color-canvas);
  color: var(--lexxy-color-text);
  padding: 0.625rem; /* p-2.5 equivalent */
  border-radius: 0 0 var(--lexxy-radius) var(--lexxy-radius);
}

/* Placeholder text */
:where(.lexxy-editor--empty) .lexxy-editor__content:not(:has(ul, ol))::before {
  color: var(--lexxy-color-text-subtle);
  opacity: 1;
}

/* Link dialog */
:where(.lexxy-link-dialog) dialog {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-border-color);
  color: var(--lexxy-color-text);
}

:where(.lexxy-link-dialog) input[type="url"] {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-border-color);
  color: var(--lexxy-color-text);
  padding: 0.625rem;
}

:where(.lexxy-link-dialog) input[type="url"]:focus {
  border-color: var(--lexxy-focus-ring-color);
  outline: none;
  box-shadow: 0 0 0 var(--lexxy-focus-ring-size) rgba(59, 130, 246, 0.5);
}

:where(.lexxy-link-dialog) button {
  background-color: var(--lexxy-color-ink-lightest);
  color: var(--lexxy-color-text);
}

:where(.lexxy-link-dialog) button[type="submit"] {
  background-color: var(--lexxy-color-accent-dark);
  color: white;
}

/* Code blocks */
:where(.lexxy-editor__content) pre {
  background-color: var(--lexxy-color-code-bg);
  border: 1px solid var(--lexxy-border-color);
  color: var(--lexxy-color-text);
}

/* Language picker */
:where(.lexxy-code-language-picker) {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-border-color);
  color: var(--lexxy-color-text);
}

/* Prompt menu */
:where(.lexxy-prompt-menu) {
  background-color: var(--lexxy-color-canvas);
  border: 1px solid var(--lexxy-border-color);
  color: var(--lexxy-color-text);
}

:where(.lexxy-prompt-menu__item:hover) {
  background-color: var(--lexxy-color-ink-lightest);
}

:where(.lexxy-prompt-menu__item[aria-selected]) {
  background-color: var(--lexxy-color-selected);
  color: var(--lexxy-color-accent-dark);
}

/* Content rendering (display mode) */
.lexxy-content {
  color: var(--lexxy-color-text);
}

.lexxy-content a {
  color: var(--lexxy-color-link);
  text-decoration: underline;
}

.lexxy-content code {
  background-color: var(--lexxy-color-code-bg);
  border: 1px solid var(--lexxy-border-color);
  border-radius: 0.25rem;
  color: var(--lexxy-color-text);
  padding: 0.125rem 0.25rem;
  font-size: 0.875em;
}

.lexxy-content pre {
  background-color: var(--lexxy-color-code-bg);
  border: 1px solid var(--lexxy-border-color);
  border-radius: 0.375rem;
  color: var(--lexxy-color-text);
  padding: 1rem;
  overflow-x: auto;
}

.lexxy-content pre code {
  background-color: transparent;
  border: none;
  padding: 0;
}