Не применяется часть стилей

document.querySelector('.button-burger').addEventListener('click', (event) => {
  document.querySelector('.section-header').classList.toggle('section-header--active-navigation');
});

.section-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 12;
  background-color: #fff;
  &::before {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    content: '';
  }
  &--active-navigation {
    &::before {
      display: block;
    }
    .main-navigation__inner-wrapper {
      display: flex;
    }
  }
}

<header class="section-outer section-header">
  <div class="section-inner section-inner_wide vertical-indent vertical-indent--small">
    <div class="main-navigation">
      <h1 class="logo">
        <a class="logo__link" href="#" aria-label="Logo"></a>
      </h1>

      <button class="button button--without-background button-burger" aria-label="Toggle navigation">
            <span class="button-burger__line"></span>
            <span class="button-burger__line"></span>
            <span class="button-burger__line"></span>
          </button>

      <div class="main-navigation__inner-wrapper">
        <nav class="page-navigation">
          <ul class="navigation-wrapper">
            <li class="navigation-wrapper__item">
              <a href="#" class="navigation-wrapper__item-link navigation-wrapper__item-link--active">Home</a>
            </li>
            <li class="navigation-wrapper__item">
              <a href="#" class="navigation-wrapper__item-link">Blog</a>
            </li>
            <li class="navigation-wrapper__item">
              <a href="#" class="navigation-wrapper__item-link">Features</a>

          </ul>
        </nav>