<input class="medium" type="radio" name="a"/>
<input class="medium" type="radio" name="a"/>
<input class="medium" type="radio" name="a"/>
<input class="medium" type="radio" name="a"/>
<input class="medium" type="radio" name="a"/>

@import "compass/css3";

html, body { height: 100%; }
body {
  color: white;
  display:flex;
  justify-content:center;
  align-items:center;
  background: white;
  backface-visibility:hidden;
}

input[type="radio"] {
  appearance:none;
  margin:0 40px;
  width: 24px;
  height: 24px;
  background: #eeeeee;
  box-shadow:
    inset 0 0 0 .4em white,
    0 0 0 .3em;
  border-radius: 50%;
  transition: .2s;
  cursor:pointer;
  color: #363945;

  &:hover,
  &:checked {
    background: #363945;
    box-shadow:
    inset 0 0 0 .6em white,
    0 0 0 .3em;
  }
  
  &:checked {
    background: #56be8e;
    box-shadow:
      inset 0 0 0 .4em white,
      0 0 0 .3em #56be8e;
  } 

  &:focus { outline: 0; }
}