// Side Nav // // A vertical list of navigational links, typically used on the left side of a page.

.SideNav {

background-color: var(--color-bg-secondary);

}

.SideNav-item {

position: relative;
display: block;
width: 100%;
// stylelint-disable-next-line primer/spacing
padding: 12px $spacer-3;
color: var(--color-text-primary);
text-align: left;
background-color: transparent;
border: 0;
border-top: $border-width $border-style var(--color-border-secondary);

&:first-child {
  border-top: 0;
}

&:last-child {
  // makes sure there is a "bottom border" in case the list is not long enough
  // stylelint-disable-next-line primer/box-shadow
  box-shadow: 0 $border-width 0 var(--color-border-primary);
}

// Bar on the left
&::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 2px;
  pointer-events: none;
  content: "";
}

}

// States

.SideNav-item:focus {

z-index: 1;
outline: none;
box-shadow: var(--color-state-focus-shadow);

}

.SideNav-item:hover {

text-decoration: none;
background-color: var(--color-state-hover-secondary-bg);
outline: none;

}

.SideNav-item:active {

background-color: var(--color-bg-secondary);

}

.SideNav-item:not(), .SideNav-item {

background-color: var(--color-sidenav-selected-bg);

// Bar on the left
&::before {
  // stylelint-disable-next-line primer/colors
  background-color: var(--color-sidenav-border-active);
}

}

// Icon // // Makes sure multiple icons are vertically aligned

.SideNav-icon {

width: 16px;
margin-right: $spacer-2;
color: var(--color-text-tertiary);

}

// Sub Nav // // A more lightweight version, suited as a sub nav

.SideNav-subItem {

position: relative;
display: block;
width: 100%;
padding: $spacer-1 0;
color: var(--color-text-link);
text-align: left;
background-color: transparent;
border: 0;

}

.SideNav-subItem:hover, .SideNav-subItem:focus {

color: var(--color-text-primary);
text-decoration: none;
outline: none;

}

.SideNav-subItem:not(), .SideNav-subItem {

font-weight: $font-weight-semibold;
color: var(--color-text-primary);

}