//
//--------------------------------------------------------------------------
// Pagination - Luma
//--------------------------------------------------------------------------
//

.pagination {
  display: flex;
  list-style: none;
  text-align: center;

  &.is-center {
    justify-content: center;
  }
}

.page-item {
  display: block;

  &:first-child {
    .page-link {
      border-bottom-left-radius: .4rem;
      border-top-left-radius: .4rem;
      margin-left: 0;
    }
  }

  &:last-child {
    .page-link {
      border-bottom-right-radius: .4rem;
      border-top-left-radius: .4rem;
    }
  }

  &.active {
    .page-link {
      background-color: $pagination-color-bg-active;
      color: $pagination-color-link-active;
    }
  }
}

.page-link {
  border: 1px solid $pagination-color-border;
  border-radius: 0;
  color: $pagination-color-link;
  display: inline-block;
  line-height: 1.2;
  margin-left: -1px;
  padding: 1rem 1.6rem;
  transition: none;

  &:hover,
  &:active,
  &:focus {
    background-color: $pagination-color-bg-hover;
    color: $pagination-color-link;
  }
}

//
//--------------------------------------------------------------------------
// Pagination - Luma
//--------------------------------------------------------------------------
//

.pagination {
  display: flex;
  list-style: none;
  text-align: center;

  &.is-center {
    justify-content: center;
  }
}

.page-item {
  display: block;

  &:first-child {
    .page-link {
      border-bottom-left-radius: .4rem;
      border-top-left-radius: .4rem;
      margin-left: 0;
      white-space: nowrap;
    }
  }

  &:last-child {
    .page-link {
      border-bottom-right-radius: .4rem;
      border-top-left-radius: .4rem;
      white-space: nowrap;
    }
  }

  &.active {
    .page-link {
      background-color: $pagination-color-bg-active;
      color: $pagination-color-link-active;
    }
  }
}

.page-link {
  border: 1px solid $pagination-color-border;
  border-radius: 0;
  color: $pagination-color-link;
  display: inline-block;
  line-height: 1.2;
  margin-left: -1px;
  padding: 1rem 1.6rem;
  transition: none;

  &:hover,
  &:active,
  &:focus {
    background-color: $pagination-color-bg-hover;
    color: $pagination-color-link;
  }
}

Fix a responsive issue with the pagination component
Fix a responsive issue with the pagination component
