.sidenav-container {
  overflow: hidden;
  position: relative;
  top: $topbar-height + $usa-banner-height;
  width: $sidenav-expanded-width;

  &--minimized {
    @extend .sidenav-container;
    width: $sidenav-collapsed-width;
  }
}

.sidenav {
  width: $sidenav-expanded-width;
  position: fixed;

  &--minimized {
    @extend .sidenav;

    width: $sidenav-collapsed-width;
    margin: 0px;
  }

  @include media($large-screen) {
    margin: 0px;
  }

  &__header {
    padding: $gap ($gap * 2);
    font-weight: bold;
    border-bottom: 1px solid $color-gray-lighter;

    &--minimized {
      @extend .sidenav__header;

      padding: $gap;
      width: $sidenav-collapsed-width;
    }
  }

  &__title {
    font-size: $h6-font-size;
    text-transform: uppercase;
    width: 50%;
    color: $color-gray-dark;
    opacity: 0.54;
    white-space: nowrap;
    padding: $gap;
    display: inline-flex;
    align-items: center;
  }

  &__toggle {
    font-size: $small-font-size;
    color: $color-blue;
    text-decoration: none;
    padding: $gap;
    display: inline-flex;
    align-items: center;
  }

  &__toggle-arrows {
    vertical-align: middle;
    @include icon-size(20);

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  &__list {
    margin-top: 3 * $gap;
    margin-bottom: $footer-height;
    padding-bottom: ($gap * 2);
    position: fixed;
    overflow-y: scroll;
    top: $topbar-height + $usa-banner-height + 4rem;
    bottom: 0;
    left: 0;
    width: $sidenav-expanded-width;
    background-color: $color-white;
    list-style: none;
    padding: 0;

    &--no-header {
      top: $topbar-height + $usa-banner-height;
    }
  }

  &__text {
    margin: 2 * $gap;
    color: $color-gray;
    font-style: italic;
  }

  &__item {
    margin: 0;
    display: block;
    color: $color-black-light !important;
  }

  &__link {
    display: block;
    padding: $gap ($gap * 2);
    white-space: nowrap;
    overflow: hidden;
    color: $color-black-light !important;
    text-decoration: none;
    text-overflow: ellipsis;

    &--active {
      @include h4;

      background-color: $color-aqua-lightest !important;
      color: $color-primary-darker !important;
      box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
      position: relative;
    }

    &:hover {
      color: $color-primary !important;
      background-color: $color-aqua-lightest;
    }
  }
}