Pagination

<div class="pagination is-tiny">
  <button class="pagination-first">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
    </svg>
  </button>
  <button class="pagination-prev">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
    </svg>
  </button>
  <button class="pagination-item">7</button>
  <button class="pagination-item is-active"> 8</button>
  <button class="pagination-item">9</button>
  <button class="pagination-next">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    </svg>
  </button>
  <button class="pagination-last">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
    </svg>
  </button>
</div>

<div class="pagination is-small">
  <button class="pagination-first">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
    </svg>
  </button>
  <button class="pagination-prev">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
    </svg>
  </button>
  <button class="pagination-item">7</button>
  <button class="pagination-item is-active"> 8</button>
  <button class="pagination-item">9</button>
  <button class="pagination-next">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    </svg>
  </button>
  <button class="pagination-last">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
    </svg>
  </button>
</div>

<div class="pagination is-normal">
  <button class="pagination-first">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
    </svg>
  </button>
  <button class="pagination-prev">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
    </svg>
  </button>
  <button class="pagination-item">7</button>
  <button class="pagination-item is-active"> 8</button>
  <button class="pagination-item">9</button>
  <button class="pagination-next">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    </svg>
  </button>
  <button class="pagination-last">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
    </svg>
  </button>
</div>

<div class="pagination is-large">
  <button class="pagination-first">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
    </svg>
  </button>
  <button class="pagination-prev">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
    </svg>
  </button>
  <button class="pagination-item">7</button>
  <button class="pagination-item is-active"> 8</button>
  <button class="pagination-item">9</button>
  <button class="pagination-next">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    </svg>
  </button>
  <button class="pagination-last">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
    </svg>
  </button>
</div>

<div class="pagination is-massive">
  <button class="pagination-first">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
    </svg>
  </button>
  <button class="pagination-prev">
    <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
      <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
    </svg>
  </button>
  <button class="pagination-item">7</button>
  <button class="pagination-item is-active"> 8</button>
  <button class="pagination-item">9</button>
  <button class="pagination-next">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
    </svg>
  </button>
  <button class="pagination-last">
    <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
      <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
    </svg>
  </button>
</div>

.pagination.is-tiny
  button.pagination-first
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
  button.pagination-prev
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
  button.pagination-item 7
  button.pagination-item.is-active  8
  button.pagination-item 9
  button.pagination-next
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
  button.pagination-last
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')


.pagination.is-small
  button.pagination-first
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
  button.pagination-prev
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
  button.pagination-item 7
  button.pagination-item.is-active  8
  button.pagination-item 9
  button.pagination-next
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
  button.pagination-last
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')


.pagination.is-normal
  button.pagination-first
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
  button.pagination-prev
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
  button.pagination-item 7
  button.pagination-item.is-active  8
  button.pagination-item 9
  button.pagination-next
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
  button.pagination-last
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')

.pagination.is-large
  button.pagination-first
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
  button.pagination-prev
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
  button.pagination-item 7
  button.pagination-item.is-active  8
  button.pagination-item 9
  button.pagination-next
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
  button.pagination-last
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')


.pagination.is-massive
  button.pagination-first
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
  button.pagination-prev
    svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
      path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
  button.pagination-item 7
  button.pagination-item.is-active  8
  button.pagination-item 9
  button.pagination-next
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
  button.pagination-last
    svg#icon-arrowNext.icon(viewbox='0 0 24 24')
      path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')