/* =============================================================
   Socle · Séparateur (.sc-divider)
   Filet autonome entre deux blocs, tracé comme
   .sc-menu__separator : un <hr> remis à plat, une seule bordure.
   Modificateurs : --vertical, --label (+ --start), --flush
   Élément : __label
   ============================================================= */

.sc-divider {
  /* Tokens de composant : les modificateurs ne font que réassigner ceci. */
  --_divider-color: var(--color-border);
  --_divider-thickness: var(--border-hairline);
  --_divider-space: var(--gap-l);        /* respiration de part et d'autre du filet */
  --_divider-length: 1lh;                /* dimension structurelle : hauteur du filet vertical, une ligne par défaut */
  --_divider-lead: 1;                    /* part du filet tirée avant le libellé */
  --_divider-label-lead: var(--gap-s);   /* espace entre ce filet et le libellé */

  /* Géométrie. Le bord qui porte le trait et l'axe qui porte la
     respiration sont des variables comme les autres : le corps de la
     règle ne bouge pour aucun modificateur. */
  --_divider-display: block;
  --_divider-self: auto;
  --_divider-inline-size: auto;
  --_divider-block-size: auto;
  --_divider-rule-block: var(--_divider-thickness) solid var(--_divider-color);
  --_divider-rule-inline: none;
  --_divider-margin-block: var(--_divider-space);
  --_divider-margin-inline: 0;

  display: var(--_divider-display);
  /* Sans effet hors flex : posé ici une fois plutôt que redéclaré. */
  align-items: center;
  align-self: var(--_divider-self);
  inline-size: var(--_divider-inline-size);
  block-size: var(--_divider-block-size);
  border: none;
  border-block-start: var(--_divider-rule-block);
  border-inline-start: var(--_divider-rule-inline);
  margin-block: var(--_divider-margin-block);
  margin-inline: var(--_divider-margin-inline);
}

/* ---- Vertical ----
   Le filet change de bord et la respiration change d'axe, par simple
   réassignation. */

/* Dans un parent flex il s'étire sur la hauteur de la rangée ; ailleurs
   il retombe sur --_divider-length, une ligne. Sans ce repli, un filet
   collé hors contexte flex n'a aucune hauteur et ne s'affiche pas. */
.sc-divider--vertical {
  --_divider-self: stretch;
  --_divider-inline-size: var(--_divider-thickness);
  --_divider-block-size: var(--_divider-length);
  --_divider-rule-block: none;
  --_divider-rule-inline: var(--_divider-thickness) solid var(--_divider-color);
  --_divider-margin-block: 0;
  --_divider-margin-inline: var(--_divider-space);
}

/* ---- Sans respiration ----
   Pour un conteneur qui espace déjà ses enfants. */

.sc-divider--flush {
  --_divider-space: 0;
}

/* ---- Avec libellé ----
   Le trait passe dans deux pseudo-éléments, la bordure du bloc
   s'efface. Demande un <div role="separator"> : un <hr> n'accepte
   pas d'enfant. */

.sc-divider--label {
  --_divider-display: flex;
  --_divider-rule-block: none;
}

.sc-divider--label::before,
.sc-divider--label::after {
  content: "";
  flex-grow: 1;
  flex-basis: 0;
  border-block-start: var(--_divider-thickness) solid var(--_divider-color);
}

/* Le filet de tête est le seul réglable : à 0, il disparaît et le
   libellé s'aligne sur le début du bloc. */
.sc-divider--label::before {
  flex-grow: var(--_divider-lead);
}

/* Alignement du libellé sur le bord de départ, sur le modèle de
   .sc-menu__list--end : deux réassignations, rien d'autre. */
.sc-divider--start {
  --_divider-lead: 0;
  --_divider-label-lead: 0;
}

/* La typographie vient du sur-titre partagé, .sc-overline dans
   css/base.css, auquel ce sélecteur est rattaché comme celui du menu.
   Le commentaire du bloc l'annonçait déjà, mais les six déclarations
   étaient recopiées ici en linéale : le séparateur à libellé restait le
   seul titre de section du système hors de la chasse fixe. Ne reste ici
   que son calage sur le filet. */
.sc-divider__label {
  flex: none;
  padding-inline: var(--_divider-label-lead) var(--gap-s);
  white-space: nowrap;
}