.nav {
  display: flex;
  justify-content: space-between;
  position: relative;

  @include customZindex(navigation);

  background-color: var(--nav-background-color);
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
  line-height: 2.2rem;
  font-style: normal;
  font-weight: 700;
  height: var(--nav-height);

  > div,
  > a {
    @include flex-align(center, center);
  }

  > a {
    order: 2;
  }

  @include min(desktop) {
    padding: var(--nav-spacing);

    > a,
    > div {
      order: unset;
    }
  }

  img {
    max-width: var(--nav-image-width);
    max-height: 100%;
    height: 2.6rem;
  }
}

.logo {
  justify-content: flex-start;
  width: 16.4rem;
  order: 2;
}

.search {
  button {
    width: 5rem;
    font-size: 2.5rem;
    display: flex;
    justify-content: center;

    svg {
      color: var(--search-icon-color);
    }
  }
}

.navIconContainer{
  order: 4;

  > div:nth-child(1){
    margin-right: 1.2rem;
  }

  > div:nth-child(2){
    margin-right: .8rem;

    @include flex-direction(row);
    @include flex-align(center, center);
  }
}