<div id="r8-balloon-radio-group-wrapper">
    <ul>
        <li>
          <input id="op_0" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="0" />
          <label for="op_0">option</label>
      </li>
        <li>
          <input id="op_1" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="1" checked disabled /><label for="op_1">option</label>
      </li>
        <li><input id="op_2" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="2"/>
      <label for="op_2">option</label></li>
        <li><input id="op_3" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="3" />
      <label for="op_3">option</label></li>
      <li><input id="op_4" class="radio r8-radio-float" type="radio" name="demo-radio-group" value="5" disabled/><label for="op_4">option</label></li>
      </ul>
</div>
<div id="r8-logo-coin"></div>

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400');

$clr--white:white;
$clr--black:black;
$clr--silver:silver;
$clr--highlight:magenta;
$clr--gray-light:whitesmoke;
$clr--gray-mid:gainsboro;
$clr--gray-dark:darkgray;

$hover-shadow--gray: $clr--gray-mid;
$def--anim-dur:250ms;
$def--anim-trans: ease-in-out;

$l--resp_display: 75rem;
$m--resp_display: 62rem;
$s--resp_display: 48rem;
$xs--resp_display: 36rem;

* {
  outline: none;
}

body {
  text-align: center;
  margin: 4rem auto;
  box-sizing: border-box;
  text-shadow: 0 1px 1px $clr--gray-mid;
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#r8-balloon-radio-group-wrapper {
  margin: 8rem auto;
  width: 32rem;
  display: block;
  padding: 0rem 1rem;
  
  :disabled{
    + label {
      color:$clr--gray-dark;
    }
  }
  
  label{
    display: block;
    transform: rotateZ(-45deg);
    font-weight:300;
    position:absolute;
    left:50%;
    text-align:center;
    width:100%;
    font-size:.5rem;
    letter-spacing:.025rem;
    margin-left:calc( 50% - 25%);
    
    &::after{
       display: block;
      content: attr(for);
    }
  }

  .r8-radio-float {
    &:not([disabled]){
    &:hover {
      background: $clr--gray-light;
      box-shadow: 0 0 0.25rem $clr--white;
      animation: stabilize 1 1s;
      
      &:checked {
        box-shadow: none;
        animation:unset !important;
      }
      
      &::before{
        /* Centered disc */
        border: .125rem solid $clr--highlight;
      }
      
      &::after {
        /* Hover shadow */
        opacity: 0.45;
      }
    }
  }
  }

  ul {
    list-style: none;

    li {
      display: inline-block;
      transform: rotateZ(45deg);
    }
  }

  /* Radio Elements */
  .radio {
    position: relative;
    width: 2rem;
    height: 2rem;
    margin: .67rem;
    margin-top: 0;
    cursor: pointer;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transform-origin: center;
    border: .05rem solid $clr--gray-dark;
    border-radius: 50% 50% .2rem 50%;
    background: $clr--gray-mid;
    transition: all $def--anim-dur $def--anim-trans;

    &::before,
    &::after {
      position: absolute;
      content: '';
      border-radius: 50%;
    }

    &::before {
      /* Centered disc */
      top: .25rem;
      left: .25rem;
      width: 1rem;
      height: 1rem;
      background: $clr--white;
      border: .125rem solid $clr--gray-mid;
      box-shadow: 0 0 .05rem rgba($clr--black,.25);
      pointer-events: all;
      transition: all $def--anim-dur $def--anim-trans;
    }

    &::after {
      /* Hover shadow */
      width: 2rem;
      height: .67rem;
      top: 2.19rem;
      left: 1.5rem;
      background: $hover-shadow--gray;
      opacity: 0.25;
      transform-origin: right middle;
      transform: rotateZ(-45deg);
      overflow: visible;
      background: radial-gradient(ellipse at center, $hover-shadow--gray 0%, transparent 50%);
      transition: height 1s ease, opacity 1s ease;
    }

    &:checked {
      background: $clr--gray-light;
      transform: scale(1.2);
      transition: background $def--anim-dur $def--anim-trans;
      
      &::before {
        width: .75rem;
        height: .75rem;
        background: $clr--highlight;
        border: .25rem solid rgba($clr--white, 0.5);
      }

      &:disabled {
        opacity: 0.40;
        background: $clr--gray-light;
      }
    }

    &:disabled {
      cursor: no-drop;
      opacity: 0.25;
      background: $clr--silver;
      animation: unset !important;
    }
  }
}



#r8-logo-coin {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  margin: 1rem;
  right: 1rem;
  bottom: 1rem;
  background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1251/R8-launcher-icon-light.svg');
    background-repeat:no-repeat;
    background-size:contain;
  background-position:0 0;
  
  &::before{
    position:relative;
    border-radius:50%;
    display:block;
    content:'';
    background-size:contain;
    background:$clr--highlight;
    margin:.5rem;
    width:calc( 90% - .6rem );
    height:calc( 90% - .6rem );
    z-index:-1;
  }
}

@media (min-width: $l--resp_display) {
  #r8-balloon-radio-group-wrapper {
    max-width: calc($l--resp_display - 3.75rem);
  }
}

@media (min-width: $m--resp_display) {
  #r8-balloon-radio-group-wrapper {
    max-width: calc($m--resp_display - 2rem);
  }
}

@media (min-width: $s--resp_display) {
  #r8-balloon-radio-group-wrapper {
    max-width: calc($s--resp_display - 3rem);
  }
}

@media (min-width: $xs--resp_display) {
  #r8-balloon-radio-group-wrapper {
    max-width: calc($xs--resp_display - 2.25rem);
  }
}

@keyframes stabilize {
  0% {
    transform: scale(0.8);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(0.9);
  }

  75% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}