// wrap the sidebar links in a vertical scrollable section
// 100% height (minus the height of h1 and sidebar-button)

.sidebar-wrapper {
  min-height: 100vh;
  width: $sidebarWidth;
  z-index: 550;
  position: fixed;
  top: 8px;
  bottom: 8px;
  left: 8px;
  padding:0;
  background: url('/img/topography.png') left top repeat;
  background-attachment: fixed;
}

.sidebar {
  min-height: 100vh;
  z-index: 700;
  width: $sidebarWidth;
  border-right: 1px solid lighten($blue1, 40%);

  // fixed scrollable wrapper for the links
  .sidebar-nav {
    position: fixed;
    top: 12rem;
    bottom: 6.5rem;
    overflow-y: scroll;
    overflow-x: hidden;
    width: $sidebarWidth;
  }
  &.is-scrolled .sidebar-nav {
    top: 8.5rem;
  }

  a {
    @include transition;
  }

  ul {
    margin: 0 auto 0.5em;
    padding: 2rem 0 2rem;
    @include transition;

    li {
      a {
        display: block;
        padding: 0.4em 2vw 0.4em;
        font-size: 1.025rem;
        line-height: 1.333;
        text-transform: capitalize;
        background-color: transparent;
        @include klinicBold;
        @include transition(all, 0.3s, cubic-bezier(0.25,0.1,0.25,1));

        &.active,
        &[state="open"] {
          color: $navyl;
          background: white;

          .ripple span {
            width: 100%;
            opacity: 1;
          }

          & + ul {
            display: block;
          }
        }

        &:hover {
          background: lighten($light2, 5%);
        }
      }

      ul {
        margin: 0;
        padding: 0.75em 0 1.25em;
        display: none;

        li.toctree-12 {
          margin: 0;

          a {
            padding: 0.25em 6.67% 0.25em 13.5%;
            line-height: 1.4;
            color: $navyl;
            font-family: $base;
            font-size: $scalex3;
            border-right: 3px solid white;
            @include transition;

            &:hover {
              color: $navy;
              background: lighten($blue3, 50%);
              border-right: 3px solid lighten($blue2, 12.5%);
            }
          }

          > a.active {
            border-right: 3px solid $navy;
            background: rgba(255,255,255,0.67);
            color: $navy;
          }
        }
      }
    }
  }

  .sidebar-buttons {
    width: $sidebarWidth;
    height: 6.5rem;
    border-top: 1px solid lighten($blue1, 40%);
    border-right: 1px solid lighten($blue1, 40%);
    background: white;
    position: fixed;
    bottom: 0;

    .button-wrap {
      padding: 1rem 1.5rem;
      width: $sidebarWidth;
    }

    .button {
      margin: 0.333em auto;
      display: block;
      padding: .75rem 0;
      min-height: 3.5rem;
      background-color: desaturate(lighten($blue1, 35%), 20%);
      border: 2px solid lighten($blue1, 17.5%);
      color: $blue3;

      &:hover {
        background-color: $blue;
        color: white;
      }

      &:hover {
        background-color: $blue;
        color: white;
      }

      i {
        margin: -0.05em 0.5em 0 -0.667em;
        // color: $blue3;
        font-size: $scalex3;
      }
    }
  }

  .search-container {
    z-index: 1020;
    position: relative;
    padding-top: 1rem;
    margin: 8.5rem 1.5vw 0;
    position: relative;
    @include transition;

    input {
      font-size: 0.75rem;
      width: 100%;
      background: $light1;
      border: none;
      border-bottom: 2px solid lighten($navyl, 33.33%);
      padding: 0.75rem 1vw;
      font-family: $mono;
      color: $navyl;
      @include transition;

      &:focus {
        background: $salmonl;
        color: $navyd;
      }
    }

    .icon {
      position: absolute;
      top: 1.5rem;
      right: 0.5rem;
      color: $navyl;
    }
    
    & > .algolia-autocomplete{
      display: block !important;
      margin: auto;
      width: 98%;
    }
  }
}

.sidebar.is-scrolled {
  ul.sidebar-main {
    padding-top: 2rem;
  }

  .search-container {
    margin-top: 4.75rem;
  }
}

.left-off-canvas-toggle .fa {
  &:before {
    color: $blue3;
  }
  background-color: white;
}

// custom algolia search results
.algolia-autocomplete.algolia-autocomplete-left {
  .ds-dropdown-menu {
    z-index: 1540 !important;
    background-color: white !important;
  }
}