@import './config';

$lineNumbersWrapperWidth: 3.5rem;
$codeLang: js ts html md vue css sass scss less stylus go java c sh yaml py docker dockerfile makefile;


.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;
    .token {
      &.deleted {
        color: #EC5975;
      }
      &.inserted {
        color: $accentColor;
      }
    }
  }
}

.content {
  pre, pre[class*="language-"] {
    line-height: 1.4;
    padding: 1.25rem 1.5rem;
    margin: 0.85rem 0;
    background-color: $codeBgColor;
    border-radius: 6px;
    overflow: auto;
    code {
      font-size: 0.74rem;
      color: #525252;
      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;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 1.4;
    .highlighted {
      background-color: rgba(0, 0, 0, 66%);
    }
  }
  pre, pre[class*="language-"] {
    background: transparent;
    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);
  }
  &:not(.line-numbers-mode) {
    .line-numbers-wrapper {
      display: none;
    }
  }
  &.line-numbers-mode {
    .highlight-lines .highlighted {
      position: relative;
      &:before {
        content: ' ';
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
        display: block;
        width: $lineNumbersWrapperWidth;
        height: 100%;
        background-color: rgba(0, 0, 0, 66%);
      }
    }
    pre {
      padding-left: #{$lineNumbersWrapperWidth + 1rem} ; 
      vertical-align: middle;
    }
    .line-numbers-wrapper {
      position: absolute;
      top: 0;
      width: $lineNumbersWrapperWidth;
      text-align: center;
      color: rgba(27,31,35,.3);
      padding: 1.25rem 0;
      line-height: 1.4;
      br {
        user-select: none;
      }
      .line-number {
        position: relative;
        z-index: 4;
        user-select: none;
        font-size: 0.85em;
      }
    }
    &::after {
      content: '';
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: $lineNumbersWrapperWidth;
      height: 100%;
      border-radius: 6px 0 0 6px;
      // border-right: 1px solid rgba(0, 0, 0, 66%);
      background-color: $codeBgColor;
    }
  }
}


@each $lang in $codeLang {
  div[class~="language-#{$lang}"] { 
    &:before {
      content: '' + $lang;
    }
  }
}

div[class~="language-javascript"] {
  &:before {
    content: "js";
  }
}

div[class~="language-typescript"] {
  &:before {
    content: "ts";
  }
}

div[class~="language-markup"] {
  &:before {
    content: "html";
  }
}

div[class~="language-markdown"] {
  &:before {
    content: "md";
  }
}

div[class~="language-json"]:before {
  content: "json";
}

div[class~="language-ruby"]:before {
  content: "rb";
}

div[class~="language-python"]:before {
  content: "py";
}

div[class~="language-bash"]:before {
  content: "sh";
}

div[class~="language-php"]:before {
  content: "php";
}