/* --- module checkbox-toggle-pills --- */
.checkbox-pills-container {
  width: 50px;
  height: 30px;
  position: relative;
}
.checkbox-pills-container .checkbox-pills-input {
  display: none;
}
.checkbox-pills-container .checkbox-pills-input ~ .checkbox-pills-label {
  display: block;
  --toggle-pills-size-coeff: 1.8; /* CHANGER TAILLE ICI SI BESOIN */
  --toggle-pills-height: calc(15px * var(--toggle-pills-size-coeff));
  --toggle-pills-width: calc(25px * var(--toggle-pills-size-coeff));
  width: var(--toggle-pills-width);
  height: var(--toggle-pills-height);
  border-radius: calc(10px * var(--toggle-pills-size-coeff));
  position: relative;
  cursor: pointer;
}
.checkbox-pills-container .checkbox-pills-input ~ .checkbox-pills-label .checkbox-pills_inside-switcher {
  --inside-switcher-size: calc(12px * var(--toggle-pills-size-coeff));
  width: var(--inside-switcher-size);
  height: var(--inside-switcher-size);
  position: absolute;
  top: calc((var(--toggle-pills-height) - var(--inside-switcher-size)) / 2);
}
.checkbox-pills-container .checkbox-pills-input:not(:checked) ~ .checkbox-pills-label {
  /* recommanded colors :
      bluegrayjoko: hsl(209, 11.9%, 47.6%);
      red: hsl(0, 62%, 38%);
      simplegray: hsl(0, 0%, 60%);
      PLEASE DO NOT USE CSS-VARIABLES , OR A LAG WILL APPEAR WHEN TOGGLING.
  */
  background-color: hsl(209, 11.9%, 47.6%);
}
.checkbox-pills-container .checkbox-pills-input:not(:checked) ~ .checkbox-pills-label .checkbox-pills_inside-switcher {
  left: calc((var(--toggle-pills-height) - var(--inside-switcher-size)) / 2);
  background-image: url("/public/assets/img/pictos/btn-toggle-check_circle-inside-with-cross.svg");
}
.checkbox-pills-container .checkbox-pills-input:checked ~ .checkbox-pills-label {
  background-color: hsl(169, 76%, 44%);
}
.checkbox-pills-container .checkbox-pills-input:checked ~ .checkbox-pills-label .checkbox-pills_inside-switcher {
  right: calc((var(--toggle-pills-height) - var(--inside-switcher-size)) / 2);
  background-image: url("/public/assets/img/pictos/btn-toggle-check_circle-inside-with-check.svg");
}