.nav {
  align-items: stretch;
  background-color: var(--color-light);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: var(--spacing-sidebar);
  padding: var(--spacing-xl);
}

.nav-subheader {
  margin: var(--spacing-xl) 0 var(--spacing-sm);
}

.nav-link {
  --link-spacing: var(--spacing-md);

  border-radius: var(--radius-md);
  color: var(--color-dark);
  margin: 0 calc(var(--link-spacing) * -1);
  padding: var(--spacing-md) var(--link-spacing);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-md);
}

.nav-link:hover {
  color: var(--color-black);
}

.nav-link.state--active {
  background-color: var(--color-white);
  color: var(--color-black);
}

.nav-icon {
  color: var(--color-dark);
  font-size: var(--font-size-lg);
}

.nav-link.state--active .nav-icon {
  color: var(--color-primary);
}

.nav-label {
  flex: 1;
}

.nav-count {
  background-color: var(--color-dark);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  min-width: calc(var(--spacing-xs) * 2 + 1ch);
  padding: 0 var(--spacing-xs);
  text-align: center;
}

.nav-count.state--active {
  background-color: var(--color-red);
}

.nav-greetings {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-lg);
  justify-content: space-between;
  line-height: 1;
  margin: var(--spacing-lg) 0 var(--spacing-md);
  white-space: nowrap;
}

.nav-session {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}