/* TODO: CSS for plugin */

/* Colors and geometry are read from custom properties so documents can restyle
   the window without overriding these rules. Set them on `:root`, `.reveal` (or
   `body` outside a deck), a single `.codewindow`, or via the `bg=`/`header-bg=`
   code fence attributes. */
.codewindow {
  overflow-wrap: anywhere;
  margin-bottom: 36px;
  font-family: monospace;
  color: var(--codewindow-color, inherit);
  background: var(--codewindow-bg, white);
  border-radius: var(--codewindow-radius, 10px);
  box-shadow: var(--codewindow-shadow-color, #26394d) 0px 20px 30px -10px;
}

/* Tuned to reveal's large base font size; outside a deck the document's own
   code sizing already applies. */
.reveal .codewindow {
  font-size: 0.45em;
}

.codewindow .header {
  display: flex;
  background: var(--codewindow-header-bg, #e2e8f0);
  border-top-left-radius: var(--codewindow-radius, 10px);
  border-top-right-radius: var(--codewindow-radius, 10px);
  padding-left: var(--codewindow-header-pad, 16px);
  gap: 16px;
  height: var(--codewindow-header-height, 30px);
}

/* Window buttons. Which set is drawn comes from the `chrome=` fence argument,
   which the plugin mirrors onto `data-chrome` for the rules below. */
.codewindow .header .buttons {
  display: flex;
  align-items: center;
  flex: none;
}

.codewindow[data-chrome="windows"] .header {
  padding-right: var(--codewindow-header-pad, 16px);
}

.codewindow[data-chrome="windows"] .header .buttons {
  order: 2;
  margin-left: auto;
}

.codewindow[data-chrome="none"] .header .buttons {
  display: none;
}

.codewindow .header .file {
  margin-top: 5px;
  padding-left: var(--codewindow-tab-padding, 20px);
  padding-right: var(--codewindow-tab-padding, 20px);
  display: flex;
  background: var(--codewindow-tab-active-bg, var(--codewindow-bg, white));
  border-radius: var(--codewindow-tab-radius, 10px 10px 0 0);
  height: 90%;
  align-items: center;
  gap: 4px;
}

.codewindow .textarea {
  padding: 21px;
}
 
.codewindow .textarea .sourceCode {
  background: unset;
  border: unset;
  font-size: unset;
}

.codewindow .textarea pre {
  font-size: unset;
}

/* `code-line-numbers` steps are rendered as clones of the code block, stacked
   on top of the first one, and Quarto relies on the code background to hide
   the block underneath. The rule above makes that background transparent, so
   the earlier step showed through and its lines never dimmed. Paint the
   stacked clones with the window background to mask it again. */
.codewindow .textarea pre > code:not(:first-child).fragment {
  background: var(--codewindow-bg, white);
}

/* Multiple tabs */

.codewindow .header .tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--codewindow-tab-gap, 8px);
  height: 100%;
}

.codewindow .header .tabs .file {
  margin-top: 0;
  background: var(--codewindow-tab-bg, #cbd5e1);
  opacity: var(--codewindow-tab-inactive-opacity, 0.6);
}

/* Outside reveal the tabs are buttons rather than fragment-driven. */
.codewindow .header .tabs .file.clickable {
  cursor: pointer;
}

.codewindow .header .tabs .file.active {
  background: var(--codewindow-tab-active-bg, var(--codewindow-bg, white));
  opacity: 1;
}

.codewindow .textarea .pane {
  display: none;
}

.codewindow .textarea .pane.active {
  display: block;
}

/* Preset for dark decks */

.codewindow.codewindow-dark {
  --codewindow-bg: #1e293b;
  --codewindow-header-bg: #0f172a;
  --codewindow-tab-bg: #334155;
  --codewindow-color: #e2e8f0;
  --codewindow-shadow-color: #020617;
}

/* Quarto's syntax highlighting is picked deck-wide by `highlight-style`, which
   a single dark window cannot change, so the token colors are remapped here.
   Grouped after pandoc's token classes. */
.codewindow.codewindow-dark code,
.codewindow.codewindow-dark code span {
  color: var(--codewindow-color);
}

.codewindow.codewindow-dark code span.kw,
.codewindow.codewindow-dark code span.cf,
.codewindow.codewindow-dark code span.im { color: #c792ea; }

.codewindow.codewindow-dark code span.st,
.codewindow.codewindow-dark code span.ch,
.codewindow.codewindow-dark code span.vs,
.codewindow.codewindow-dark code span.ss { color: #c3e88d; }

.codewindow.codewindow-dark code span.dv,
.codewindow.codewindow-dark code span.bn,
.codewindow.codewindow-dark code span.fl,
.codewindow.codewindow-dark code span.cn,
.codewindow.codewindow-dark code span.sc { color: #f78c6c; }

.codewindow.codewindow-dark code span.co,
.codewindow.codewindow-dark code span.do { color: #7f8ea3; }

.codewindow.codewindow-dark code span.fu,
.codewindow.codewindow-dark code span.bu { color: #82aaff; }

.codewindow.codewindow-dark code span.dt,
.codewindow.codewindow-dark code span.at,
.codewindow.codewindow-dark code span.va { color: #ffcb6b; }

.codewindow.codewindow-dark code span.op,
.codewindow.codewindow-dark code span.ot,
.codewindow.codewindow-dark code span.pp { color: #89ddff; }

.codewindow.codewindow-dark code span.al,
.codewindow.codewindow-dark code span.er,
.codewindow.codewindow-dark code span.wa { color: #ff5370; }

.codewindow .cw-fragment-trigger {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}