// Monospace stack gives 99% coverage to all OSes:
// http://www.codestyle.org/servlets/FontStack?stack=Monaco%2CDejaVu+Sans+Mono%2CCourier+New&generic=monospace&x=12&y=4
$monospace: Monaco,"DejaVu Sans Mono","Courier New",monospace;

/* colors */
$text-color        : #333;
$text-color-medium : #666;
$text-color-light  : #999;
$dark-green        : #325D72;
$border-color      : #ddd;
$link-color        : #4183c4;
$light-grey-fill   : #eee;
$warning-color     : #d06806;

.markdown-body {
  hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    background-image: none;
    display: block;
    width: 100%;
    clear: both;
  }

  .highlight pre, pre {
    border-bottom-width: 2px;
    padding: 8px 10px;
  }

  .alert {
    position:relative;
    margin: $margin auto;
    padding:15px;
    font-size:16px;
    color:#264c72;
    border: 1px solid #97c1da;
    border-radius: 3px;
    @include gradient(#d8ebf8, #d0e3ef);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-shadow: 0 1px 0 rgba(#fff, 0.8);

    & + .alert { margin-top: 5px; }

    & > *:first-child { margin-top: 0 }
    & > *:last-child { margin-bottom: 0 }

    &.note{
      color:#4c7226;
      @include gradient(#dbe2d3, #dce3d4);
      border: 1px solid #819c67;
    }

    &.warning{
      color:#613A00;
      @include gradient(#ffe3c8, #f5dac0);
      border: 1px solid #dca874;
    }

    &.danger{
      color:#9c2400;
      @include gradient(#f8d8d8, #efd0d0);
      border: 1px solid #da9797;
    }

    code {
      font-size:12px;
    }
  }

  // Light colored code blocks, that can include tooltips as <span.tooltip>.
  //
  // .conmmand-line - Dark codeblocks with color highligting for the
  //                  various types of input/output
  // span.tooltip   - Grey text used to to give extra info to the reader
  // span.output    - Green text used to show text output by the terminal
  // em             - Yellow itallic text that indicates information that
  //                  should be replaced with the reader's own info.
  //
  // No styleguide reference.
  pre {
    padding: 8px 10px 8px;
    margin: 10px 0;
    border: 1px solid $border-color;
    border-bottom-width:2px;
    @include rounded-corners(3px);
    font-family: $monospace;
    font-size: 13px;
    color: $text-color-medium;
    -webkit-font-smoothing: inherit;
    overflow: auto;

    code {
      padding: 0;
      border: none;
    }

    span {
      white-space: pre-wrap;
    }

    span.tooltip {
      position: relative;
      display: inline-block;
      width: 100%;

      span {
        display: block;
        color: $text-color-light;
      }

      &:hover {
        background: #eee;
        padding: 0 2px;
        margin-left: -2px;
        @include rounded-corners(3px);
      }
    }

    &.command-line {
      border: 2px solid $border-color;
      background-color: #333;
      color: #fff;
      padding: 10px;
      -webkit-font-smoothing: auto;

      em {
        color: #F9FE64;
        font-style: italic;
      }

      .command:before {
        content: "$ ";
      }

      .comment {
        color: #ccc;
      }

      .output {
        color: #63E463;

        span {
          position: fixed;
          top: -1000px;
          left: -1000px;
        }
      }
    }
  }

  .line {
    .comment {
      color: #7C7C7C;
    }

    .entity {
      color: #FFD2A7;

      &.name.type {
        text-decoration: underline;
        color: #FFFFB6;
      }

      &.other.inherited-class {
        color: #9B5C2E;
      }
    }

    .keyword {
      color: #96CBFE;

      &.control {
        color: #96CBFE;
      }

      &.operator {
        color: #EDEDED;
      }
    }

    .storage {
      color: #CFCB90;

      &.modifier {
        color: #96CBFE;
      }
    }

    .constant {
      color: #99CC99;

      &.numeric {
        color: #FF73FD;
      }
    }

    .variable {
      color: #C6C5FE;
    }

    .invalid.deprecated {
      text-decoration: underline;
      color: #FD5FF1;
    }

    .invalid.illegal {
      color: #FD5FF1;
      background-color: rgba(86, 45, 86, 0.75);
    }

    // String interpolation in Ruby, CoffeeScript, and others
    .source .string {
      .source,
      .meta.embedded.line {
        color: #EDEDED;
      }

      .punctuation.section.embedded {
        color: #00A0A0;

        .source {
          color: #00A0A0;  // Required for the end of embedded strings in Ruby #716
        }
      }
    }

    .string {
      color: #A8FF60;

      .constant {
        color: #00A0A0;
      }

      &.regexp {
        color: #E9C062;

        .constant.character.escape,
        .source.ruby.embedded,
        .string.regexp.arbitrary-repitition {
          color: #FF8000;
        }

        &.group {
          color: #C6A24F;
          background-color: rgba(255, 255, 255, 0.06);
        }

        &.character-class {
          color: #B18A3D;
        }
      }

      .variable {
        color: #8A9A95;
      }
    }

    .support {
      color: #FFFFB6;

      &.function {
        color: #DAD085;
      }

      &.constant {
        color: #FFD2A7;
      }

      &.type.property-name.css {
        color: #EDEDED;
      }
    }

    .source .entity.name.tag,
    .source .entity.other.attribute-name,
    .meta.tag.inline,
    .meta.tag.inline .entity {
      color: #96CBFE;
    }

    .entity {
      &.other.attribute-name {
        color: #FFD7B1;
      }

      &.name.tag.namespace,
      &.other.attribute-name.namespace {
        color: #E18964;
      }
    }

    .meta {
      &.preprocessor.c {
        color: #8996A8;
      }

      &.preprocessor.c .keyword {
        color: #AFC4DB;
      }

      &.cast {
        color: #676767;
      }

      &.sgml.html .meta.doctype,
      &.sgml.html .meta.doctype .entity,
      &.sgml.html .meta.doctype .string,
      &.xml-processing,
      &.xml-processing .entity,
      &.xml-processing .string {
        color: #494949;
      }

      &.tag,
      &.tag .entity {
        color: #96CBFE;
      }

      &.selector.css .entity.name.tag {
        text-decoration: underline;
        color: #96CBFE;
      }

      &.selector.css .entity.other.attribute-name.tag.pseudo-class {
        color: #8F9D6A;
      }

      &.selector.css .entity.other.attribute-name.id {
        color: #8B98AB;
      }

      &.selector.css .entity.other.attribute-name.class {
        color: #62B1FE;
      }

      &.property-group .support.constant.property-value.css,
      &.property-value .support.constant.property-value.css {
        color: #F9EE98;
      }

      &.preprocessor.at-rule .keyword.control.at-rule {
        color: #8693A5;
      }

      &.property-value .support.constant.named-color.css,
      &.property-value .constant {
        color: #87C38A;
      }

      &.constructor.argument.css {
        color: #8F9D6A;
      }

      &.diff,
      &.diff.header {
        color: #F8F8F8;
        background-color: #0E2231;
      }

      &.separator {
        color: #60A633;
        background-color: #242424;
      }

      &.line.entry.logfile,
      &.line.exit.logfile {
        background-color: rgba(238, 238, 238, 0.16);
      }

      &.line.error.logfile {
        background-color: #751012;
      }
    }
  }
}

.platform-windows {
  pre.command-line {
    .command:before {
      content: "C:\\> ";
    }
  }
}
