<!-- Code below is post processed from a template. To view the preprocessed version look at the project at https://codepen.io/rbethel/project/editor/ZWkngN#0 -->

<form id="rrc-form-Bx00"></form>
<form id="rrc-form-B0x0"></form>
<form id="rrc-form-B00x"></form>
<input data-rrc="Bx00" form="rrc-form-Bx00" style="display:none" type="radio" name="rrc-Bx00" checked="checked">
<input data-rrc="B0x0" form="rrc-form-B0x0" style="display:none" type="radio" name="rrc-B0x0" checked="checked">
<input data-rrc="B00x" form="rrc-form-B00x" style="display:none" type="radio" name="rrc-B00x" checked="checked">

<div>

  <div class="traffic-light">
    <div class=" M001 M010 M100 M101 M110 M011  light red-light on"></div>
    <div class="M111 M000 light red-light off"></div>
    <div class=" M000 M010 M101 M110 M001 M111  light yellow-light on"></div>
    <div class="M100 M011 light yellow-light off"></div>
    <div class=" M001 M000 M100 M110 M011 M111  light green-light on"></div>
    <div class="M010 M101 light green-light off"></div>
  </div>
  <div>
    <div class="next-state">

      <label class="  control-label  M001 M010 M100 M101 M110 M011 M000  "><input class=" control-input " form="rrc-form-B0x0" type="radio" name="rrc-B0x0" />NEXT</label>
      <button class="  control-button  M001 M010 M100 M101 M110 M011 M111  " type="reset" form="rrc-form-B0x0">NEXT</button>

      <label class="  control-label  M001 M010 M100 M000 M110 M011 M111  "><input class=" control-input " form="rrc-form-B00x" type="radio" name="rrc-B00x" />NEXT</label>
      <button class="  control-button  M001 M000 M100 M101 M110 M011 M111  " type="reset" form="rrc-form-B00x">NEXT</button>

      <label class="  control-label  M001 M010 M000 M101 M110 M011 M111  "><input class=" control-input " form="rrc-form-Bx00" type="radio" name="rrc-Bx00" />NEXT</label>
      <button class="  control-button  M001 M010 M100 M101 M110 M000 M111  " type="reset" form="rrc-form-Bx00">NEXT</button>

    </div>
  </div>
</div>

/* Hide M000 (A1) */
input[data-rrc="Bx00"]:not(:checked)
  ~ input[data-rrc="B0x0"]:not(:checked)
  ~ input[data-rrc="B00x"]:not(:checked)
  ~ *
  .M000 {
  display: none !important;
}

/* Hide M100 (B1) */
input[data-rrc="Bx00"]:checked
  ~ input[data-rrc="B0x0"]:not(:checked)
  ~ input[data-rrc="B00x"]:not(:checked)
  ~ *
  .M100 {
  display: none !important;
}

/* Hide M010 (C1) */
input[data-rrc="Bx00"]:not(:checked)
  ~ input[data-rrc="B0x0"]:checked
  ~ input[data-rrc="B00x"]:not(:checked)
  ~ *
  .M010 {
  display: none !important;
}

/* Hide M001 (D1) */
input[data-rrc="Bx00"]:not(:checked)
  ~ input[data-rrc="B0x0"]:not(:checked)
  ~ input[data-rrc="B00x"]:checked
  ~ *
  .M001 {
  display: none !important;
}

/* Hide M101 (C) */
input[data-rrc="Bx00"]:checked
  ~ input[data-rrc="B0x0"]:not(:checked)
  ~ input[data-rrc="B00x"]:checked
  ~ *
  .M101 {
  display: none !important;
}

/* Hide M110 (D) */
input[data-rrc="Bx00"]:checked
  ~ input[data-rrc="B0x0"]:checked
  ~ input[data-rrc="B00x"]:not(:checked)
  ~ *
  .M110 {
  display: none !important;
}

/* Hide M011 (B) */
input[data-rrc="Bx00"]:not(:checked)
  ~ input[data-rrc="B0x0"]:checked
  ~ input[data-rrc="B00x"]:checked
  ~ *
  .M011 {
  display: none !important;
}

/* Hide M111 (A) */
input[data-rrc="Bx00"]:checked
  ~ input[data-rrc="B0x0"]:checked
  ~ input[data-rrc="B00x"]:checked
  ~ *
  .M111 {
  display: none !important;
}

body {
  ackground: #f5f5f5;
}

.traffic-light {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  border-radius: 20px;
  background: gray;
  width: 110px;
  height: 300px;
  border: solid 1px;
}

.light {
  border-radius: 40px;
  background: white;
  width: 80px;
  height: 80px;
  border: solid 1px;
}

.red-light {
  background: red;
}

.yellow-light {
  background: yellow;
}

.green-light {
  background: green;
}

.on {
  opacity: 1;
}

.off {
  opacity: 0.15;
}

.next-state {
  background: gray;
  width: 110px;
  border: solid 1px;
  border-radius: 5px;
  text-align: center;
  vertical-align: center;
  margin-top: 20px;
}

.control-label {
  margin: auto;
  display: block;
  font-family: sans-serif;
  font-size: 1rem;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.control-input {
  opacity: 0;
  position: absolute;
  width: 0;
}

.control-button {
  border: none;
  background: transparent;
  margin: auto;
  outline: none;
  font-family: sans-serif;
  font-size: 1rem;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}