.sidenav {
  @include grid-pad;
  @include panel-margin;
  width: 100%;
  flex-shrink: 0;

  @include media($large-screen) {
    width: 21rem;
  }

  @include media($xlarge-screen) {
    width: 30rem;
  }

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

    &:hover {
      background-color: $color-white;
      color: $color-primary;
    }

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

    &.sidenav__link--active {
      @include h4;
      background-color: $color-white;
      color: $color-primary;
      box-shadow: inset .4rem 0 0 0 $color-primary;

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

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

    + ul {
      li {
        .sidenav__link {
          padding: ($gap * .75) ($gap * 3);
          border: 0;
          @include h5;
          font-weight: normal;
        }

        &:last-child {
          .sidenav__link {
            padding-bottom: $gap * 1.5;
          }
        }
      }
    }
  }

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

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

  > ul {
    @include panel-margin;

    > li {
      &:last-child {
        > .sidenav__link {
          border-bottom: 1px solid $color-black;
        }
      }
    }
  }
}