/* code */

@custom-selector :--code-element
  code,
  kbd,
  pre,
  samp;

:--code-element {
  font-family: var(--hiq-font-family-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace);
  font-size: var(--hiq-code-font-size);
}

code {
  padding: var(--hiq-code-padding-vertical) var(--hiq-code-padding-horizontal);
  border-radius: var(--hiq-hiq-border-radius);
  background-color: var(--hiq-code-background-color);
  white-space: pre;
  color: var(--hiq-code-text-color);
}

*:not(pre) > code {
  border: 1px solid var(--hiq-code-border-color);
}

/* inherit styles from `a` element if code is within */
a code {
  padding: 0;
  border: 0;
  background-color: inherit;
  color: inherit;
}

kbd {
  padding: var(--hiq-kbd-padding-vertical) var(--hiq-kbd-padding-horizontal);
  border: 1px solid var(--hiq-kbd-border-color);
  border-radius: var(--hiq-hiq-border-radius);
  background-color: var(--hiq-kbd-background-color);
  color: var(--hiq-kbd-text-color);

  /* remove padding and increase font weight if `kbd` is nested within another `kbd` */
  & kbd {
    padding: 0;
    border: 0;
    font-weight: var(--hiq-nested-kbd-font-weight);
  }
}

pre {
  /* enable "momentum-based scrolling on touch devices when content overflows */
  @mixin overflow-touch;

  overflow-x: auto;
  margin: 0 0 var(--hiq-block-element-margin-bottom);
  padding: var(--hiq-pre-padding-vertical) var(--hiq-pre-padding-horizontal);
  border: 1px solid var(--hiq-pre-border-color);
  border-radius: var(--hiq-border-radius);
  background-color: var(--hiq-pre-background-color);
  tab-size: 1.5rem;
  white-space: pre-wrap;
  word-wrap: normal;
  color: var(--hiq-pre-text-color);

  /* reset and inherit styles from `pre` if code is contained within */
  & code {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    font-size: inherit;
    white-space: pre-wrap;
    color: inherit;
  }
}
