sms-pager/app/assets/stylesheets/molecules/nav.scss

.nav {
  @include inline-ul;
  background-color: $dark;
  color: $light;
  margin: -15px -15px 15px;
  width: calc(100% + 30px);

  li {
    &:hover {
      background-color: $grey;
    }

    a {
      color: $light;
    }

    &.active {
      background-color: $taupe;

      a {
        color: $dark;
        cursor: default;
      }
    }
  }
}

.sub-nav {
  @include inline-ul;
  margin: -19px -15px 0;

  a {
    color: $dark;

    &:hover {
      background-color: $light;
    }
  }

  .active a {
    color: $grey;
    cursor: default;

    &:hover {
      background-color: transparent;
    }
  }
}