.Opm {
    &-navigation-link,
    &-navigation-link:focus,
    &-navigation-link:hover {
        display: flex;
        text-decoration: none;
    }

    &-navigation-container {
        flex: 1;
        padding: 15px $grid_gutter_width;

        .ProjectManager-aside.flex & {
            border-right: 1px solid $grey_200;
        }
    }

    &-navigation-container-flex {
        width: 100%;
        padding: 15px calc($grid_gutter_width / 2.5);
        border-right: 1px solid $grey_200;

        &.active {
            background-color: white!important;
            border-right: none;
        }

        .product-type-icon {
            margin-right: 6px;
        }

        .product-name {
            margin-right: 6px;
        }

        .ProductNavigationElement-more-actions-menu-wrapper {
            margin-left: auto;
            padding: 0;
            width: 16px;
            height: 16px;

            .MoreActionsMenu-menu-toggle-button {
                border: none;
                background: transparent;
                margin-left: auto;
                display: initial;
                padding: 0;
                width: auto;
                height: auto;

                &:focus {
                    outline: none;
                    box-shadow: none;
                }

                .Glyph {
                    fill: var(--gray-600)!important;
                }

            }
        }
    }

    /* stylelint-disable */

    // NOTE Because we are leveraging React Router active class we need to
    //   target the child element.
    &-navigation-selected > &-navigation-container {
        background: linear-gradient(-90deg, var(--white) 98%, $blue_300 2%);
        box-shadow: 1px 0 0 var(--white);
    }
    /* stylelint-enable */

    &-navigation-status-heading {
        @extend .Opm-small-heading;
        bottom: 0;
        left: 5px;
        position: relative;

        .Opm-navigation-container-flex & {
            padding-left: 16px;

            .Icons-status {
                margin-right: 6px;
            }
        }
    }

    &-navigation-version {
        @extend .Opm-text-light;
        margin: 0;
        margin-bottom: 3.5px;

        .Opm-navigation-container-flex & {
            padding-left: 21px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 274px;
            color: var(--gray-600);
            margin-bottom: 5px;
        }
    }

    &-navigation-format {
        @extend .Opm-text-light;
        line-height: 1;
        margin: 0;
        margin-bottom: 5px;

        &:only-child {
            margin-bottom: 0;
        }

        .Opm-navigation-container-flex & {
            font-size: 14px;
            line-height: 18px;
            display: flex;
        }

        .Opm-navigation-container-flex.active & {
            font-weight: 500;
        }

        .ProjectNavigation-product-wrapper.project-head & {
            font-weight: 500;
        }
    }
}