.c-navigationMain {
  @apply bg-gray-50 p-4;
}

.c-navigationMain__list {
  &[data-level="1"] {
    @apply flex flex-row;
  }

  &[data-cols] {
    @apply grid gap-x-12;
  }

  &[data-cols="2"] {
    @apply sm:grid-cols-2;
  }

  &[data-cols="3"] {
    @apply sm:grid-cols-2 md:grid-cols-3;
  }

  &[data-cols="4"] {
    @apply sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4;
  }

  &[data-cols="5"] {
    @apply sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5;
  }
}

.c-navigationMain__listHeading {
  &:not([data-level="1"]) {
    @apply text-gray-300 text-xs uppercase font-bold border-b block mb-2 pb-1;
  }
}

.c-navigationMain__listItem {
  @apply inline-block;
}


.c-navigationMain__subItemsWrapper {
  max-width: calc(100% - 2rem);

@screen sm {
  max-width: calc(100% - 4rem);
}

&[data-level="1"] {
   @apply transition duration-500 w-80 p-12 bg-white shadow-2xl rounded-lg opacity-0 invisible pointer-events-none absolute;
 }

&[data-level="1"]&[data-cols="2"] {
   @apply w-[40rem];
 }

&[data-level="1"]&[data-cols="3"] {
   @apply w-[60rem];
 }

&[data-level="1"]&[data-cols="4"] {
   @apply w-[80rem];
 }

&[data-level="1"]&[data-cols="5"] {
   @apply w-[100rem];
 }
}


.c-navigationMain__listLink,
.c-navigationMain__listButton {
  @apply font-bold inline-block cursor-pointer;

  &[data-level="1"] {
    @apply px-3 py-1 rounded-full mx-2 text-sm;

    &.is-active {
      @apply text-primary-600;
    }

    &[aria-expanded="true"] + .c-navigationMain__subItemsWrapper[data-level="1"] {
      @apply visible pointer-events-auto opacity-100;
    }
  }
}
