site-theme-editor {
  grid-area: main;
  display: flex;
  flex: auto;
  display: flex;
  flex-direction: column;
  background: var(--candy-color-border2);
  gap: 1px;
}

site-theme-editor .preview {
  padding: 1rem;
  border: 1px solid #000;
  box-shadow: inset 0 0 0 1px white;
}
site-theme-editor .code {
  margin: 0;
  overflow: visible;
  border-radius: 0;
  white-space: pre-wrap;
}

site-theme-editor .color-preview-container > :first-child {
  flex: auto;
}

site-theme-editor .color-preview {
  --check1: #888;
  --check2: #aaa;
  --size: 16px;
  --half: calc(var(--size) / 2);
  aspect-ratio: 1;
  height: 100%;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid #000;
  outline: 1px solid #fff;
  outline-offset: -2px;
  background-color: #888;
  background-image: linear-gradient(to right, var(--color, transparent) 0% 100%),
    linear-gradient(45deg, var(--check1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--check1) 75%),
    linear-gradient(45deg, transparent 75%, var(--check1) 75%),
    linear-gradient(45deg, var(--check1) 25%, var(--check2) 25%);
  background-size: var(--size) var(--size);
  background-position:
    0 0,
    0 0,
    0 0,
    calc(-1 * var(--half)) calc(-1 * var(--half)),
    var(--half) var(--half);
}

site-theme-editor .contrast-report {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
  gap: 1rem;
  background: var(--background);
  color: var(--background);
}

site-theme-editor .contrast-pass {
  color: hsl(120 100% 25%);
}

site-theme-editor .contrast-fail {
  color: hsl(0 100% 40%);
}

site-theme-editor .contrast-table-container {
  width: 100%;
}

site-theme-editor .contrast-table :is(th, td) {
  text-align: right;
  font-variant: tabular-nums;
  white-space: nowrap;
}

site-theme-editor .contrast-table :is(th, td):first-child {
  width: 100%;
  text-align: left;
}

site-theme-editor .editor {
  flex: auto;
  padding: 1rem;
  font-variant: tabular-nums;
}

site-theme-editor > .output {
  flex: auto;
}

@media (min-width: 900px) {
  site-theme-editor {
    overflow: hidden;
    flex-direction: row;
  }

  site-theme-editor > .editor {
    flex: 0 0 var(--site-sidebar-width);
    overflow-y: auto;
  }

  site-theme-editor > .output {
    overflow-y: auto;
  }
}