$sidebar-border-color: #dee2e6;

$sidebar-hover-border-color: #66bb6a;

.sidebar {
  border-right: 1px solid $sidebar-border-color;
  background-color: rgba(67,160,71,.03);
  padding-top: 40px;
  padding-left: 1.5rem;

  li {
    font-size: $font-size-base * .95;
  }

  h4 {
    padding-right: 1rem;
  }

  ul.sidebar-nav {
    list-style-type: none;
    padding: 0;

    li {
      &.sidebar-nav-heading {
        padding: 10px 0;
        margin: 0;
        display: block;
        font-size: 16px;
        font-weight: $font-weight-light;
      }

      ul {
        li {
          a {
            color: #495057;
          }
        }
      }

      a {
        padding: 4px 1rem 4px 0;
        display: block;
        color: #222;
        font-weight: $font-weight-normal;

        &:focus {
          text-decoration: none;
        }

        &:active,
        &:hover {
          border-right: 4px solid $sidebar-hover-border-color;
          text-decoration: none;
        }

        .caret {
          float: right;
          margin-top: 8px;
          margin-right: 0px;
        }

      }

      &.active {
        a {
          border-right: 4px solid $sidebar-hover-border-color;
          font-weight: $font-weight-bold;
        }
      }
    }

    ul.sidebar-nav {
      padding-left: 10px;
    }
  }

  select {
    padding: 3px 4px;
    border: 2px solid $sidebar-border-color;
    border-radius: 3px;
    width: 80%;
  }
}

.sidebar-toggle {
  margin-top: 50px;
}

@media (max-width: 991px) {
  .right-sidebar {
    display: none;
  }
}

@media (min-width: 992px) {
  .sidebar-toggle {
    display: none;
  }

  .sidebar {
    &.collapse {
      display: block;
    }
  }

  .sticky-sidebar {
    @supports (position: sticky) {
      position: sticky;
      top: 50px; // equals height of navbar.
      height: calc(95vh);
      overflow-y: auto;
    }
  }
}

.right-sidebar {
  border-left: 1px solid $sidebar-border-color;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1em;

  .gh-links {
    padding-left: 0;
    list-style-type: none;
    li {
      padding-bottom: .4rem;
    }
  }

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

.page-toc {
  padding-left: 0;
  list-style-type: none;

  li {
    margin-top: .3rem;
    line-height: 1.7;
    font-size: $font-size-base * .95;
    a {
      color: #444;
    }
  }
}

.page-toc-sublist {
  padding-left: 1em;
  list-style-type: none;

  li {
    line-height: 1.7;
    a {
      color: #666;
    }
  }
}