#docs-sidebar {
  margin-bottom: 30px;
  margin-top: 50px;
  overflow: hidden;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 30px;
  }

  ul.nav.docs-sidenav {
    display: block;
    padding-bottom: 15px;

    li {
      a {
        color: $sidebar-link-color;
        font-size: $sidebar-font-size;
        padding: 10px 0 10px 15px;

        &:before {
          color: $sidebar-link-color-active;
          content: '\203A';
          font-size: $font-size;
          left: 0;
          line-height: 100%;
          opacity: 0.4;
          position: absolute;

          height: 100%;
          width: 8px
        }

        &:focus,
        &:hover {
          background-color: transparent;
          color: $sidebar-link-color-hover;

          &:before {
            opacity: 1;
          }
        }

        &.back {
          &:before {
            content: '\2039';
          }
        }
      }

      // For forcing sub-navs to appear - in the long term, this should not
      // be a thing anymore...
      > ul.nav-visible {
        display: block;
      }
    }

    li.active {
      > a {
        color: $sidebar-link-color-active;

        &:before {
          opacity: 1;
        }
      }

      // Open nested navigations
      > ul.nav {
        display: block;
      }
    }

    // subnav
    ul.nav {
      display: none;
      margin: 10px;

      li {
        margin-left: 10px;

        a {
          padding: 6px 15px;
        }
      }
    }
  }
}