CSS-Only conditional toggle

*, *::after {
  box-sizing: border-box;
  transition-property: all;
  transition-duration: 0.5s;
}
html, body {
  margin: 0;
  font-family: Arial;
  text-transform: capitalize;
}
input { display: none; }
hr, label, label::after {
  display: block;
  width: 6rem;
  height: 6rem;
  border-style: none;
  background-color: #444;
  border-radius: 1rem;  
}
div, section {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 1rem;
}
label, label::after {
  position: relative;
  width: 3rem;
  height: 2rem;
  margin: 1rem;
  background-color: #eee;
  content: '';
}

<style>
  label {
    cursor: pointer;
  }
  label::after {
    transform: scale( 0.6 );
    left: 0rem;
    width: 2rem;
    margin: 0;
    background-color: #fff;
  }
  label:hover { background-color: #ddd; }
  #blue:checked ~ div [ for='blue' ],
  #red:checked ~ div [ for='red' ] {
    background-color: #222;
  }
  #blue:checked ~ div [ for='blue' ]::after,
  #red:checked ~ div [ for='red' ]::after {
    left: 1rem;
  }
  #blue:checked ~ div [ for='blue' ]:hover,
  #red:checked ~ div [ for='red' ]:hover {
    background-color: #000;
  }
  #blue:checked ~ hr { background-color: #0be; }
  #red:checked ~ hr { background-color: #d02; }
</style>
<input type='checkbox' id='blue'> <input type='checkbox' id='red'> <hr>
<div>
  <section> <h2>blue</h2> <label for='blue'></label> </section>
  <section> <h2>red</h2> <label for='red'></label> </section>
</div>

The checkbox hack can be used to create CSS-only toggles as shown in the on/off switches below. This functionality can be extended to other elements in the document leveraging the ~ sibling selector as what's happening when the box below changes colors based on if a switch is checked or not.

The question is: Is there any way to let CSS color the box purple if both toggles are checked?

This seems to be a type of conditional problem such as if only the first box is checked then color it normally however if both boxes are simultaneously checked then color the box differently.

Perhaps using several overlays and blending modes can get the box colored purple only when both toggles are on? I'm looking for a CSS only solution. Any help is much appreciated.