.nextra-scrollbar {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */

  scrollbar-gutter: stable;
  &::-webkit-scrollbar {
    @apply nx-w-3 nx-h-3;
  }
  &::-webkit-scrollbar-track {
    @apply nx-bg-transparent;
  }
  &::-webkit-scrollbar-thumb {
    @apply nx-rounded-[10px];
  }
  &:hover::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-color: var(--tw-shadow-color);
    background-clip: content-box;
    @apply nx-shadow-neutral-500/20 hover:nx-shadow-neutral-500/40;
  }

  @media (max-width: 767px) {
    .nextra-container & {
      scrollbar-gutter: auto;
    }
  }
}

/* Hide scrollbar */
.no-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */

  &::-webkit-scrollbar {
    @apply nx-hidden; /* Chrome, Safari and Opera */
  }
}