/**
 * The following variable and function originate from the sass-mq library.
 * If you have already included it, you can eliminate the below
 * https://github.com/sass-mq/sass-mq/blob/master/_mq.scss
 */
.pager__item--next a::after, .pager__item--previous a::after {
  display: inline-block;
  background-image: url("/themes/custom/drupalix/scss/svg-sprites/sprite.svg");
  background-size: 133.875em 101.25em;
}

/*Align element vertically and horizontally using absolute positioning*/
/*Mixin for getting elements in a row, specifying the number of columns each element is needed to be given (news style)*/
/*Display elements on the same row using flex*/
/*Turn px into rem*/
/*Mixin for overlays*/
/*Style your button*/
.pager {
  margin-top: 50px;
}
.pager ul {
  margin: 0;
  padding: 0;
}
.pager .is-active a {
  color: var(--blue);
}
.pager__items {
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -ms-justify-content: center;
}
.pager__item--next, .pager__item--previous {
  display: flex;
}
.pager__item--next a, .pager__item--previous a {
  position: relative;
  display: inline-block;
  background: var(--blue);
  appearance: none;
  text-indent: -9999px;
  width: 30px;
  height: 30px;
  transform: rotate(90deg);
  border-radius: 10px;
}
.pager__item--next a::after, .pager__item--previous a::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 50.0625em;
  height: 50.0625em;
  background-position: -0.3125em -0.3125em;
  filter: invert(100%);
  font-size: 3%;
}
.pager__item--next a:hover, .pager__item--previous a:hover {
  background: linear-gradient(to top, var(--blue), var(--lightblue)) bottom;
}
.pager__item--next.page--stop a, .pager__item--previous.page--stop a {
  background: var(--greyblue);
  pointer-events: none;
}
.pager__item--next span, .pager__item--previous span {
  display: none;
}
.pager__item--previous {
  margin-right: 20px;
  transform: rotate(180deg);
}
@media (max-width: 550px) {
  .pager__item--previous {
    margin-right: 8px;
  }
}
.pager__item--next {
  margin-left: 20px;
}
@media (max-width: 550px) {
  .pager__item--next {
    margin-left: 8px;
  }
}
/*# sourceMappingURL=pager.css.map */