%code-theme {
  @include border-radius(4px);
  border: 1px solid #ebebeb;
  background: #f8f8f8;
  color: $color-text-strong;
}

code,
pre {
  @extend %code-theme;
  @include font-size-small;
  font: {
    weight: $font-weight-regular;
    family: $font-family-code;
  }
  white-space: pre-wrap;
  text-align: left;
  @include box-sizing(border-box);
  strong & {
    font-weight: $font-weight-bold;
  }
}

code {
  padding: .25em;
  line-height: 0;
}

%pre-block {
  @include rhythm(0, .5, .5, 0);
  padding: {
    right: 1em;
     left: 1em;
  }
  display: block;
}

pre {
  @extend %pre-block;
  @include trailer;
  @include rhythm(.5, .5, .5, .5);
  @include bleed(1em);

  // It's important that this be 22px so that we can easily compute the extra
  // padding necessary to align sections in code examples. 22px is the line
  // height (24px) minus the borders (2px) of a section, which means we can just
  // add an extra line to sections to make them align.
  margin: auto 0 22px;

  // Account for some code outputs that place code tags in pre tags
  code {
    @extend %reset-padding;
    border: 0;
    background: none;
    font-size: inherit;
    line-height: inherit;
  }
  &.highlight .err {
    background: none;
  }
}