/* Page size button group */
.page-size-buttons {
  display: flex;
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--color-ink-lighter);
}

.page-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--inline-space-half) var(--inline-space);
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-ink);
  background-color: var(--color-canvas);
  border-right: 1px solid var(--color-ink-lighter);
  transition: background-color 0.15s, color 0.15s;
}

.page-size-btn:last-child {
  border-right: none;
}

.page-size-btn:hover {
  background-color: var(--color-ink-lightest);
}

.page-size-btn.active {
  background-color: var(--color-primary);
  color: var(--color-ink-inverted);
}

.page-size-btn.active:hover {
  background-color: var(--color-primary-dark, var(--color-primary));
}

/* Pagination container */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--inline-space-double);
  padding: var(--inline-space-double);
  flex-wrap: wrap;
}

.pagination-info,
.pagination-page-indicator {
  white-space: nowrap;
}

/* Pagination nav */
.pagy-nav {
  display: flex;
  gap: var(--inline-space-half);
  align-items: center;
  justify-content: center;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--inline-space-half);
  border-radius: var(--border-radius);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 700;
  transition: background-color 0.2s;
}

.pagy-nav .page a {
  color: var(--color-ink);
  background-color: var(--color-canvas);
  border: 1px solid var(--color-ink-lighter);
}

.pagy-nav .page a:hover {
  background-color: var(--color-ink-lightest);
  border-color: var(--color-ink-light);
}

.pagy-nav .page.active {
  color: var(--color-ink-inverted);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  cursor: default;
}

.pagy-nav .page.gap {
  color: var(--color-ink-dark);
  border: 1px solid transparent;
}

.pagy-nav .page.prev a,
.pagy-nav .page.next a {
  padding: 0 var(--inline-space);
}

.pagy-nav .page.disabled {
  color: var(--color-ink-light);
  border: 1px solid var(--color-ink-lightest);
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive pagination */
@media (max-width: 600px) {
  .pagination-container {
    flex-direction: column;
    gap: var(--inline-space);
  }

  .pagination-info {
    order: -1;
  }

  .pagination-page-indicator {
    display: none;
  }
}