/* ==========================================================================
   Navigation Sidebar (Desktop)
   ========================================================================== */

/* Main nav - fixed width, full height, flex column */
.main-nav {
  width: var(--size-main-nav);
  flex-shrink: 0;
  height: 100%;
  overflow-y: auto;
  border-inline-end: var(--border-normal) var(--np-color-inverse-surface);
  display: flex;
  flex-direction: column;
}

.main-nav__top {
  flex: 1;
}

.main-nav__bottom {
  margin-block-start: auto;
}

@media (max-width: 480px) {
  /* Hide Desktop Sidebar on mobile */
  .main-nav {
    display: none;
  }
}