<!-- 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>
  <h1>State Machine Example</h1>
  <h2>STATE: <span class="  M001 M010 M100 M101 M110 M011  "> A </span><span class="  M000 M010 M101 M110 M001 M111  "> B </span></h2>
  <div class="sm-state-btn">

    <label class="  control-label  M001 M010 M100 M101 M110 M011 M000  "><input class=" control-input " form="rrc-form-Bx00" type="radio" name="rrc-Bx00" />Show B</label>
    <button class="  control-button  M001 M010 M100 M101 M110 M011 M111  " type="reset" form="rrc-form-Bx00">Show B</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" />Show A</label>
    <button class="  control-button  M001 M010 M100 M101 M110 M000 M111  " type="reset" form="rrc-form-Bx00">Show A</button>

  </div>

  <table>
    <thead>
      <tr>
        <th>Table</th>
        <th>Col1</th>
        <th class="  M001 M010 M100 M101 M110 M011  ">ColA</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>1 <span style="background:red" class="  M001 M010 M100 M101 M110 M011  ">AAAA</span><span style="background:lightblue" class="  M000 M010 M101 M110 M001 M111  ">BBBB</span></td>
        <td class="  M001 M010 M100 M101 M110 M011  ">2</td>
        <td>3</td>
      </tr>
      <tr class="  M000 M010 M101 M110 M001 M111  ">
        <td>Row B</td>
        <td>4</td>
        <td class="  M001 M010 M100 M101 M110 M011  ">5</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td>7</td>
        <td class="  M001 M010 M100 M101 M110 M011  ">8</td>
        <td>
          <div class="sm-state-btn">

            <label class="  control-label  M001 M010 M100 M101 M110 M011 M000  "><input class=" control-input " form="rrc-form-Bx00" type="radio" name="rrc-Bx00" />Show B</label>
            <button class="  control-button  M001 M010 M100 M101 M110 M011 M111  " type="reset" form="rrc-form-Bx00">Show B</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" />Show A</label>
            <button class="  control-button  M001 M010 M100 M101 M110 M000 M111  " type="reset" form="rrc-form-Bx00">Show A</button>

          </div>
        </td>
      </tr>
    </tbody>
  </table>

/* the first 8 selector statements form the functionl CSS that controls visibility of the 8 Machine States. 
Everything else below that point is for display styling and does not influence function */
/* 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;
}

/* All styles below are visual only */

body {
  ackground: #f5f5f5;
}

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

.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%;
}

table {
  table-layout: fixed;
  width: 100%;
  max-width: 600px;
  border-collapse: collapse;
  border: 3px solid purple;
}
thead {
  border-bottom: 2px solid;
}
th {
  width: 30px;
}

th,
td {
  padding: 20px;
  border: 1px solid;
}