.nav {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: map-get($z-index, navigation);
  background-color: var(--nav-background-color);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
  line-height: 2.2rem;
  font-style: normal;
  font-weight: 700;
  height: var(--nav-height);

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

  > a {
    order: 2;
  }
  > div:nth-child(2) {
    order: 1;
  }
  > div:nth-child(3) {
    order: 4;
  }
  > div:nth-child(4) {
    order: 3;
    justify-self: flex-end;
  }

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

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

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

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

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

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