@require "code-theme.styl"

$code-block {
  overflow: auto;
  margin: 20px 0;
  padding: 0;
  font-size 0.95em;
  color: var(--highlight-foreground);
  background: var(--highlight-background);
  line-height: 1.5em;
  transition: all 0.5s ease;

  //&::-webkit-scrollbar {
  //  height: 8px;
  //}
  //
  //&::-webkit-scrollbar-thumb {
  //  border-radius: 5px;
  //  background: rgba(0, 0, 0, 0.2)
  //}
  //
  //&::-webkit-scrollbar-track {
  //  background: transparent;
  //}

}


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

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

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: 1em;
    color: var(--highlight-foreground);
    line-height: 1em;
    margin-bottom: 1em;

    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;
  }
}


.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: 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);
  }

}