How to implement this in less?

Question

Less

.navigation {
    float: right;

    &__item {
        display: inline-block;
    }
    &__link {
        font-size: 14px;
        color: #c3c3c3;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
        padding: 0 15px;

        &:hover,
        &:focus,
        &.open {
            color: #f58345;
        }
    }
}

How to write the code correctly so that if the .navigation__item class is added to the .open class, then the .navigation__link becomes the same color as with hover and focus?
And to be more precise, this bootstrap dropdown adds class .open.
I need css to output

.navigation__item.open .navigation__link {color: red}

Answer 1

.navigation {
    &__item.open &__link {
      color: red
    }
}