.root {
  @apply relative;
}

.mainContainer {
}

.list {
  @apply flex flex-row items-center justify-items-end h-full;
}

.item {
  @apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center;
  &:hover {
    @apply text-accents-8;
  }

  &:last-child {
    @apply mr-0;
  }
}

.dropdownMenu {
  @apply bg-primary fixed right-0 z-50 w-full h-full;

  @screen lg {
    @apply absolute mt-3 right-0 w-screen;
    max-width: 160px;
  }

  & .dropdownMenuContainer {
    @apply flex-col py-6 bg-primary h-full justify-around;

    @screen lg {
      @apply border border-accents-1 shadow-lg py-2 h-auto;
    }
  }

  & .link {
    @apply cursor-pointer px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
  }

  &.off {
    @apply hidden;
  }
}