code,
kbd,
pre,
samp,
var {
  font-family: var(--typeface-code);
  font-feature-settings: normal;
  line-height: var(--line-height-looser);
  overflow: auto;
  white-space: pre-wrap;
  word-break: keep-all;
  word-wrap: break-word;
}


code {
  background-color: #e8e8e8;
  font-size: 85%;
  letter-spacing: var(--tracking-code);
  margin-left: 0.15ch;
  margin-right: 0.15ch;
  padding-left: 0.25ch;
  padding-right: 0.25ch;

  @media screen and (prefers-color-scheme: dark) {
    background-color: #2b2b2b;
  }
}


kbd {
  background-color: var(--color-background);
  border: var(--border-width-thinnest) solid var(--color-type);
  border-radius: var(--border-radius-small);
  padding: 0 0.5ch;
  word-break: break-word;

  @media screen and (prefers-color-scheme: dark) {
    background-color: var(--color-background-shade);
  }
}


pre {
  background-color: var(--color-background-shade);
  padding: 1rem 1.5rem;
  color: var(--color-type-tint);
  overflow: auto;

  // Text-level formatting
  code {
    background-color: unset;
  }
}
