// ==========================================================================
// Pagination Component
// Shared pagination styles for student list and page teasers.
// ==========================================================================

.c-pagination {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  .pagination {
    flex-wrap: nowrap;
    gap: $spacer * 0.5;
  }

  .page-link {
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
    color: $primary;
    border: 1px solid $primary;
    background-color: transparent;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }

  .page-item.active .page-link {
    background-color: $primary;
    border-color: $primary;
    color: $white;
    z-index: 1;
  }

  .page-item:not(.active):not(.disabled) .c-pagination__link:not(.c-pagination__link--prev):not(.c-pagination__link--next):hover,
  .page-item:not(.active):not(.disabled) .c-pagination__link:not(.c-pagination__link--prev):not(.c-pagination__link--next):focus-visible {
    background-color: $primary;
    border-color: $primary;
    color: $white;
  }

  .c-pagination__link--prev,
  .c-pagination__link--next {
    border-color: transparent;
    min-width: 2rem;
  }

  .c-pagination__link--prev:hover,
  .c-pagination__link--prev:focus-visible,
  .c-pagination__link--next:hover,
  .c-pagination__link--next:focus-visible {
    background-color: transparent;
    border-color: transparent;
    color: $primary;
  }

  .page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
    color: $gray-400;
    pointer-events: none;
  }
}