.page-contents {
  color: #424242;
  font-size: 14px;

  > *:first-child {
    margin-top: 0;
  }

  @at-root .body--dark & {
    color: #FFF;
  }

  // ---------------------------------
  // LINKS
  // ---------------------------------

  a {
    color: $blue;

    &.is-internal-link.is-invalid-page {
      color: $red-8;

      @at-root .body--dark & {
        color: $red-2;
      }
    }

    &.is-external-link {
      padding-right: 3px;

      &::after {
        font-family: 'Line Awesome Free';
        font-size: 24px/1;
        padding-left: 3px;
        display: inline-block;
        content: "\f35d";
        color: $grey-5;
        text-decoration: none;
      }
    }

    @at-root .body--dark & {
      color: $blue-2;
    }
  }

  // ---------------------------------
  // HEADERS
  // ---------------------------------

  h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    position: relative;
    line-height: normal;

    &:first-child {
      padding-top: 0;
    }

    &:hover {
      .toc-anchor {
        display: block;
      }
    }
  }

  P + h2 {
    margin-top: 12px;
  }

  h1 {
    font-size: 3em;
    font-weight: 500;
    padding: 12px 0;
  }
  h2 {
    font-size: 2.4em;
    padding: 12px 0;
  }
  h3 {
    font-size: 2em;
    padding: 12px 0;
  }
  h4 {
    font-size: 1.75em;
  }
  h5 {
    font-size: 1.5em;
  }
  h6 {
    font-size: 1.25em;
  }

  .toc-anchor {
    display: none;
    position: absolute;
    right: 1rem;
    bottom: .5rem;
    font-size: 1.25rem;
    text-decoration: none;
    color: #666;
  }

  // ---------------------------------
  // PARAGRAPHS
  // ---------------------------------

  p {
    padding: 1rem 0 0 0;
    margin: 0;

    @at-root .page-contents > div > p:first-child {
      padding-top: 0;
    }
  }

  // ---------------------------------
  // BLOCKQUOTES
  // ---------------------------------

  blockquote {
    padding: 0 1rem 1rem 1rem;
    background-color: $blue-grey-1;
    border-left: 55px solid $blue-grey-5;
    border-radius: .5rem;
    margin: 1rem 0;
    position: relative;

    @at-root .body--dark & {
      background-color: $blue-grey-9;
    }

    &::before {
      display: inline-block;
      font: normal normal normal 24px/1 "Material Design Icons", sans-serif;
      position: absolute;
      margin-top: -12px;
      top: 50%;
      left: -38px;
      color: rgba(255, 255, 255, .7);
      content: "\F0757";
    }

    > p:first-child .emoji {
      margin-right: .5rem;
    }

    &.valign-center > p {
      display: flex;
      align-items: center;
    }

    &.is-info {
      background-color: $blue-1;
      border-color: $blue-3;
      color: $blue-9;

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

      code {
        background-color: $blue-1;
        color: $blue-8;
      }

      @at-root .body--dark & {
        background-color: $blue-9;
        color: $blue-5;
        border-color: $blue-5;
      }
    }
    &.is-warning {
      background-color: $orange-1;
      border-color: $orange-3;
      color: darken($orange-9, 10%);

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

      code {
        background-color: $orange-1;
        color: $orange-8;
      }

      @at-root .body--dark & {
        background-color: darken($orange-9, 5%);
        color: $orange-1;
        border-color: $orange-5;
        box-shadow: 0 0 2px 0 $grey-9;
      }
    }
    &.is-danger {
      background-color: $red-1;
      border-color: $red-3;
      color: $red-9;

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

      code {
        background-color: $red-1;
        color: $red-8;
      }

      @at-root .body--dark & {
        background-color: $red-9;
        color: $red-1;
        border-color: $red-5;
      }
    }
    &.is-success {
      background-color: $green-1;
      border-color: $green-3;
      color: $green-9;

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

      code {
        background-color: $green-1;
        color: $green-8;
      }

      @at-root .body--dark & {
        background-color: $green-9;
        color: $green-5;
        border-color: $green-5;
      }
    }
  }

  // ---------------------------------
  // LISTS
  // ---------------------------------

  ol, ul:not(.tabset-tabs) {
    padding-top: 1rem;
    width: 100%;

    @at-root .is-rtl & {
      padding-left: 0;
      padding-right: 1rem;
    }

    li > ul, li > ol {
      padding-top: .5rem;
      padding-left: 1rem;

      @at-root .is-rtl & {
        padding-left: 0;
        padding-right: 1rem;
      }
    }

    li + li {
      margin-top: .5rem;
    }

    &.links-list {
      padding-left: 0;
      list-style-type: none;

      @at-root .is-rtl & {
        padding-right: 0;
      }

      li {
        background-color: $grey-1;
        background-image: linear-gradient(to bottom, #FFF, $grey-1);
        border-right: 1px solid $grey-3;
        border-bottom: 1px solid $grey-3;
        border-left: 5px solid $grey-4;
        box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
        padding: 1rem;
        border-radius: 5px;
        font-weight: 500;

        @at-root .is-rtl & {
          border-left-width: 1px;
          border-right-width: 5px;
        }

        &:hover {
          background-image: linear-gradient(to bottom, #FFF, lighten($blue-1, 4%));
          border-left-color: $blue-5;
          cursor: pointer;

          @at-root .is-rtl & {
            border-left-color: $grey-3;
            border-right-width: $blue-5;
          }
        }

        &::before {
          content: '';
          display: none;
        }

        > a {
          display: block;
          text-decoration: none;
          margin: -1rem;
          padding: 1rem;

          > em {
            font-weight: 400;
            font-style: normal;
            color: $grey-7;
            display: inline-block;
            padding-left: .5rem;
            border-left: 1px solid $grey-4;
            margin-left: .5rem;

            &.is-block {
              display: block;
              padding-left: 0;
              margin-left: 0;
              border-left: none;
            }
          }
        }

        > em {
          font-weight: 400;
          font-style: normal;
        }

        @at-root .body--dark & {
          background-color: $grey-1;
          background-image: linear-gradient(to bottom, lighten($grey-9, 5%), $grey-9);
          border-right: 1px solid $grey-9;
          border-bottom: 1px solid $grey-9;
          border-left: 5px solid $grey-7;
          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);

          @at-root .body--dark.is-rtl & {
            border-left-width: 1px;
            border-right-width: 5px;
          }

          &:hover {
            background-image: linear-gradient(to bottom, lighten($grey-9, 2%), darken($grey-9, 3%));
            border-left-color: mc('indigo', '300');
            cursor: pointer;

            @at-root .body--dark.is-rtl & {
              border-left-color: $grey-9;
              border-right-width: mc('indigo', '300');
            }
          }
        }
      }
    }

    &.grid-list {
      margin: 1rem 0 0 0;
      background-color: #FFF;
      border: 1px solid $grey-3;
      padding: 1px;
      display: inline-block;
      list-style-type: none;

      @at-root .body--dark & {
        background-color: #000;
        border: 1px solid mc('grey', '800');
      }

      li {
        background-color: $grey-1;
        padding: .6rem 1rem;
        display: block;

        &:nth-child(odd) {
          background-color: mc('grey', '100');
        }

        & + li {
          margin-top: 0;
        }

        &::before {
          content: '';
          display: none;
        }

        @at-root .body--dark & {
          background-color: $grey-9;

          &:nth-child(odd) {
            background-color: darken($grey-9, 5%);
          }
        }
      }
    }
  }

  ul:not(.tabset-tabs):not(.contains-task-list) {
    list-style: square;
  }
  ol, ul:not(.tabset-tabs) {
    > li {
      position: relative;
      > p {
        display:inline-block;
        vertical-align:top;
        padding-top:0;
      }
    }
  }

  // ---------------------------------
  // CODE
  // ---------------------------------

  // code {
  //   background-color: mc('indigo', '50');
  //   padding: 0 5px;
  //   color: mc('indigo', '800');
  //   font-family: 'Roboto Mono', monospace;
  //   font-weight: normal;
  //   font-size: 1rem;
  //   box-shadow: none;

  //   &::before, &::after {
  //     display: none;
  //   }

  //   @at-root .theme--dark & {
  //     background-color: darken(mc('grey', '900'), 5%);
  //     color: mc('indigo', '100');
  //   }
  // }

  pre.codeblock {
    border: none;
    border-radius: 5px;
    box-shadow: initial;
    background-color: $dark-5;
    padding: 1rem;
    margin: 1rem 0;
    overflow: auto;

    @at-root .body--dark & {
      background-color: $dark-5;
    }

    > code {
      background-color: transparent;
      padding: 0;
      color: #FFF;
      box-shadow: initial;
      display: block;
      font-size: .85rem;
      font-family: 'Roboto Mono', monospace;

      &:after, &:before {
        content: initial;
        letter-spacing: initial;
      }
    }

    &.line-numbers {
      counter-reset: linenumber;
      padding-left: 3rem;

      > code {
        position: relative;
        white-space: inherit;
      }

      .line-numbers-rows {
        position: absolute;
        pointer-events: none;
        top: 0;
        font-size: 100%;
        left: -3.8em;
        width: 3em;
        letter-spacing: -1px;
        border-right: 1px solid #999;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;

        & > span {
          display: block;
          counter-increment: linenumber;

          &:before {
            content: counter(linenumber);
            color: #999;
            display: block;
            padding-right: .8em;
            text-align: right;
          }
        }
      }
    }
  }

  // ---------------------------------
  // LEGACY
  // ---------------------------------

  .align-abstopright {
    width: 100px;
    max-height: 100px;
    border: 2px dashed $red;
    border-radius: 5px;
    padding: 5px;
  }
}

@import 'highlight.js/styles/atom-one-dark-reasonable.css';