%code-theme {
  border-radius: 4px;
  background: rgba($black, .0625);
  color: $color-text-strong;

  a & { color: darken($color-primary, 10%); }
}

code,
pre {
  @extend %code-theme;
  font: {
    size: 87.50%;
    weight: $font-weight-regular;
    family: $font-family-code;
  }
  white-space: pre-wrap;

  strong & { font-weight: $font-weight-bold; }
}

code {
  display: inline-block;
  padding: 0 .5em;
}

%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;
  }
}