How do you describe an element's active class in Sass?

Question

Layout

I will give a simple example to make it easier to understand.

<div class="menu">
  <div class="menu__item">
    <a class="menu__link" href="/">Главная</a>
    <span class="menu__img"></span>
  </div>
  <div class="menu__item menu__item_active">
    <a class="menu__link" href="/services/">Услуги</a>
    <span class="menu__description">
      Список доступных услуг.
      <span class="menu__img"></span>
    </span>
  </div>
</div>

We write styles. This is an example and there is no need to focus on it, the main question is below.

.menu {
  position: relative;

  &__item {
    display: block;
    margin-bottom: 5px;
    position: relative;
  }

  &__link {
    display: block;
    font-size: 1rem;
    color: blue;

    &:hover {
      color: red;
    }
  }

  &__img {
    position: absolute;
    width: 10px;
    height: 10px;
    display: none;
  }
}

Question: How would you describe the menu__item_active class so that the link is red and the image has display: block; ?
We need the shortest version possible.

Answer 1

.menu {
  position: relative;

  &__item {
    display: block;
    margin-bottom: 5px;
    position: relative;
  }

  &__link {
    display: block;
    font-size: 1rem;
    color: blue;
  }

  &__img {
    position: absolute;
    width: 10px;
    height: 10px;
    display: none;
  }
  
  //==
  //== Hover & active states
  //== ======================================= ==//
  
  &__link:hover,
  &__link_active {
    color: red;
  }
  
  &__link:hover + &__img,
  &__link_active + &__img {
    display block;
  }
}