<div class="switch">
  <label>
    <input type="checkbox">
    <i class="icon-pause">ll</i>
    <i class="icon-play">►</i>
  </label>
</div>

@import "bourbon";

* {
  &, &:before, &:after {
    @include box-sizing(border-box);
  }
}

body {
  background: #63D6A5;
}

.switch {
  @include position(absolute, 50% 0 0 50%);
  @include transform(translate(-50%, -50%));
  @include size(192px);
  border-radius: 48px;
  @include linear-gradient(#ccf4e4, #b3efd8);
  box-shadow: 0 16px 32px rgba(#1f6c49, .8), inset 0 2px 4px 2px rgba(#f1fbf8, .8), inset 0 -2px 4px 2px rgba(#83dfbe, .8);
  
  &:before {
    content: "";
    display: block;
    @include position(absolute, 4px 0 0 4px);
    @include size(184px);
    border-radius: 100%;
    @include linear-gradient(#f1fbf8, #83dfbe);
    @include prefixer(filter, blur(2px), webkit moz ms o spec);
  }
  
  &:after {
    content: "";
    display: block;
    @include position(absolute, 18px 0 0 18px);
    @include size(156px);
    border-radius: 100%;
    @include linear-gradient(#72caaa, #ffffff);
  }

  label {
    @include position(absolute, 30px 0 0 30px);
    @include size(132px);
    border-radius: 100%;
    @include linear-gradient(#1bbbae, #69d8cb);
    box-shadow: inset 0 8px 24px rgba(black, .4);
    z-index: 10;
  }
  
  input[type=checkbox] {
    @include appearance(none);
    @include position(absolute, 28px 0 0 12px);
    margin: 0;
    @include size(108px 76px);
    border-radius: 76px;
    background-size: 200% 100%;
    background-position: right;
    @include linear-gradient(to right, #54d7aa 50%, #ffa9cc 50%);
    box-shadow: inset 0 1px 2px 0 rgba(black, .6), 0 1px 1px 0 rgba(white, .6);
    outline: none;
    cursor: pointer;
    @include transition(background-position .1s $ease-in-quart);
    
    &:before {
      content: "";
      display: block;
      @include position(absolute, 0px 0 0 0px);
      z-index: 10;
      @include size(76px);
      border-radius: 100%;
      @include linear-gradient(#efefef, #e2e2e2);
      box-shadow: 0 4px 6px rgba(black, .4), inset 0 0 1px 1px rgba(white, .8);
      @include transition(left .1s $ease-in-quart);
    }
    
    &:after {
      content: "";
      display: block;
      @include position(absolute, 13px 0 0 13px);
      z-index: 10;
      @include size(50px);
      border-radius: 100%;
      @include linear-gradient(#b7d2cf, #edefee);
      @include transition(left .1s $ease-in-quart);
    }
  
    &:checked {
      background-position: left;
      
      &:before {
        left: 32px;
      }
      
      &:after {
        left: 46px;
      }      
      
      + .icon-pause {
        left: 24px;
        opacity: 1;
      }   
      
      + .icon-pause + .icon-play {
        right: 0px;
        opacity: 0;
      }
    }
  }
}

i {
  display: block;
  @include size(12px);
  font-family: $lucida-grande;
  font-style: normal;
  font-weight: bold;
  font-size: 6px;
  color: #ffffff;
  border: 1px solid white;
  border-radius: 12px;
  text-align: center;
  @include transition(left .1s $ease-in-quart, right .1s $ease-in-quart, opacity .05s .05s $ease-in-quart);
  
  &.icon-play {
    @include position(absolute, 62px 24px null null);
    padding: 1px 0 0 1px;
  }
  
  &.icon-pause {
    @include position(absolute, 62px null null 0px);
    padding: 1px 0 0 0;
    opacity: 0;
  }
}