.container {
  @apply border-neutral-200
    bg-white
    dark:border-neutral-900
    dark:bg-neutral-950
    md:flex
    md:h-16
    md:flex-row
    md:items-center
    md:gap-8
    md:border-b
    md:px-8;
}

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

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

.nodejsLogoDark {
  @apply h-6
    w-20
    dark:hidden;
}

.nodejsLogoLight {
  @apply hidden
    h-6
    w-20
    dark:block;
}

.navInteractionIcon {
  @apply size-6;
}

.sidebarItemTogglerLabel {
  @apply block
    cursor-pointer
    md:hidden;
}

.main {
  @apply hidden
    flex-1
    flex-col
    md:flex
    md:flex-row
    md:items-center;
}

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

.actionsWrapper {
  @apply flex
    items-center
    gap-2
    border-b
    border-neutral-200
    p-4
    dark:border-neutral-900
    md:border-0
    md:p-0;
}

.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;
  }
}