/*some sexy styling*/
main {
  padding: 50px 0;
}

.info, .details {
  padding: 1rem 10%;
}

h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}

.base {
  margin: 1rem 10%;
  padding: 10px;
  border: 1px solid grey;
}

.result::before {
  border-left: 1px solid black;
  padding: 2px 5px;
  margin-left: 12px;
}

input[type=number] {
  width: 3rem;
}

input[type=checkbox] {
  margin: 0 4px;
}
input[type=checkbox]:checked {
  background-color: #25D033;
}

input:disabled {
  opacity: 0;
}

.details {
  font-size: 12pt;
}

@media (max-width: 700px) {
  .details {
    font-size: inherit;
    padding: 1em 16px;
  }
}
/*====================================================actual logic===============================*/
/*setting result to 0 by default, so we only have to check when to set it to 1*/
.result::before {
  content: "0";
}

/*setting the non-carried child module as the default one*/
.carried {
  display: none;
}

/*in case we need to carry a bit, display the carried*/
/*when we're in any module and both bits are checked*/
.module > input:nth-child(1):checked ~ input:nth-child(2):checked ~ .carried,
.carried > input:nth-child(1):checked ~ .carried,
.carried > input:nth-child(2):checked ~ .carried {
  display: block;
}

/*when we're in any module and both bits are checked*/
.module > input:nth-child(1):checked ~ input:nth-child(2):checked ~ .non-carried,
.carried > input:nth-child(1):checked ~ .non-carried,
.carried > input:nth-child(2):checked ~ .non-carried {
  display: none;
}

/*calculating base module first*/
.base > input:nth-child(1):checked ~ input:nth-child(2):not(:checked) ~ .result::before,
.base > input:nth-child(1):not(:checked) ~ input:nth-child(2):checked ~ .result::before {
  content: "1";
}

/*calculating for child modules*/
/*.non-carried: result will only be 1 if only one bit is set*/
.non-carried > input:nth-child(1):not(:checked) ~ input:nth-child(2):checked ~ .result::before,
.non-carried > input:nth-child(1):checked ~ input:nth-child(2):not(:checked) ~ .result::before {
  content: "1";
}

/*carried: result will be one if none of the bits is set or both*/
.carried > input:nth-child(1):not(:checked) ~ input:nth-child(2):not(:checked) ~ .result::before,
.carried > input:nth-child(1):checked ~ input:nth-child(2):checked ~ .result::before {
  content: "1";
}

/*# sourceMappingURL=css_adder.css.map */