@use '../config/config'; // Use (need) only if this is a standalone file.
@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');

    &--current {
      background: color('pagination-background-hover', 'btn');
      border-color: color('pagination-background-hover', 'btn');
      color: color('pagination-foreground-hover', 'btn');
    }

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

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