<input type="radio" id="ops-0" name="ops" value="+" checked="true"/>
<input type="radio" id="ops-1" name="ops" value="-"/>
<input type="radio" id="ops-2" name="ops" value="*"/>
<input type="radio" id="ops-3" name="ops" value="/"/>
<input type="radio" id="d1-0" name="d1" value="7"/>
<input type="radio" id="d1-1" name="d1" value="8"/>
<input type="radio" id="d1-2" name="d1" value="9"/>
<input type="radio" id="d1-3" name="d1" value="4"/>
<input type="radio" id="d1-4" name="d1" value="5"/>
<input type="radio" id="d1-5" name="d1" value="6"/>
<input type="radio" id="d1-6" name="d1" value="1" checked="true"/>
<input type="radio" id="d1-7" name="d1" value="2"/>
<input type="radio" id="d1-8" name="d1" value="3"/>
<input type="radio" id="d1-9" name="d1" value="0"/>
<input type="radio" id="d2-0" name="d2" value="7"/>
<input type="radio" id="d2-1" name="d2" value="8"/>
<input type="radio" id="d2-2" name="d2" value="9"/>
<input type="radio" id="d2-3" name="d2" value="4"/>
<input type="radio" id="d2-4" name="d2" value="5"/>
<input type="radio" id="d2-5" name="d2" value="6"/>
<input type="radio" id="d2-6" name="d2" value="1" checked="true"/>
<input type="radio" id="d2-7" name="d2" value="2"/>
<input type="radio" id="d2-8" name="d2" value="3"/>
<input type="radio" id="d2-9" name="d2" value="0"/>
<section>
  <h1>CSS Calculator</h1>
  <div class="dig">
    <label for="d1-0">7</label>
    <label for="d1-1">8</label>
    <label for="d1-2">9</label>
    <label for="d1-3">4</label>
    <label for="d1-4">5</label>
    <label for="d1-5">6</label>
    <label for="d1-6">1</label>
    <label for="d1-7">2</label>
    <label for="d1-8">3</label>
    <label for="d1-9">0</label>
  </div>
  <div class="ops">
    <label for="ops-0">+</label>
    <label for="ops-1">-</label>
    <label for="ops-2">*</label>
    <label for="ops-3">/</label>
  </div>
  <div class="dig">
    <label for="d2-0">7</label>
    <label for="d2-1">8</label>
    <label for="d2-2">9</label>
    <label for="d2-3">4</label>
    <label for="d2-4">5</label>
    <label for="d2-5">6</label>
    <label for="d2-6">1</label>
    <label for="d2-7">2</label>
    <label for="d2-8">3</label>
    <label for="d2-9">0</label>
  </div>
  <div class="result"></div>
</section>

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,700italic);

//
// ui vars

$c-gray: #999;
$c-primary: #3BB8C4;
$c-secondary: #FF3D2F;
$ui-corner: 4px;


//
// calculator

$ops: "+","-","*","/";
$dig: 7,8,9,4,5,6,1,2,3,0;

// do the math
@function math($op,$x,$y) {
      @if $op == "+" { @return $x + $y; } 
  @elseif $op == "-" { @return $x - $y; } 
  @elseif $op == "*" { @return $x * $y; } 
  @elseif $op == "/" {
        @if $x == 0 { @return 0; }
    @elseif $y == 0 { @return "∞"; }
    @else { @return $x / $y; }
  } @else {
    @return $x + $y;
  }
}

// for each operation
@for $o from 1 through length($ops) {
  $op: nth($ops, $o);
  // for each x
  @for $x from 1 through length($dig) {
    $x-val: nth($dig, $x);
    // for each y
    @for $y from 1 through length($dig) {
      $y-val: nth($dig, $y);
      [value="#{$op}"]:checked ~ [value="#{$x-val}"]:checked ~ [value="#{$y-val}"]:checked ~ section .result:after {
        // content: "#{$x-val} #{$op} #{$y-val} = #{math($op,$x-val,$y-val)}";
        content: "#{math($op,$x-val,$y-val)}";
      }
    }
    // for each digit input, highlight corresponding label
    #d1-#{$x - 1}:checked ~ section div [for="d1-#{$x - 1}"],
    #d2-#{$x - 1}:checked ~ section div [for="d2-#{$x - 1}"] {
      background: $c-secondary;
      box-shadow: 0px 2px 0px 1px darken($c-secondary, 10%);
      pointer-events: none;
    }
  }
  // for each op input, highlight corresponding label
  #ops-#{$o - 1}:checked ~ section div [for="ops-#{$o - 1}"] {
    background: $c-secondary;
    box-shadow: 0px 2px 0px 1px darken($c-secondary, 10%);
    pointer-events: none;
  }
}

//
// interface

$section-h: 300px;
$label-margin: 8px;
  

body { 
  text-align: center; 
  background: #F0F0F0;
}

input {
  opacity: 0.8;
  pointer-events: none;
  margin-top: 2rem;
}

section {
  display: flex;
  width: 95%;
  max-width: 800px;
  margin: 1.5rem auto 0;
  font-size: 2rem;
  flex-wrap: wrap;
  font-family: Menlo, Andale Mono, monospace;
  padding: 2rem;
  box-sizing: border-box;
  background: darken($c-primary, 35%);
  border-radius: $ui-corner * 2;  
  box-shadow: 0px 4px 0px 4px darken($c-primary, 45%);

  h1 { 
    width: calc(100% - #{$label-margin});
    margin: 0 auto 0;
    font-size: 3rem;
    padding-bottom: 0.5rem;
    color: white;
    text-shadow: 
      $label-margin / -4 $label-margin / -4 0px $c-primary,
      $label-margin / 4 $label-margin / 4 0px $c-secondary;
    text-align: center;
    font-family: Roboto Condensed, sans-serif;
    border-bottom: $label-margin / 2 solid darken($c-primary, 20%);
    
    text-transform: uppercase;
    font-weight: 700;
    // letter-spacing: 0.125em;
  }
  
  div {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1rem;
    &:not(.result) { height: $section-h; }
    
    &.dig { 
      width: 37.5%;
      label {
        background: $c-primary;
        box-shadow: 0px 2px 0px 1px darken($c-primary, 5%);
        line-height: $section-h / 4;
        width: calc(33.33% - #{$label-margin});
        height: calc(25% - #{$label-margin});
        &:last-child {
          width: calc(100% - #{$label-margin});
        }
      }
    }
    &.ops { 
      width: 25%; 
      label {
        background: $c-gray;
        box-shadow: 0px 2px 0px 1px darken($c-gray, 5%);
        line-height: $section-h / 2;
        width: calc(50% - #{$label-margin});
        height: calc(50% - #{$label-margin});
      }
    }
    &.result {
      width: calc(100% - #{$label-margin});
      margin: 1rem $label-margin / 2 0;
      padding: 1rem;
      position: relative;
      height: 3rem;
      background: white;
      color: #444;
      box-shadow: 0px 2px 0px 1px darken(white, 10%);
      border-radius: $ui-corner;
      &::after {
        font-size: 3rem;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    label {
      cursor: pointer;
      text-align: center;
      color: white;
      margin: $label-margin / 2;
      border-radius: $ui-corner;
      &:hover {
        opacity: 0.9;
      }
      
    }
  }
}