/* =============================================================
   Socle · Pagination (.sc-pagination)
   Navigation entre les pages d'une liste ou d'un tableau.
   Anatomie : <nav> > flèches + __list (<ul>) > __item (<li>)
              > .sc-btn.sc-pagination__page. Deux compléments :
              __ellipsis pour les pages repliées, __count pour le
              décompte « 1 à 10 sur 248 ».
   Modificateur : --split, le décompte à un bord et les commandes
   à l'autre, la forme des pieds de tableau.
   Composant purement CSS : la page courante se déclare avec
   aria-current="page" sur son bouton, et c'est l'état sélectionné
   de .sc-btn qui l'habille. Quelles pages afficher appartient au
   produit.
   ============================================================= */

.sc-pagination {
  /* Token de composant : le modificateur ne fait que réassigner ceci. */
  --_pg-gap: var(--gap-s);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_pg-gap);
}

/* ---- Rangée de numéros ----
   Une vraie liste, dont le nombre d'éléments est annoncé avec elle.
   Elle se replie ligne par ligne quand la place manque, comme le fil
   d'Ariane, plutôt que de pousser son conteneur. */

.sc-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-2xs);
  padding: 0;
  list-style: none;
}

.sc-pagination__item {
  display: flex;
}

/* ---- Numéro de page ----
   Posé sur un .sc-btn, dont il ne redéfinit ni la couleur, ni la
   bordure, ni les états. La page courante porte aria-current="page",
   que le bouton lit déjà comme son état sélectionné : rien n'est à
   écrire ici pour la distinguer. */

.sc-pagination__page {
  /* Place carrée d'un chiffre seul, à la hauteur du bouton porteur. */
  --_pg-page-min-size: var(--control-height-m);

  min-width: var(--_pg-page-min-size);
  /* Deux pages voisines gardent la même chasse : sans cela la rangée
     se décale en passant de 8 à 9, et le regard suit le décalage au
     lieu de suivre le numéro. */
  font-variant-numeric: tabular-nums;
}

/* .sc-btn--icon fige une largeur carrée, qui rognerait un numéro à
   trois chiffres. La largeur revient au contenu, le carré reste tenu
   par min-width, et le rembourrage se resserre d'autant. Le sélecteur
   double la classe pour l'emporter sans dépendre de l'ordre des
   feuilles de style. */
.sc-pagination__page.sc-btn--icon {
  width: auto;
  padding-inline: var(--padding-s);
}

/* La place carrée suit la taille du bouton, qui décide de sa hauteur. */
.sc-pagination__page.sc-btn--s {
  --_pg-page-min-size: var(--control-height-s);
}

.sc-pagination__page.sc-btn--l {
  --_pg-page-min-size: var(--control-height-l);
}

/* ---- Pages repliées ----
   Élément vide, donc muet, là où trois points écrits dans le HTML
   seraient lus au milieu de l'énumération des pages. Le <li> porte
   aria-hidden et le glyphe vient du pseudo-élément, comme le
   séparateur du fil d'Ariane. Le repli n'est pas une commande : il
   dit qu'il manque des numéros, il ne mène nulle part. */

.sc-pagination__ellipsis {
  display: flex;
  align-items: center;
  padding-inline: var(--padding-s);
  color: var(--color-text-muted);
  font-size: var(--text-label-size);
  line-height: var(--leading-tight);
  user-select: none;
}

.sc-pagination__ellipsis::before {
  content: "…";
}

/* ---- Décompte ----
   « 1 à 10 sur 248 » : ce que la pagination sait dire d'elle-même, et
   la seule forme qui tienne quand le nombre de pages est grand ou
   encore inconnu. */

.sc-pagination__count {
  --_pg-count-text: var(--color-text-secondary);
  --_pg-count-size: var(--text-body-s-size);

  color: var(--_pg-count-text);
  font-size: var(--_pg-count-size);
  line-height: var(--leading-snug);
  /* Ses trois nombres changent à chaque page : à chasse variable, la
     phrase se dilate et emporte les flèches avec elle. Le rôle de
     mesure ne s'applique pas ici, un décompte est une légende et non
     un chiffre qu'on lit de loin. */
  font-variant-numeric: tabular-nums;
}

/* ---- Pied de tableau ----
   Le décompte à un bord, les commandes à l'autre. Une marge
   automatique plutôt que space-between, qui écarterait aussi les
   flèches l'une de l'autre. Le <nav> étant un bloc, il occupe déjà
   toute la largeur de son parent. */

.sc-pagination--split .sc-pagination__count {
  margin-inline-end: auto;
}