/* code presentation: inline code, blocks, syntax token colors */

code,
kbd,
pre,
samp {
  font-family: var(--font-mono);
  font-size: 0.9375em;
}

:not(pre) > code {
  padding: 0.1em 0.4em;
  border: var(--line-thin) solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-code);
  color: var(--text);
  white-space: nowrap;
}

pre {
  overflow-x: auto;
  /* tighter above and below than at the sides */
  padding: var(--space-3) var(--space-4);
  border: var(--line) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-code);
  box-shadow: var(--shadow);
  line-height: 1.55;
  tab-size: 4;
}

pre code {
  display: block;
  font-size: var(--text-small);
  color: var(--text);
}

.code-panel {
  margin-bottom: var(--space-4);
  border: var(--line) solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-code);
  box-shadow: var(--shadow-large);
  overflow: hidden;
}

.code-panel-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--line) solid var(--border);
  background: var(--accent-fill);
  color: var(--accent-contrast);
  font-size: var(--text-small);
}

.code-panel-bar label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.code-panel-bar select {
  /* pushes the filename right */
  margin-right: auto;
  padding: var(--space-1) var(--space-2);
  border: var(--line-thin) solid #000000;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #000000;
  box-shadow: var(--shadow-ink);
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}

.code-panel-file {
  font-family: var(--font-mono);
  font-weight: 700;
}

.code-panel pre {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}

/* syntax tokens, emitted by script/highlight.js */

.hl-kw {
  color: var(--syntax-keyword);
}
.hl-type {
  color: var(--syntax-type);
}
.hl-str {
  color: var(--syntax-string);
}
.hl-num {
  color: var(--syntax-number);
}
.hl-cmt {
  color: var(--syntax-comment);
  font-style: italic;
}
.hl-prep {
  color: var(--syntax-annotation);
}
.hl-fn {
  color: var(--syntax-function);
}