.leftNav {
  grid-area: left-nav;
  background: var(--nav-background);
  padding: 16px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .divider {
    background: linear-gradient(
      100deg,
      var(--primary) 20%,
      var(--nav-background) 95%
    );
  }

  .navHeading {
    color: var(--text-secondary);
    font-weight: 500;
  }

  .navLink {
    transition: background-color 0.3s ease;

    &:hover {
      background-color: rgba(var(--accent-rgb), 0.08);
    }
  }
}

.activeNavLink {
  color: inherit;
  text-decoration: none;

  .navLink {
    background-color: rgba(var(--accent-rgb), 0.1);
  }
}

[data-theme='dark'] {
  .leftNav {
    .navLink {
      &:hover {
        background-color: rgba(255, 255, 255, 0.08);
      }
    }
  }
  .activeNavLink {
    .navLink {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}
