/* Ninja Neumorph - Pager / Pagination */

.pager,
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: var(--nm-space-lg) 0;
  gap: var(--nm-space-xs);
}

.pager__items,
ul.pagination,
ol.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.pager__items > li,
.pagination > li,
.pagination > .page-item,
.pager__item {
  list-style: none !important;
}

.pager__item,
.page-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.pager__link,
.page-link,
.pager__items a,
.pager__items span,
.pager li a,
.pager li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0;
  color: #31344b;
  background: #e6e7ee;
  border: 0;
  border-radius: 0.55rem;
  box-shadow: 3px 3px 6px #b8b9be, -3px -3px 6px #ffffff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--nm-transition-fast);
  margin: 0 4px;
}

.pager__link:hover,
.page-link:hover,
.pager__items a:hover,
.pager li a:hover {
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #ffffff;
  background: #e6e7ee;
  color: #31344b;
  text-decoration: none;
}

.pager__item--active .pager__link,
.pager__item.is-active .pager__link,
.page-item.active .page-link,
.pager__item--current,
.pager__items .is-active > a,
.pager__items .is-active > span {
  background: #e6e7ee;
  color: #525480;
  box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #ffffff;
}

.pager__item--disabled .pager__link,
.page-item.disabled .page-link,
.pager__item.is-disabled > a,
.pager__item.is-disabled > span {
  opacity: 0.4;
  pointer-events: none;
}

/* Mini pager (views) */
.views-mini-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--nm-space-sm);
  margin: var(--nm-space-lg) 0;
}

/* Neumorphism reference variants */
.circle-pagination .page-link,
.circle-pagination span {
  border-radius: 50% !important;
}

.pagination-lg .page-item .page-link,
.pagination-lg .page-item span {
  width: 46px;
  height: 46px;
}

.pagination-sm .page-item .page-link,
.pagination-sm .page-item span {
  width: 30px;
  height: 30px;
}