.secondary-navigation {
    max-width: 100%;
    margin: 12px auto 0;
    border-bottom: 1px solid $border-color;

    z-index: 1240;

    #page-site-index & {
        display: flex;
        justify-content: center;
        border-bottom: 0;

        padding: 0 20px 0;
        margin: 0 auto -10px;
        position: sticky;
        top: $navbar-height + 10px;

        width: max-content;
        max-width: 100%;
        border-radius: 40px;

        background-color: $container-bg;
        box-shadow: $box-shadow-md;
    }

    #page-site-index.theme-dark & {
        background-color: $dm-gray-100;
    }

    .theme-dark & {
        border-color: $dm-border-color;
    }

    &+.rui-course-header {
        margin-top: 20px;
    }

    .navigation {
        .nav-tabs {
            .nav-link {
                padding: 0;
                margin-right: 16px;
                font-size: $font-size-sm;
                border-radius: $btn-border-radius;

                &.active {
                    background-color: transparent;
                    color: $link-color;

                    .theme-dark & {
                        background-color: transparent;
                        color: $dm-body-color-light;
                    }
                }

                &:hover {
                    background-color: transparent;
                    color: $gray-800;

                    .theme-dark & {
                        background-color: transparent;
                        color: $dm-gray-800;
                    }

                }
            }
        }
    }
}