.offcanvas-lg {
    overflow-y: scroll;
    @include media-breakpoint-up(lg) {
        position: fixed;
        height: calc(100% - 56px); // 56px = navbar height.
        background-color: $gray-700 !important;
    }
}

.offcanvas-body {
    padding-top: 1rem !important;
    padding-left: 0;
    padding-right: 0;
    background-color: $gray-700 !important;
}

.offcanvas-header {
    flex-shrink: 0;
    height: 56px !important;
    background-color: transparent;
}

.sidebar-menu {
    @include list-unstyled();
    width: 100%;
}

.sidebar {
    width: $offcanvas-horizontal-width;
}

.sidebar-panel {
    margin-bottom: 20px;
}

.sidebar-title {
    letter-spacing: 1px;
    display: block;
    font-size: 12px;
    padding: 0 20px 10px;
    text-transform: uppercase;
    color: $gray-600;
    text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3);

    &:hover,
    &:focus {
        text-decoration: none;
        color: $gray-600;
    }

    &:active {
        color: $gray-500;
    }
}

.nav-sidebar {
    padding: 0;
    &-item {
        display: flex;

        &-link {
            display: flex;
            width: 100%;
            align-items: center;
            text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.5);
            color: $gray-200;
            padding: 10px 10px 10px 20px;
            &:hover,
            &:focus {
                color: $white;
                transition: color 0.2s;
                text-decoration: none;
            }
            &-icon {
                color: $gray-500;
                margin-right: 10px;
                flex-shrink: 0;
            }
            &:hover &-icon,
            &:focus &-icon {
                color: $white;
                transition: color 0.2s;
            }
            &-label {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            &:active {
                transition: all 0s;
                text-shadow: none;
                color: $gray-500;
            }
            &:active &-icon {
                color: $gray-500;
                transition: all 0s;
            }
        }
        &-append {
            color: $gray-200;
            flex-shrink: 0;
            display: none;
            align-items: center;
            justify-content: center;
            flex-grow: 0;
            width: 2.5rem;
            &:hover,
            &:focus {
                color: $white;
                transition: color 0.2s;
                text-decoration: none;
            }
            &:active {
                transition: all 0s;
                text-shadow: none;
                color: $gray-500;
            }
        }
        &:hover &-link.hasAppend {
            width: calc(100% - 2.5rem);
        }
        &:hover &-append {
            display: flex;
        }
    }

    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
        text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.5);
        color: #fff;
        background-color: $primary;

        .icon {
            color: #eee;
        }
    }
}