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

  button {
    background-color: light-dark(#f0f0f0, #2b2b2b);

    &[aria-pressed="true"] {
      background-color: light-dark(var(--lexxy-color-selected), #3b3b3b);
    }
  }
}


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

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(black, white);
  padding: 1em;
  overflow-x: auto;
}

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