.nav {
  @apply fixed
  bg-white
  lg:bg-transparent
  text-black lg:text-inherit
  rounded-lg lg:rounded-none
  overflow-hidden 
  lg:overflow-visible
  items-start
  h-1 lg:h-full
  top-14 md:top-[5rem] lg:top-0
  left-2 lg:left-[initial]
  right-2 lg:right-[initial]
  gap-2 lg:gap-6;

  @screen lg {
    position: initial;
  }

  &-item {
    @apply relative
    w-full
    z-[4]
    justify-start
    !gap-0
    whitespace-nowrap
    cursor-pointer
    md:opacity-25
    !h-9
    !p-0;
    transition: opacity 0.2s ease-out;

    &.active {
      @apply border-b-2
      opacity-100;
    }

    &:hover {
      @apply opacity-100;
    }

    &.main-nav {
      @apply lg:w-[initial]
      lg:!h-16 xxl:!h-[5rem] 
      opacity-100;
      > .stack {
        @apply lg:gap-2;
      }

      svg {
        @apply lg:w-3;
      }

      &:hover,
      &.active {
        @apply lg:border-none opacity-100;
        svg {
          @apply lg:-scale-y-100
          lg:translate-x-0;
        }
      }
    }

    svg {
      @apply h-6;
      transition: transform 0.2s ease-out;
    }

    &-wrapper {
      @apply w-full
      gap-2
      !p-0;

      .meganav-wrapper {
        @apply absolute 
        left-0
        right-0
        top-[4.5rem] xxl:top-[5.5rem]
        bg-white
        text-black
        overflow-hidden
        rounded-md;

        .nav-panel-column {
          &:first-child {
            .nav-item {
              @apply opacity-100;
            }
          }
        }
      }
    }

    > .stack {
      @apply flex
      flex-row
      gap-0
      !p-0
      pointer-events-none
      !w-full;
    }

    .box {
      @apply relative w-2 rotate-90 transition-transform duration-100;
    }

    &:hover {
      svg {
        @apply translate-x-1;
      }
    }

    &.hide-on-desktop {
      @apply lg:hidden;
    }
  }

  &-panel {
    &-wrapper-row {
      @apply w-full
      h-full
      max-h-[calc(100vh-4rem)]
      shrink-0
      !items-stretch;
    }
    &-column {
      @apply w-full
      shrink-0
      gap-2
      p-4;

      &.scrollable {
        @apply h-[calc(100vh-5.5rem)];
      }

      button {
        @apply shrink-0;
      }

      &.stack-row {
        @apply w-[initial] 
        lg:w-1/4
        border-r border-[rgba(0,0,0,0.1)];

        &:first-child {
          @apply w-1/3 lg:w-1/4;
        }
      }
    }
    &-back {
      @apply w-full
      border-b border-[rgba(0,0,0,0.25)]
      p-4
      pb-6
      mb-4
      cursor-pointer
      relative;
      > .stack {
        @apply justify-center
        pointer-events-none;
      }

      svg {
        @apply absolute
        w-6
        rotate-180
        left-0;
        transition: transform 0.2s ease-out;
      }
      &:hover {
        svg {
          @apply -translate-x-1;
        }
      }
    }
  }

  &-image {
    &-wrapper {
      @apply !hidden md:!flex
      relative
      m-2
      rounded-md
      lg:h-[40vh]
      lg:max-h-[40rem]
      md:w-full
      overflow-hidden;

      .nav-image {
        @apply opacity-0 z-10;
        transition: 0.3s 0.2s opacity ease-out;

        .caption {
          @apply absolute
          z-[1]
          text-white
          text-xs
          p-1
          px-3
          rounded-xl
          whitespace-nowrap
          bottom-2
          left-2
          opacity-0
          bg-[rgba(0,0,0,0.25)];
          transition: opacity 0.3s 0.5s;
        }

        .media-holder {
          @apply absolute
          top-0
          left-0
          right-0
          bottom-0;
        }

        &.active {
          @apply opacity-100;
          .caption {
            @apply opacity-100;
          }
        }
      }
      .media-holder {
        &.default {
          @apply absolute
          inset-0
          opacity-100;
        }
      }
    }
  }
}