Components/pagination

pagination.hbs

<ul class="pagination {{class}}" role="navigation" aria-label="Pagination Navigation, Current Page 2">
  <li class="pagination__arrow pagination__arrow--prev">
    <a href="#" aria-label="Go to previous page">
      <svg width="9" height="14" aria-hidden="true" role="presentation">
        <use xlink:href="/assets/images/icons.svg#chevron"></use>
      </svg>
      <span class="pagination__arrow-text">Previous</span>
    </a>
  </li>
  <li>
    <span aria-current="page" aria-label="Current page">
      1
    </span>
  </li>
  <li>
    <a href="#" aria-label="Go to page 2">
      2
    </a>
  </li>
  <li>
    <a href="#" aria-label="Go to page 3">
      3
    </a>
  </li>
  <li>
    <a href="#" aria-label="Go to page 4">
      4
    </a>
  </li>
  <li class="pagination__arrow pagination__arrow--next">
    <a href="#" aria-label="Go to next page">
      <span class="pagination__arrow-text">Next</span>
      <svg width="9" height="14" aria-hidden="true" role="presentation">
        <use xlink:href="/assets/images/icons.svg#chevron"></use>
      </svg>
    </a>
  </li>
</ul>

pagination.scss

.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: rem(5px);
  @include poly-fluid-sizing('margin', (
    'small': rem(50px 0),
    'large': rem(120px 0)
  ));
  font-weight: $fw-light;

  a,
  span {
    min-width: rem(25px);
    display: inline-block;
    text-align: center;
    color: inherit;
    transition: all .2s ease;

    &:hover,
    &[aria-current=page] {
      color: $color-red;
      text-decoration: underline;
    }

    &[aria-current=page] {
      font-weight: $fw-semibold;
    }
  }

  &__arrow {
    a {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: $fw-medium;
    }

    svg {
      height: rem(20px);
      width: auto;
    }

    &--prev {
      margin-right: 10%;

      svg {
        margin-right: rem(15px);
        transform: rotate(-90deg);
      }
    }

    &--next {
      margin-left: 10%;

      svg {
        margin-left: rem(15px);
        transform: rotate(90deg);
      }
    }
  }
}