/* Pager */
.pager__items {
  position: relative;
  padding-inline-start: 0;
}

.pager__item {
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: 0.5em;
  align-items: center;
}

.pager__item:not(.pager__item--previous, .pager__item--first, .pager__item--next, .pager__item--last) {
  width: 32px;
  height: 32px;
  margin: 0 .25rem;
  background-color: rgba(244, 244, 234, 0.81); /* 30% #d8d8d8 */
}

@media screen and (max-width: 767px) {
  .pager__item:not(.is-active, .pager__item--previous, .pager__item--next) {
    display: none;
  }

  .pager__item.is-active + .pager__item,
  .pager__item:has( + .pager__item.is-active) {
    display: inline-flex;
  }

  .pager__item span,
  .pager__item a span {
    text-indent: -10000px;
  }

}

.pager__item.is-active {
  background-color: #e8dab6;
}

.pager__item a {
  font-weight: normal;
  text-decoration: none;
  line-height: 1;

  /* add to make a to expand to li size */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

/* Inactive fist previous */
.pager__item--previous.opacity-50,
.pager__item--first.opacity-50 {
  padding: 1rem 1rem 1rem 24px;
  [aria-hidden="true"] {
    text-indent: -9999px
  }
}

.pager__item--previous.opacity-50::before {
  position: absolute;
  /*z-index: -1;*/
  left: 0;
  content: '';
  width: 32px;
  height: 24px;
  background-image: url("../../images/icons/previous-next.svg");
  background-position: left center;
  background-repeat: no-repeat;
}

.pager__item--first.opacity-50::before {
  position: absolute;
  /*z-index: -1;*/
  left: 0;
  content: '';
  width: 32px;
  height:24px;
  background-image: url("../../images/icons/first-last.svg");
  background-position: left center;
  background-repeat: no-repeat;
}

/* Active fist previous */
.pager__item--previous,
.pager__item--first {
  padding: 0;
}

.pager__item--previous a,
.pager__item--first a {
  padding: 1rem 1rem 1rem 1.5rem;
  & [aria-hidden="true"] {
    text-indent: -9999px
  }
}

.pager__item--previous a::before {
  position: absolute;
  /*z-index: -1;*/
  left: 0;
  content: '';
  width: 32px;
  height: 24px;
  background-image: url("../../images/icons/previous-next.svg");
  background-position: left center;
  background-repeat: no-repeat;
}

.pager__item--first a::before {
  position: absolute;
  /*z-index: -1;*/
  left: 0;
  content: '';
  width: 32px;
  height:24px;
  background-image: url("../../images/icons/first-last.svg");
  background-position: left center;
  background-repeat: no-repeat;
}

/* Active Next Last */
.pager__item--next,
.pager__item--last {
  padding: 0 0 0 0;
}
.pager__item--next a,
.pager__item--last a {
  padding: 1rem 1.5rem 1rem 1rem;
  & [aria-hidden="true"] {
    text-indent: -9999px
  }
}

.pager__item--next a::after {
  position: absolute;
  /*z-index: -1;*/
  right: 0;
  content: '';
  width: 32px;
  height: 24px;
  background-image: url("../../images/icons/previous-next.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  transform: rotate(180deg);
}

.pager__item--last a::after {
  position: absolute;
  /*z-index: -1;*/
  right: 0;
  content: '';
  width: 32px;
  height: 24px;
  background-image: url("../../images/icons/first-last.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  transform: rotate(180deg);
}

/* inactive Next Last */
.pager__item--next.opacity-50,
.pager__item--last.opacity-50 {
  padding: 1rem 1.5rem 1rem 1rem;
  user-select: none;
  & [aria-hidden="true"] {
    text-indent: -9999px
  }
}

.pager__item--next.opacity-50::after {
  position: absolute;
  /*z-index: -1;*/
  right: 0;
  content: '';
  width: 32px;
  height: 24px;
  background-image: url("../../images/icons/previous-next.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  transform: rotate(180deg);
}

.pager__item--last.opacity-50::after {
  position: absolute;
  /*z-index: -1;*/
  right: 0;
  content: '';
  width: 32px;
  height: 24px;
  background-image: url("../../images/icons/first-last.svg");
  background-repeat: no-repeat;
  background-position: 0 center;
  transform: rotate(180deg);
}