/* Only code blocks generated by our docs get these styles */
pre[id*='code-block-'] {
  color-scheme: dark;
  color: white;
  background-color: var(--code-background, var(--wa-color-neutral-20));

  /* Ensures a discernible background color in dark mode
   * Useful for themes that use gray-20 as --wa-color-surface-default  */
  .wa-dark & {
    background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
  }
}

.code-comment,
.code-prolog,
.code-doctype,
.code-cdata {
  color: var(--code-comment, var(--wa-color-gray-70));
}

.code-operator,
.code-punctuation {
  color: var(--code-operator, var(--wa-color-gray-70));
}

.code-namespace {
  opacity: 0.7;
}

.code-property,
.code-keyword,
.code-tag,
.code-url {
  color: var(--code-keyword, var(--wa-color-indigo-70));
}

.code-symbol,
.code-deleted,
.code-important {
  color: var(--code-error, var(--wa-color-red-70));
}

.code-string,
.code-char,
.code-constant {
  color: var(--code-string, var(--wa-color-green-70));
}

.code-boolean,
.code-selector,
.code-attr-name,
.code-builtin,
.code-inserted {
  color: var(--code-literal, var(--wa-color-green-70));
}

.code-atrule,
.code-attr-value,
.code-number,
.code-variable,
.code-function,
.code-class-name,
.code-regex {
  color: var(--code-value, var(--wa-color-blue-70));
}

.code-important,
.code-bold {
  font-weight: bold;
}

.code-italic {
  font-style: italic;
}