.sidebar {
  min-height: 0;
  overflow: hidden;
}

.sidebar > .nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.sidebar > .nav::-webkit-scrollbar {
  width: 5px;
}

.sidebar > .nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar > .nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 35%, transparent);
}

.sidebar > .nav:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 58%, transparent);
}

.sidebar > .sidebar-footer {
  flex: 0 0 auto;
  margin-top: 8px;
  background: inherit;
}

@media (max-width: 780px) {
  .sidebar {
    max-height: 100dvh;
  }
}