.course-index {
    @include transition( all .2s $ease-in-out-quad 0s);
    @include border-right(1px solid $border-color-2);
    @include border-radius(3px, 0, 0, 3px);
    display: table-cell; // needed to extend the sidebar the full height of the area

    // provides sufficient contrast for all screen reader-only elements
    .sr {
        color: $black;
        background: $white;
    }

    // reseting bolded fonts for the course index
    .group-heading {
        @extend %t-regular;
    }

    // we're targetting the .class now, instead of the #id
    .accordion {
        @extend %t-copy-sub1;

        .course-navigation {

            .button-chapter {
                @include transition(all $tmg-s3 ease-in-out);
                @include box-sizing(border-box);
                @include linear-gradient(top, $sidebar-chapter-bg-top, $sidebar-chapter-bg-bottom);
                @include transition(background-color .1s linear 0s);
                display: block;
                width: 100%;
                border: 0;
                border-radius: 0;
                padding: 0;
                box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
                background-color: $sidebar-chapter-bg;
                color: $link-color;
                -webkit-font-smoothing: subpixel-antialiased; // this brings back our nice, dark blue

                .group-heading {
                    @extend %t-title6;
                    position: relative;
                    display: block;
                    padding: ($baseline*.75) $baseline ($baseline*.75) ($baseline*2);
                    @include text-align(left);

                    .icon {
                        position: absolute;
                        @include left($baseline);
                        top: $baseline;
                        font-size: $body-font-size;
                        color: $gray-l3;
                    }
                }

                &.is-open {
                    background: $white;
                    box-shadow: none;
                }

                &.active {

                    .group-heading {
                        @extend %t-strong;
                        color: $base-font-color;
                    }
                }

                &:hover,
                &:focus {
                    background: $white;
                }

                &:active {
                    outline: none;
                }
            }

            .chapter-content-container {
                background: $white;

                &.is-open {
                    border-bottom: 1px solid $shadow-l1;
                }

                .chapter-menu {
                    display: none;
                    padding: 0 14px;
                    overflow: hidden;

                    .menu-item {
                        @extend %t-strong;
                        margin: ($baseline/5) 0;
                        background: inherit;

                        a {
                            @extend %t-action3;
                            @extend %t-strong;
                            position: relative;
                            display: block;
                            @include padding(($baseline/4) ($baseline/2));
                            border-radius: ($baseline/4);
                            font-family: $sans-serif;
                            color: $base-font-color;

                            p {

                                &.subtitle {
                                    @extend %t-action4;
                                    @extend %t-regular;
                                    display: block;
                                    margin: 0;
                                    color: $gray-d1;

                                    &:empty {
                                        // hide empty subtitles
                                        display: none;
                                    }

                                    // definitions for proctored exam attempt status indicators
                                    .verified {
                                        color: $success-color;
                                    }

                                    .rejected {
                                        color: $alert-color;
                                    }

                                    .error {
                                        color: $alert-color;
                                    }
                                }
                            }

                            &:hover,
                            &:focus {
                                color: $base-font-color;
                                background: $gray-l5;

                                .subtitle {
                                    color: $gray-d1;
                                }
                            }
                        }

                        &.graded {

                            .menu-icon {
                                @include right($baseline/2);
                                position: absolute;
                                bottom: ($baseline/2);
                                color: $link-color;
                            }
                        }

                        &.active {

                            a {
                                @extend %t-ultrastrong;
                                background: $gray-l4;
                            }
                        }

                        &:last-of-type {
                            padding-bottom: ($baseline/2);
                        }
                    }
                }
            }
        }
    }
}