/**
 * @file
 * Pager styling for the Save Mo Lives theme.
 *
 * Numbered pager with square items; the active page uses the brand orange.
 */

.pager__items,
.pagination,
ul.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.pager__item,
.page-item {
  list-style: none;
}

.pager__item a,
.pager__item.is-active a,
.page-link,
.pagination a,
.pagination span {
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  border: 1px solid var(--sml-border);
  border-radius: 4px;
  background: var(--sml-white);
  color: var(--sml-black);
  font-weight: 700;
  text-decoration: none;
}

.pager__item a:hover,
.page-link:hover,
.pagination a:hover {
  border-color: var(--sml-purple);
  background: var(--sml-gray);
  color: var(--sml-black);
  text-decoration: none;
}

.pager__item.is-active a,
.pager__item--current,
.page-item.active .page-link,
.pagination .active span {
  border-color: var(--sml-orange);
  background: var(--sml-orange);
  color: var(--sml-white);
}

/* Previous / next arrows. */
.pager__item--previous a,
.pager__item--next a,
.pager__item--first a,
.pager__item--last a {
  font-weight: 800;
}