.nav-primary {
  position: fixed;
  z-index: 9997;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 4.5rem;
  padding-bottom: 3.5rem;

  // style resets
  ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  a { text-decoration: none; }

  &.expanded    { left: 0; }
  &.collapsed   { left: -100%; }

  @include media-breakpoint-up(xs) {
    width: 18rem;
    &.collapsed   { left: -18rem; }
  }
}

@include media-breakpoint-down(md) {
  .nav-primary.expanded {
    box-shadow: 0 -0.5rem 1rem $gray-900;
  }
}

.nav-primary-section-link {
  @include brand-font-h3();
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  padding: 0.375rem 0.8125rem 0.5rem 1.5rem;
  display: block;
  color: $gray-400;
  transition: color 0.2s ease-out;

  &:hover {
    color: $white;

    i {
      color: $gray-200;
    }
  }

  &:active, &:focus {
    color: $gray-400;

    &.active {
      color: $white;
    }
  }

  i {
    margin-right: 0.35rem;
    font-size: 1.125em;
    color: $gray-600;
    transition: color 0.2s ease-out;
  }
}

.nav-primary-subsection {
  max-height: 0;
  //transition: max-height 0.33s ease-in-out;
  overflow: hidden;

  &.expanded {
    max-height: 80rem;
    padding-bottom: 1.25rem;
  }
}

.nav-primary-label {
  @include brand-font-label();
  font-size: 0.875rem;
  color: $gray-650;
  display: block;
  margin-left: 3.3rem;
  margin-top: 2rem;
  margin-bottom: 0.8125rem;
  text-transform: uppercase;
  cursor: default;
}

.nav-primary-subsection-item:first-child .nav-primary-label {
  margin-top: 1rem;
}

.nav-primary-subsection-item {
  padding-bottom: 0.8125rem;
}

.nav-primary-subsection-link,
.nav-primary-tertiary-link {
  display: block;
  position: relative;
  padding: 0.125rem 0;
  padding-left: 3.3rem;
  font-size: 0.875em;
  line-height: 2rem;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;

  &.active {
    font-weight: bold;

    &:not(.expanded) {
      padding-left: 3.05rem;
    }
  }

  &.has-children:before {
    @include caret(rem(5), "right");
    position: absolute;
    top: 0.8rem;
    left: rem(25);
    transition: transform .25s ease;
  }

  &.has-children:not(.expanded):before {
    transform: rotate(0deg);
  }

  &.has-children.expanded:before {
    transform: rotate(90deg);
  }
}

.user-summary {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
}

.nav-primary-tertiary-link {
  padding-left: rem(65);

  &.active {
    padding-left: rem(60) !important;
  }
}
