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

@mixin reset-font() {
  font-size: $code-font-size !important;
  font-family: $font-family-monospace !important;
  line-height: $code-line-height;
  @media (max-width: 960px) { // <= md
    font-size: $code-font-size-mobile !important;
  }
}

#content {
  div[class*="language-"] {
    position: relative;
    margin: $base-margin-y 0;

    .highlight-lines {
      @include reset-font;
      user-select: none;
      padding-top: $code-padding-y;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      .highlighted {
        background-color: rgba(#000, 70%);
        z-index: 0;
      }
    }

    pre[class*="language-"] {
      padding: $code-padding-y $code-padding-x;
      @include reset-font;

      code {
        @include reset-font;
        position: relative;
        z-index: 1;
      }
    }
    &.line-numbers-mode {
      pre[class*="language-"] {
        @if $code-padding-x < 3em {
          padding-left: 3em;
        }
      }
    }

    .line-numbers-wrapper {
      @include reset-font;
      user-select: none;
      padding-top: $code-padding-y;
      position: absolute;
      top: 0;
      left: 0;
      min-width: 1.5em;
      margin-left: 0.5em;
      text-align: right;
      color: $code-color-line-number;
    }
    &:not(.line-numbers-mode) {
      .line-numbers-wrapper {
        display: none;
      }
    }
  }
}