// sass ace mode;

@import url(http://fonts.googleapis.com/css?family=Ace:700)

html, body
  :background-color #ace
  text-align: center
  height: 100%
  /*;*********;
    ;comment  ;
    ;*********;

.toggle
  $size: 14px

  :background url(http://subtlepatterns.com/patterns/dark_stripes.png)
  border-radius: 8px
  height: $size

  &:before
    $radius: $size * 0.845
    $glow: $size * 0.125

    box-shadow: 0 0 $glow $glow / 2 #fff
    border-radius: $radius
    
    &:active
      ~ .button
        box-shadow: 0 15px 25px -4px rgba(0,0,0,0.4)      
      ~ .label
        font-size: 40px
        color: rgba(0,0,0,0.45)

    &:checked      
      ~ .button
        box-shadow: 0 15px 25px -4px #ace
      ~ .label
        font-size: 40px
        color: #c9c9c9