// Dependencies.
@import 'init';

// Pager
//
// Paged navigation is a list of page numbers when more than 1 page of content
// is available.
//
// Markup: pager.hbs
//
// Style guide: components.navigation.pager

.pager,
%pager {
  @include print-none;
  @include unstyled-list;
  @include margin(1 0);
  clear: both;
  text-align: center;

  // A page item in the pager list.
  &__item {
    @include inline-list-item;
    background-image: none;
  }

  &__item-icon {
    font-size: 17px;
    padding: 0 2px;
  }

  .fa {
    @extend %pager__item-icon;
  }

  // The current page's list item.
  &__current-item {
    @extend %pager__item;
    @extend %pager__link;
    font-weight: weight(bold);
  }

  &__link {
    @include margin(0 .25 0 0);
    @include padding(.25 .5);
    display: inline-block;
    text-decoration: none;

    .pager__item:last-child &,
    %pager__item:last-child & {
      margin-right: 0;
    }

    &:hover,
    &:focus {
      // Add your styles.
    }
  }
}
