.bd-sidebar {
    order: 0;
    background-color: $light;
    border-bottom: 1px solid rgba(0, 0, 0, .1);

    @include media-breakpoint-up(md) {
        @supports (position: sticky) {
            position: sticky;
            top: 4rem;
            z-index: 1000;
            height: subtract(100vh, 4rem);
        }
        border-right: 1px solid rgba(0, 0, 0, .1);
    }

    @include media-breakpoint-up(xl) {
        flex: 0 1 320px;
    }
}

.bd-links {
    margin-right: -15px;
    margin-left: -15px;

    @include media-breakpoint-up(md) {
        display: block !important;
        padding-top: 1rem;
        padding-bottom: 1rem;

        @supports (position: sticky) {
            max-height: subtract(100vh, 4rem);
            overflow-y: auto;
        }
    }
}

.bd-sidenav {
    li {
        width: 100%;
    }
}

.bd-toc-link {
    display: flex;
    align-items: center;
    padding: .25rem 1.5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, .65);
    transition: all 0.5s ease;

    &:hover {
        color: rgba(0, 0, 0, .85);
        text-decoration: none;
    }

    &[aria-expanded="true"] {
        .fa-chevron-down {
            transform: rotate(180deg);
        }
    }
}

.bd-toc-item {
    border-top: 1px solid $border-color;
    padding: 0.5rem 0;

    &:first-child {
        border-top: 0;
    }

    &.active {
        padding-bottom: 1.5rem;

        &:not(:first-child) {
            padding-top: 1rem;
        }

        > .bd-toc-link {
            color: rgba(0, 0, 0, .85);

            &:hover {
                background-color: transparent;
            }
        }
    }
}

.search-header {
    background-color: $light;
    padding: 0.5rem;

    .btn {
      border: solid;
      border-color: #ccd2d7;
      border-width: thin;
      background-color: #fff;

      &:hover {
        background-color: #F2F2F2;
      }
    }
  }

.bd-sidebar .nav {
    > li > a {
        border-left: 2px solid transparent;
        display: block;
        margin: .25rem 1.5rem;
        padding-left: 1rem;
        @include font-size(90%);
        color: rgba(0, 0, 0, .65);

        &:hover {
            background-color: transparent;
            color: $primary;
            text-decoration: none;
        }
    }

    > .active > a,
    > .active:hover > a {
        font-weight: 600;
        color: $primary;
        background-color: transparent;
        border-left-color: $primary;
    }
}