/* Icon navigation remains scrollable when its links exceed the viewport.
   This also overrides the old utility in cached sidebar modules. */
.group[data-collapsible="icon"] {
  --sidebar-width-icon: 4.5rem;
}

.group[data-collapsible="icon"] [data-sidebar="content"] {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  padding-inline: 6px;
  gap: 12px;
}

.group[data-collapsible="icon"] [data-sidebar="content"] [data-sidebar="group"] {
  padding-inline: 0;
  flex-shrink: 0;
}

.group[data-collapsible="icon"] [data-sidebar="menu"] {
  gap: 8px;
}

.group[data-collapsible="icon"] [data-sidebar="menu-button"] {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin-inline: auto;
  justify-content: center;
}

.group[data-collapsible="icon"] [data-sidebar="menu-button"] > :is(svg, img) {
  width: 20px;
  height: 20px;
}

.group[data-collapsible="icon"] :is([data-sidebar="header"], [data-sidebar="footer"]) {
  flex-shrink: 0;
}