// 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 {
  @extend %print-none;
  clear: both;
  padding: 0;
  text-align: center;
  text-indent: 0;

  // A page item in the pager list.
  &__item {
    display: inline;
    padding: 0;
    list-style-type: none;
    background-image: none;
  }

  &__item-icon {
    @include 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);
    color: color(link);
    background: color(pager-bg);
  }

  &__link {
    display: inline-block;
    margin: 0 5px 0 0;
    border: 1px solid color(border);
    padding: 6px 12px;
    text-decoration: none;

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

    &:hover,
    &:focus {
      background: color(pager-bg);
    }
  }
}

//
// Drupal selectors.
//

// .pager-item     - A list item containing a page number in the list of pages.
// .pager-first    - The first page's list item.
// .pager-previous - The previous page's list item.
// .pager-next     - The next page's list item.
// .pager-last     - The last page's list item.
// .pager-ellipsis - A concatenation of several list items using an ellipsis.

.pager-item,
.pager-first,
.pager-previous,
.pager-next,
.pager-last,
.pager-ellipsis {
  @extend %pager__item;

  a {
    @extend %pager__link;
  }
}

.pager-current {
  @extend %pager__current-item;
}
