@charset “UTF-8”;

// // Styles for rendered markdown in the .main-content container // // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type

.main-content {

flex: 1 0 auto;

line-height: $content-line-height;
counter-reset: sidenote-counter;

ol,
ul,
dl,
pre,
address,
blockquote,
.table-wrapper {
  margin-top: 0.5em;
}

a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:not(.wiki-link):not(.wiki-link-embed-link):not(.sem-tag):not(.stat-tag):not(.anchor-heading):not(.footnote):not(.reversefootnote):after {
    @include fs-3;
    font-family: $mono-font-family;
    position: relative;
    top: -0.5em; // sass variable not working here
    content: "↗";
    color: #aaaaaa;
  }
}

ul,
ol {
  padding-left: 1.5em;
}

li {
  .highlight {
    margin-top: $sp-1;
  }
}

ol {
  list-style-type: none;
  counter-reset: step-counter;

  > li {
    position: relative;

    &::before {
      position: absolute;
      top: 0.2em;
      left: -1.6em;
      color: $grey-dk-000;
      content: counter(step-counter);
      counter-increment: step-counter;
      @include fs-3;

      @include mq(sm) {
        top: 0.11em;
      }
    }

    ol {
      counter-reset: sub-counter;

      li {
        &::before {
          content: counter(sub-counter, lower-alpha);
          counter-increment: sub-counter;
        }
      }
    }
  }
}

ul {
  list-style: none;

  > li {
    &::before {
      position: absolute;
      margin-left: -1.4em;
      color: $grey-dk-000;
      content: "•";
    }
  }
}

.task-list {
  padding-left: 0;
}

.task-list-item {
  display: flex;
  align-items: center;

  &::before {
    content: "";
  }
}

.task-list-item-checkbox {
  margin-right: 0.6em;
}

hr {
  background-color: $separator-color;

  + * {
    margin-top: 0;
  }
}

dl {
  display: grid;
  grid-template: auto / 10em 1fr;
}

dt,
dd {
  margin: 0.25em 0;
}

dt {
  grid-column: 1;
  font-weight: 500;
  text-align: right;
  &::after {
    content: ":";
  }
}

dd {
  grid-column: 2;
  margin-bottom: 0;
  margin-left: 1em;
  blockquote,
  div,
  dl,
  dt,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  li,
  ol,
  p,
  pre,
  table,
  ul,
  .table-wrapper {
    &:first-child {
      margin-top: 0;
    }
  }
}

dd,
ol,
ul {
  dl:first-child {
    dt:first-child,
    dd:nth-child(2) {
      margin-top: 0;
    }
  }
}

.anchor-heading {
  position: absolute;
  right: -$sp-4;
  width: $sp-5;
  height: 100%;
  padding-right: $sp-1;
  padding-left: $sp-1;
  overflow: visible;

  @include mq(md) {
    right: auto;
    left: -$sp-5;
  }

  .anchor-tag {
    @include fs-3;
    display: flex;
    opacity: 0;

    &:hover {
      filter: drop-shadow(0 0 0.7mm $drop-shadow-yellow);
    }
  }
}

.anchor-heading:hover,
h1:hover > .anchor-heading,
h2:hover > .anchor-heading,
h3:hover > .anchor-heading,
h4:hover > .anchor-heading,
h5:hover > .anchor-heading,
h6:hover > .anchor-heading {
  .anchor-tag {
    opacity: 1;
  }
}

summary {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin-top: 0.25em;
  margin-bottom: 0.25em;

  &:first-child {
    margin-top: $sp-2;
  }

  + table,
  + .table-wrapper,
  + .code-example,
  + .highlighter-rouge {
    margin-top: 1em;
  }

  + p {
    margin-top: 0;
  }
}

// from: 
//  - https://codepen.io/jimmycow/pen/LmjVaz
//  - https://codepen.io/JoeHastings/pen/MOdRVm
blockquote {
  @include fs-3;
  font-family: 'Special Elite', cursive;
  max-width: $content-width;
  // line-height: 1.4;
  position: relative;
  margin: 0;
  padding: $sp-2;

  border-left: $sp-1 solid $blockquote-border-color;

  & p {
    padding-left: $sp-6;
  }

  &:before {
    @include fs-10;
    font-family: 'Special Elite', cursive;
    position: absolute;
    color: $blockquote-quote-color;
    width: 4rem;
    height: 4rem;

    font-family: 'Special Elite', cursive;
    content: '“';
  }
}

.footnotes {
  border-top: double $separator-color;
}

.footnote, .reversefootnote {
  color: $wiki-link-color;
}

// Sidenotes
// more on sidenote implementation: https://www.gwern.net/Sidenotes

// right-sidenote
.rsn {
  @include sidenote-container;
  display: none;
  word-wrap: break-word;

  @include mq(lg) {
    display: block;
    float: right;
    clear: right;

    margin-right: -$content-sidenote-width;
    width: $content-sidenote-width;
    margin-top: $sp-1;
    margin-bottom: 0;
    font-size: $font-size-2;
    // line-height: 1.3;
    vertical-align: baseline;
    position: relative;
  }
}

// left-sidenote
.lsn {
  @include sidenote-container;
  display: none;
  word-wrap: break-word;

  @include mq(lg) {
    display: block;
    float: left;
    clear: left;

    margin-left: -$content-sidenote-width;
    width: $content-sidenote-width;
    margin-top: $sp-1;
    margin-bottom: 0;
    font-size: $font-size-2;
    // line-height: 1.3;
    vertical-align: baseline;
    position: relative;
  }
}

// all sidenotes
.sidenote-toggle:checked + .rsn,
.sidenote-toggle:checked + .lsn {
  display: block;
  float: left;
  left: 1rem;
  clear: both;
  width: 95%;
  margin: 1rem 2.5%;
  vertical-align: baseline;
  position: relative;
}

label.sidenote-toggle:not(.sidenote-number) {
  display: inline;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

input.sidenote-toggle {
  display: none;
}

label.sidenote-number {
  display: inline;
}

label.sidenote-toggle:not(.sidenote-number) {
  display: none;
}

.sidenote-number:after,
.rsn:before,
.lsn:before {
  position: relative;
  vertical-align: baseline;
}

.sidenote-number:after {
  content: counter(sidenote-counter);
  color: $wiki-link-color;
  cursor: pointer;
  font-size: $font-size-2;
  top: -$sp-1-75;
  left: $sp-0-75;
  padding-right: $sp-0-75;
}

.rsn:before,
.lsn:before {
  content: counter(sidenote-counter) " ";
  font-size: $font-size-2;
  top: -$sp-2;
}

// blockquote .rsn,
// blockquote .lsn {
//   margin-right: -82%;
//   min-width: 59%;
//   text-align: left;
// }

.rsn > code,
.lsn > code {
  font-size: $font-size-2;
}

}