cork-pagination.html

<style>
  :host {
    display: block;
  }

  #root {
    display: flex;
    align-items: center;
  }

  .ellipsis {
    display: none;
  }

  paper-icon-button {
    color: var(--cork-color, --default-primary-color);
    border: 2px solid transparent;
    border-radius: 20px;
  }
  paper-icon-button[disabled] {
     color: var(--cork-disabled-color, var(--disabled-color, #ccc));
  }

  a {
    color: var(--cork-color, --default-primary-color);
    cursor: pointer;
    text-align: center;
    min-width: 20px;
    border-radius: 25px;
    display: inline-block;
    padding: 5px;
    margin: 0 3px;
    font-size: 14px;
    line-height: 20px;
    border: 2px solid transparent;
  }

  a:hover {
    background: var(--cork-background-color-light, var(--light-background-color, #eee));
  }

  a[selected] {
    background: var(--cork-background-color, var(--medium-background-color, #ccc));
    color: white;
  }

  a:focus, paper-icon-button:focus {
    outline: none;
    border : 2px dotted var(--default-secondary-color);
  }

  [hidden] {
    display: none;
  }

  .text-display {
    font-style: italic;
  }

  .xsm-lastpage {
    display: none;
  }

  @media (max-width: 500px) {
    .ellipsis, .single:not([selected]) {
      display: none !important;
    }
    .xsm-lastpage {
      display: inline;
    }
    a[selected] {
      color: var(--default-text-color, 'black');
      background: transparent;
    }
  }
</style>

<div id="root">
  <paper-icon-button tabindex="0" disabled$="[[firstPage]]" icon="arrow-back" on-click="previous"></paper-icon-button>

  <div style="flex:1"></div>

  <div hidden$="[[loading]]">
    <div hidden$="[[!textMode]]" class="text-display">[[textDisplay]]</div>
  </div>

  <div hidden$="[[textMode]]">
    <a selected$="[[firstPage]]" class="single" tabindex="0" on-click="_selectPage" on-keyup="_selectPage">
      1<span class="xsm-lastpage"> / [[lastPageIndex]]</span>
    </a>
    <a id="startEllipsis" class="ellipsis" tabindex="0" on-click="previousSection" on-keyup="_selectPage">...</a>

    <template is="dom-repeat" items="[[pages]]">
      <a class="single" selected$="[[item.selected]]" tabindex="0" on-click="_selectPage" on-keyup="_selectPage">
        [[item.index]]<span class="xsm-lastpage"> / [[lastPageIndex]]</span>
      </a>
    </template>

    <a id="stopEllipsis" class="ellipsis" tabindex="0" on-click="nextSection" on-keyup="_selectPage">...</a>
    <a id="lastPage" class="single" selected$="[[lastPage]]" tabindex="0" on-click="_selectPage" on-keyup="_selectPage">
      [[lastPageIndex]]<span class="xsm-lastpage"> / [[lastPageIndex]]</span>
    </a>
  </div>

  <div style="flex:1"></div>

  <paper-icon-button disabled$="[[lastPage]]" tabindex="0" icon="arrow-forward" on-click="next"></paper-icon-button>
</div>