.content  
  .verified.local
    .content-wrapper
      .content.icon-only 
        .check
    .badge-wrapper
      .badge-layer
      .badge-layer.grow
      .badge-layer.shadow

  .verified.global
    .content-wrapper
      .content.icon-only 
        .check
    .badge-wrapper
      .badge-layer
      .badge-layer.grow
      .badge-layer.outline
.controls
  %span body font-size 
  %span#size 50px
  %input.mdl-slider.mdl-js-slider{:type => "range", :min => "10", :max => "100", :value => "50", :tabindex => "0"}
  

@font-size: 50px;
@border-radius: 21%;
@body: #fff;
@gold: #caa32f;
@silver: #d5d5d5;
@badge-blue: #00C9FF;
@shape-background: #fff;
@outline:  rgba(0,0,0,0.23);
@global: @badge-blue;
@local: @badge-blue;
@angle-1: 45deg;
@angle-2: 135deg;
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,body {
  height: 100%;
}
body {
  .flex();
  .flex-flow(column, nowrap);
  .justify-content(center);
  background-color: @body;
  font-weight: 700;
  font-size: @font-size;
}
.content {
  .flex();
  .flex-align();
  .flex-flow(row, nowrap);
}
.controls {
  position: absolute;
  width: 100%;
  bottom: 100px;
  padding: 20px;
  text-align: center;
  span {
    display: inline-block;
    margin-bottom: 20px;
  }
}

.shadow-helper() {
  -webkit-box-shadow: 0.12em 0.12em 0.5em rgba(0,0,0,0.23), -0.12em 0.12em 0.5em rgba(0,0,0,0.23);
  -moz-box-shadow: 0.12em 0.12em 0.5em rgba(0,0,0,0.23), -0.12em 0.12em 0.5em rgba(0,0,0,0.23);
  box-shadow: 0.12em 0.12em 0.5em rgba(0,0,0,0.23), -0.12em 0.12em 0.5em rgba(0,0,0,0.23);
}
.shadow-helper-invert() {
  -webkit-box-shadow: 0.12em 0 0.5em rgba(0,0,0,0.23), 0 -0.12em 0.5em rgba(0,0,0,0.23);
  -moz-box-shadow: 0.12em 0 0.5em rgba(0,0,0,0.23), 0 -0.12em 0.5em rgba(0,0,0,0.23);
  box-shadow: 0.12em 0 0.5em rgba(0,0,0,0.23), 0 -0.12em 0.5em rgba(0,0,0,0.23);
}
.flex() {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex-align() {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex-flow(@attr, @wrap) {
  -webkit-flex-flow: @attr @wrap;
  -moz-flex-flow: @attr @wrap;
  flex-flow: @attr @wrap;
  -ms-flex-direction: @attr;
}
.justify-content(@attr) {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  box-pack: justify;
  -webkit-justify-content: @attr;
  -moz-justify-content: @attr;
  -ms-justify-content: @attr;
  -o-justify-content: @attr;
  justify-content: @attr;
}
.border-radius(@int) {
  -webkit-border-radius: @int;
  -moz-border-radius: @int;
  border-radius: @int;
}
.verified {
  .flex();
  .flex-align();
  position: relative;
  margin: 0 auto;
  font-size: 1em;
  .content-wrapper {
    .flex();
    .flex-align();
    z-index: 4;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .content {
      font-size: inherit;
    }
  }
}
.local {
  color: @body;
  .badge-layer {
    background-color: @local;
  }
}
.global {
  color: @body; 
  .badge-layer {
    background-color: @global;
  }
}
.badge-wrapper {
  position: relative;
}
.badge-layer {
  .border-radius(@border-radius);
  width: 4em;
  height: 4em;
  position: relative;
  -webkit-transform: rotate(@angle-1);
  -moz-transform: rotate(@angle-1);
  -ms-transform: rotate(@angle-1);
  -o-transform: rotate(@angle-1);
  z-index: 3;
  &:before {
    .border-radius(@border-radius);
    content: "";
    position: absolute;
    height: 4em;
    width: 4em;
    background-color: inherit;
    -webkit-transform: rotate(@angle-2);
    -moz-transform: rotate(@angle-2);
    -ms-transform: rotate(@angle-2);
    -o-transform: rotate(@angle-2);
  }
}
.badge-layer.grow {
  background: @shape-background;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);  
  transform: scale(1.1);
  z-index: 2;
}
.badge-layer.shadow {
  .shadow-helper();
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);  
  transform: scale(1.1);
  z-index: 1;
  &:before {
    .shadow-helper-invert();
  }
}
.badge-layer.outline {
  background-color: @outline;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scale(1.113);
  -moz-transform: scale(1.113);
  -ms-transform: scale(1.113);  
  transform: scale(1.113);
  z-index: 1;
}
.check {
  .flex();
  .flex-align();
  &:after {
    /*Add another block-level blank space*/
    content: '';
    display: block;
    margin-top: -0.5em;
    /*Make it a small rectangle so the border will create an L-shape*/
    width: 1.6em;
    height: 2.8em;
    /*Add a white border on the bottom and left, creating that 'L' */
    border: solid #fff;
    border-width: 0 .7em .7em 0;
    /*Rotate the L 45 degrees to turn it into a checkmark*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

var input = document.querySelector('input');
var body = document.body;
var span = document.querySelector('#size');
input.addEventListener('input', function() {
    console.log('input changed to: ', input.value);
    body.style.fontSize = input.value + 'px';
    span.innerHTML = input.value;
});