/* 3_state_toggle.css */
/* Container for the 3-state toggle */
.switch-toggle.three-state {
  position: relative;
  width: 50px; /* total width */
  height: 24px; /* total height */
}

/* Hide the actual radio buttons */
.switch-toggle.three-state input[type="radio"] {
  display: none;
}

/* The colored background “track” */
.switch-toggle.three-state .track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #bbb; /* default color (often used for nil / “pending”) */
  border-radius: 50rem;
  transition: background 0.3s ease;
}

/* The white circle “handle” (the slider) */
.switch-toggle.three-state .handle {
  position: absolute;
  top: 2px;
  left: 15px; /* We'll default to center (for nil) */
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.3s ease;
}

/* Three labels: each label covers 1/3 of the toggle width,
   making the entire area clickable for that state */
.switch-toggle.three-state label {
  position: absolute;
  top: 0;
  height: 100%;
  width: calc(100% / 3);
  cursor: pointer;
  /* no visible text; purely a clickable zone */
}

.switch-toggle.three-state .label-false {
  left: 0;
}
.switch-toggle.three-state .label-nil {
  left: calc(100% / 3);
}
.switch-toggle.three-state .label-true {
  left: calc(2 * (100% / 3));
}

/* ----- false => Red ----- */
.switch-toggle.three-state input[value="false"]:checked ~ .track {
  background: var(--color-primary);
}
.switch-toggle.three-state input[value="false"]:checked ~ .handle {
  left: 2px; /* Far left */
}

/* ----- "" (nil) => Gray ----- */
.switch-toggle.three-state input[value=""]:checked ~ .track {
  background: #bbb;
}
.switch-toggle.three-state input[value=""]:checked ~ .handle {
  left: 15px; /* Center */
}

/* ----- true => Green ----- */
.switch-toggle.three-state input[value="true"]:checked ~ .track {
  background: var(--primary-color);
}
.switch-toggle.three-state input[value="true"]:checked ~ .handle {
  left: 28px; /* Far right */
}