@layer components {
  .side-nav {
    @apply flex-col flex-auto flex-shrink-0 z-20 transition-all ease-in-out duration-200 print:hidden sticky top-0 h-screen;
  }

  .side-nav-content {
    height: calc(100vh - theme("spacing.16"));
    @apply overflow-y-auto;
  }

  .side-nav-bg {
    @apply ltr:border-r rtl:border-l bg-white dark:bg-gray-900 border-gray-200  dark:border-gray-800;
  }
}