/* Same color as Monokai background generated by Pygments */
$back_color: #272822;
/* Code block inner padding */
$pad: 0.5rem;

.codehilite,
.highlight {
  .filename {
    display: block;
    font-family: var(--font-family-monospace);
    font-size: 87.5%; // Same as Bootstrap's <pre> default value
    padding: $pad $pad 0 $pad;
  }

  pre {
    color: inherit;
    padding-bottom: $pad;
    padding-top: $pad;

    code {
      /* Highlight whole lines */
      span.hll {
        display: block;
      }
    }
  }

  code {
    word-wrap: normal;
  }

}

.codehilite {
  pre {
    overflow: inherit;
    table-layout: fixed;
    white-space: pre-wrap;
    width: 100%;

    code {
      word-break: break-word;
    }

    span[id^='coderow-'] {
      display: table-row;
    }
  }

  span.hll {
    margin-left: (-$pad);
    padding-left: $pad;
  }
}

/* Reset Pygments default padding */
%reset-pygment-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Prevents line numbers to be selected */
span.linenos {
  @extend %reset-pygment-padding;

  background-color: inherit;

  /* Gutter's border separating numbers from code */
  box-shadow: -0.05rem 0 var(--secondary) inset;
  color: inherit;

  /* Same as Bootstrap's .user-select-none class */
  user-select: none !important;
  word-break: normal;

  &.special {
    @extend %reset-pygment-padding;
    background-clip: padding-box;
  }

  .codehilite & {
    /* Simulates right margin, which has no effect on table cells */
    border-right: $pad solid transparent;
    /* Prevents the long lines to wrap below the line number gitter on the left */
    display: table-cell;
    padding: 0 $pad;
  }

  .highlight & {

    // Set solid background color to prevent transparent one messing up with
    // code lines sliding under the sticky gutter.
    background-color: $back_color;
    float: left;
    left: (-$pad);
    margin-left: (-$pad);
    margin-right: $pad;
    padding: 0 0 0 $pad*2;
    position: sticky; // Makes the left-side line number gutter sticky.

    &.special {
      background-color: var(--secondary); // Highlight every every Nth line number in the gutter
    }
  }
}

.highlight {

  /* Display line numbers with PyMdown Extensions' syntax:
   * https://facelessuser.github.io/pymdown-extensions/extensions/highlight/#line-number-styles
   * */
  [data-linenos]::before {
    content: attr(data-linenos);
  }

  /* Disable global Bootstrap box-sizing value locally. See:
   * https://github.com/twbs/bootstrap/blob/v4-dev/site/content/docs/4.5/getting-started/introduction.md#box-sizing
   * https://stackoverflow.com/a/53746125
   * */
  &,
  *,
  *::before,
  *::after {
    box-sizing: content-box !important;
  }

  pre {
    code {
      word-break: normal;
    }
  }

}
