.pagination {
  display: inline-block;
  padding-left: 0;
  margin-top: $spacer-y;
  margin-bottom: $spacer-y;
  @include border-radius();
}

.page-item {
  display: inline; // Remove list-style and block-level defaults

  &:first-child {
    .page-link {
      margin-left: 0;
      @include border-left-radius($border-radius);
    }
  }
  &:last-child {
    .page-link {
      @include border-right-radius($border-radius);
    }
  }

  &.active .page-link {
    @include plain-hover-focus {
      z-index: 2;
      color: $pagination-active-color;
      cursor: default;
      background-color: $pagination-active-bg;
      border-color: $pagination-active-border;
    }
  }

  &.disabled .page-link {
    @include plain-hover-focus {
      color: $pagination-disabled-color;
      cursor: $cursor-disabled;
      background-color: $pagination-disabled-bg;
      border-color: $pagination-disabled-border;
    }
  }
}

.page-link {
  position: relative;
  float: left; // Collapse white-space
  padding: $pagination-padding-y $pagination-padding-x;
  margin-left: -1px;
  line-height: $line-height;
  color: $pagination-color;
  text-decoration: none;
  background-color: $pagination-bg;
  border: $pagination-border-width solid $pagination-border-color;

  @include hover-focus {
    color: $pagination-hover-color;
    background-color: $pagination-hover-bg;
    border-color: $pagination-hover-border;
  }
}

.pager {
  padding-left: 0;
  margin-top: $spacer-y;
  margin-bottom: $spacer-y;
  text-align: center;
  list-style: none;
  @include clearfix();

  li {
    display: inline;

    > a,
    > span {
      display: inline-block;
      padding: 5px 14px;
      background-color: $pager-bg;
      border: $pager-border-width solid $pager-border-color;
      border-radius: $pager-border-radius;
    }

    > a {
      @include hover-focus {
        text-decoration: none;
        background-color: $pager-hover-bg;
      }
    }
  }

  .disabled {
    > a {
      @include plain-hover-focus {
        color: $pager-disabled-color;
        cursor: $cursor-disabled;
        background-color: $pager-bg;
      }
    }
    > span {
      color: $pager-disabled-color;
      cursor: $cursor-disabled;
      background-color: $pager-bg;
    }
  }
}

.pager-next {
  > a,
  > span {
    float: right;
  }
}

.pager-prev {
  > a,
  > span {
    float: left;
  }
}



//
// Sizing
//

.pagination-lg {
  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
}

.pagination-sm {
  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
}

Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content/

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

@mixin sr-only-focusable {
  &:active,
  &:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}