/* ECO component CSS: pagination. Skill: eco-pagination. Needs /components/css/button.css (the button is eco-button). Link it, do not copy it: <link rel="stylesheet" href="/components/css/pagination.css">
   Tokens only. Mobile-first (desktop from 769px). */
.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 190px;
  max-width: 100%;
  margin: var(--dimension-spacing-space-24) auto 0; /* xs: top 24px */
}
/* Top spacing follows the 5 ECO breakpoints (Figma Pagination, eco-spacing), so it steps at 640px; the component itself (text, button) keeps Mobile Base Styling until 769px */
@media (min-width: 640px) { .pagination { margin-top: var(--dimension-spacing-space-32); } } /* sm */
@media (min-width: 769px) { .pagination { margin-top: var(--dimension-spacing-space-40); } } /* md + lg/xl */

.pagination__info { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }

.pagination__count {
  font-family: 'Breuer Condensed', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.32px;
  color: var(--color-surface-60);
  text-align: center;
  font-feature-settings: 'ss02' 1, 'ss03' 1, 'ss06' 1;
}
@media (min-width: 769px) { .pagination__count { font-size: 17px; line-height: 24px; } }

.pagination__progress { width: 100%; height: 2px; background: var(--color-surface-10); position: relative; }
.pagination__progress-bar {
  position: absolute;
  inset: 0;
  width: 0%; /* set via JS: (visible / total) * 100% */
  background: var(--color-surface-100);
  transition: width var(--duration-medium-2) var(--ease-standard);
}

/* The button is the ECO button (eco-button): <button class="btn btn--secondary btn--md">. Link /components/css/button.css too. */
.pagination .btn { width: 100%; }