@layer components {
  .fragment-navbar__topbar {
    @apply flex gap-6 items-center px-8 py-5;
  }

  .fragment-navbar__tabs {
    @apply hidden md:block min-w-0;
  }

  .fragment-navbar__end {
    @apply ml-auto flex gap-4 items-center;
  }

  .fragment-navbar__bottom-nav {
    @apply fixed md:hidden z-50 bottom-0 bg-background flex w-full gap-2 px-2 py-1 border-t border-border;
    & > *,
    & > * > * {
      @apply h-12 flex-1;
    }
  }

  .fragment-navbar__user-popover {
    min-width: 256px;
  }

  .fragment-navbar__bottom-nav-badge {
    @apply -top-0.5 -right-2.5;
  }
}