aside.sidebar {
    width: $sidebar-width;
    position: fixed;
    left: 0;
    top: 0;
    background-color: $sidebar-bg;
    transition: opacity 400ms, transform 300ms;
    padding: $content-padding + 1 $content-padding $content-padding - 0.75 $content-padding;
    overflow-y: auto;
    height: 100%;
    z-index: $z-index-header - 1;
    margin: 0;
    border: none;

    @include breakpoint-min(breakpoints(xl)) {
        padding-top: $content-padding + $header-height;
    }

    @include breakpoint-max(breakpoints(xl)) {
        transform: translate3d(-100%, 0, 0);
        z-index: $z-index-header + 1;
    }

    & > .toggle-icon {
        @include breakpoint-min(breakpoints(xl)) {
            display: none;
        }

        position: absolute;
        top: 0;
        right: 0;
    }
}

.sidebar-active {
    .sidebar {
        @include breakpoint-min(breakpoints(xl)) {
            transform: translate3d(-100%, 0, 0);
            opacity: 0;
            pointer-events: none;
        }

        @include breakpoint-max(breakpoints(xl)) {
            transform: translate3d(0, 0, 0);
            opacity: 1;
            pointer-events: all;
            box-shadow: 0.25rem 0 0.75rem rgba($black, 0.1);
        }
    }
}

.sidebar__title {
    margin: -0.25rem 0 1.5rem;
    line-height: 100%;

    & > a {
        line-height: 100%;
        color: $docs-item-main-color;
        font-size: 0.9rem;
        text-transform: uppercase;
        font-weight: $font-weight-medium;

        &:hover {
            color: $docs-item-main-color;
        }
    }
}
 
.search {
    margin-bottom: 0.8rem;
}

.search__text {
    appearance: none;
    border: 1px solid $search-border-color;
    height: $search-height;
    background-color: $white;
    color: $search-color;
    font-size: 0.85rem;
    width: 100%;
    padding: 0 1rem 0.1rem 2.6rem;
    background: $search-icon no-repeat center left 1rem;
    background-color: $search-bg;
    border-radius: $border-radius;

    &:focus {
        border-color: $search-focus-border-color
    }
}

.docs {
    margin-right: -0.65rem;

    ul {
        list-style: none;
        padding: 0;
        margin: 0.5rem 0 0.5rem 0;
        font-size: .90rem;

        & > li {

            margin: 0.5rem 0 0.5rem 0;

            & > a {
                &, & > code {
                    all: unset;
                }

                &:hover {
                    border: 0;
                    cursor: pointer;
                }
            }

            &.active {

               & > a {
                  color: $docs-item-main-active-color;
                  font-weight: $font-weight-medium;
               }
            }

            &.active-parent {

               & > a {
                  color: $docs-item-sub-color;
                  font-weight: $font-weight-medium;
               }
            }

            & > ul { 

               & > li {
                  margin: 0.5rem 0 0.5rem 0.5rem;
                  font-size: 0.85rem;
               }
               
            }
        }
    }
}