.side-nav{
  background: $white;
  @include grid-column(2,0);
  @include show-for(large);

  &__spacer{
    @include breakpoint(medium down){
      display: none;
    }

    @include large-2;
    height: 100%;
    position: absolute;
    z-index: -1; //to prevent overlap with notifications

    &--white{
      @extend .side-nav__spacer;
      background-color: $white;
    }
  }

  &__header{
    @extend .heading;
    background: $cerulean;
  }

  &__content{
    padding: $base-padding;
  }

  &__list{
    list-style-type: none;
  }

  &__item{
    margin-bottom: $base-margin;
  }

  &__link{
    display: block;
    font-weight: 600;
    color: $jet;
    margin-bottom: $base-margin/2;
  }

  &__child-list{
    list-style-type: none;
  }

  &__child-item{
    margin-bottom: $base-margin/2;
  }

  &__child-link{
    color: $stormcloud;
    font-size: rem-calc(12);

    &:active,
    &:hover,
    &:focus{
      $anchor-color: $cerulean;
      color: $anchor-color-hover;
    }

    &--active-page{
      font-weight: bold;
      color: $cerulean;
    }
  }
}