/** Docs – Sidebar **/ .docs{

&__sidebar{
    width:100%;
    margin-bottom:36px;
    padding-bottom:24px;
    border-bottom:1px solid rgba($black,.12);
    @include media-min($sm){
        position:sticky;
        top:128px;
        min-width:240px;
        max-width:240px;
        margin-bottom:0;
        padding-bottom:0;
        border-bottom:0;
    }
    @include media-min($lg){
        min-width:300px;
        max-width:300px;
    }
}
&__search{
    position:relative;
    margin-bottom:18px;
    @include media-min($sm){
        margin-bottom:24px;
    }
    &::before{
        position:absolute;
        top:12px;
        left:12px;
        content:"search";
        @include material-icons(24px);
        @include media-min($sm){
            top:15px;
            left:15px;
        }
    }
    &-input{
        width:100%;
        height:48px;
        padding-left:48px;
        font-size:0.875em;
        border:1px solid rgba($black,.12);
        border-radius: 0;
        outline:none;
        @include placeholder(rgba($black,.6));
        @include media-min($sm){
            height:54px;
            padding-left:50px;
            font-size:.888em;
        }
        &:focus{
            border-color:rgba($black,.18);
            box-shadow: 0 1px 3px rgba($black,0.12),
        }
        &::-webkit-search-cancel-button{
            position:absolute;
            top:15px;
            right:5px;
            width: 24px;
            height: 24px;
            background:url('../img/cancel-grey.svg')no-repeat center;
            background-size:10px;
            -webkit-appearance: none;
        }
    }
    &-results{
        position:absolute;
        top:54px;
        z-index:3;
        width:100%;
        max-height:320px;
        margin:0;
        padding:0;
        overflow:auto;
        list-style-type:none;
        background:$white;
        border:1px solid rgba($black,.12);
        border-top:0;
        box-shadow: 0 3px 9px rgba($black,0.18);
        @include media-min($sm){
            font-size:.777em;
            line-height:150%;
        }
        &-item{
            &--blank{
                padding:8px 15px;
                border-left:3px solid $red;
            }
        }
        &-link{
            display:block;
            padding:8px 15px;
            color:rgba($black,.6);
            text-decoration:none;
            border-left:3px solid transparent;
            @include transition(.25s ease-in-out);
            &:hover{
                color:rgba($black,.87);
                border-color:$yellow;
            }
        }
    }
}
&__nav{
    margin:0;
    padding:0;
    list-style-type: none;
    &-toggle{
        display:block;
        padding:6px 0;
        color:$black;
        font-weight:600;
        font-size:1.125em;
        font-family:$mainFont;
        cursor:pointer;
        @include media-min($sm){
            padding:9px 0;
            font-size:1em;
        }
        &::before{
            display:inline-block;
            margin-right:8px;
            color:$yellow;
            vertical-align:-6px;
            transform:rotate(-90deg);
            content:"expand_more";
            @include material-icons(24px);
            @include transition(transform .25s ease-in-out);
        }
    }
    &-item--active &-toggle::before{
        transform:rotate(0deg);
    }
    &-item--active &-dropdown{
        display:block;
    }
    &-dropdown{
        display:none;
        margin:0;
        padding:0 0 12px 0;
        list-style-type:none;
        &-link{
            position:relative;
            display:block;
            padding:6px 0 6px 29px;
            color:inherit;
            font-size:1em;
            line-height:150%;
            text-decoration:none;
            border-left:3px solid transparent;
            @include transition(.25s ease-in-out);
            @include media-min($sm){
                font-size:.888em;
            }
        }
        &-item--external &-link{
            padding-right:36px;
        }
        &-item--external &-link::after{
            position:absolute;
            top:8px;
            right:8px;
            display:inline-block;
            color:rgba($black,.38);
            content:"open_in_new";
            @include material-icons(20px);
        }
        &-item--active &-link{
            color:rgba($black,.87);
            border-color:rgba($black,.12);
        }
        &-item:hover &-link{
            color:rgba($black,.87);
            border-color:$yellow;
        }
    }
}

}

/** Dark mode styles **/ body.dark-mode .docs{

&__search{
    &::before{
        color:rgba($white,.38);
    }
    &-input{
        color:$white;
        background:transparent;
        border:1px solid rgba($white,.12);
        @include placeholder(rgba($white,.6));
    }
    &-results{
        background-color:$darkGrey;
        border:1px solid rgba($white,.12);
    }
    &-results-link{
        color:rgba($white,.6);
        &:hover{
            color:rgba($white,.87);
        }
    }
}
&__nav {
    &-toggle{
        color:$white;
    }
    &-dropdown{
        &-item--active .docs__nav-dropdown-link{
            color:rgba($white,.87);
            border-color:rgba($white,.12);
        }
        &-item:hover .docs__nav-dropdown-link{
            color:rgba($white,.87);
        }
    }
}

}