/* ==========================================================================
   Sidebar
   ========================================================================== */

.docs .sidebar {
  overflow-y: auto;
  top: 0;
  width: 100%;
  position: relative;

  @media (min-width: $screen-md-min) {
    position: fixed;
    width: 284px;
  }
}

.docs .sidebar-offset {
  padding-top: 0px;
  @media (min-width: $screen-md-min) {
    width: calc(100% - 284px);
    margin-left: 284px;
  }
}

/* Sidebar
   ========================================================================== */

.docs .sidebar-search {
  margin: 20px 12px;

  .form-control {
    border: 1px solid $white;

    &:focus {
      border-color: $accent;
    }
  }
}

/* Sidebar Header
   ========================================================================== */

.docs .sidebar-header {
  background: rgba($primary, .03);
  color: rgba($primary, .8);

  .sidebar-icon {
    color: rgba($primary, .8);
  }
}

/* Sidebar List
   ========================================================================== */

.docs .sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  height: 100%;
  overflow-y: auto;
}

.docs .sidebar li {
  margin-bottom: 0;
}

/* Sidebar list > link
   ========================================================================== */

.docs .sidebar-list .sidebar-link {
  color: rgba(14, 20, 26, .8);
  font-size: 13px;
  font-weight: 600;
  height: auto;
  line-height: 24px;
  padding: 18px 12px;
  font-family: $font-primary;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.docs .sidebar-list .sidebar-link:hover,
.docs .sidebar-list .sidebar-link:focus,
.docs .sidebar-list .sidebar-link-selected,
.docs .sidebar-list .sidebar-link-selected:hover,
.docs .sidebar-list .sidebar-link-selected:focus {
  background: rgba($accent, .1);
  color: $accent;
  font-family: $font-primary;
  font-weight: 600;
  border: none;
  border-radius: 4px;
}

/* Sidebar list > icon
   ========================================================================== */
.docs .sidebar-list .sidebar-icon {
  @include anim(color);
  color: rgba(14, 20, 26, .6);
  display: inline-block;
  margin-right: 12px;
  margin-top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 16px;
}

.docs .sidebar-list .sidebar-link:hover .sidebar-icon,
.docs .sidebar-list .sidebar-link:focus .sidebar-icon,
.docs .sidebar-list .sidebar-link-selected .sidebar-icon {
  color: $accent;
}

/* Sidebar list > child list
   ========================================================================== */
.docs .sidebar-list li .sidebar-list li .sidebar-link {
  padding: 12px 20px 12px 40px;
  font-family: $font-secondary;
  font-size: 13px;
  font-weight: 400;
  line-height: 24px;
  height: auto;

  &:hover
  &.sidebar-link-selected {
    span:not(.sidebar-icon) {
      font-family: $font-secondary;
      font-size: 13px;
      font-weight: 400;
    }
  }

  .sidebar-icon {
    display: none;
  }
}

.docs .sidebar-list li .sidebar-list {
  padding: 0;
  display: none;
}

.docs .sidebar-list li.active .sidebar-list {
  display: block;
}

.docs .sidebar-list li .sidebar-list li:last-child {
  margin-bottom: 0;
}