.nav {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.nav__footer {
  display: flex;
  flex-direction: column;
  border-top: var(--border--light);
  margin-top: auto;
  padding-top: var(--space--base);
}

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space--x-small);
  padding: var(--space--small) var(--space--base);
  font-family: var(--font-family--heading);
  font-size: var(--font-size--x-small);
  font-weight: var(--font-weight--semibold);
  text-decoration: none;
  transition: background-color var(--transition-duration--base) var(--transition-timing--base);

  /* For the hover state indicator */
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color--base--light-blue);

    transform: translateX(-4px);
    transition: transform var(--transition-duration--base) var(--transition-timing--base);
  }

  &:hover,
  &:focus-visible {
    background-color: var(--color--grayscale--01);
    color: var(--color--text);
    outline: none;
  }

  &:focus-visible {
    outline: var(--border-width--thick) solid var(--color--primary-base);
    outline-offset: 2px;
  }
}

.nav__item--child {
  justify-content: space-between;
  margin-left: calc(var(--space--base) * 1.5);
  font-size: var(--font-size--x-small);
}

.nav__item.nav__item--active {
  color: var(--color--base--light-blue);

  &::after {
    transform: none;
  }
}

.nav__counter {
  min-width: var(--space--medium);
  padding: 0.125rem var(--space--x-small);
  border-radius: var(--border-radius--pill);
  background-color: var(--color--base--light-blue);
  color: var(--color--grayscale--white);
  font-family: var(--font-family--body);
  font-size: var(--font-size--xx-small);
  text-align: center;
  font-weight: var(--font-weight--bold);
}

.nav__counter--negative {
  background-color: var(--color--status--negative-dark);
}

.nav__counter--positive {
  background-color: var(--color--status--positive-dark);
}