@media (prefers-color-scheme: light) {
  @media (prefers-contrast: more) {
    :root {
      --sidebar-bg: color(srgb 0.9 0.9 0.9);
      --border: color(srgb 0 0 0 / 100%);

      --highlight: rgb(53,132,228);
      --trough-background: rgb(225,222,219);
      --trough-border-color: rgb(225,222,219);
      --slider-outline-color: rgba(53,132,228,0.5);
      --slider-border-color: rgb(205,199,194);
      --slider-background: linear-gradient(to top, rgb(246,245,244) 2px, rgb(251,250,250));
    }
  }
  @media (not (prefers-contrast: more)) {
    :root {
      --sidebar-bg: color(srgb 0.9 0.9 0.9);
      --border: color(srgb 0 0 0 / 50%);

      --highlight: rgb(53,132,228);
      --trough-background: rgb(225,222,219);
      --trough-border-color: rgb(225,222,219);
      --slider-outline-color: rgba(53,132,228,0.5);
      --slider-border-color: rgb(205,199,194);
      --slider-background: linear-gradient(to top, rgb(246,245,244) 2px, rgb(251,250,250));
    }
  }
}

@media (prefers-color-scheme: dark) {
  @media (prefers-contrast: more) {
    :root {
      --sidebar-bg: color(srgb 0.1 0.1 0.1);
      --border: color(srgb 1 1 1 / 100%);

      --highlight: rgb(21,83,158);
      --trough-background: rgb(40,40,40);
      --trough-border-color: rgb(40,40,40);
      --slider-outline-color: rgba(21,83,158,0.7);
      --slider-border-color: rgb(27,27,27);
      --slider-background: linear-gradient(to top, rgb(55,55,55) 2px, rgb(58,58,58));
    }
  }
  @media (not (prefers-contrast: more)) {
    :root {
      --sidebar-bg: color(srgb 0.1 0.1 0.1);
      --border: color(srgb 1 1 1 / 50%);

      --highlight: rgb(21,83,158);
      --trough-background: rgb(40,40,40);
      --trough-border-color: rgb(40,40,40);
      --slider-outline-color: rgba(21,83,158,0.7);
      --slider-border-color: rgb(27,27,27);
      --slider-background: linear-gradient(to top, rgb(55,55,55) 2px, rgb(58,58,58));
    }
  }
}

PaintableEditor {
  border-left: 0.5px solid var(--border);
  background: var(--sidebar-bg);
}

PaintableEditor scrolledwindow > viewport {
  padding: 10px;
}

PaintableEditor viewport > box:not(.linked):not(.tight) {
  border-spacing: 30px;
}

PaintableEditor box:not(.linked):not(.tight) {
  border-spacing: 10px;
}

PaintableEditor grid {
  border-spacing: 10px;
}

ColorEditor {
  border-spacing: 10px;
}

ColorEditor menubutton.alpha > button {
  padding: 4px;
}

PaintableEditor separator {
  background-color: var(--border);
}

.thumbnail-200 {
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 4px;
  font-weight: 200;
}

.thumbnail-300 {
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 4px;
  font-weight: 300;
}

.thumbnail-400 {
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 4px;
  font-weight: 400;
}

.thumbnail-500 {
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 4px;
  font-weight: 500;
}

.thumbnail-600 {
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 4px;
  font-weight: 600;
}

.window-title {
  border-spacing: 5px;
  background: none;
}

.grid-image,
.grid-button {
  margin: 10px;
}

.grid-button popover > contents > box:not(.alpha-editor),
.grid-button popover > contents > StateEditor {
  border-spacing: 10px;
  margin: 10px;
}

.empty-page {
  border-spacing: 24px;
}

.empty-page button.suggested-action {
  padding: 10px 50px;
  border-radius: 10000px;
  font-weight: 600;
  font-size: 120%;
}

.state-editor grid {
  border-spacing: 10px;
  margin: 10px;
}

.state-editor .buttons {
  border-spacing: 10px;
  margin: 10px;
}

AlphaEditor.tight {
  border-spacing: 0px;
}

AlphaEditor > scale {
  min-width: 120px;
}

grid.tight {
  border-spacing: 0;
}

textview.editor {
  color: rgb(192, 197, 206);
  caret-color: currentColor;
}

textview.editor > text {
  background-color: rgb(43, 48, 59);
}

menubutton.narrow button.toggle {
  padding: 0px;
}