.sidebar-wrapper {
  @apply flex-shrink-0 fixed sm:sticky top-0 z-30 sm:z-0 translate-x-56 sm:translate-x-0 hidden md:flex flex-col justify-start items-start w-56 h-full py-4 bg-white dark:bg-zinc-800 sm:bg-transparent overflow-x-hidden overflow-y-auto transition-transform duration-300 overscroll-contain hide-scrollbar;

  &.show {
    @apply flex translate-x-0 right-0 shadow-2xl sm:shadow-none;
  }
}

.mask {
  @apply fixed top-0 left-0 w-full h-full bg-black opacity-0 transition-opacity duration-300 pointer-events-none z-20 sm:hidden;

  &.show {
    @apply opacity-60 pointer-events-auto;
  }
}
