.toolbar {
  padding-left: 8vw;
  padding-right: 8vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-primary);
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  border-bottom: var(--ultimate-color) solid 0.1rem;
  height: 15vh;
}

.toolbarMobile {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: calc(1.8rem * 1.4);
}

.toolbarDesktop {
  display: none;
}

.noShow {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.noShow a {
  padding: 1.2rem 0 1.2rem 1.6rem;
  display: block;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: calc(3.2rem * 1.4);
  border-bottom: var(--ultimate-color) solid 0.1rem;
  list-style-type: none;
  background-color: var(--color-primary);
}

.show {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: var(--color-primary);
}

.noShow .btnx {
  display: flex;
  justify-content: flex-end;
  padding: 5.5vh 8vw;
  border-bottom: none;
}

@media (min-width: 768px) {
  .toolbarMobile {
    margin-top: 0;
    margin-bottom: 0;
  }

  .mobileIconmenu {
    display: none;
  }

  .toolbar {
    align-items: center;
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .toolbarDesktopContainer {
    display: flex;
  }

  .toolbarDesktop {
    display: flex;
    font-style: normal;
    font-size: 1.8rem;
    line-height: calc(1.8rem * 1.1);
    font-weight: 700;

    /* To manage hover instead of use gap in the container */
    padding: 0.5vh 1.8vw;
  }

  .toolbarDesktop::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    filter: blur(0.1rem);
    border-top: solid 0.4rem var(--ultimate-color);
    width: 100%;
    scale: 0 1;
    transition:
      scale 500ms,
      translate 1500ms;
  }

  .toolbarDesktop:has(+ :hover)::after {
    translate: 100%;
  }

  .toolbarDesktop:hover::after {
    scale: 1 1;
  }

  .toolbarDesktop:hover + .toolbarDesktop::after {
    translate: -100%;
  }

  .toolbarDesktop a {
    color: var(--color-alt);
  }

  .toolbarDesktop a:hover,
  .toolbarDesktop a:focus-visible {
    color: var(--action-color);
  }

  .mailIcon {
    margin-top: -0.3rem;
  }

  .mailIcon:hover {
    fill: var(--action-color);
  }

  .pushright {
    margin-left: auto;
  }
}