.sidenav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

     li {
      margin: 0;
      display: block;
    }
  }

  .sidenav__link {
    display: block;
    border-top: 1px solid $color-black;
    padding: $gap ($gap * 2);
    color: $color-black;
    text-decoration: none;
    white-space: nowrap;

    .sidenav__link-icon {
      margin-left: - ($gap * .5);
    }

    &.sidenav__link--disabled {
      color: $color-shadow;
      pointer-events: none;
    }

    &.sidenav__link--active {
      @include h4;
      background-color: $color-white;
      color: $color-primary;
      box-shadow: inset ($gap / 2) 0 0 0 $color-primary;

      .sidenav__link-icon {
        @include icon-style-active;
      }

      + ul {
        background-color: $color-white;

        .sidenav__link {
          &--active {
            @include h5;
            color: $color-primary;
            box-shadow: none;
          }
        }
      }
    }

    + ul {
      padding-bottom: $gap / 2;

      li {
        .sidenav__link {
          @include h5;
          padding: $gap * .75;
          padding-left: 4.5rem;
          border: 0;
          font-weight: normal;

          .sidenav__link-icon {
            @include icon-size(12);
            flex-shrink: 0;
            margin-right: 1.5rem;
            margin-left: -3rem
          }

          .sidenav__link-label {
            padding-left: 0;
          }
        }
      }
    }

    &:hover {
      color: $color-primary;

      .sidenav__link-icon {
        @include icon-style-active;
      }

    }
  }
}