/* =============================================================
   Socle · Séparateur (.sc-divider)
   Filet autonome entre deux blocs. Il trace son trait comme
   .sc-menu__separator : un <hr> remis à plat, puis une seule
   bordure de bloc en --border-1.
   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. Une orientation n'est pas une teinte, mais elle se règle
     comme une teinte : le bord qui porte le trait, l'axe qui porte la
     respiration et la mise en boîte sont des variables comme les autres,
     et le corps de la règle reste le même pour tous les modificateurs. */
  --_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 tant que le filet n'est pas flex, donc posé ici une fois
     plutôt que redéclaré par la variante à libellé. */
  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
   réassignation. La couleur et l'épaisseur restent pilotées par les
   mêmes variables privées.
   La longueur reste en `auto` : dans une rangée flex, align-self
   étire le filet sur la hauteur de la ligne. Hors flux flex, il
   faut lui donner une hauteur via --_divider-length. */

/* Dans un parent flex, le filet s'étire sur toute la hauteur de la rangée.
   Ailleurs, il retombe sur --_divider-length et vaut une ligne de texte :
   sans ce repli, un filet vertical collé hors d'un contexte flex n'a
   aucune hauteur et ne s'affiche pas du tout. */
.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 (colonne flex
   avec gap, barre d'outils) : le filet n'ajoute plus la sienne. */

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

/* ---- Avec libellé ----
   Le trait passe dans deux pseudo-éléments pour laisser la place
   au libellé, donc la bordure du bloc s'efface. C'est le motif
   « ou » entre deux blocs, et il demande un <div role="separator">
   plutôt qu'un <hr>, qui 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;
}

.sc-divider__label {
  flex: none;
  padding-inline: var(--_divider-label-lead) var(--gap-s);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-caption-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
  white-space: nowrap;
}