// Pagination (multiple pages)
// --------------------------------------------------

.pagination {
  @include font-family-circular();

  margin-bottom: $line-height-base / 2;

  ul {
    @include remove-native-list-styles();
    margin: 0;
  }

  li:not(.pagination-as-text) {
    @include square($pagination-page-size);
  }

  li {
    display: inline-block;
    text-align: center;

    a {
      @include square(100%);
      display: inline-block;
    }

    > .icon {
      background-color: ui-color(u-lighter-gray);
      border: 0;
      color: ui-color(u-gray);
    }
  }
}

.pagination-page {
  border-radius: $pagination-border-radius;

  &:hover {
    background-color: $pagination-hover-bg;
  }

  &.is-current-page {
    background-color: $link-color;
    color: white;
    margin-left:  $grid-gutter-width / 10;
    margin-right: $grid-gutter-width / 10;
  }

  // For numbers larger than 2 digits
  .small {
    font-size: .75em;
    position: relative;
    top: -.1em;
  }
}

.pagination-ellipsis {
  font-size:    $pinned-badge-font-size;
  opacity:      $text-muted-opacity;
  margin-left:  $grid-gutter-width / 6;
  margin-right: $grid-gutter-width / 6;
}

.pagination-prev .icon,
.pagination-next .icon {
  border:         1px solid;
  border-radius:  $border-radius-small;
  padding:        $padding-xs-vertical 0;
  height :        $pagination-chevron-size;
  width :        $pagination-chevron-size;
  font-size:      $font-size-large;
}

.pagination-prev,
.pagination-next {
  margin: 0 $padding-large-horizontal;
}

.pagination-as-text {
  width: auto;
}