/**
 * Pagination Styles
 * @countermeasure/web-components
 *
 * Page navigation with Previous / Next controls and optional numbered page
 * links. Visual design mirrors the React `Pagination` primitive: glass surface
 * tokens, rounded-lg controls, an active page with `shadow-glow`, and a
 * primary focus ring.
 */

/* ============================================================================
   PAGINATION CONTAINER
   ============================================================================ */
.cmm-pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
  flex-wrap: wrap;
}

/* Numbered page links live in their own row group, between prev and next. */
.cmm-pagination__pages {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem; /* gap-1 */
}

/* ============================================================================
   PAGINATION BUTTON

   Base mirrors the React `PaginationLink` inactive state:
   inline-flex, rounded-lg, text-sm, font-medium, transition-colors,
   text-foreground-secondary with a glass hover.
   ============================================================================ */
.cmm-pagination__button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem; /* gap-1 */
  height: 2.25rem; /* h-9 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-foreground-secondary);
  cursor: pointer;
  user-select: none;
  transition:
    background-color 150ms,
    border-color 150ms,
    color 150ms;
}

/* Square page-number links (size-9). */
.cmm-pagination__button--page {
  width: 2.25rem; /* size-9 */
  padding: 0;
}

/* Prev / Next pill controls (h-9, px-3). */
.cmm-pagination__button--prev,
.cmm-pagination__button--next {
  padding: 0 0.75rem; /* px-3 */
}

.cmm-pagination__button:hover {
  background-color: var(--color-glass-hover);
  border-color: var(--color-border-glass);
  color: var(--color-foreground);
}

/* Prev / Next have no hover border in the React primitive. */
.cmm-pagination__button--prev:hover,
.cmm-pagination__button--next:hover {
  border-color: transparent;
}

.cmm-pagination__button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

/* Active / current page — bg-primary text-primary-foreground shadow-glow. */
.cmm-pagination__button--active,
.cmm-pagination__button--active:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

/* Disabled state — disabled:pointer-events-none disabled:opacity-50. */
.cmm-pagination__button--disabled,
.cmm-pagination__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Chevron icons (size-4). */
.cmm-pagination__icon {
  width: 1rem; /* size-4 */
  height: 1rem;
  flex-shrink: 0;
}

/* ============================================================================
   PAGINATION ELLIPSIS

   Mirrors React `PaginationEllipsis`: flex size-9, text-foreground-muted,
   with a more-horizontal icon and sr-only "More pages" label.
   ============================================================================ */
.cmm-pagination__ellipsis {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; /* size-9 */
  height: 2.25rem;
  color: var(--color-foreground-muted);
  user-select: none;
}

.cmm-pagination__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   PAGINATION INFO
   ============================================================================ */
.cmm-pagination__info {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
  white-space: nowrap;
  margin-left: 0.5rem;
}

/* ============================================================================
   PAGINATION SIZE SELECTOR
   ============================================================================ */
.cmm-pagination__size {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

.cmm-pagination__size-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  background-color: var(--color-glass);
  color: var(--color-foreground);
  cursor: pointer;
  transition: border-color 150ms;
}

.cmm-pagination__size-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 480px) {
  .cmm-pagination {
    justify-content: center;
  }

  .cmm-pagination__info {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 0.5rem;
  }

  .cmm-pagination__size {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 0.25rem;
  }
}
