.vuiAppSideNav {
  width: $appSideNavWidth;
  overflow-x: hidden;
  transition: all $transitionSpeed;
  line-height: 1;
}

.vuiAppSideNav__inner {
  // Prevent content from being squished as nav collapses.
  width: $appSideNavWidth;
  transition: all $transitionSpeed;
}

.vuiAppSideNavContent {
  opacity: 1;
  transition: all $transitionSpeed;
}

.vuiAppSideNavContent-isHidden {
  pointer-events: none;
  opacity: 0;
}

.vuiAppSideNav-isCollapsed {
  width: $appSideNavWidthCollapsed;
  // Stop scrolling.
  height: 100%;
  overflow-y: hidden;

  .vuiAppSideNav__inner {
    padding-left: $sizeM;
  }
}

.vuiAppSideNavCollapseButton {
  display: block;
  color: var(--vui-color-subdued-shade);
  font-size: $fontSizeStandard;
  text-decoration: none;
  padding: 0 $sizeM;
  margin-left: -$sizeXxl;
  margin-bottom: $sizeM;

  &:hover {
    color: var(--vui-color-primary-shade);
    text-decoration: underline;
  }
}

.vuiAppSideNavExpandButton {
  margin-top: -$sizeXxs;
  // Ensure the content below the expand/collapse button remains
  // at the same vertical position when collapsed and expanded.
  margin-bottom: 6px;
}

.vuiAppSideNavLink {
  @include truncateText;
  text-decoration: none;
  border-radius: $sizeXxs;
  line-height: 1.1;
  border-top: 1px solid var(--vui-color-empty-shade);
  border-bottom: 1px solid var(--vui-color-empty-shade);
  width: 100%;

  &:hover {
    background-color: var(--vui-color-light-shade);
    color: var(--vui-color-primary-shade);
    text-decoration: underline;
  }
}

.vuiAppSideNavLink--active {
  background-color: var(--vui-color-light-shade);
}

.vuiAppSideNavLink__iconAfter--alignEnd {
  margin-left: auto;
}

.vuiAppSideNav--m {
  .vuiAppSideNav__inner {
    padding: 28px 32px 32px 33px;
  }

  .vuiAppSideNavLink {
    @include appSideNavItem--m;
  }
}

.vuiAppSideNav--l {
  .vuiAppSideNav__inner {
    padding: 4px 8px 0;
  }

  .vuiAppSideNavLink {
    @include appSideNavItem--l;
  }
}