@import "bourbon";
@import "base/variables";
@import "shared";

body.guides .highlight {
  border-radius: $highlight-border-radius;
  border: 1px solid #d1d1d1;
  color: $highlight-text-color;
}

#content .highlight {
  @include well;

  font-size: 12px;
  font-family: Menlo, monospace;
  line-height: 16px;
  overflow: hidden;
  position: relative;

  .scroller {
    overflow: auto;
  }

  table {
    margin: 0 0;
  }

  .ribbon {
    position: absolute;
    right: 0;
    bottom: 6px;
    width: 52px;
    height: 20px;
  }

  &.javascript .ribbon,
  &.js .ribbon {
    @include hidpi('js-ribbon', png);
  }

  &.html .ribbon {
    @include hidpi('html-ribbon', png);
  }

  &.handlebars .ribbon {
    @include hidpi('handlebars-ribbon', png);
  }

  .highlight-line {
    display: inline-block;
    margin: 0 -10px;
    background-color: $highlight-yellow;
    border-right: $highlight-yellow solid 5px;
    border-left: $highlight-yellow solid 5px;
    box-sizing: content-box;

    &.added {
      border-color: $highlight-green-light;
      background-color: $highlight-green-light;
    }

    &.removed {
      border-color: $highlight-red;
      background-color: $highlight-red;
    }
  }

  .code .highlight-line {
    width: 613px;
    margin: 0 -13px;
    border-left-width: 13px;
    border-right-width: 13px;
  }

  .line-numbers .highlight-line {
    width: 28px;
    border-right-color: darken($highlight-yellow, 20%);

    &.added {
      border-right-color: darken($highlight-green-light, 20%);
    }

    &.removed {
      border-right-color: darken($highlight-red, 20%);
    }
  }
}

.CodeRay {
  width: 100%;

  td.line-numbers {
    width: 38px;
    text-align: center;
    border-right: 1px solid #d1d1d1;
    background-color: #f6f6f6;
    color: $highlight-gray;
    border-top-left-radius: $highlight-border-radius;
    border-bottom-left-radius: $highlight-border-radius;
  }

  td.code {
    padding: 8px 0 8px 13px;
  }

  /* HTML */

  .tag {
    color: $highlight-blue;
  }

  .comment {
    color: $highlight-green;
  }

  .attribute-name {
    color: $highlight-blue;
  }

  .content {
    color: darken($highlight-blue, 15%);
  }

  .string {
    color: $highlight-blue;
  }

  .keyword {
    color: $highlight-orange;
  }

  .key,
  .function {
    color: #2b1fce;
  }

  .local-variable {
    color: #1f58ce;
  }

  .delete {
    background-color: #ffecec;
    color: #bd2c00;
  }
  .insert {
    background-color: #eaffea;
    color: #55a532;
  }

  thead {
    background-color: #f9e7e4;
  }

  th,
  td {
    padding: 5px 10px;
  }

}

.handlebars {
  .CodeRay {
    .inline {
      &,
      .inline-delimiter,
      .delimiter {
        color: lighten($highlight-green, 10%);
      }

      .attribute-name {
        color: $highlight-green;
      }
      .attribute-value,
      .content {
        color: darken($highlight-green, 10%);
      }
    }
  }
}
