Pager

<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
  <ul class="pager__items js-pager__items">
    <li class="pager__item pager__item--first">
      <a href="?page=0" title="Go to first page">
        <span class="visually-hidden">First page</span>
        <span aria-hidden="true">« First</span>
      </a>
    </li>
    <li class="pager__item pager__item--previous">
      <a href="?page=4" title="Go to previous page" rel="prev">
        <span class="visually-hidden">Previous page</span>
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
    <li class="pager__item">
      <a href="?page=1" title="Go to page 2">
        <span class="visually-hidden"> Page </span>2 </a>
    </li>
    <li class="pager__item">
      <a href="?page=2" title="Go to page 3">
        <span class="visually-hidden"> Page </span>3 </a>
    </li>
    <li class="pager__item">
      <a href="?page=3" title="Go to page 4">
        <span class="visually-hidden"> Page </span>4 </a>
    </li>
    <li class="pager__item">
      <a href="?page=4" title="Go to page 5">
        <span class="visually-hidden"> Page </span>5 </a>
    </li>
    <li class="pager__item is-active">
      <a href="?page=5" title="Current page">
        <span class="visually-hidden"> Current page </span>6 </a>
    </li>
    <li class="pager__item">
      <a href="?page=6" title="Go to page 7">
        <span class="visually-hidden"> Page </span>7 </a>
    </li>
    <li class="pager__item">
      <a href="?page=7" title="Go to page 8">
        <span class="visually-hidden"> Page </span>8 </a>
    </li>
    <li class="pager__item">
      <a href="?page=8" title="Go to page 9">
        <span class="visually-hidden"> Page </span>9 </a>
    </li>
    <li class="pager__item">
      <a href="?page=9" title="Go to page 10">
        <span class="visually-hidden"> Page </span>10 </a>
    </li>
    <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
    <li class="pager__item pager__item--next">
      <a href="?page=6" title="Go to next page" rel="next">
        <span class="visually-hidden">Next page</span>
        <span aria-hidden="true">»</span>
      </a>
    </li>
    <li class="pager__item pager__item--last">
      <a href="?page=613" title="Go to last page">
        <span class="visually-hidden">Last page</span>
        <span aria-hidden="true">Last »</span>
      </a>
    </li>
  </ul>
</nav>

.pager {
  position: relative;
  width: 100%;
  margin: var(--spacing-3) 0;
  float: left;
  text-align: center;
}

.pager__items {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline-block;
}

.pager__items li.pager__item {
  padding: 0;
}

.pager__items li.pager__item:before {
  content: none;
}

.pager__item {
  margin: 0.3rem;
  padding: 0;
  float: left;
  background: var(--pager-background);
  list-style-type: none;
  line-height: 1.5;
  border: 0.1rem solid var(--pager-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.pager__item--ellipsis {
  display: none;
}

.pager__item.is-active a {
  background: var(--pager-active-background);
  color: var(--pager-active-text-color);
}

.pager__item.is-active a:hover {
  background: var(--pager-active-background);
  color: var(--pager-active-text-color);
}

.pager__item a:hover {
  background: var(--pager-hover-background);
  color: var(--pager-text-color);
  text-decoration: none;
}

.pager__item a {
  padding: 0.8rem 1.6rem;
  display: block;
  color: var(--pager-text-color);
  text-decoration: none;
}

@media print {
  .pagination {
    display: none;
  }
}

.pager {
	position: relative;
	width: 100%;
	margin: var(--spacing-3) 0;
	float: left;
	text-align: center;
	
	&__items {
		margin: 0;
		padding: 0;
		list-style-type: none;
		display: inline-block;

		li.pager__item {
			padding: 0;
			
			&:before {
				content: none;
			}
		}
	}
				
	&__item {
	    margin: 0.3rem;
		padding: 0;
		float: left;
		background: var(--pager-background);
		list-style-type: none;
    	line-height: 1.5;
    	border: 0.1rem solid var(--pager-border);
		border-radius: 0.5rem;
		overflow: hidden;
		
		&--ellipsis {
			display: none;
		}

		&.is-active a {
			background: var(--pager-active-background);
			color: var(--pager-active-text-color);

			&:hover {
				background: var(--pager-active-background);
				color: var(--pager-active-text-color);
			}
		}
		a:hover {
			background: var(--pager-hover-background);
			color: var(--pager-text-color);
			text-decoration: none;
		}
		
		a {
			padding: 0.8rem 1.6rem;
			display: block;
			color: var(--pager-text-color);
			text-decoration: none;
		}		
	}
}

@media print {
	.pagination {
		display: none;
	}
}