.drawer {
    padding: 0;
    background: $drawer-bg-color;

    .drawerheader {
        .icon {
            color: choose-contrast-color($drawer-bg-color);
        }
    }

    nav.list-group {
        border-top: 1px solid #444;
        padding-top: 0.5rem;

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

        .list-group-item {
            border: none;
            color: choose-contrast-color($drawer-bg-color);
            background-color: transparent;
            transition: all 0.5s ease;

            .icon {
                font-size: 20px;
                margin-right: 1rem;
            }

            &.active {
                color: $white;
            }

            &:hover,
            &:focus {
                color: lighten($primary, 30%);
                background-color: rgba($primary, 0.05);
            }
        }
    }
}

body div#page {
    padding: 0;
    div.secondary-navigation {
        max-width: $course-content-maxwidth;
        margin: 0 auto;

        li.nav-item {
            border-bottom: none;
        }
    }
}

[data-region="drawer-toggle"] button {
    &:hover,
    &:focus,
    &:active {
        i.fa {
            animation: shake 1200ms;
        }
    }
    .btn.drawertoggle {
        color: choose-contrast-color($drawer-bg-color);
    }
}

[data-parent-key="mycourses"].list-group-item {
    padding-left: 2.5rem;
}

#theme_boost-drawers-courseindex {
    .courseindex .courseindex-item .completioninfo.completion_incomplete .icon,
    .courseindex .courseindex-item .courseindex-link,
    .courseindex .courseindex-item .courseindex-chevron {
        color: choose-contrast-color($drawer-bg-color);
        &:hover {
            text-decoration: underline;
        }
    }
    .courseindex .courseindex-item.pageitem .completioninfo.completion_incomplete .icon,
    .courseindex .courseindex-item.pageitem a {
        color: choose-contrast-color($primary);

        &:hover {
            color: choose-contrast-color($primary);
            background-color: rgba($primary, 0.05);
        }
    }
    .courseindex .courseindex-item .completioninfo .icon {
        font-size: inherit;
    }
}

@mixin shake ($n) {
    0% {
        transform: rotateZ(0);
    }
    $pos: 1;
    @for $i from 1 through 9 {
        $pos: $pos * -1;
        $m: ($n / $i) * $pos;
        #{ $i * 10% } {
            transform: rotateZ($m * 1deg);
        }
    }
    100% {
        transform: rotateZ(0);
    }
}

@keyframes shake {
    @include shake(30);
}

.drawercontent::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 20px;
    border: 3px solid #c8c8c8;
}

.drawercontent::-webkit-scrollbar-track {
    background: #6e6e6e;
    border-radius: 20px;
}
