.@{contentClass} {
  code {
    color: lighten(@textColor, 20%);
    padding: 0.2rem 0.5rem;
    margin: 0;
    color: #ff502c;
    font-size: .9em;
    background-color: #fff5f5;
    border-radius: 3px;

    .token {
      &.deleted {
        color: #EC5975;
      }

      &.inserted {
        color: @accentColor;
      }
    }
  }
}

.@{contentClass} {
  pre, pre[class*='language-'] {
    line-height: 1.4;
    padding: 1.25rem 1.5rem;
    margin: 0.85rem 0;
    background-color: @codeBgColor;
    border-radius: 3px;
    overflow: auto;

    code {
      color: #ccc;
      padding: 0;
      background-color: transparent;
      border-radius: 0;
    }
  }
}

div[class*='language-'] {
  position: relative;
  background-color: @codeBgColor;
  border-radius: 3px;
  font-size: 16px;

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

    &::-webkit-scrollbar {  
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: #4e5666;
    }

  }

  &::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 + 1;
      vertical-align: middle;
    }

    .line-numbers-wrapper {
      position: absolute;
      top: 0;
      width: @lineNumbersWrapperWidth;
      text-align: center;
      color: rgba(255, 255, 255, 0.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(@codeLang, {
  div[class*="language-@{value}"]:before {
    content: "@{value}";
  }
});

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

@import '~prismjs/themes/prism-tomorrow.css';