/*
  Pagination — Website Refresh 2026 1e (Figma), now its own top-level
  frame (moved out of Button).
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=8064-35610

  Requires tokens.css, icons.css, and buttons.css to be loaded first
  — the Prev/Next controls are the existing Icon Only/Light button
  (.rs-button--icon-only-light) reused directly, not a new component.

  The ellipsis glyph uses "Instrument Sans", a third font family not
  used anywhere else in the type system so far (headings use Space
  Grotesk, everything else uses Atkinson Hyperlegible Next) —
  confirmed from two separate Figma instances, not a one-off typo in
  the file, but worth flagging since it's a new addition to the type
  system's font stack.

  No page number in the composed Pagination example Figma provided
  is marked as the current page — every number uses the plain
  default style. So the "current page" look (dark bg, light text,
  same as :active) is exposed here as an `.is-current` class you
  apply to whichever button represents the active page, same pattern
  used for Navigation's current-page state in buttons.css.
*/

.rs-pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--space-48);
}

.rs-pagination__control {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.rs-pagination-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: var(--space-48);
  border: none;
  border-radius: var(--space-6);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-900);
}
.rs-pagination-button:hover {
  background-color: var(--color-neutral-300);
}
.rs-pagination-button:active,
.rs-pagination-button.is-current {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-100);
}

.rs-pagination-button--ellipsis {
  background-color: transparent;
  border-radius: 0;
  cursor: default;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}
.rs-pagination-button--ellipsis:hover {
  background-color: transparent;
}