/**
 * Pagination
 *
 * Native CSS replacement for src/sass/partials/_pagination.scss.
 * Overrides Bootstrap 5 pagination styles and the SCSS-compiled rules
 * in styles.css using CSS custom properties from css/base/variables.css.
 *
 * Migration Notes:
 * - Migrated from: src/sass/partials/_pagination.scss
 * - Date: 2026-05-04
 * - Status: [x] Complete
 */

/* ==========================================================================
   Pagination — override Bootstrap CSS vars so all states use white background
   ========================================================================== */

:root {
  --bs-pagination-bg: #ffffff;
  --bs-pagination-hover-bg: #ffffff;
  --bs-pagination-focus-bg: #ffffff;
}

.page-link {
  position: relative;
  display: block;
  color: var(--pagination-color);
  text-decoration: none;
  background-color: #ffffff !important;
  border: 1px solid var(--pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link:hover {
  z-index: 2;
  color: var(--pagination-hover-color);
  background-color: #ffffff !important;
  border-color: var(--pagination-hover-border-color);
}

.page-link:focus {
  z-index: 3;
  color: var(--pagination-focus-color);
  background-color: #ffffff !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 64, 36, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item.active .page-link {
  z-index: 3;
  color: var(--pagination-active-color);
  background-color: var(--pagination-active-bg) !important;
  border-color: var(--pagination-active-border-color);
}

.page-item.disabled .page-link {
  color: var(--pagination-disabled-color);
  pointer-events: none;
  background-color: #ffffff !important;
  border-color: var(--pagination-disabled-border-color);
}