@mixin _pagination-item {
  display: inline-block;
  margin: $pagination-item-margin-y $pagination-item-margin-x;

  span,
  a {
    display: block;
    padding: $pagination-item-padding-y $pagination-item-padding-x;
    color: inherit;
    background-color: inherit;
    @include border-radius($pagination-item-border-radius);
  }

  a {
    @extend %no-decoration;
    @include transition(
      color $transition-duration $transition-timing-function,
      background-color $transition-duration $transition-timing-function
    );

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

  &.active {
    > a,
    > span {
      @include set-link-state-color($pagination-active-color);
      background-color: $pagination-active-bg-color;
    }
  }

  &.disabled {
    color: $pagination-disabled-color;
    cursor: default;

    > * { cursor: default; }
  }
}

.pagination {
  @include reset-list;
  display: flex;
  justify-content: center;
  margin: $pagination-margin;
  color: $pagination-color;
  background-color: $pagination-bg-color;
  user-select: none;

  li {
    @include _pagination-item;
  }
}