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

  button {
    background-color: light-dark(var(--color-gray-100), var(--color-gray-800));
    color: light-dark(var(--color-gray-900), var(--color-gray-300));
    padding: 0.5rem;
    border-radius: 0.375rem;

    &[aria-pressed="true"] {
      background-color: light-dark(var(--color-indigo-100), var(--color-indigo-900));
      color: light-dark(var(--color-indigo-700), var(--color-indigo-300));
    }

    &:hover {
      background-color: light-dark(var(--color-gray-200), var(--color-gray-700));
    }
  }
}


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

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;
  overflow-x: auto;
  border-radius: 0.375rem;
}

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;
}