@require './config'

.content
  code
    color lighten($textColor, 20%)
    padding 0.25rem 0.5rem
    margin 0
    font-size 0.85em
    background-color rgba(27,31,35,0.05)
    border-radius 3px

.content
  pre, pre[class*="language-"]
    line-height 1.4
    padding 1.25rem 1.5rem
    margin 0.85rem 0
    background transparent
    overflow auto
    code
      color #fff
      padding 0
      background-color transparent
      border-radius 0

div[class*="language-"]
  position relative
  background-color $codeBgColor
  border-radius 6px
  .highlight-lines
    user-select none
    padding-top 1.3rem
    position absolute
    z-index 0
    width 100%
    line-height 1.4
    .highlighted
      background-color rgba(0, 0, 0, 66%)
  pre
    position relative
    z-index 1
  &::before
    position absolute
    z-index 3
    top 0.8em
    right 1em
    font-size 0.75rem
    color rgba(255, 255, 255, 0.4)

div[class="language-js"], div[class="language-javascript"]
  &:before
    content "js"

div[class="language-ts"], div[class="language-typescript"]
  &:before
    content "ts"

div[class="language-html"], div[class="language-markup"]
  &:before
    content "html"

div[class="language-markdown"], div[class="language-md"]
  &:before
    content "md"

div[class="language-vue"]:before
  content "vue"

div[class="language-css"]:before
  content "css"

div[class="language-sass"]:before
  content "sass"

div[class="language-less"]:before
  content "less"

div[class="language-scss"]:before
  content "scss"

div[class="language-stylus"]:before
  content "stylus"

div[class="language-json"]:before
  content "json"

div[class="language-ruby"]:before
  content "rb"

div[class="language-python"]:before
  content "py"

div[class="language-go"]:before
  content "go"

div[class="language-java"]:before
  content "java"

div[class="language-c"]:before
  content "c"

div[class="language-bash"]:before
  content "sh"

div[class="language-yaml"]:before
  content "yaml"