@layer components {
  /* Remove default fieldset border for toggle wrapper */
  fieldset:has(.switch-toggle.three-state) {
    border: none;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }

  /* 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-red);
  }
  .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(--color-green);
  }
  .switch-toggle.three-state input[value="true"]:checked ~ .handle {
    left: 28px; /* Far right */
  }
}