/* Match Tailwind lg (default 1024px): https://tailwindcss.com/docs/screens */
@media (max-width: 1024px) {
  .hb-sidebar-container {
    @apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain;

    contain: layout style;
    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
}

.hb-sidebar-container {
  @apply flex flex-col print:hidden lg:top-16 lg:shrink-0 lg:w-64 lg:self-start;

  li > div {
    @apply h-0;
  }

  li.open > div {
    @apply h-auto pt-1;
  }

  li.open > a > span > svg > path {
    @apply rotate-90;
  }
}

.hb-sidebar-list {
  @apply relative flex flex-col gap-1 before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:ml-3 ltr:pl-3 ltr:before:left-0 rtl:mr-3 rtl:pr-3 rtl:before:right-0;
}

.hb-sidebar-list::before {
  background-color: var(--color-neutral-200);
}

.dark .hb-sidebar-list::before {
  background-color: var(--color-neutral-700);
}

.hb-scrollbar {
  @apply overflow-y-auto overflow-x-hidden p-4 grow;

  scrollbar-width: thin;
  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
  scrollbar-gutter: stable;

  &::-webkit-scrollbar {
    @apply w-3 h-3;
  }

  &::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  &::-webkit-scrollbar-thumb {
    @apply rounded-[10px];
  }

  &:hover::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-color: var(--tw-shadow-color);
    background-clip: content-box;
    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
  }
}

.hb-docs-link {
  @apply flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word] cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] gap-2 before:opacity-25 before:content-['#'] text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50;
}

.dark .hb-docs-link:hover {
  background-color: color-mix(in oklch, var(--color-primary-100) 5%, transparent);
}

.hb-sidebar-mobile-menu {
  @apply [transition:background-color_0.5s_ease];
}

.hb-sidebar-mobile-toc {
  @apply flex flex-col gap-1 relative before:absolute before:inset-y-1 before:w-px before:bg-gray-200 before:content-[""] ltr:pl-3 ltr:before:left-0 rtl:pr-3 rtl:before:right-0 ltr:ml-3 rtl:mr-3;
}

.hb-sidebar-mobile-toc::before {
  background-color: var(--color-neutral-200);
}

.dark .hb-sidebar-mobile-toc::before {
  background-color: var(--color-neutral-800);
}

.hb-sidebar-custom-link {
  @apply flex items-center justify-between gap-2 cursor-pointer rounded px-2 py-1.5 text-sm transition-colors [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word];
}