//
// Syntax highlight - CodeRay
// --------------------------------------------------

.syntaxhl {
  div {
    display: inline;
  }

  .line-numbers {
    margin: 0 5px 0 0;
    padding: 2px 4px;
    background-color: #eee;
  }

  .code pre {
    overflow: auto;
  }

  .debug {
    // stylelint-disable declaration-no-important
    background: #00f !important;
    color: #fff !important;
  }

  .annotation {
    color: #007;
  }

  .attribute-name {
    color: #b48;
  }

  .attribute-value {
    color: #700;
  }

  .binary {
    color: #509;
  }

  .char {
    color: #d20;

    .content {
      color: #d20;
    }

    .delimiter {
      color: #710;
    }
  }

  .class {
    color: #795da3;
    font-weight: $font-weight-bold;
  }

  .class-variable {
    color: #369;
  }

  .color {
    color: #0a0;
  }

  .comment {
    color: #969896;

    .char,
    .delimiter {
      color: #969896;
    }
  }

  .complex {
    color: #a08;
  }

  .constant {
    color: #795da3;
  }

  .decorator {
    color: #b0b;
  }

  .definition {
    color: #099;
    font-weight: $font-weight-bold;
  }

  .delimiter {
    color: #000;
  }

  .directive {
    color: #088;
    font-weight: $font-weight-bold;
  }

  .doc {
    color: #970;
  }

  .doc-string {
    color: #d42;
    font-weight: $font-weight-bold;
  }

  .doctype {
    color: #34b;
  }

  .entity {
    color: #800;
    font-weight: $font-weight-bold;
  }

  .error {
    background-color: #faa;
    color: #f00;
  }

  .escape {
    color: #666;
  }

  .exception {
    color: #c00;
    font-weight: $font-weight-bold;
  }

  .float {
    color: #06d;
  }

  .function {
    color: #06b;
    font-weight: $font-weight-bold;
  }

  .global-variable {
    color: #d70;
  }

  .hex {
    color: #02b;
  }

  .imaginary {
    color: #f00;
  }

  .include {
    color: #b44;
    font-weight: $font-weight-bold;
  }

  .inline {
    background-color: rgba(#000, .05);
    color: #000;
  }

  .inline-delimiter {
    color: #666;
    font-weight: $font-weight-bold;
  }

  .instance-variable {
    color: #33b;
  }

  .integer {
    color: #0086b3;
  }

  .key {
    color: #606;

    .char {
      color: #60f;
    }

    .delimiter {
      color: #404;
    }
  }

  .keyword {
    color: #b3113e;
    font-weight: $font-weight-bold;
  }

  .label {
    color: #970;
    font-weight: $font-weight-bold;
  }

  .local-variable {
    color: #369;
  }

  .namespace {
    color: #707;
    font-weight: $font-weight-bold;
  }

  .octal {
    color: #40e;
  }

  .predefined {
    color: #b21;
  }

  .predefined-constant {
    color: #009595;
  }

  .predefined-type {
    color: #0a5;
    font-weight: $font-weight-bold;
  }

  .preprocessor {
    color: #579;
  }

  .pseudo-class {
    color: #00c;
    font-weight: $font-weight-bold;
  }

  .regexp {
    background-color: hsla(300, 100%, 50%, .06);

    .content {
      color: #808;
    }

    .delimiter {
      color: #404;
    }

    .modifier {
      color: #c2c;
    }
  }

  .reserved {
    color: #080;
    font-weight: $font-weight-bold;
  }

  .shell {
    background-color: hsla(120, 100%, 50%, .06);

    .content {
      color: #2b2;
    }

    .delimiter {
      color: #161;
    }
  }

  .string {
    .char,
    .content,
    .delimiter,
    .modifier {
      color: #df5000;
    }
  }

  .symbol {
    color: #d33;

    .content,
    .delimiter {
      color: #d33;
    }
  }

  .tag {
    color: #070;
  }

  .type {
    color: #339;
    font-weight: $font-weight-bold;
  }

  .value {
    color: #088;
  }

  .variable {
    color: #037;
  }

  .insert {
    background: hsla(120, 100%, 50%, .12);

    .insert {
      background: transparent;
      color: #0c0;
      font-weight: $font-weight-bold;
    }

    .eyecatcher {
      margin: -1px;
      border: 1px solid hsla(120, 100%, 25%, .5);
      border-top: 0 none;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      background-color: hsla(120, 100%, 50%, .2);
    }
  }

  .delete {
    background: hsla(0, 100%, 50%, .12);

    .delete {
      background: transparent;
      color: #c00;
      font-weight: $font-weight-bold;
    }

    .eyecatcher {
      margin: -1px;
      border: 1px solid hsla(0, 100%, 45%, .5);
      border-bottom: 0 none;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background-color: hsla(0, 100%, 50%, .2);
    }
  }

  .change {
    background: #007;
    color: #bbf;

    .change {
      color: #88f;
    }
  }

  .head {
    background: #505;
    color: #f8f;

    .head {
      color: #f4f;
    }

    .filename {
      color: #fff;
    }
  }
}