.code {
  --code-padding: 0.2em 0.5em;
  --code-bg: var(--theme-bg-2);
  --code-border-radius: 4px;
  --code-color: var(--theme-code);
  --code-font-size: 87.5%;
  --code-font-family: var(--font-mono);
}

.pre {
  --pre-bg: var(--theme-bg-2);
  --pre-border-radius: 4px;
  --pre-code-padding: 1.25em 1.5em;
  --pre-code-color: var(--theme-code);
  --pre-code-font-size: 87.5%;
  --pre-code-font-family: var(--font-mono);
}

*:not(.pre) > .code {
  padding: var(--code-padding);
  background: var(--code-bg);
  border-radius: var(--code-border-radius);
  color: var(--code-color);
  font-size: var(--code-font-size);
  font-family: var(--code-font-family);
  word-break: break-all;
}

.pre {
  background: var(--pre-bg);
  border-radius: var(--pre-border-radius);
  white-space: pre;
  word-wrap: normal;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pre > .code {
  display: block;
  padding: var(--pre-code-padding);
  color: var(--pre-code-color);
  font-size: var(--pre-code-font-size);
  font-family: var(--pre-code-font-family);
}