/* .pager,
.pagination, */
.results__pagination {
  .pagination__list {
    /* Styles */
    align-items: center;
    color: var(--secondary-navy);
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 27.5px 0 55px;

    @media (min-width: calc(48rem)) {
      justify-content: flex-start;
    }

    &--centered {
      justify-content: center;
    }

    &--right {
      justify-content: flex-end;
    }

    .pagination__list,
    .pagination__items {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        list-style: none;
      }
    }

    .pagination__link {
      &:link,
      &:visited {
        color: var(--secondary-navy);
      }

      &:hover,
      &:active {
        background-color: var(--secondary-purple);
        color: white;
        text-decoration: none;
      }

      &:focus,
      &:focus-visible {
        background-color: var(--secondary-purple);
        color: white;
        outline: 2px solid var(--secondary-navy);
        outline-offset: 0;
        text-decoration: none;
      }
    }

    .pagination__item {
      display: inline-block;
      margin: 0 5px;
      padding: 0;
      position: relative;
      vertical-align: middle;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }

      &--active {
        .pagination__link,
        .pagination__span {
          border-bottom: 2px solid var(--secondary-navy);
          pointer-events: none;
          text-decoration: none;
        }
      }

      &--prev,
      &--next {
        top: -4px;
      }

      @media (width <= 400px) {
        display: none;

        &--prev,
        &--first,
        &--active,
        &--spacer,
        &--last,
        &--next {
          display: inline-block;
        }
      }

      @media (min-width: 1024px) {
        margin: 0 10px;
      }
    }

    .pagination__link,
    .pagination__span {
      border-bottom: 2px solid transparent;
      color: var(--secondary-navy);
      display: block;
      font-size: 23.04px;
      font-weight: 800;
      line-height: 1.085;
      /* margin-top: -8px; */
      min-width: 20px;
      padding: 5px 5px 1px;
      position: relative;
      text-align: center;
      transition: color $transition-time, background-color $transition-time;
      white-space: nowrap;
    }

    @media print {
      display: none;
    }
  }
}