/**
 * @file
 * Visual styles for pager.
 */

.pager__items {
  display: flex;
  justify-content: center;
  gap: var(--sp--1);
}
.pager__item {
  display: inline-block;
}
.pager__item a {
  display: block;
  --bt--font-size: var(--fz--text--smaller);
  --bt--line-height: 1rem;
  font-size: var(--bt--font-size);
  line-height: var(--bt--line-height);
  padding: calc(var(--sp--1) - 1px) calc(var(--sp--4) - 1px);
  text-decoration: none;
  border: 1px solid var(--co--primary--low);
  border-radius: var(--sp--2);
}
.pager__item a:hover {
  background-color: var(--co--primary--lower);
  border-color: var(--co--primary--lower);
}
.pager__item.is-active a {
  background-color: var(--co--primary--high);
  border-color: var(--co--primary--high);
  color: var(--co--neutral--lower);
}

.pager__item--last,
.pager__item--first,
.pager__item--next,
.pager__item--previous {
  display: none;
}