$sideNavItemColor: var(--v2-colors-mono-100);
$sideNavBorderColor: var(--v2-colors-grey-300);
$sideNavIndicatorColor: var(--v2-colors-coral-500);
$sideNavActiveColor: var(--v2-colors-mono-500);

.link {
  color: $sideNavItemColor;
  font-family: var(--v2-font-family-primary);
  font-size: var(--v2-font-size-4);
  line-height: var(--v2-line-height-title);
  font-weight: var(--v2-font-weight-primary-regular);
  display: inline-block;
  padding: var(--v2-spacing-2) var(--v2-spacing-2)
    var(--v2-spacing-2) calc(var(--v2-spacing-3) + 4px);
  border-left: 1px solid $sideNavBorderColor;
  text-decoration: none;

  &:hover {
    cursor: pointer;
    border-left: 2px solid $sideNavIndicatorColor;
    padding-left: calc(var(--v2-spacing-3) + 3px);
    color: $sideNavActiveColor;
  }
}

.linkActive, .linkActive:hover {
  border-left: 4px solid $sideNavIndicatorColor;
  padding-left: var(--v2-spacing-3);
  color: $sideNavActiveColor;
  font-weight: var(--v2-font-weight-primary-bold);
}
