@import "../../shared/ui/variables.scss";

.navbar {
  padding: 15px 90px;
  // padding: 15px;
  width: 100%;
  // height: 78px;
  position: fixed;
  z-index: 10005;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 4px 6px #0000001a;
  margin-bottom: 40px;

  &__logo {
    display: flex;
    align-items: center;
    gap: 10px;

    &_last {
      // min-width: 78px;
      // max-width: 78px;
      // height: 100%;

      margin-top: 30px;
      height: 120px;
      width: 120px;
      display: inline-block;
      margin-right: 10px; 
      object-fit: cover;
    }
  }

  &__links {
    height: 40%;
    display: flex;
    gap: 60px;
  }

  &__link,
  &__link_active {
    color: $black;
    opacity: 0.5;
    font-size: 16px;
    font-weight: 500;
  }

  &__link_active {
    opacity: 1;
    font-weight: 800;
    // border-bottom: 2px solid black;
  }

  &__lang-and-auth {
    display: flex;
    align-items: center;
    gap: 25px;
  }

  &__menu {
    display: none;
  }

  .nav-menu {
    display: none;
  }
}

@media screen and (max-width: 1220px) {
  .navbar {
    // padding: 0 60px;

    &__links {
      gap: 40px;
    }
  }
}

@media screen and (max-width: 1024px) {
  .navbar {
    padding: 0 30px;

    &__links {
      gap: 25px;
    }

    &__lang-and-auth {
      gap: 10px;
    }
  }
}

@media screen and (max-width: 900px) {
  .navbar {
    height: 72px;

    &__links,
    &__lang-and-auth {
      display: none;
    }

    &__menu {
      display: flex;
    }

    .nav-menu {
      display: flex;
    }
  }
}

@media screen and (max-width: 550px) {
  .navbar {
    padding: 0 16px;
  }
}