.app-with-sidebar {
  overflow-x: hidden;
  --sidebar-expanded-width: 17rem;
  --sidebar-collapsed-width: 4.5rem;
  --sidebar-width: var(--sidebar-expanded-width);
}

.app-shell {
  position: relative;
}

.app-sidebar {
  transform: translateX(-100%);
  transition: width 0.2s ease, transform 0.2s ease;
}

.app-content {
  transition: margin-left 0.2s ease;
}

.sidebar-edge-toggle {
  display: none;
}

.app-with-sidebar.sidebar-open .app-sidebar {
  transform: translateX(0);
}

.app-with-sidebar.sidebar-open #sidebarOverlay {
  display: block;
}

@media (min-width: 1024px) {
  .app-with-sidebar.sidebar-collapsed {
    --sidebar-width: var(--sidebar-collapsed-width);
  }

  .app-with-sidebar .app-sidebar {
    transform: translateX(0);
    width: var(--sidebar-width);
  }

  .app-with-sidebar .app-content {
    margin-left: var(--sidebar-width);
  }

  .app-with-sidebar .sidebar-edge-toggle {
    position: fixed;
    left: calc(var(--sidebar-width) - 0.75rem);
    top: 1.25rem;
    z-index: 45;
    display: inline-flex;
    transition: left 0.2s ease, transform 0.2s ease;
  }

  .app-with-sidebar.sidebar-collapsed .sidebar-brand-text,
  .app-with-sidebar.sidebar-collapsed .sidebar-label {
    margin: 0;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    white-space: nowrap;
  }

  .app-with-sidebar.sidebar-collapsed .sidebar-link {
    justify-content: center;
  }

  .app-with-sidebar.sidebar-collapsed .sidebar-link-icon {
    margin-right: 0;
  }

  .app-with-sidebar.sidebar-collapsed .sidebar-edge-toggle {
    transform: translateX(0.125rem);
  }

  .app-with-sidebar.sidebar-collapsed .sidebar-collapse-icon {
    transform: rotate(180deg);
  }
}