submit-social-housing-lettings-and-sales-data/app/frontend/styles/_pagination.scss

// https://github.com/alphagov/govuk-frontend/blob/add-pagination-prototype/src/govuk/components/pagination/_index.scss
.app-pagination {
  border-top: 1px solid $govuk-border-colour;
  margin-top: govuk-spacing(2);
  padding-top: govuk-spacing(2);
  text-align: center;

  @include govuk-media-query($from: tablet) {
    // Hide whitespace between elements
    font-size: 0;

    // Trick to remove the need for floats
    text-align: justify;

    &:after {
      content: " ";
      display: inline-block;
      width: 100%;
    }
  }
}

.app-pagination__list {
  margin: 0 govuk-spacing(-3);
  padding: 0;
  list-style: none;

  @include govuk-media-query($from: tablet) {
    display: inline-block;
    margin-bottom: 0;
  }
}

.app-pagination__results {
  @include govuk-font(19);
  margin-top: 0;
  margin-bottom: govuk-spacing(4);
  padding: govuk-spacing(1) 0;

  @include govuk-media-query($from: tablet) {
    display: inline-block;
  }
}

.app-pagination__item {
  @include govuk-font(19);
  display: inline-block;
  margin-bottom: govuk-spacing(4);

  // Hide items on small screens
  @include govuk-media-query($until: tablet) {
    display: none;
  }
}

// Only show previous, next, first, last and current items on mobile
.app-pagination__item--current,
.app-pagination__item--divider,
.app-pagination__item--prev,
.app-pagination__item--next,
.app-pagination__item:nth-child(2),
.app-pagination__item:nth-last-child(2) {
  @include govuk-media-query($until: tablet) {
    display: inline-block;
  }
}

.app-pagination__item--current,
.app-pagination__item--divider {
  box-sizing: border-box;
  font-weight: bold;
  min-width: govuk-spacing(8);
  min-height: govuk-spacing(4);
  padding: govuk-spacing(2);
  text-align: center;
}

.app-pagination__item--divider {
  margin: 0 govuk-spacing(-4);
  padding-right: 0;
  padding-left: 0;
  color: $govuk-secondary-text-colour;
  pointer-events: none;
}

.app-pagination__link {
  @include govuk-link-common;
  @include govuk-link-style-no-underline;
  box-sizing: border-box;
  color: $govuk-link-colour;
  display: block;
  min-width: govuk-spacing(8);
  min-height: govuk-spacing(4);
  padding: govuk-spacing(2);
  text-align: center;

  .app-pagination__link-label {
    @include govuk-font($size: 16, $weight: "regular");
    display: block;
    padding-left: 32px;
    text-decoration: underline;
  }

  &:hover .app-pagination__link-label {
    @include govuk-link-hover-decoration;
  }

  &:focus {
    box-shadow: 0 0 $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
    text-decoration: underline;
  }

  &:hover:not(:focus) {
    background-color: govuk-colour("light-grey", $legacy: "grey-4");
  }
}

.app-pagination__icon {
  fill: currentcolor;
}

.app-pagination__item--prev .app-pagination__link,
.app-pagination__item--next .app-pagination__link {
  padding: govuk-spacing(2) govuk-spacing(3);
  font-weight: bold;
}

.app-pagination__item--prev .app-pagination__icon {
  margin-right: govuk-spacing(2);
}

.app-pagination__item--next .app-pagination__icon {
  margin-left: govuk-spacing(2);
}