//- Horizontal ribbon subnav for page
.page-subnav {
  position: relative;
  background-color: $gray-lighter;
  @include clearfix();

  .btn {
    margin: $pad !important;
  }

  nav > ul {
    float: left;

    li {
      display: inline-block;
      font-size: $font-lg;
    }

    a {
      display: block;
      padding: $pad*1.25;
      margin-top: 3px; // adjust for bottom border
      text-decoration: none;
      color: fade-out($purple, .4);
      border-bottom: 3px solid fade-out($purple, 1);
      @include transition(all $transition);

      [class^="hk-icon"] {
        margin-bottom: -7px;
        margin-right: $pad;
        top: -2px;
        font-weight: normal;
        font-size: $font-lg;
      }

      &.active {
        color: $purple;
        border-color: $purple;
      }

      &:hover {
        color: $purple;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .btn {
    margin: ($pad-lg - 1) 0;

    @include media($tablet) {
      display: none;
    }
  }
}