/**
 * Style for pager element.
 */
.pager {
  margin: var(--spacing-md) 0;
}

.pager__items {
  font-weight: bold;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: center;
  padding: unset;
  list-style: none;
}

.pager__item {
  display: inline-flex;
  margin: 0 var(--spacing-xxs);
  align-items: center;
  justify-content: center;
}

.pager__item-title--backwards {
  margin-left: var(--spacing-xs);
}

.pager__item-title--forward {
  margin-right: var(--spacing-xs);
}

.pager__link {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  text-decoration: none;
  color: var(--color-text);
  border-radius: 50%;
  font: var(--typography-title-small);
  font-weight: normal;
}

.pager__link:hover {
  color: var(--color-on-primary-container);
  background: var(--color-primary-container);
}

.pager__link--is-active {
  color: var(--color-on-primary-container);
  background: var(--color-primary-container);
}

.pager__link--action-link {
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.pager__item--first .pager__link::before,
.pager__item--previous .pager__link::before,
.pager__item--next .pager__link::after,
.pager__item--last .pager__link::after {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  content: '';
  background-repeat: no-repeat;
  background-position: center;
}

.pager__item--first .pager__link::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2V14' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M14 2L8 8L14 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--previous .pager__link::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 2L5 8L11 14' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--next .pager__link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--last .pager__link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 14L14 2.00001' stroke='%23545560' stroke-width='2'/%3E%3Cpath d='M2 14L8 8.00001L2 2.00001' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.pager__item--ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/* Show only next and prev for low-res displays. */
.pager__item:not(.pager__item--previous):not(.pager__item--next) {
  display: none;
}

@media (min-width: 768px) {
  .pager__item:not(.pager__item--previous):not(.pager__item--next) {
    display: flex;
  }
}