body#body :is(lexxy-toolbar) {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: none;

  /* Override Lexxy CSS variables for dark mode compatibility */
  --lexxy-color-canvas: light-dark(white, var(--color-gray-800));
  --lexxy-color-ink-lightest: light-dark(oklch(96% 0 0), var(--color-gray-700));
  --lexxy-color-ink-lighter: light-dark(oklch(85% 0 0), var(--color-gray-600));

  button, label, input[type="button"], summary {
    background-color: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08));
    color: light-dark(var(--color-gray-900), var(--color-gray-300));
    padding: 0.5rem;
    border-radius: 0.375rem;
    backdrop-filter: blur(8px);
    border: 1px solid light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));

    &[aria-pressed="true"] {
      background-color: light-dark(rgb(99 102 241 / 0.2), rgb(99 102 241 / 0.25));
      color: light-dark(var(--color-indigo-700), var(--color-indigo-300));
      border-color: light-dark(rgb(99 102 241 / 0.3), rgb(99 102 241 / 0.3));
    }

    &:hover {
      background-color: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.15));
    }
  }

  /* Dropdown containers (highlight, link tools) */
  details {
    .lexxy-editor__toolbar-button {
      background-color: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.08));
      color: light-dark(var(--color-gray-900), var(--color-gray-300));
      backdrop-filter: blur(8px);
      border: 1px solid light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
    }

    &[open] .lexxy-editor__toolbar-button {
      background-color: light-dark(rgb(99 102 241 / 0.2), rgb(99 102 241 / 0.25));
      border-color: light-dark(rgb(99 102 241 / 0.3), rgb(99 102 241 / 0.3));
    }
  }

  /* Dropdown content panels */
  .lexxy-editor__toolbar-dropdown-content {
    background-color: light-dark(rgb(255 255 255 / 0.85), rgb(30 30 40 / 0.85));
    color: light-dark(var(--color-gray-900), var(--color-gray-300));
    border-color: light-dark(rgb(99 102 241 / 0.2), rgb(255 255 255 / 0.15));
    backdrop-filter: blur(12px);
  }
}

/* Lexxy dropdown panels (link, highlight) */
body#body :is(lexxy-link-dropdown, lexxy-highlight-dropdown) {
  input[type="url"] {
    background-color: light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.05));
    color: light-dark(var(--color-gray-900), var(--color-gray-100));
    border-color: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.15));
  }

  button {
    background-color: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.1));
    color: light-dark(var(--color-gray-900), var(--color-gray-100));
    backdrop-filter: blur(4px);
    border: 1px solid light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));

    &:hover {
      background-color: light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.18));
    }
  }
}


body#body :is(lexxy-editor) {
  color: light-dark(var(--color-gray-800), var(--color-gray-300));
  background-color: light-dark(var(--color-white), var(--color-gray-900));
  min-width: 0;
}

body#body :is(.lexxy-content) {
  color: light-dark(var(--color-gray-800), var(--color-gray-300));
  background-color: transparent;
  min-width: 0;
}

body#body .grid .lexxy-content {
  min-width: 0;
}

body#body .grid > div {
  min-width: 0;
}

body#body :is(lexxy-editor, .lexxy-content) :is(h1, h2, h3, h4, h5, h6) {
  color: light-dark(var(--color-black), var(--color-white));
}

body#body :is(lexxy-editor, .lexxy-content) h1 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}

body#body :is(lexxy-editor, .lexxy-content) h2 {
  font-size: var(--text-xl);
  line-height: var(--text-xl--line-height);
}

body#body :is(lexxy-editor, .lexxy-content) h3 {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

body#body :is(lexxy-editor, .lexxy-content) code {
  font-family: monospace;
  display: block;
  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
  color: light-dark(var(--color-gray-900), var(--color-gray-200));
  padding: 1em;
  border-radius: 0.375rem;
  white-space: pre;
  box-sizing: border-box;
  overflow-x: auto;
  max-width: 100%;
}

body#body :is(lexxy-editor, .lexxy-content) pre {
  font-family: monospace;
  display: block;
  background-color: light-dark(var(--color-gray-200), var(--color-gray-800));
  color: light-dark(var(--color-gray-900), var(--color-gray-200));
  padding: 1em;
  border-radius: 0.375rem;
  white-space: pre;
  box-sizing: border-box;
  overflow-x: auto;
  max-width: 100%;
}

body#body :is(lexxy-editor, .lexxy-content) ul {
  list-style-type: disc;
  margin-left: 2em;
}

body#body :is(lexxy-editor, .lexxy-content) a {
  color: light-dark(var(--color-gray-900), var(--color-indigo-400));
  text-decoration: underline;
  cursor: pointer;
}

body#body :is(lexxy-editor, .lexxy-content) :is(action-text-attachment) a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
body#body :is(lexxy-editor, .lexxy-content) :is(action-text-attachment) a:is(:hover, :focus) {
  color: inherit;
  text-decoration: none;
}


body#body :is(lexxy-editor, .lexxy-content) a:is(:hover, :focus) {
  color: light-dark(var(--color-gray-600), var(--color-gray-200));
  text-decoration: underline;
}

body#body :is(lexxy-editor, .lexxy-content) p {
  color: light-dark(var(--color-gray-800), var(--color-gray-300));
}

body#body :is(lexxy-editor, .lexxy-content) strong {
  color: light-dark(var(--color-gray-900), var(--color-white));
  font-weight: 600;
}

body#body :is(lexxy-editor, .lexxy-content) em {
  color: light-dark(var(--color-gray-800), var(--color-gray-300));
}

body#body lexxy-editor[contenteditable="true"]:focus {
  outline: none;
}

body#body :is(lexxy-editor, .lexxy-content) blockquote {
  border-left: 4px solid light-dark(var(--color-gray-300), var(--color-gray-700));
  padding-left: 1rem;
  color: light-dark(var(--color-gray-600), var(--color-gray-400));
  font-style: italic;
}

/* remove this one https://github.com/basecamp/lexxy/pull/455/files is merged */
li:has(ul, ol) {
  list-style-type: none;
}