/*
---
name: Code
category: Foundations/Code
tag: text
---
Display an inline code element correctly.

```html
<p>This is a <code>code example</code></p>
<pre><code>More code!</code></pre>
```
*/

pre {
  background-color: color-level('dark', 900);
  line-height: 1.2;
  margin: margin('normal') 0 margin('big');
  overflow: auto;
  padding: padding('normal');
  word-wrap: normal;
}

code {
  font-size: type-scale('small');
  padding: padding('tiny') padding('small');
  background-color: color('light');
  border-radius: $spacing-border-radius;
  border: 1px solid color-level('light', 600);
  color: color-level('accent', 600);
  vertical-align: middle;
}

pre code {
  background-color: inherit;
  border: none;
  color: color('iron');
  padding: 0;
}