/**
 * @file
 * Pagination Styles
 */

.pager__items li a {
  background-color: transparent;
  border-radius: 4px;
  color: var(--color--primary);
  font-size: var(--font-size--h5);
  font-weight: 600;
  letter-spacing: var(--letter-spacing--h5);
  padding: var(--gap-static--xxxxs) var(--gap-static--xxxs);
  transition: background-color var(--transition-dur), color var(--transition-dur);
}

.pager__items li a:focus-visible {
  border-radius: var(--focus__border-radius, inherit);
  box-shadow: var(--focus__box-shadow, inherit);
  outline: var(--focus__outline-width, 2px) solid var(--focus__outline-color);
  outline-offset: var(--focus__outline-offset, 2px);
}

.pager__items li {
  padding: 0 var(--gap-static--xxxxs);
}

.pager__item {
  padding: 0;
}

.pager__items a:hover {
  background-color: var(--color--dark-accent-2);
  color: var(--color--white);
}

.pager__items li.is-active a {
  background-color: var(--color--dark-accent-1);
  color: var(--color--white);
}

.pager__items .pager__item--next a,
.pager__items .pager__item--previous a {
  background-color: transparent;
  display: inline-block;
  height: 100%;
  padding: 0;
  width: 15px;

  span {
    display: inline-block;
    position: relative;
    text-indent: -99999px;
    width: 15px;

    &::after {
      background-color: var(--color--primary);
      content:'';
      height: 9.5px;
      left: 0;
      mask-image: url('../../dist/public/icons/arrow.svg');
      mask-repeat: no-repeat;
      mask-size: contain;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 15px;
    }
  }

  &:hover {
    span::after {
      background-color: var(--color--dark-accent-2);
    }
  }
}

.pager__items .pager__item--next {
  padding: 0 0 0 var(--gap-static--xxs);
}

.pager__items .pager__item--previous  {
  padding: 0 var(--gap-static--xxs) 0 0;

  a {
    span {
      &::after {
        transform: translateY(-50%) rotate(180deg);
      }
    }
  }

}

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

@media only screen and (min-width: 1024px) {
  .pager__items li a {
    padding: var(--gap-static--xxxs) var(--gap-static--xxs);
  }
}