{% capture css %}
  {% render "../../assets/styles/components/paginator.css" %}
{% endcapture %}
<style>{{ css }}</style>
<nav aria-label="Blog pagination" class="pagination flex--centered">
  {% if pagination.href.previous %}
    <a href="{{ pagination.href.previous }}">
      <button aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
        {% tablericon "arrow-left" "Previous" %}
      </button>
    </a>
  {% else %}
    <button
      class="disabled"
      aria-label="Previous page (disabled)"
      disabled>
      {% tablericon "arrow-left" "Prevous" %}
    </button>
  {% endif %}
  <div class="text--centered">
    <span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
  </div>
  {% if pagination.href.next %}
    <a href="{{ pagination.href.next }}">
      <button aria-label="Next page">
        {% tablericon "arrow-right" "Next" %}
      </button>
    </a>
  {% else %}
    <button
      class="disabled"
      aria-label="Next page (disabled)"
      disabled>
      {% tablericon "arrow-right" "Next" %}
    </button>
  {% endif %}
</nav>