@import "../../Shared/variables.scss";

.nav-menu-btn,
.nav-menu {
  display: none;
}

.nav-menu {
  padding: 48px 30px;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 72px;
  left: 0;
  background-color: #fff;

  &__pages {
    display: flex;
    flex-direction: column;
    gap: 26px;

    &-item,
    &-item_active {
      a {
        font-size: 24px;
        font-weight: 500;
      }
    }

    &-item_active {
      a {
        color: $light-blue;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .nav-menu-btn {
    display: flex;
  }

  .nav-menu {
    display: block;
  }
}

@media screen and (max-width: 550px) {
  .nav-menu {
    padding: 40px 16px;
  }
}
