/* Code and similar */
code,
pre,
kbd,
samp,
var {
  font-family: var(--wa-font-family-code);
  font-size: 0.875em;
  background-color: var(--wa-color-overlay-inline);
  border-radius: var(--wa-border-radius-m);
  padding: 0.25em 0.5em;
}

code {
  white-space: normal;
}

pre {
  color: var(--wa-color-text-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  white-space: pre;
}

pre:has(code) {
  position: relative;
  padding: 0;
  white-space: normal;

  code {
    display: block;
    font-size: 1em;
    background-color: transparent;
    padding: var(--wa-space-m);
    white-space: pre;
    overflow-x: auto;
  }
}

kbd {
  border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
  border-bottom-width: var(--wa-border-width-m);
  font-family: var(--wa-font-family-code);
  border-radius: var(--wa-border-radius-m);
  color: var(--wa-color-neutral-on-normal);
  padding: 0.25em 0.5em;

  wa-icon {
    vertical-align: -2px;
  }
}

/* Print styles */
@media print {
  pre {
    background: none;
    border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
  }
}
