@use 'sprucecss/scss/spruce' as *;

@include generate-btn(
  '.pagination__page-number',
  null,
  false,
  true
);

.pagination {
  display: flex;
  justify-content: center;

  &__links {
    @include clear-list;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('s');

    > * + * {
      margin-block-start: 0;
    }
  }

  &__page-number {
    @include btn-variant('pagination');

    &[aria-current='page'] {
      background: color('pagination-background-hover', 'btn');
      border-color: color('pagination-background-hover', 'btn');
      color: color('pagination-foreground-hover', 'btn');
      pointer-events: none;
    }

    &[disabled] {
      pointer-events: none;
    }

    &--sm {
      min-inline-size: 1.75rem;
    }
  }
}

<nav class="pagination" aria-label="Posts">
    <h2 class="sr-only">Post Navigation</h2>
    <ul class="pagination__links">
        <li>
            <a class="pagination__page-number" aria-current="page">1</a></li>
        <li>
            <a class="pagination__page-number" href="#">2</a>
        </li>
        <li>
            <a class="pagination__page-number" href="#">3</a>
        </li>
        <li>
            <a class="pagination__page-number" href="#">4</a>
        </li>
        <li>
            <a class="pagination__page-number" disabled>...</a></li>
        <li>
            <a class="pagination__page-number" href="#">10</a>
        </li>
        <li>
            <a class="pagination__page-number" href="#">Next</a>
        </li>
    </ul>
</nav>

Pagination

Variations

--sm: smaller display version.

Technical Details

We style and mark the current page with aria-current='page'.
We use <nav> element to mark the navigation.
We use the generate-btn and btn-variant mixin to create a similar appearance to the standard button.
You should add the colors to your config file.

Dark Colors

@use 'sprucecss/scss/spruce' with (
  $dark-colors: (
    'btn': (
      'pagination-background': hsl(207deg 97% 12%),
      'pagination-background-hover': hsl(261deg 52% 59%),
      'pagination-foreground': hsl(0deg 0% 100%),
      'pagination-foreground-hover': hsl(0deg 0% 100%),
      'pagination-focus-ring': hsl(261deg 52% 59%),
    ),
  ),
);