/**
 * PlayAwale — L'interrupteur « Partager mon bot »
 * -----------------------------------------------------------------------------
 * Sous la carte « Votre bot » en solo, et dans « Mon bot » de l'espace du
 * compte : le même réglage, le même dessin. Sorti de pages/solo.css le
 * 07/10/2026. Voir la section 69 de la documentation.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* LE PARTAGE : un interrupteur plutôt qu'une case — c'est un réglage qu'on
   allume ou éteint, et il se lit d'un coup d'œil. La vraie case reste dans la
   page, invisible et au-dessus de la piste : clavier, lecteur d'écran et clic
   passent par elle (role="switch"). */
.ghost-share {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.ghost-share__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4rem;
  height: 1.35rem;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.ghost-share__track {
  position: relative;
  flex: none;
  width: 2.4rem;
  height: 1.35rem;
  margin-top: 0.05rem;
  background: var(--color-sand-400);
  border-radius: 999px;
  transition: background var(--duration-base) ease;
}

.ghost-share__track::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform var(--duration-base) ease;
}

.ghost-share__input:checked + .ghost-share__track {
  background: var(--color-online);
}

.ghost-share__input:checked + .ghost-share__track::after {
  transform: translateX(1.05rem);
}

.ghost-share__input:focus-visible + .ghost-share__track {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Sans Elo calculé, éteint : piste pâle, texte en retrait, pas de main. */
.ghost-share:has(.ghost-share__input:disabled) {
  cursor: default;
}

.ghost-share__input:disabled + .ghost-share__track {
  opacity: 0.45;
}

.ghost-share__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.ghost-share__title {
  font-size: 0.9rem;
  font-weight: bold;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.ghost-share__hint {
  font-size: 0.75rem;
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {

  .ghost-share__track,
  .ghost-share__track::after {
    transition: none;
  }
}