/*
Menus for -in-page navigation, either for jumping between sections or
filtering content.

.in-page-menu--vertical    - vertically stacked menu ideal for navigating between
                             sections on the page.
.in-page-menu--horizontal  - horizontal menu ideal for filtering content

Styleguide InPageMenu.
*/

$active-item-y-offset: 3px;

.in-page-menu {
  list-style: none;
  margin-bottom: $gutter;

  a {
    @include font-brandon-regular;
    color: $color-grey-body;
    font-size: em(16);
    display: block;
    transition: all 100ms;

    &:hover,
    &:focus {
      color: $color-black;
    }

    &.js-is-active {
      color: $color-black;
    }
  }
}


.in-page-menu--vertical {
  a {
    padding-top: em($gutter-half);

    &.js-is-active {
      @extend .segment-link;
      @extend .segment-quote;
      border-left: 2px solid $color-black;
      margin-top: em($gutter-half - $active-item-y-offset);
      padding: $active-item-y-offset 0 $active-item-y-offset 10px;
    }
  }
}

.in-page-menu--horizontal {
  a {
    border-bottom: 2px solid transparent;
    margin-right: em($gutter-half);
    transition: border 0.33s ease-in-out, color 0.33s ease-in-out;

    &.js-is-active {
      border-color: $color-black;
      color: $color-black;
    }
  }

  li {
    display: inline-block;
  }
}