/* ---- pagination: to be refactored out ---- */

.pagination {
  max-width: 32em;
  display: block;
  margin: calc(var(--line-height-em)*2) 0 0 auto;
  padding-bottom: calc(var(--line-height-em)*4);
}

.pagination__page-number {
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  padding: calc(var(--line-height-em)/2);
}

.pagination__page-number.is-active, .pagination__page-number.is-active:hover {
  color: var(--bright-orange);
}

.pagination__page-number:hover, .pagination__ellipse:hover {
  color: var(--burnt-orange);
}

.pagination__next {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding: calc(var(--line-height-em)/2) var(--line-height-em);
  background: var(--burnt-orange);
  color: var(--background-white);
}

.pagination__next--former {
  margin-right: 1em;
}

.pagination__next--latter {
  margin-left: 1em;
}

.pagination__next:hover {
  background: var(--bright-orange);
}

.pagination__dropdown-wrapper {
  display: inline-block;
  position: relative;
}

.pagination__ellipse {
  padding: calc(var(--line-height-em)/2) var(--line-height-em);
}

.pagination__ellipse-dropdown {
  box-shadow: 0 0 3px 1px rgba(30, 30, 30, .3);
  position: absolute;
  overflow-y: auto;
  max-height: 300px;
  background: var(--white);
}

.pagination__ellipse-dropdown .pagination__page-number {
  display: block;
  margin: 0;
  padding: calc(var(--line-height-em)/2) var(--line-height-em);
}