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 {
    border-bottom: 1px solid $black;
    border-right: 1px solid $black;

    &:hover,
    &:active {
      background-color: $grey;
    }

    a {
      color: $light;
      padding: 15px;
    }

    &.active {
      background-color: $taupe;
      border-bottom: 1px solid $taupe;

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

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

  a {
    color: $dark;
    padding: 15px;

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

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

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