$toc-width: 240px;
$toc-margin-left: 195px;

// TOC on article pages
.inline-toc {
  line-height: 1.3em;

  a,
  a:link,
  a:visited {
    color: $gray-medium;
    font-weight: normal;

    &:hover,
    &:focus {
      color: $black;
    }
  }
  li li a,
  li li a:link,
  li li a:visited {
    color: $gray-medium;

    &:hover,
    &:focus {
      color: $black;
    }
  }  

  a {
    @include display-flex();
    padding: 0.5em 0;
  }

  .related {
    display: block;

    li a {
      &.active {
        color: $black;
      }
    }
  }

  #toc {
    display: none;

    .toplevel {
      > a {
        font-weight: bold;
        color: $black;

        &.hastoc::after {
          content: '+';
          @include flex(1);
          text-align: right;
        }
      }
    }
  
    //> .toc > li {
    .toplevel {
      &.active {
        .toc {
          display: block;
        }
        > a.hastoc {
          &::after {
            content: '-';
          }
        }
      }
    }
  }

  .toc {
    margin: 0;
    padding: 0;
    border-top: $default-border;

    .toc {
      display: none;
    }

    .toc li {
      padding-left: 1em;
      border-bottom: $default-border; 
    }
  }
}

// Footer at bottom of articles
#cc-info {
  @include display-flex();
  @include align-items(center);
  font-style: italic;
  //font-size: $small-label-size;
  font-size: 0.8em;
  color: lighten($text, 5%);
  .cc-logo img {
    width: 90px;
    height: 32px;
  }
  .last-updated {
    @include flex(1);
  }
}

// Large than mobile.
@media only screen and (min-width: $break-small)  { 
  .inline-toc { 
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: $toc-margin-left;
    width: $toc-width;
    overflow: auto;
    overflow-x: hidden;

    // scroll.js adds and removes the floating class depending on the scroll position.
    &.sticky {
      position: fixed;
    }

    #toc {
      display: block;
    }
  }
  .article-content {
    width: 70%;
    padding-right: 5%;
    border-right: 1px solid $gray-light;
  }
  .cc-logo {
    margin: 0 0 0 auto;
  }
}

// Tablet
@media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { 
  .inline-toc {
    width: $toc-width - 40;
    margin-left: $toc-margin-left - 30;
  }
}

// Phone
@media only screen and (max-width: $break-small)  { 
  .article-content [itemprop="articleBody"] {
    > .collapsible {
      height: 58px;
      overflow: hidden;

      &.active {
        height: auto;
        h2::before {
          content: '-';
        }
      }

      h2 {
        position: relative;
        margin: 0;
        padding: $default-padding - 5 $default-padding  - 5 $default-padding  - 5 0;
        border-top: $default-border;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &::before {
          position: absolute;
          right: 0;
          content: '+';
        }
      }
    }
    .related {
      margin: $default-padding 0;
    }
  }
}