pre {
  margin: 0;
}

.inline-code {
  display: inline-block;
}

code {
  display: inline-block;
  font-family: var(--font-monospace);
  line-height: 1.6;
}

.inline-code code {
  line-height: 1.4;
}

code a {
  display: inline-block;
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  border-radius: var(--border-radius-base);
  line-height: 1.4;
}

code a:hover {
  background: var(--color-syntax-link-hover-bg);
  text-decoration: none;
}

code a:active {
  transform: translate(0, 0.1rem);
}

code a:active .tooltip-trigger.tooltip_show .tooltip {
  display: none;
}

.dark {
  --color-syntax-plain: var(--color-gray-base);

  --color-syntax-base: var(--color-gray-lighten-45);
  --color-syntax-subtle: var(--color-gray-lighten-20);
  --color-syntax-subtle-em: var(--color-gray-lighten-30);
  --color-syntax-keyword: var(--color-pink-2);
  --color-syntax-operator: var(--color-gray-lighten-20);
  --color-syntax-term: var(--color-purple-4);
  --color-syntax-term-namespace: var(--color-purple-3);
  --color-syntax-ability: var(--color-pink-2);
  --color-syntax-type: var(--color-blue-3);
  --color-syntax-type-namespace: var(--color-blue-2);
  --color-syntax-constructor: var(--color-blue-3);
  --color-syntax-constructor-namespace: var(--color-blue-2);
  --color-syntax-text: var(--color-green-2);
  --color-syntax-link-hover-bg: var(--color-gray-base);

  --color-syntax-monochrome-subtle: var(--color-gray-lighten-20);
  --color-syntax-monochrome-base: var(--color-gray-lighten-30);
  --color-syntax-monochrome-em: var(--color-gray-lighten-100);
}

.rich .fqn .sep {
  color: var(--color-syntax-subtle);
}
.rich .text-literal,
.rich .bytes-literal,
.rich .char-literal {
  color: var(--color-syntax-text);
}

.rich .boolean-literal,
.rich .data-constructor-reference {
  color: var(--color-syntax-constructor);
}

.rich .data-constructor-reference .segment {
  color: var(--color-syntax-constructor-namespace);
}

.rich .data-constructor-reference .segment:last-child {
  color: var(--color-syntax-constructor);
}

.rich .var,
.rich .data-type-params {
  color: var(--color-syntax-base);
}

.rich .numeric-literal,
.rich .type-reference,
.rich .data-type-modifier {
  color: var(--color-syntax-type);
}

.rich .type-reference .fqn .segment {
  color: var(--color-syntax-type-namespace);
}

.rich .type-reference .fqn .segment:last-child {
  color: var(--color-syntax-type);
}

.rich .term-reference,
.rich .ability-constructor-reference,
.rich .hash-qualifier {
  color: var(--color-syntax-term);
}

.rich .term-reference .fqn .segment,
.rich .ability-constructor-reference .fqn .segment,
.rich .hash-qualifier .fqn .segment {
  color: var(--color-syntax-term-namespace);
}

.rich .term-reference .fqn .segment:last-child,
.rich .ability-constructor-reference .fqn .segment:last-child,
.rich .hash-qualifier .fqn .segment:last-child {
  color: var(--color-syntax-term);
}

.rich .op.cons,
.rich .op.snoc,
.rich .op.concat,
.rich .type-operator,
.rich .binding-equals,
.rich .type-ascription-colon {
  color: var(--color-syntax-operator);
}

.rich .delay-force-char {
  color: var(--color-syntax-ability);
  font-weight: bold;
}

.rich .control-keyword,
.rich .data-type-keyword,
.rich .link-keyword,
.rich .doc-keyword {
  color: var(--color-syntax-keyword);
}

.rich .delimeter-char {
  color: var(--color-syntax-subtle);
}

.rich .comment,
.rich .ability-braces,
.rich .unit,
.rich .use-keyword,
.rich .use-prefix,
.rich .use-suffix,
.rich .blank,
.rich .parenthesis,
.rich .arrow,
.rich .doc-delimeter {
  color: var(--color-syntax-subtle);
}

.monochrome .text-literal,
.monochrome .bytes-literal,
.monochrome .char-literal,
.monochrome .blank,
.monochrome .var,
.monochrome .data-type-params {
  color: var(--color-syntax-monochrome-base);
}

.monochrome .type-reference,
.monochrome .boolean-literal,
.monochrome .data-constructor-reference,
.monochrome .numeric-literal,
.monochrome .term-reference,
.monochrome .data-type-modifier,
.monochrome .hash-qualifier,
.monochrome .ability-constructor-reference {
  font-weight: bold;
  color: var(--color-syntax-monochrome-em);
}

.monochrome .delay-force-char {
  color: var(--color-syntax-monochrome-em);
  font-weight: bold;
}

.monochrome .op.cons,
.monochrome .op.snoc,
.monochrome .op.concat,
.monochrome .type-operator,
.monochrome .type-ascription-colon,
.monochrome .control-keyword,
.monochrome .data-type-keyword,
.monochrome .link-keyword,
.monochrome .doc-keyword,
.monochrome .comment,
.monochrome .ability-braces,
.monochrome .binding-equals,
.monochrome .unit,
.monochrome .use-keyword,
.monochrome .use-prefix,
.monochrome .use-suffix,
.monochrome .delimeter-char,
.monochrome .parenthesis,
.monochrome .doc-delimeter {
  color: var(--color-syntax-monochrome-subtle);
}

.plain .text-literal,
.plain .bytes-literal,
.plain .char-literal,
.plain .boolean-literal,
.plain .data-constructor-reference,
.plain .blank,
.plain .var,
.plain .data-type-params,
.plain .numeric-literal,
.plain .term-reference,
.plain .data-type-modifier,
.plain .hash-qualifier,
.plain .ability-constructor-reference,
.plain .type-reference,
.plain .op.cons,
.plain .op.snoc,
.plain .op.concat,
.plain .type-operator,
.plain .type-ascription-colon,
.plain .delay-force-char,
.plain .control-keyword,
.plain .data-type-keyword,
.plain .link-keyword,
.plain .doc-keyword,
.plain .comment,
.plain .ability-braces,
.plain .binding-equals,
.plain .unit,
.plain .use-keyword,
.plain .use-prefix,
.plain .use-suffix,
.plain .delimeter-char,
.plain .parenthesis,
.plain .doc-delimeter {
  color: var(--color-syntax-plain);
}
