/* =============================================================
   Socle · Étiquette (.sc-tag)
   Une valeur choisie que l'on peut retirer. Le badge dit un statut
   subi ; l'étiquette porte une valeur, d'où sa croix.
   Variantes : --accent, --success, --warning, --danger
   Modificateurs : --filter (cliquable) · --s (petite)
   Éléments : __label, __remove · Conteneur : .sc-tag-group
   ============================================================= */

.sc-tag {
  /* Tokens de composant : variantes et tailles ne font que réassigner ceci. */
  --_tag-bg: var(--color-bg-subtle);
  --_tag-bg-hover: var(--color-bg-active);
  --_tag-bg-active: var(--color-bg-subtle-active);
  --_tag-text: var(--color-text-secondary);
  --_tag-text-hover: var(--color-text);
  /* Détourée comme le badge neutre, et pour la même raison : deux
     objets voisins se lisent pareil. */
  --_tag-border: var(--color-border-strong);

  /* Posée sur --color-bg-subtle et non sur la surface : --color-bg-hover
     s'y confondrait, d'où les deux crans du dessus. */
  --_tag-remove-text: var(--color-text-muted);
  --_tag-remove-text-hover: var(--color-text);
  --_tag-remove-bg-hover: var(--color-bg-active);
  --_tag-remove-bg-active: var(--color-bg-subtle-active);

  --_tag-gap: var(--gap-xs);
  --_tag-padding-block: var(--padding-xs);
  --_tag-padding-inline: var(--padding-m);
  --_tag-font-size: var(--text-body-s-size);
  --_tag-icon-size: var(--space-16);
  /* Dimension structurelle : à réassigner pour tronquer une valeur longue. */
  --_tag-max-width: 100%;

  display: inline-flex;
  align-items: center;
  gap: var(--_tag-gap);
  max-width: var(--_tag-max-width);
  padding: var(--_tag-padding-block) var(--_tag-padding-inline);
  border: var(--border-hairline) solid var(--_tag-border);
  border-radius: var(--radius-pill);
  background: var(--_tag-bg);
  color: var(--_tag-text);
  font-family: var(--font-body);
  font-size: var(--_tag-font-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-tight);
  white-space: nowrap;
  vertical-align: middle;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}

/* L'icône suit la grille, pas la taille du libellé. La taille passe par
   une variable privée : l'étiquette cale sur 16, sa petite taille sur 12,
   et le badge sur 12 aussi, à la taille de sa légende. */
.sc-tag svg {
  flex: none;
  width: var(--_tag-icon-size);
  height: var(--_tag-icon-size);
}

/* Une valeur saisie peut être longue : elle se tronque plutôt que de
   pousser ses voisines hors du groupe. */
.sc-tag__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Croix de retrait ----
   Même anatomie que celle de l'alerte : la marge négative reprend le
   padding, la cible grandit sans que la boîte grandisse. */

.sc-tag__remove {
  /* Plancher de 24px, règle 2.5.8 de WCAG 2.2. La petite taille n'en fait
     que 20 : le manque se complète en ::after hors flux, donc la densité
     et la boîte ne bougent pas. */
  --_tag-remove-hit: var(--space-24);

  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-2xs);
  margin-block: calc(var(--padding-2xs) * -1);
  margin-inline-end: calc(var(--padding-2xs) * -1);
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--_tag-remove-text);
  cursor: pointer;
  transition:
    background-color var(--motion-fast),
    color var(--motion-fast);
}

.sc-tag__remove:is(:hover, [data-state="hover"]):not(:disabled):not([data-disabled]) {
  background: var(--_tag-remove-bg-hover);
  color: var(--_tag-remove-text-hover);
}

.sc-tag__remove:is(:active, [data-state="active"]):not(:disabled):not([data-disabled]) {
  background: var(--_tag-remove-bg-active);
  color: var(--_tag-remove-text-hover);
}

/* Le débordement de 2px reste dans l'étiquette : la cible n'atteint
   jamais la croix voisine. */
.sc-tag__remove::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: var(--_tag-remove-hit);
  block-size: var(--_tag-remove-hit);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-tag__remove[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-tag__remove:disabled,
.sc-tag__remove[data-disabled] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---- Étiquette cliquable ----
   Un <button> qui bascule aria-pressed, sans croix : un bouton ne
   s'imbrique pas dans un bouton. */

.sc-tag--filter {
  cursor: pointer;
  user-select: none;
}

.sc-tag--filter:is(:hover, [data-state="hover"]):not(:disabled):not([data-disabled]) {
  background: var(--_tag-bg-hover);
  color: var(--_tag-text-hover);
}

.sc-tag--filter:is(:active, [data-state="active"]):not(:disabled):not([data-disabled]) {
  background: var(--_tag-bg-active);
  color: var(--_tag-text-hover);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-tag--filter[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Filtre retenu : l'état vit dans le balisage, le style ne fait que
   suivre l'attribut. L'accent dit « ce filtre agit sur la liste ». */
.sc-tag--filter[aria-pressed="true"] {
  --_tag-bg: var(--color-accent-subtle);
  --_tag-bg-hover: var(--color-accent-subtle-hover);
  --_tag-bg-active: var(--color-accent-subtle-hover);
  --_tag-text: var(--color-accent-text);
  --_tag-text-hover: var(--color-accent-text);
  --_tag-border: var(--color-accent-border);
}

/* ---- Variantes teintées ----
   Mêmes triplets que le badge : deux objets voisins se lisent pareil.
   Le troisième cran n'existe que dans le neutre, d'où l'enfoncé teinté
   posé sur la valeur du survol : sans lui il hériterait du gris. */

.sc-tag--accent {
  --_tag-bg: var(--color-accent-subtle);
  --_tag-text: var(--color-accent-text);
  --_tag-text-hover: var(--color-accent-text);
  --_tag-border: var(--color-accent-border);
  --_tag-bg-hover: var(--color-accent-subtle-hover);
  --_tag-bg-active: var(--color-accent-subtle-hover);
  --_tag-remove-text: currentColor;
  --_tag-remove-text-hover: currentColor;
  --_tag-remove-bg-hover: var(--color-accent-subtle-hover);
  --_tag-remove-bg-active: var(--color-accent-subtle-hover);
}

/* Succès et avertissement n'ont pas de second cran discret : leur croix
   prend la bordure, seule teinte de la famille au-dessus du subtle. */
.sc-tag--success {
  --_tag-bg: var(--color-success-subtle);
  --_tag-text: var(--color-success-text);
  --_tag-text-hover: var(--color-success-text);
  --_tag-border: var(--color-success-border);
  --_tag-bg-hover: var(--color-success-border);
  --_tag-bg-active: var(--color-success-border);
  --_tag-remove-text: currentColor;
  --_tag-remove-text-hover: currentColor;
  --_tag-remove-bg-hover: var(--color-success-border);
  --_tag-remove-bg-active: var(--color-success-border);
}

.sc-tag--warning {
  --_tag-bg: var(--color-warning-subtle);
  --_tag-text: var(--color-warning-text);
  --_tag-text-hover: var(--color-warning-text);
  --_tag-border: var(--color-warning-border);
  --_tag-bg-hover: var(--color-warning-border);
  --_tag-bg-active: var(--color-warning-border);
  --_tag-remove-text: currentColor;
  --_tag-remove-text-hover: currentColor;
  --_tag-remove-bg-hover: var(--color-warning-border);
  --_tag-remove-bg-active: var(--color-warning-border);
}

.sc-tag--danger {
  --_tag-bg: var(--color-danger-subtle);
  --_tag-text: var(--color-danger-text);
  --_tag-text-hover: var(--color-danger-text);
  --_tag-border: var(--color-danger-border);
  --_tag-bg-hover: var(--color-danger-subtle-hover);
  --_tag-bg-active: var(--color-danger-subtle-hover);
  --_tag-remove-text: currentColor;
  --_tag-remove-text-hover: currentColor;
  --_tag-remove-bg-hover: var(--color-danger-subtle-hover);
  --_tag-remove-bg-active: var(--color-danger-subtle-hover);
}

/* ---- Tailles ----
   La petite reprend la densité du badge : les deux s'alignent. */

.sc-tag--s {
  --_tag-gap: var(--gap-2xs);
  --_tag-padding-block: var(--padding-2xs);
  --_tag-padding-inline: var(--padding-s);
  --_tag-font-size: var(--text-caption-size);
  --_tag-icon-size: var(--space-12);
}

/* ---- Désactivée ----
   pointer-events annulait not-allowed, un élément sans pointeur n'ayant
   pas de curseur. On garde le curseur, et l'inertie revient au balisage :
   le CSS n'a jamais coupé le clavier, une croix sans `disabled` gardait
   son ordre de tabulation. */

.sc-tag:disabled,
.sc-tag[data-disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* L'opacité vient déjà de l'étiquette : la reposer la doublerait. */
.sc-tag[data-disabled] .sc-tag__remove {
  pointer-events: none;
}

/* ---- Groupe ----
   Passage à la ligne plutôt que débordement, liste acceptée. */

.sc-tag-group {
  --_group-gap: var(--gap-s);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_group-gap);
  padding: 0;
  margin: 0;
  list-style: none;
}