@tailwind components;

@layer components {
  .nav-container {
    @apply relative z-10 flex select-none items-center justify-between gap-33 py-16 pl-16 lg:px-28;

    nav {
      @apply hidden items-center gap-0 pl-0 leading-10 xl:flex;
    }

    .nav-drop-down-container {
      @apply relative cursor-pointer py-20;
    }
  }

  .nav-link {
    @apply px-18;
  }

  .nav-button {
    @apply ml-auto w-48 px-16 font-plex-sans text-25 leading-[150%] text-ui-white xl:hidden;
  }

  .nav-menu {
    @apply fixed left-0 top-0 z-40 flex h-full w-full flex-col overflow-y-scroll bg-black pb-50;
  }

  .nav-menu-open {
    @apply pointer-events-auto flex gap-[1.438rem] opacity-100;
  }

  .nav-menu-closed {
    @apply pointer-events-none opacity-0;
  }

  .nav-menu-logo {
    @apply flex py-16 pl-24;
  }

  .nav-menu-close-button {
    @apply ml-auto mr-18 w-42 px-16 font-plex-sans text-25 leading-[150%] text-ui-white;
  }

  .nav-menu-mobile {
    @apply flex flex-col items-center justify-center;

    .nav-menu-item {
      @apply relative w-full font-plex-sans text-18;
    }
  }

  .nav-menu-mobile-sub-menu {
    @apply w-full;

    li {
      a {
        @apply inline-block leading-loose;
      }
    }
  }

  .nav-menu-mobile-sub-menu-container {
    @apply w-full sm:w-1/2 md:w-1/4;
  }

  .nav-sub-menu-ctas-mobile {
    @apply mt-10 hidden w-full flex-col items-start gap-10 pl-20 group-hover:flex;

    .nav-sub-menu-cta {
      @apply block w-auto px-12 py-6;
    }
  }

  .nav-menu-item-selected {
    @apply hidden;
  }

  .nav-menu-item-children {
    @apply flex flex-col items-center gap-16 rounded-12 bg-fleek-gradient p-12;
  }

  .nav-menu-item-children-link {
    @apply font-plex-sans text-13 font-medium leading-[150%];
  }

  .nav-menu-launch-app {
    @apply mx-auto;
  }

  .nav-sub-menu-container {
    @apply absolute top-full hidden h-auto w-[30vw] min-w-[600px] cursor-default gap-40 rounded-12 border-1 border-ui-mid-grey bg-[#222222cd] backdrop-blur-xl  group-hover:block;
  }

  .nav-sub-menu-wrap {
    @apply flex w-full;
  }

  .nav-sub-menu-main-col {
    @apply flex-1;
  }

  .nav-sub-menu-nav-cols {
    @apply grid grid-cols-2 gap-20 p-20;
  }

  .nav-sub-menu-cta-items {
    @apply grid grid-cols-2 gap-50 p-36 pt-18;
  }

  .nav-sub-menu-nav-col-title {
    @apply pb-20 font-sans text-12 uppercase text-gray-600 dark:text-gray-500;
  }

  .nav-sub-menu-nav-col-list {
    @apply flex flex-col gap-4;

    a {
      @apply text-16 capitalize transition hover:opacity-80;
    }
  }

  .nav-sub-menu-cta {
    @apply relative z-[1] inline-block w-auto cursor-pointer items-center justify-between gap-15 overflow-hidden rounded-2 bg-gray-100 p-12 font-sans text-16 text-gray-900 transition hover:bg-gray-400 hover:text-gray-600;

    > span {
      @apply relative z-[1] inline-block text-16 capitalize transition-transform;
    }
  }

  .nav-sub-menu-side-container {
    @apply w-1/3 border-l-1 border-gray-300 bg-ui-fleek-black p-36;
  }

  a > .nav-menu-mobile-sub-menu-label {
    @apply select-none rounded-5 px-10 hover:bg-gray-900;
  }

  a > .nav-menu-mobile-sub-menu-label,
  .nav-menu-mobile .nav-menu-item > a > .nav-m {
    @apply hover:text-ui-faded-gray;
  }

  .nav-menu-mobile .nav-menu-item:has(> a[href='/docs']) {
    @apply hidden;
  }
}
