:root {
  --lexxy-color-ink: oklch(var(--bc) / 1);
  --lexxy-color-ink-medium: oklch(var(--bc) / 0.6);
  --lexxy-color-ink-light: oklch(var(--bc) / 0.4);
  --lexxy-color-ink-lighter: oklch(var(--b3) / 1);
  --lexxy-color-ink-lightest: oklch(var(--b2) / 1);
  --lexxy-color-ink-inverted: oklch(var(--b1) / 1);

  --lexxy-color-accent-dark: oklch(var(--p) / 1);
  --lexxy-color-accent-medium: oklch(var(--p) / 0.7);
  --lexxy-color-accent-light: oklch(var(--p) / 0.3);
  --lexxy-color-accent-lightest: oklch(var(--p) / 0.15);

  --lexxy-color-canvas: oklch(var(--b1) / 1);
  --lexxy-color-text: oklch(var(--bc) / 1);
  --lexxy-color-text-subtle: oklch(var(--bc) / 0.6);
  --lexxy-color-link: oklch(var(--p) / 1);
  --lexxy-color-selected: oklch(var(--p) / 0.2);
  --lexxy-color-selected-hover: oklch(var(--p) / 0.3);
  --lexxy-color-selected-dark: oklch(var(--p) / 1);
  --lexxy-color-code-bg: oklch(var(--b2) / 1);

  --lexxy-color-table-header-bg: oklch(var(--b2) / 1);
  --lexxy-color-table-cell-border: oklch(var(--b3) / 1);
  --lexxy-color-table-cell-selected: oklch(var(--p) / 0.2);
  --lexxy-color-table-cell-selected-border: oklch(var(--p) / 1);
  --lexxy-color-table-cell-selected-bg: oklch(var(--p) / 0.2);

  --lexxy-color-code-token-comment: oklch(var(--bc) / 0.5);
  --lexxy-color-code-token-function: oklch(var(--p) / 1);
  --lexxy-color-code-token-operator: oklch(var(--s) / 1);
  --lexxy-color-code-token-property: oklch(var(--a) / 1);
  --lexxy-color-code-token-punctuation: oklch(var(--bc) / 0.7);
  --lexxy-color-code-token-selector: oklch(var(--su) / 1);
  --lexxy-color-code-token-variable: oklch(var(--wa) / 1);
  --lexxy-color-code-token-att: oklch(var(--er) / 1);
}

lexxy-editor {
  background-color: oklch(var(--b1) / 1) !important;
  color: oklch(var(--bc) / 1) !important;
  border: 2px dashed oklch(var(--b3) / 1) !important;
  border-radius: 0.5rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

lexxy-editor > div[contenteditable],
lexxy-editor [role="textbox"] {
  max-height: 50vh !important;
  overflow-y: auto !important;
  padding: 1rem !important;
  flex: 1 !important;
  color: oklch(var(--bc) / 1) !important;
}

lexxy-editor > div[contenteditable] *,
lexxy-editor [role="textbox"] * {
  color: oklch(var(--bc) / 1) !important;
}

lexxy-toolbar {
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

lexxy-toolbar {
  background: oklch(var(--b2) / 1) !important;
  border-color: oklch(var(--b3) / 1) !important;
}

lexxy-toolbar .trix-button-group {
  border-color: oklch(var(--b3) / 1) !important;
  background: transparent !important;
}

lexxy-toolbar .trix-button {
  color: oklch(var(--bc) / 0.7) !important;
  border-color: oklch(var(--b3) / 1) !important;
  background: transparent !important;
}

lexxy-toolbar .trix-button:hover {
  background: oklch(var(--b3) / 0.5) !important;
  color: oklch(var(--bc) / 1) !important;
}

lexxy-toolbar .trix-button.trix-active {
  background: oklch(var(--p) / 0.3) !important;
  color: oklch(var(--pc) / 1) !important;
}

lexxy-toolbar .trix-button:disabled {
  color: oklch(var(--bc) / 0.3) !important;
}

lexxy-toolbar .trix-dialog {
  background: oklch(var(--b1) / 1) !important;
  border-color: oklch(var(--b3) / 1) !important;
  box-shadow: 0 0.3em 1em oklch(var(--b3) / 0.5) !important;
}

lexxy-toolbar .trix-input--dialog {
  background-color: oklch(var(--b1) / 1) !important;
  color: oklch(var(--bc) / 1) !important;
  border-color: oklch(var(--b3) / 1) !important;
}

lexxy-editor pre {
  background-color: oklch(var(--b2) / 1) !important;
  color: oklch(var(--bc) / 0.9) !important;
}

lexxy-editor code {
  background-color: oklch(var(--b2) / 1) !important;
  color: oklch(var(--bc) / 0.9) !important;
}

.lexxy-content {
  color: oklch(var(--bc) / 1) !important;
}

.lexxy-content *:not(a):not(code):not(pre) {
  color: oklch(var(--bc) / 1) !important;
}

.lexxy-content a {
  color: oklch(var(--p) / 1) !important;
}

.lexxy-content blockquote {
  border-left-color: oklch(var(--b3) / 1) !important;
}

.lexxy-content pre {
  background-color: oklch(var(--b2) / 1) !important;
  color: oklch(var(--bc) / 0.9) !important;
}

.lexxy-content code {
  background-color: oklch(var(--b2) / 1) !important;
  color: oklch(var(--bc) / 0.9) !important;
}

[data-theme="dark"] lexxy-toolbar .trix-button--icon::before,
[data-theme="halloween"] lexxy-toolbar .trix-button--icon::before,
[data-theme="forest"] lexxy-toolbar .trix-button--icon::before,
[data-theme="black"] lexxy-toolbar .trix-button--icon::before,
[data-theme="luxury"] lexxy-toolbar .trix-button--icon::before,
[data-theme="dracula"] lexxy-toolbar .trix-button--icon::before,
[data-theme="business"] lexxy-toolbar .trix-button--icon::before,
[data-theme="night"] lexxy-toolbar .trix-button--icon::before,
[data-theme="coffee"] lexxy-toolbar .trix-button--icon::before,
[data-theme="dim"] lexxy-toolbar .trix-button--icon::before,
[data-theme="synthwave"] lexxy-toolbar .trix-button--icon::before,
[data-theme="cyberpunk"] lexxy-toolbar .trix-button--icon::before {
  filter: invert(0.9) hue-rotate(180deg);
}

[data-theme="dark"] lexxy-editor .trix-button--icon::before,
[data-theme="halloween"] lexxy-editor .trix-button--icon::before,
[data-theme="forest"] lexxy-editor .trix-button--icon::before,
[data-theme="black"] lexxy-editor .trix-button--icon::before,
[data-theme="luxury"] lexxy-editor .trix-button--icon::before,
[data-theme="dracula"] lexxy-editor .trix-button--icon::before,
[data-theme="business"] lexxy-editor .trix-button--icon::before,
[data-theme="night"] lexxy-editor .trix-button--icon::before,
[data-theme="coffee"] lexxy-editor .trix-button--icon::before,
[data-theme="dim"] lexxy-editor .trix-button--icon::before,
[data-theme="synthwave"] lexxy-editor .trix-button--icon::before,
[data-theme="cyberpunk"] lexxy-editor .trix-button--icon::before {
  filter: invert(0.9) hue-rotate(180deg);
}

lexxy-editor .attachment {
  background-color: oklch(var(--b2) / 1) !important;
  border-color: oklch(var(--b3) / 1) !important;
}

lexxy-editor .attachment__caption {
  color: oklch(var(--bc) / 0.7) !important;
}

trix-editor {
  background-color: oklch(var(--b1) / 1) !important;
  color: oklch(var(--bc) / 1) !important;
  border: 2px dashed oklch(var(--b3) / 1) !important;
  border-radius: 0.5rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

trix-editor > div[contenteditable],
trix-editor [role="textbox"] {
  max-height: 50vh !important;
  overflow-y: auto !important;
  padding: 1rem !important;
  flex: 1 !important;
  color: oklch(var(--bc) / 1) !important;
}

trix-editor > div[contenteditable] *,
trix-editor [role="textbox"] * {
  color: oklch(var(--bc) / 1) !important;
}

trix-toolbar {
  flex-shrink: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

trix-toolbar {
  background: oklch(var(--b2) / 1) !important;
}

trix-toolbar .trix-button-group {
  border-color: oklch(var(--b3) / 1) !important;
}

trix-toolbar .trix-button {
  color: oklch(var(--bc) / 0.7) !important;
  border-color: oklch(var(--b3) / 1) !important;
}

trix-toolbar .trix-button:hover {
  background: oklch(var(--b3) / 0.5) !important;
}

trix-toolbar .trix-button.trix-active {
  background: oklch(var(--p) / 0.3) !important;
  color: oklch(var(--pc) / 1) !important;
}

.trix-content {
  color: oklch(var(--bc) / 1) !important;
}

.trix-content *:not(a):not(code):not(pre) {
  color: oklch(var(--bc) / 1) !important;
}

.trix-content a {
  color: oklch(var(--p) / 1) !important;
}

.trix-content blockquote {
  border-left-color: oklch(var(--b3) / 1) !important;
}

.trix-content pre {
  background-color: oklch(var(--b2) / 1) !important;
  color: oklch(var(--bc) / 0.9) !important;
}

.prose {
  color: oklch(var(--bc)) !important;
}

.prose * {
  color: inherit !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: oklch(var(--bc)) !important;
}

.prose p {
  color: oklch(var(--bc)) !important;
}

.prose strong {
  color: oklch(var(--bc)) !important;
}

.prose em {
  color: oklch(var(--bc)) !important;
}

.prose a {
  color: oklch(var(--p)) !important;
}

.prose code {
  color: oklch(var(--bc) / 0.9) !important;
  background-color: oklch(var(--b2)) !important;
}

.prose pre {
  background-color: oklch(var(--b2)) !important;
  color: oklch(var(--bc) / 0.9) !important;
}

.prose blockquote {
  color: oklch(var(--bc) / 0.8) !important;
  border-left-color: oklch(var(--b3)) !important;
}

.prose ul, .prose ol {
  color: oklch(var(--bc)) !important;
}

.prose li {
  color: oklch(var(--bc)) !important;
}

div[contenteditable="true"],
div[contenteditable="true"] *,
[role="textbox"],
[role="textbox"] * {
  color: oklch(var(--bc)) !important;
}

div[contenteditable="true"] a,
[role="textbox"] a {
  color: oklch(var(--p)) !important;
}

div[contenteditable="true"] code,
[role="textbox"] code,
div[contenteditable="true"] pre,
[role="textbox"] pre {
  color: oklch(var(--bc) / 0.9) !important;
  background-color: oklch(var(--b2)) !important;
}