// Idea from Sebastien Gabriel dribbble shot "Light and Switch"
// http://drbl.in/kHaO

#back
  #btn
  #s
  

$color-back: #4addf6
$color-bg: #b3effc
$l: 200px

html, body
  height: 100%
  
body
  background: radial-gradient(ellipse at top, #ddf8fe 0%,#24b9cf 100%)
  background-repeat: no-repeat
  
#back
  position: relative
  width: $l/2 + $l/3
  height: $l/2
  background-image: url('https://i.imgur.com/5JFJZBf.png')
  margin: 100px auto
  border-radius: $l
  border: 2px solid lighten($color-back, 25)
  box-shadow: inset 0 3px 4px -1px rgba(51,93,172,1)
  cursor: wait
  
  #btn
    position: absolute
    width: $l/2 - $l/18 - 2px
    height: $l/2 - $l/18 - 2px
    background: linear-gradient(to bottom, #f2fdff 0%,#49e4f7 100%)
    top: ($l/18)/2
    left: ($l/15)/2
    border-radius: 100%
    border: 1px solid lighten($color-back, 15)
    box-shadow: 0 3px 4px -1px rgba(51,93,172,1)
    animation: go 3s ease-in-out infinite
    z-index: 2
    
    &:after
      content: ""
      position: absolute
      width: ($l/2 - $l/18 - 2px) - $l/9
      height: ($l/2 - $l/18 - 2px) - $l/9
      background: #a5f0fc
      margin: $l/18 0 0 $l/18
      border-radius: 100%
      box-shadow: 0 -1px 2px 0 rgba(255,255,255,0.8)
      
  #s
    position: absolute
    width: $l/2 - $l/18 - 2px
    height: ($l/2 - $l/18 - 2px)/1.5
    background: radial-gradient(ellipse at center, rgba(21,37,71,0.5) 0%,rgba(125,185,232,0.03) 74%,rgba(125,185,232,0) 66%)
    //background: linear-gradient(to bottom, rgba(21,37,71,1) 0%,rgba(125,185,232,0.6) 34%,rgba(125,185,232,0) 100%)
    margin-top: ($l/2 - $l/15 - 2px)/2
    margin-left: 1px
    z-index: 1
    animation: go 3s ease-in-out infinite
      
    
  
@keyframes go
  0%
    top: ($l/18)/2
    left: ($l/15)/2
    right: 0
  35%
    top: ($l/18)/2
    left: ($l/15)/2
  50%
    top: ($l/18)/2
    left: ($l/2 - $l/9 - 2px) - (($l/18)/2)
  85%
    top: ($l/18)/2
    left: ($l/2 - $l/9 - 2px) - (($l/18)/2)
  100%
    top: ($l/18)/2
    left: ($l/15)/2