@penaprieto/design-system/dist/components/Pagination/Pagination.css

Multi-brand React design system with design tokens from Figma

/* Base Pagination */
.ds-pagination {
  display: flex;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* List */
.ds-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--size2, 8px);
}

/* Ellipsis */
.ds-pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-fontWeight, 400);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-secondary);
  user-select: none;
}

/* Sizes */
.ds-pagination--small .ds-pagination__ellipsis {
  min-width: 32px;
  height: 32px;
  font-size: var(--body-small-fontSize, 14px);
}

.ds-pagination--large .ds-pagination__ellipsis {
  min-width: 48px;
  height: 48px;
  font-size: var(--body-large-fontSize, 18px);
}