/* web_viewer/static/css/bouton_chainette.css */

.iaBtnChainette{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;

  padding: 0;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;

  /* mêmes variables que les boutons pancartes + overrides dédiés */
  background: var(--ia-btnlink-bg, var(--ia-panels-btn-bg, #fff));
  color:      var(--ia-btnlink-fg, var(--ia-panels-btn-fg, #111));

  cursor: pointer;
}

.iaBtnChainette:hover{
  background: var(--ia-btnlink-hover-bg, var(--ia-panels-btn-hover-bg, #f3f3f3));
  color:      var(--ia-btnlink-hover-fg, var(--ia-panels-btn-hover-fg, var(--ia-panels-btn-fg, #111)));
}

/* état "actif / lié" (optionnel, pratique pour indiquer ON) */
.iaBtnChainette.isActive{
  background: var(--ia-btnlink-active-bg, rgba(37, 99, 235, 0.12));
  color:      var(--ia-btnlink-active-fg, rgba(37, 99, 235, 0.95));
  border-color: rgba(37, 99, 235, 0.35);
}

/* SVG suit la couleur du bouton */
.iaBtnChainette svg{
  display:block;
  width: 16px;
  height: 16px;
}

/* ✅ icône en "fill" (pas en stroke) */
.iaBtnChainette svg,
.iaBtnChainette svg *{
  fill: currentColor;
  stroke: none;
}

/* Chainette des tilebars charts: format plus compact pour l'equilibre avec les selects */
.tilebar .chartLinkBtn.iaBtnChainette,
.tilebar .linkBtn[data-plot]{
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border-radius: 7px !important;
}

.tilebar .chartLinkBtn.iaBtnChainette svg{
  width: 11px !important;
  height: 11px !important;
}


/* ===========================================================
   #legendApplyAll : doit ressembler à "Tout ON / Tout OFF"
   (même hauteur, même padding, même radius)
   =========================================================== */

#legendApplyAll.iaBtnChainette{
  /* on annule le carré */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;

  /* on copie le “gabarit” des autres boutons (linkBtn etc.) */
  padding: 6px 10px !important;
  line-height: 1 !important;

  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.15) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* optionnel : évite que le bouton devienne trop large */
  gap: 0 !important;
}

/* icône équilibrée dans un bouton type "Tout ON/OFF" */
#legendApplyAll.iaBtnChainette svg{
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}