:root {
  --bs-app-sidebar-width: 60px;
  --bs-app-navbar-height: 3.5rem;
  --bs-app-footer-height: 2.25rem;
}

.app-sidebar {
  inset-block-start: var(--bs-app-navbar-height);
  inset-block-end: var(--bs-app-footer-height);
  inset-inline-start: 0;
  z-index: 1020;
  align-items: center;
  width: var(--bs-app-sidebar-width);
  padding-block: .75rem;
  border-inline-end: 1px solid var(--bs-border-color);
}

.app-sidebar .nav {
  flex-direction: column;
  gap: .25rem;
  align-items: stretch;
  width: 100%;
}

.app-sidebar .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 0;
  color: var(--bs-secondary-color);
  border-radius: 0;
}

.app-sidebar .nav-link:hover,
.app-sidebar .nav-link:focus {
  color: var(--bs-emphasis-color);
  background-color: var(--bs-tertiary-bg);
}

.app-sidebar .nav-link.active {
  color: var(--bs-primary);
  background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

.app-sidebar .nav-link i {
  font-size: 1.5rem;
  line-height: 1;
}

.app-with-sidebar main {
  inset-inline-start: var(--bs-app-sidebar-width);
}

.app-with-sidebar .app-map-action {
  inset-inline-start: calc(var(--bs-app-sidebar-width) + 1rem);
}