@require "code-theme.styl"

$code-block {
  overflow auto
  margin 20px 0
  padding 0
  font-size 0.96rem
  line-height 1.5rem
  color var(--highlight-foreground)
  background var(--highlight-background)
}


pre, code {
  font-family "Source Code Pro", consolas, Menlo
}

code {
  padding 5px
  word-wrap break-word
  border-radius 2px
  font-size 0.96rem
  color var(--code-foreground)
  background var(--code-background)
}

pre {
  @extend $code-block
  padding 10px

  code {
    padding 0
    color var(--highlight-foreground)
    background none
    text-shadow none
  }
}

.highlight {
  @extend $code-block
  border-radius 1px

  pre {
    border none
    margin 0
    padding 10px 0
  }


  table {
    margin 0
    width auto
    border none
    border-spacing unset
  }


  td {
    border none
    padding 0
  }

  figcaption {
    font-size 1rem
    color var(--highlight-foreground)
    line-height 1rem
    margin-bottom 1rem

    a {
      float right
      color var(--highlight-foreground)

      &:hover {
        border-bottom-color var(--highlight-foreground)
      }
    }
  }

  .gutter pre {
    padding-left 10px
    padding-right 10px
    color var(--highlight-gutter-color)
    text-align center
    background-color var(--highlight-gutter-bg-color)
  }

  .code pre {
    width 100%
    padding-left 10px
    padding-right 10px
    background-color var(--highlight-background)
  }

  .line {
    height 20px
    color var(--default-text-color)

    .attr {
      color var(--default-text-color)
    }

    .string {
      color var(--default-text-color)
    }

  }
}


.gutter {
  -webkit-user-select none
  -moz-user-select none
  -ms-user-select none
  user-select none
}

.gist table {
  width auto

  td {
    border none
  }
}

// For diff highlight
pre .deletion {
  background var(--highlight-deletion)
}

pre .addition {
  background var(--highlight-addition)
}

pre .meta {
  color var(--highlight-purple)
}

pre {

  .comment {
    color var(--highlight-comment)
  }

  .variable
  .attribute
  .tag
  .regexp
  .ruby .constant
  .xml .tag .title
  .xml .pi
  .xml .doctype
  .html .doctype
  .css .id
  .css .class
  .css .pseudo {
    color var(--highlight-red)
  }

  .number
  .preprocessor
  .built_in
  .literal
  .params
  .constant
  .command {
    color var(--highlight-orange)
  }

  .ruby .class .title
  .css .rules .attribute
  .string
  .value
  .inheritance
  .header
  .ruby .symbol
  .xml .cdata
  .special
  .number
  .formula {
    color var(--highlight-green)
  }

  .title
  .css .hexcolor {
    color var(--highlight-aqua)
  }

  .function
  .python .decorator
  .python .title
  .ruby .function .title
  .ruby .title .keyword
  .perl .sub
  .javascript .title
  .coffeescript .title {
    color var(--highlight-blue)
  }

  .keyword
  .javascript .function {
    color var(--highlight-purple)
  }

}