Why are styles not applied to popup in scss?

Question

JavaScript

<div class="header__top">
  <div class="container">
    <div class="header__info info">
      <div class="info__contacts">
        <a href="#" class="info__phone">[phone]</a>
        <a href="" class="info__email">[email protected]</a>
      </div>
      <div class="info__consultation consultation">
        <a href="#consultation__popup" class="consultation__link">Бесплатная консультация</a>
        <div id="consultation__popup" class="mfp-hide consultation__popup">
          Hello
        </div>	
      </div>
    </div>
  </div>
</div>

.header {
    &__top {
        .info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &__contacts {

            }
            &__phone {

            }
            &__email {

            }
            .consultation {
                &__link {
                    color: red
                }
                &__popup {
                    background-color: #fff;
                }
            }
        }
    }
}

Well, respectively, simple javascript, which simply opens a window. The question is, why aren't styles being applied to the consultation__popup class ? But they apply if you take out all scss nesting.