@import './config.less';

.content {
  code {
    color: var(--CdTClr);
    padding: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.85em;
    background-color: var(--CdBgClr);
    border-radius: 0.2em;
    border-color: var(--CdBClr);
    a, a:visited {
      color: var(--CdLClr);
      &:hover {
        color: var(--CdLHClr);
      }
    }
  }

  pre, pre[class*="language-"] {
    line-height: 1.4;
    padding: 1.25rem 1.5rem;
    margin: 0.85rem 0;
    background-color: var(--PrBgClr);
    color: var(--PrTClr);
    border-radius: 0.5rem;
    border-color: var(--PrBClr);
    overflow: auto;
    code {
      color: var(--PrTClr);
      padding: 0;
      background-color: transparent;
      border-radius: 0;
    }
    a, a:visited {
      color: var(--PrLClr);
      &:hover {
        color: var(--PrLHClr);
      }
    }
  }
}

div[class*="language-"] {
  position: relative;
  background-color: var(--CdBgClr);
  border-radius: 0.5rem;
  .highlight-lines {
    user-select: none;
    padding-top: 1.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 1.4;
    .highlighted {
      background-color: var(--CdBgAClr);
      color: var(--CdAClr);
    }
  }
  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: hsla(var(--CdTClr-h), var(--CdTClr-s), var(--CdTClr-l), 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: var(--lineNumbersWrapperWidth);
          height: 100%;
          background-color: var(--CdBgAClr);
          color: var(--CdBgClr);
        }
      }
    }
    pre {
      padding-left: calc(var(--lineNumbersWrapperWidth) + 1rem);
      vertical-align: middle;
    }
    .line-numbers-wrapper {
      position: absolute;
      top: 0;
      width: var(--lineNumbersWrapperWidth);
      text-align: center;
      color: hsla(var(--PrTClr-h), var(--PrTClr-s), var(--PrTClr-l), 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: var(--lineNumbersWrapperWidth);
      height: 100%;
      border-radius: 0.5rem 0 0 0.5rem;
      border-right: 0.1rem solid hsla(var(--PrBClr-h), var(--PrBClr-s), var(--PrBClr-l), 66%);
      background-color: var(--PrBgClr);
    }
  }
}


//for lang in js ts html md vue css sass scss less stylus go java c sh yaml rst rust zsh gdscript esc
//  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";
}
