/* WUU application shell: persistent desktop sidebar collapse. */

.hamburger {
  align-items: center;
  border-radius: 10px;
  flex: 0 0 auto;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
}

.hamburger:hover,
.hamburger:focus-visible {
  background: color-mix(in srgb, var(--surface2) 86%, var(--primary) 5%);
  outline: none;
}

.sidebar,
.content {
  transition: width var(--transition), flex-basis var(--transition), padding var(--transition);
}

@media (min-width: 701px) {
  .hamburger {
    display: flex;
  }

  html.wuu-sidebar-collapsed {
    --sidebar-w: 72px;
  }

  html.wuu-sidebar-collapsed .sidebar {
    align-items: center;
    overflow-x: hidden;
    padding-left: 8px;
    padding-right: 8px;
  }

  html.wuu-sidebar-collapsed .sidebar .nav-label,
  html.wuu-sidebar-collapsed .sidebar .sep,
  html.wuu-sidebar-collapsed .sidebar .nav-item span,
  html.wuu-sidebar-collapsed .sidebar .nav-group > summary {
    display: none;
  }

  html.wuu-sidebar-collapsed .sidebar .nav-group,
  html.wuu-sidebar-collapsed .sidebar .nav-group[open],
  html.wuu-sidebar-collapsed .sidebar .nav-group.active[open] {
    background: transparent;
    border: 0;
    margin: 0;
    width: 100%;
  }

  html.wuu-sidebar-collapsed .sidebar .nav-group-items {
    display: grid !important;
    gap: 4px;
    padding: 0;
    width: 100%;
  }

  html.wuu-sidebar-collapsed .sidebar .nav-item,
  html.wuu-sidebar-collapsed .sidebar .nav-group-items .nav-item {
    height: 46px;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 54px;
  }

  html.wuu-sidebar-collapsed .sidebar .nav-item svg {
    height: 21px;
    width: 21px;
  }

  html.wuu-sidebar-collapsed .sidebar .nav-item.active {
    box-shadow: inset 3px 0 0 var(--primary);
  }
}

@media (max-width: 700px) {
  html.wuu-sidebar-collapsed {
    --sidebar-w: 252px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .content {
    transition: none;
  }
}