/* Operator appearance is scoped to the operator-console root. */
.operator-console {
  color-scheme: light dark;
  --operator-canvas: #ffffff;
  --operator-panel: #f5f5f5;
  --operator-text: #111111;
  --operator-secondary: #353535;
  --operator-muted: #595959;
  --operator-border: #d6d6d6;
  --operator-accent: #006faf;
  --operator-fill: #006faf;
  --operator-fill-hover: #005d94;
  --operator-on-fill: #ffffff;
  --operator-control-border: #767676;
  --operator-warning: #795000;
  --operator-danger: #a51c30;
  --operator-danger-bg: #fdedef;
}

@media (prefers-color-scheme: dark) {
  .operator-console {
    --operator-canvas: #111111;
    --operator-panel: #1c1c1c;
    --operator-text: #fafafa;
    --operator-secondary: #d6d6d6;
    --operator-muted: #b5b5b5;
    --operator-border: #3c3c3c;
    --operator-accent: #38bdf8;
    --operator-fill: #38bdf8;
    --operator-fill-hover: #7dd3fc;
    --operator-on-fill: #111111;
    --operator-warning: #f3cc76;
    --operator-danger: #ffb5bf;
    --operator-danger-bg: #391820;
  }
}

.operator-console.operator-canvas,
.operator-console .operator-canvas { background-color: var(--operator-canvas); }
.operator-console .operator-panel { background-color: var(--operator-panel); }
.operator-console .operator-text { color: var(--operator-text); }
.operator-console .operator-text-secondary { color: var(--operator-secondary); }
.operator-console .operator-muted { color: var(--operator-muted); }
.operator-console .operator-accent { color: var(--operator-accent); }
.operator-console .operator-border { border-color: var(--operator-border); }
.operator-console .operator-divide > :not(:last-child) { border-color: var(--operator-border); }
.operator-console .operator-fill { background-color: var(--operator-fill); }
.operator-console .operator-on-fill { color: var(--operator-on-fill); }
.operator-console .operator-warning { color: var(--operator-warning); }
.operator-console .operator-danger { color: var(--operator-danger); }
.operator-console .operator-danger-bg { background-color: var(--operator-danger-bg); }
.operator-console .operator-danger-border { border-color: var(--operator-danger); }
.operator-console .operator-panel-hover:hover { background-color: var(--operator-panel); }
.operator-console .operator-text-hover:hover { color: var(--operator-text); }
.operator-console .operator-fill-hover:hover { background-color: var(--operator-fill-hover); }
.operator-console .operator-skip:focus {
  background-color: var(--operator-fill);
  color: var(--operator-on-fill);
}
.operator-console :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--operator-accent);
  outline-offset: 3px;
}
.operator-console .operator-current { border-bottom-color: var(--operator-accent); }
.operator-console .operator-input { border-color: var(--operator-control-border); }
.operator-console .operator-input:focus { border-color: var(--operator-accent); }

@media (forced-colors: active) {
  .operator-console .operator-fill { outline: 1px solid ButtonText; }
  .operator-console [aria-current] { text-decoration: underline; }
}