.Opm {

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

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

    /* 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, $white 98%, $blue_300 2%);
        box-shadow: 1px 0 0 $white;
    }
    /* stylelint-enable */

    &-navigation-status-heading {
        @extend %opm-small-heading;

        bottom: 2px;
        left: 5px;
        position: relative;
    }

    &-navigation-version {
        @extend %opm-text-light;

        margin: 0;
        margin-bottom: 3.5px;
    }

    &-navigation-format {
        @extend %opm-text-light;

        line-height: 1;
        margin: 0;
        margin-bottom: 5px;

    }

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

}