p, li {
  code {
    @extend .mono;
    display: inline-block;
    white-space: no-wrap;
    background: #fff;
    font-size: .8em;
    line-height: 1.5em;
    color: #555;
    border: 1px solid #ddd;
    @include border-radius(.4em);
    padding: 0 .3em;
    margin: -1px 0;
  }
  pre code { font-size: 1em; background: none; border: none; }
}

pre, figure.code table {
  @if $code-selection-color != false {
    @include selection($code-selection);
  }
}

pre {
  background: $pre-bg $noise-bg;
  @include border-radius(.4em);
  @extend .mono;
  color: $pre-color;
  overflow: scroll;
  overflow-y: hidden;
  overflow-x: auto;
  border: 1px solid $pre-border;
  margin-bottom: 2.1em;
  padding: 1em .8em;
  font-size: 13px;
  line-height: 1.45em;
}

figure.code {
  @include box-shadow(rgba(#000, .06) 0 0 10px);
  background: none;
  padding: 0;
  border: 0;
  margin-bottom: 1.5em;
  pre {
    @include border-radius(0px);
    @include box-shadow(none);
    background: none;
    color: $base1;
    border: none;
    padding: 0;
    margin-bottom: 0;
    overflow: visible;
    font-style: normal;
    font-weight: normal;
  }
  figcaption {
    position: relative;
    text-align: center;
    font-size: 13px;
    line-height: 2em;
    font-weight: normal;
    margin-bottom: 0;
    @include border-top-radius(5px);
    font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
    background-color: #aaaaaa;
    @if lightness($base03) <= lightness(#555) {
      text-shadow: #cbcccc 0 1px 0;
      color: #555;
      @include background-image(linear-gradient(
        #e0e0e0, #cfcfcf 6%, #b1b1b1 90%, #aaaaaa
      ));
      border: 1px solid #a5a5a5 {
        top-color: #cbcbcb;
        bottom: 0;
      }
    }
    @else if lightness($base03) > lightness(#555) {
      text-shadow: #fff 0 1px 0;
      color: #777;
      @include background-image(linear-gradient(
        #fff, #f0f0f0 6%, #e5e5e5 90%, #ddd
      ));
      border: 1px solid #c5c5c5 {
        top-color: #d5d5d5;
        bottom: 0;
      }
    }
    a {
      position: absolute; right: .8em;
      @include hover-link;
      color: inherit;
      z-index: 1;
      padding-left: 3em;
    }
  }
  .marked {
    position: relative;
    display: block;
    &:after {
      content: "";
      position: absolute;
      background: $marker-bg;
      left: -.8em; top: 0; bottom: 0; right: -.8em;
      border: 0px solid $marker-border {
        left-color: $marker-border-left;
      }
    }
    &.start:after {
      border-top-width: 1px;
    }
    &.end:after {
      border-bottom-width: 1px;
    }
  }
  .unnumbered, .line-numbers {
    .marked:after { border-left-width: 2px; }
  }
}

figure .highlight {
  border: 1px solid $pre-border;
  background: $base03;
  overflow-y: hidden;
  overflow-x: auto;

  // allows line number to be read by screen readers but won't be selected when copying code
  [data-line]:before { content: attr(data-line); }

  td {
    line-height: 1.45em;
    font-size: 13px;
    pre { padding: .8em; }
  }

  .main {
    width: 100%;
    background: $base03 $noise-bg;
  }

  .line-numbers {
    text-align: right;
    pre { color: $base01; }

    @if lightness($base03) > lightness(#555) {
      background: lighten($base03, 1) $noise-bg;
      border-right: 1px solid darken($base02, 2);
      @include box-shadow(lighten($base03, 2) -1px 0 inset);
      text-shadow: lighten($base02, 2) 0 -1px;
    } @else {
      background: $base02 $noise-bg;
      border-right: 1px solid darken($base03, 2);
      @include box-shadow(lighten($base02, 2) -1px 0 inset);
      text-shadow: darken($base02, 10) 0 -1px;
    }
  }

  .c      { color: $base01; font-style: italic; }                     /* Comment */
  .cm     { color: $base01; font-style: italic; }                     /* Comment.Multiline */
  .cp     { color: $base01; font-style: italic;  }                     /* Comment.Preproc */
  .c1     { color: $base01; font-style: italic; }                     /* Comment.Single */
  .cs     { color: $base01; font-weight: bold; font-style: italic; }   /* Comment.Special */
  .err    { color: $solar-red; background: none; }                                            /* Error */
  .k      { color: $solar-orange; }                       /* Keyword */
  .o      { color: $base1; font-weight: bold; }                       /* Operator */
  .p      { color: $base1; }                                             /* Operator */
  .ow     { color: $solar-cyan; font-weight: bold; }                       /* Operator.Word */
  .gd     { color: $base1; background-color: mix($solar-red, $base03, 25%); display: inline-block; }               /* Generic.Deleted */
  .gd .x  { color: $base1; background-color: mix($solar-red, $base03, 35%); display: inline-block; }               /* Generic.Deleted.Specific */
  .ge     { color: $base1; font-style: italic; }                      /* Generic.Emph */
  //.gr     { color: #aa0000 }                                          /* Generic.Error */
  .gh     { color: $base01; }                                          /* Generic.Heading */
  .gi     { color: $base1; background-color: mix($solar-green, $base03, 20%); display: inline-block; }               /* Generic.Inserted */
  .gi .x  { color: $base1; background-color: mix($solar-green, $base03, 40%); display: inline-block; }               /* Generic.Inserted.Specific */
  //.go     { color: #888888 }                                          /* Generic.Output */
  //.gp     { color: #555555 }                                          /* Generic.Prompt */
  .gs     { color: $base1; font-weight: bold; }                                       /* Generic.Strong */
  .gu     { color: $solar-violet; }                                          /* Generic.Subheading */
  //.gt     { color: #aa0000 }                                          /* Generic.Traceback */
  .kc     { color: $solar-green; font-weight: bold; }                       /* Keyword.Constant */
  .kd     { color: $solar-blue; }                       /* Keyword.Declaration */
  .kp     { color: $solar-orange; font-weight: bold; }                       /* Keyword.Pseudo */
  .kr     { color: $solar-magenta; font-weight: bold; }                       /* Keyword.Reserved */
  .kt     { color: $solar-cyan; }                       /* Keyword.Type */
  .n      { color: $solar-blue; }
  .na     { color: $solar-blue; }                                          /* Name.Attribute */
  .nb     { color: $solar-green; }                                          /* Name.Builtin */
  .nc     { color: $solar-magenta;}                                                   /* Name.Class */
  .no     { color: $solar-yellow; }                                          /* Name.Constant */
  //.ni     { color: #800080 }                                          /* Name.Entity */
  .nl     { color: $solar-green; }
  .ne     { color: $solar-blue; font-weight: bold; }                       /* Name.Exception */
  .nf     { color: $solar-blue; font-weight: bold; }                       /* Name.Function */
  .nn     { color: $solar-yellow; }                                          /* Name.Namespace */
  .nt     { color: $solar-blue; font-weight: bold; }                                          /* Name.Tag */
  .nx     { color: $solar-yellow !important; }
  //.bp     { color: #999999 }                                          /* Name.Builtin.Pseudo */
  //.vc     { color: #008080 }                                          /* Name.Variable.Class */
  .vg     { color: $solar-blue; }                                          /* Name.Variable.Global */
  .vi     { color: $solar-blue; }                                          /* Name.Variable.Instance */
  .nv     { color: $solar-blue; }                                          /* Name.Variable */
  //.w      { color: #bbbbbb }                                          /* Text.Whitespace */
  .mf     { color: $solar-cyan; }                                          /* Literal.Number.Float */
  .m      { color: $solar-cyan; }                                          /* Literal.Number */
  .mh     { color: $solar-cyan; }                                          /* Literal.Number.Hex */
  .mi     { color: $solar-cyan; }                                          /* Literal.Number.Integer */
  //.mo     { color: #009999 }                                          /* Literal.Number.Oct */
  .s      { color: $solar-cyan; }                                             /* Literal.String */
  //.sb     { color: #d14 }                                             /* Literal.String.Backtick */
  //.sc     { color: #d14 }                                             /* Literal.String.Char */
  .sd     { color: $solar-cyan; }                                             /* Literal.String.Doc */
  .s2     { color: $solar-cyan; }                                             /* Literal.String.Double */
  .se     { color: $solar-red; }                                             /* Literal.String.Escape */
  //.sh     { color: #d14 }                                             /* Literal.String.Heredoc */
  .si     { color: $solar-blue; }                                             /* Literal.String.Interpol */
  //.sx     { color: #d14 }                                             /* Literal.String.Other */
  .sr     { color: $solar-cyan; }                                          /* Literal.String.Regex */
  .s1     { color: $solar-cyan; }                                             /* Literal.String.Single */
  //.ss     { color: #990073 }                                          /* Literal.String.Symbol */
  //.il     { color: #009999 }                                          /* Literal.Number.Integer.Long */
  div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }}
}

$solar-scroll-bg: rgba(#fff, .15);
$solar-scroll-thumb: rgba(#fff, .2);
@if lightness($base03) > lightness(#555) {
  $solar-scroll-bg: rgba(#000, .15);
  $solar-scroll-thumb: rgba(#000, .15);
}

pre, figure .highlight {
  &::-webkit-scrollbar {  height: .5em; background: $solar-scroll-bg; }
  &::-webkit-scrollbar-thumb:horizontal { background: $solar-scroll-thumb;  -webkit-border-radius: 4px; border-radius: 4px }
}