.#{prefix(null, 'toc')} {
  width: 90vw;
  padding: 30px 20px 0 20px;
  color: color('river-bed');
  background: color('white');

  &-toolbar {
    display: none;
    position: sticky;
    top: 80px;
    width: 0;
    max-height: 100vh;
    margin-left: 30px;
    margin-top: 35px;

    @include respond-to('medium') {
      display: block;
      max-height: calc(100vh - 200px);
    }
  }

  &-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  &-scroll-container {
    overflow-y: scroll;
    margin-top: 20px;
    @include scrollbar;

    @include respond-to('medium') {
      max-height: calc(100vh - 300px);
    }

    h3 {
      position: sticky;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      transition: 0.4s;
    }

    ul > li {
      a {
        display: block;
        padding-bottom: 20px;
        font-size: 13px;
        line-height: 1.6rem;
        font-weight: bold;
        line-height: 1rem;
        color: currentColor;
      }
    }

    /* Second level (h2) and greater */
    ul > li > ul {
      padding-left: 10px;
      text-transform: none;

      li a {
        font-weight: normal;
      }
    }
  }

  &-toggle {
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 50vw;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 45px;
    font-family: $fontFamilyHeadline;
    white-space: nowrap;
    background: color('white');
    box-shadow: 0 5px 20px -5px transparentize(color('black'), 0.75);

    @include respond-to('medium') {
      display: none;
    }

    svg {
      width: 1.2em;
      height: 1.2em;
      margin-left: 10px;

      @include respond-to('medium') {
        transform: rotate(-90deg);
      }
    }
  }
}
