$pagination-page-link-background: #f5f6fa !default;
$pagination-page-link-color: #a3a9b5 !default;
$pagination-page-link-background-active: $primary !default;
$pagination-page-link-color-active: #fff !default;

.pagination {
  margin: 0;
  padding: 30px;

  .page-item {
    margin: 0 10px 0 0;

    &:last-child {
      margin-right: 0;
    }
  }

  .page-link {
    background-color: $pagination-page-link-background;
    border: 1px solid $pagination-page-link-background;
    color: $pagination-page-link-color;
    display: block;
    line-height: 1.25;
    margin: 0;
    padding: 0.5rem 0.75rem;
    position: relative;

    &:hover {
      background-color: darken($pagination-page-link-background, 5%);
      border-color: darken($pagination-page-link-background, 5%);
    }

    .active & {
      &,
      &:hover {
        background-color: $pagination-page-link-background-active;
        border-color: $pagination-page-link-background-active;
        color: $pagination-page-link-color-active;
      }
    }
  }
}