#sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--margin-3);
}

#sidebar .body {
  display: flex;
  flex-direction: column;
  gap: var(--margin-3);
  flex: 1;
  padding: var(--margin-4);
}

#sidebar .footer {
  border-top: 1px solid var(--secondary-color);
  padding: var(--margin-4);
}

#sidebar .btn {
  justify-content: left;
  padding: var(--margin-3) var(--margin-4);
  background-color: var(--secondary-color);
  --c3d-icon-color: var(--quaternary-color);
  color: var(--quaternary-color);
}

#sidebar .btn.active {
  pointer-events: none;
  background-color: var(--quaternary-color);
  --c3d-icon-color: var(--primary-color);
  color: var(--primary-color);
}

#sidebar .btn:hover {
  background-color: var(--quaternary-color);
  --c3d-icon-color: var(--primary-color);
  color: var(--primary-color);
  transform: scale(0.99) translate(0px, -1px);
}