/* =========================================================================
   Element · Pagination — Figma 213:11811 (page Global: Elements)
   16px dots, 8 apart; the current one Black, the others Black 30; on hover
   (drawn beside it) Black 50.
   Raw in Figma: the dot size 16, the gap 8 (written with --space-8), the
   radius — bound to "Full", a variable of an old library that is not in
   Foundations (here: 50%).
   ========================================================================= */
.e-pagination { display: flex; align-items: center; gap: var(--space-8); }
.e-pagination > * {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-black-30);
  cursor: pointer;
  transition: background-color var(--ds-title-duration) var(--ds-hover-ease);
}
@media (any-hover: hover) {
  .e-pagination > :hover { background: var(--color-black-50); }
}
.e-pagination > :is([aria-selected="true"], .is-on) { background: var(--color-black); }
@media (prefers-reduced-motion: reduce) {
  .e-pagination > * { transition: none; }
}