@reference "../../styles/index.css";

.container {
  @apply border-neutral-200
    bg-white
    xl:h-16
    xl:border-b
    xl:px-8
    dark:border-neutral-900
    dark:bg-neutral-950;

  .innerContainer {
    @apply max-w-10xl
      3xl:max-w-12xl
      xl:mx-auto
      xl:flex
      xl:h-16
      xl:flex-row
      xl:items-center
      xl:gap-8;

    .nodeIconAndMobileItemsToggler {
      @apply flex
        h-16
        shrink-0
        items-center
        border-b
        border-neutral-200
        px-4
        xl:flex
        xl:h-full
        xl:items-center
        xl:border-0
        xl:px-0
        dark:border-neutral-900;

      .nodeIconWrapper {
        @apply h-[30px]
          flex-1;
      }

      .sidebarItemTogglerLabel {
        @apply ml-auto
          block
          cursor-pointer
          xl:hidden; /* Push toggler to the right if Logo exists */
      }
    }

    .navInteractionIcon {
      @apply size-6;
    }

    .sidebarItemToggler {
      @apply absolute
        right-4
        -z-10
        size-6
        -translate-y-[200%]
        appearance-none
        opacity-0;
    }

    .main {
      @apply flex-1
        flex-col
        gap-4
        xl:flex
        xl:flex-row
        xl:items-center
        xl:justify-between;
    }

    .navItems {
      @apply flex
        flex-col
        gap-0
        border-b
        border-neutral-200
        p-4
        xl:flex-1
        xl:flex-row
        xl:gap-1
        xl:border-0
        xl:p-0
        dark:border-neutral-900;
    }

    .actionsWrapper {
      @apply flex
        w-full
        flex-row
        flex-wrap
        items-center
        justify-end
        gap-2
        border-b
        border-neutral-200
        p-4
        sm:flex-nowrap
        xl:ml-auto
        xl:basis-96
        xl:border-0
        xl:p-0
        dark:border-neutral-900;

      span.searchButtonSkeleton {
        @apply my-px
          mr-2
          grow
          rounded-xl;

        &:empty {
          @apply h-10;
        }
      }

      span.themeToggleSkeleton {
        @apply size-9
          rounded-md
          py-4;
      }

      .ghIconWrapper {
        @apply size-9
          rounded-md
          p-2;

        svg {
          @apply fill-neutral-700
            dark:fill-neutral-300;
        }

        &:hover {
          @apply bg-neutral-100
            dark:bg-neutral-900;
        }
      }
    }
  }
}
