title: Are CSS Variable changes possible upon a radio button's checked selector being triggered?
body: <p>I have the following CodePen: <a href="https://codepen.io/zerosumgames/pen/axrxMV" rel="noreferrer">Test LCD with CSS Variables</a>, in which upon clicking labels with specific digits, results in the appropriate LCD segments to be "lit" based on algebraic equations I've determined to mimic a BCD to 7-Segment Display Decoder, in order to simulate an LCD display...</p>
  
  <p>I currently have the first segment's equation mentioned in the CSS. Clicking on a digit in the CSS should theoretically result in the appropriate four <code>--input</code> variables to be populated with a pulse (0 or 1) and then the equation determines the opacity based off the equation for that segment...</p>
  
  <p>Segment A (the top segment) should change as follows:</p>
  
  <ul>
  <li>0: on </li>
  <li>1: off </li>
  <li>2: on </li>
  <li>3: on </li>
  <li>4: off </li>
  <li>5: on </li>
  <li>6: on </li>
  <li>7: on </li>
  <li>8: on </li>
  <li>9: on</li>
  </ul>
  
  <p>Where "on" being an opacity of 1, and "off" being an opacity of 0.05.</p>
  
  <p>However, even though we have the initial default at 0 (which is on), clicking on say, 1 or 4, does not change the segment opacity...</p>
  
  <p>The code is below, could anyone point out what I may be doing wrong? Many thanks in advance...</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="led-screen"&gt;
      &lt;div class="digit"&gt;
          &lt;div class="segment segment-a"&gt;&lt;/div&gt;
          &lt;div class="segment segment-b"&gt;&lt;/div&gt;
          &lt;div class="segment segment-c"&gt;&lt;/div&gt;
          &lt;div class="segment segment-d"&gt;&lt;/div&gt;
          &lt;div class="segment segment-e"&gt;&lt;/div&gt;
          &lt;div class="segment segment-f"&gt;&lt;/div&gt;
          &lt;div class="segment segment-g"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="buttons"&gt;
      &lt;label class="digit-button" for="digit-7"&gt;7&lt;/label&gt;
      &lt;label class="digit-button" for="digit-8"&gt;8&lt;/label&gt;
      &lt;label class="digit-button" for="digit-9"&gt;9&lt;/label&gt;
      &lt;label class="digit-button" for="digit-4"&gt;4&lt;/label&gt;
      &lt;label class="digit-button" for="digit-5"&gt;5&lt;/label&gt;
      &lt;label class="digit-button" for="digit-6"&gt;6&lt;/label&gt;
      &lt;label class="digit-button" for="digit-1"&gt;1&lt;/label&gt;
      &lt;label class="digit-button" for="digit-2"&gt;2&lt;/label&gt;
      &lt;label class="digit-button" for="digit-3"&gt;3&lt;/label&gt;
      &lt;label class="digit-button" for="digit-0"&gt;0&lt;/label&gt;
      &lt;input type="radio" name="digit-radio" id="digit-0" checked="checked"/&gt;
      &lt;input type="radio" name="digit-radio" id="digit-1" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-2" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-3" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-4" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-5" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-6" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-7" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-8" /&gt;
      &lt;input type="radio" name="digit-radio" id="digit-9" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The CSS:</p>
  
  <pre><code>:root {
      --input_0: 0; /* z */
      --input_1: 0; /* y */
      --input_2: 0; /* x */
      --input_3: 0; /* w */
      --led_r: 42;
      --led_g: 45;
      --led_b: 34;
      --led_o: 0;
      --led_o_base: 0.95;
      --led_o_offset: 0.05;
  }
  
  #led-screen {
      background-color: #b7ac90;
      width: 800px;
      height: 200px;
      display: block;
  }
  
  #digit-0:checked {
      --input_0: 0;
      --input_1: 0;
      --input_2: 0;
      --input_3: 0;   
  }
  #digit-1:checked {
      --input_0: 1;
      --input_1: 0;
      --input_2: 0;
      --input_3: 0;   
  }
  #digit-2:checked {
      --input_0: 0;
      --input_1: 1;
      --input_2: 0;
      --input_3: 0;   
  }
  #digit-3:checked {
      --input_0: 1;
      --input_1: 1;
      --input_2: 0;
      --input_3: 0;   
  }
  #digit-4:checked {
      --input_0: 0;
      --input_1: 0;
      --input_2: 1;
      --input_3: 0;   
  }
  #digit-5:checked {
      --input_0: 1;
      --input_1: 0;
      --input_2: 1;
      --input_3: 0;   
  }
  #digit-6:checked {
      --input_0: 0;
      --input_1: 1;
      --input_2: 1;
      --input_3: 0;   
  }
  #digit-7:checked {
      --input_0: 1;
      --input_1: 1;
      --input_2: 1;
      --input_3: 0;   
  }
  #digit-8:checked {
      --input_0: 0;
      --input_1: 0;
      --input_2: 0;
      --input_3: 1;   
  }
  #digit-9:checked {
      --input_0: 1;
      --input_1: 0;
      --input_2: 0;
      --input_3: 1;   
  }
  
  .digit {
      width: 75px;
      height: 150px;
      float: right;
      margin-right: 50px;
      margin-top: 10px;
      transform: skew(-5deg);
  }
  
  .segment-a {
      position: relative;
      left: 0;
      top: 0;
      --led_o: calc(((2 * var(--input_3) * var(--input_2) * var(--input_1) * var(--input_0)) - (2 * var(--input_3) * var(--input_2) * var(--input_0)) - (var(--input_3) * var(--input_1) * var(--input_0)) - (var(--input_3) * var(--input_1)) + (var(--input_3) * var(--input_0)) - (2 * var(--input_2) * var(--input_1) * var(--input_0)) + (var(--input_2) * var(--input_1)) + (2 * var(--input_2) * var(--input_0)) - var(--input_2) + (var(--input_1) * var(--input_0)) - var(--input_0) + 1) * var(--led_o_base) + var(--led_o_offset));
      background-color: rgba(var(--led_r), var(--led_g), var(--led_b), var(--led_o));
      /* 2wxyz-2wxz-wyz-wy+wz-2xyz+xy+2xz-x+yz-z+1 */
  }
  .segment-b {
      position: relative;
      transform: rotate(90deg);
      left: 41px;
      top: 21px;
  }
  .segment-c {
      position: relative;
      transform: rotate(90deg);
      left: 41px;
      top: 83px;
  }
  .segment-d {
      position: relative;
      left: 0;
      top: 104px;
  }
  .segment-e {
      position: relative;
      transform: rotate(90deg);
      left: -41px;
      top: 43px;
  }
  .segment-f {
      position: relative;
      transform: rotate(90deg);
      left: -41px;
      top: -59px;
  }
  .segment-g {
      position: relative;
      left: 0;
      top: -38px;
  }
  
  .segment {
      width: 60px;
      height: 20px;
  }
  </code></pre>