.book-box {
  /* semantic colors */

  /* primitive values */
  --book-box-color-code-string: var(--book-box-color-name-green-herbal);
  --book-box-color-code-number: var(--book-box-color-name-orange-light);
  --book-box-color-code-boolean: var(--book-box-color-name-orange-light);
  --book-box-color-code-literal: var(--book-box-color-name-orange-light);
  --book-box-color-code-regexp: var(--book-box-color-name-red);

  /* types */
  --book-box-color-code-type: var(--book-box-color-name-cyan);

  /* syntax */
  --book-box-color-code-keyword: var(--book-box-color-name-violet);
  --book-box-color-code-operator: var(--book-box-color-name-cyan);
  --book-box-color-code-comment: var(--book-box-color-name-gray);
  --book-box-color-code-variable: var(--book-box-color-name-red-light);
  --book-box-color-code-variable-constant: var(--book-box-color-name-red-light);
  --book-box-color-code-class: var(--book-box-color-name-red-light);
  --book-box-color-code-function: var(--book-box-color-name-blue-dark);

  /* diff */
  --book-box-color-diff-add: rgba(0, 255, 106, 0.3);
  --book-box-color-diff-remove: rgba(255, 0, 0, 0.3);
}

.book-box_theme-dark {
  --book-box-color-code-keyword: var(--book-box-color-name-violet-light);
  --book-box-color-code-string: var(--book-box-color-name-green-light);
  --book-box-color-code-type: var(--book-box-color-name-yellow-light);
  --book-box-color-code-variable-constant: var(--book-box-color-name-yellow-light);
  --book-box-color-code-class: var(--book-box-color-name-yellow-light);
  --book-box-color-code-function: var(--book-box-color-name-blue-sky);
}

.book-box-code pre {
  color: var(--book-box-color-text);
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  overflow: auto;

  tab-size: 4;
  hyphens: none;
}

.hljs-literal {
  color: var(--book-box-color-code-literal);
}

.hljs-name {
  color: var(--book-box-color-code-variable);
}

.hljs-keyword,
.hljs-symbol {
  color: var(--book-box-color-code-keyword);
}

.hljs-link {
  color: var(--book-box-color-name-blue-sky);
  text-decoration: underline;
}

.hljs-built_in {
  color: var(--book-box-color-code-operator);
}

.hljs-type {
  color: var(--book-box-color-code-type);
}

.hljs-class {
  color: var(--book-box-color-code-class);
}

.hljs-number {
  color: var(--book-box-color-code-number);
}

.hljs-meta .hljs-string,
.hljs-string {
  color: var(--book-box-color-code-string);
}

.hljs-regexp,
.hljs-template-tag {
  color: var(--book-box-color-code-regexp);
}

.hljs-formula,
.hljs-function,
.hljs-params,
.hljs-title {
  color: var(--book-box-color-code-function);
}

.hljs-subst {
  color: var(--book-box-color-code-variable);
}

.hljs-title.class_ {
  color: var(--book-box-color-code-class);
}

.hljs-comment {
  color: var(--book-box-color-code-comment);
}

.hljs-quote {
  color: var(--book-box-color-code-string);
  font-style: italic;
}

.hljs-doctag {
  color: var(--book-box-color-code-string);
}

.hljs-meta,
.hljs-meta .hljs-keyword {
  color: var(--book-box-color-code-comment);
}

.hljs-template-variable,
.hljs-variable {
  color: var(--book-box-color-code-variable);
}

.hljs-attr,
.hljs-attribute {
  color: var(--book-box-color-code-literal);
}

.hljs-section {
  color: var(--book-box-color-code-comment);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

.hljs-bullet,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: var(--book-box-color-code-variable);
}

.hljs-addition {
  background-color: var(--book-box-color-diff-add);
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: var(--book-box-color-diff-remove);
  display: inline-block;
  width: 100%;
}