h2 Toggle 'em
ul.tg-list
  li.tg-list-item
    h4 Light
    input#cb1.tgl.tgl-light(type = "checkbox")
    label.tgl-btn(for = "cb1")
  li.tg-list-item
    h4 iOS
    input#cb2.tgl.tgl-ios(type = "checkbox")
    label.tgl-btn(for = "cb2")
  li.tg-list-item
    h4 Skewed
    input#cb3.tgl.tgl-skewed(type = "checkbox")
    label.tgl-btn(data-tg-off = "OFF", data-tg-on = "ON", for = "cb3")
  li.tg-list-item
    h4 Flat
    input#cb4.tgl.tgl-flat(type = "checkbox")
    label.tgl-btn(for = "cb4")
  li.tg-list-item
    h4 Flip
    input#cb5.tgl.tgl-flip(type = "checkbox")
    label.tgl-btn(data-tg-off = "Nope", data-tg-on = "Yeah!", for = "cb5")

html,
body {
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: sans-serif;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tg-list {
  text-align: center;
  display: flex;
  align-items: center;
}

.tg-list-item {
  margin: 0 2em;
}

h2 {
  color: #777;
}

h4 {
  color: #999;
}

.tgl {
  display: none;
  
  // add default box-sizing for this scope
  &,
  &:after,
  &:before,
  & *,
  & *:after,
  & *:before,
  & + .tgl-btn {
    box-sizing: border-box;
    &::selection {
      background: none;
    }
  }
  
  + .tgl-btn {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
    &:after,
    &:before {
      position: relative;
      display: block;
      content: "";
      width: 50%;
      height: 100%;
    }
    
    &:after {
      left: 0;
    }
    
    &:before {
      display: none;
    }
  }
  
  &:checked + .tgl-btn:after {
    left: 50%;
  }
}

// themes
.tgl-light {
  + .tgl-btn {
    background: #f0f0f0;
    border-radius: 2em;
    padding: 2px;
    transition: all .4s ease;
    &:after {
      border-radius: 50%;
      background: #fff;
      transition: all .2s ease;
    }
  }
  
  &:checked + .tgl-btn {
    background: #9FD6AE;
  }
}

.tgl-ios {
  + .tgl-btn {
    background: #fbfbfb;
    border-radius: 2em;
    padding: 2px;
    transition: all .4s ease;
    border: 1px solid #e8eae9;
    &:after {
      border-radius: 2em;
      background: #fbfbfb;
      transition:
        left .3s cubic-bezier(
          0.175, 0.885, 0.320, 1.275
        ),
        padding .3s ease, margin .3s ease;
      box-shadow:
        0 0 0 1px rgba(0,0,0,.1),
        0 4px 0 rgba(0,0,0,.08);
    }
    
    &:hover:after {
      will-change: padding;
    }
    
    &:active {
      box-shadow: inset 0 0 0 2em #e8eae9;
      &:after {
        padding-right: .8em;
      }
    }
  }
  
  &:checked + .tgl-btn {
    background: #86d993;
    &:active {
      box-shadow: none;
      &:after {
        margin-left: -.8em;
      }
    }
  }
}

.tgl-skewed {
  + .tgl-btn {
    overflow: hidden;
    transform: skew(-10deg);
    backface-visibility: hidden;
    transition: all .2s ease;
    font-family: sans-serif;
    background: #888;
    &:after,
    &:before {
      transform: skew(10deg);
      display: inline-block;
      transition: all .2s ease;
      width: 100%;
      text-align: center;
      position: absolute;
      line-height: 2em;
      font-weight: bold;
      color: #fff;
      text-shadow: 0 1px 0 rgba(0,0,0,.4);
    }
    
    &:after {
      left: 100%;
      content: attr(data-tg-on);
    }
    
    &:before {
      left: 0;
      content: attr(data-tg-off);
    }
    
    &:active {
      background: #888;
      &:before {
        left: -10%;
      }
    }
  }
  
  &:checked + .tgl-btn {
    background: #86d993;
    &:before {
      left: -100%;
    }

    &:after {
      left: 0;
    }

    &:active:after {
      left: 10%;
    }
  }
}

.tgl-flat {
  + .tgl-btn {
    padding: 2px;
    transition: all .2s ease;
    background: #fff;
    border: 4px solid #f2f2f2;
    border-radius: 2em;
    &:after {
      transition: all .2s ease;
      background: #f2f2f2;
      content: "";
      border-radius: 1em;
    }
  }
  
  &:checked + .tgl-btn {
    border: 4px solid #7FC6A6;
    &:after {
      left: 50%;
      background: #7FC6A6;
    }
  }
}

.tgl-flip {
  + .tgl-btn {
    padding: 2px;
    transition: all .2s ease;
    font-family: sans-serif;
    perspective: 100px;
    &:after,
    &:before {
      display: inline-block;
      transition: all .4s ease;
      width: 100%;
      text-align: center;
      position: absolute;
      line-height: 2em;
      font-weight: bold;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
      border-radius: 4px;
    }
    
    &:after {
      content: attr(data-tg-on);
      background: #02C66F;
      transform: rotateY(-180deg);
    }
    
    &:before {
      background: #FF3A19;
      content: attr(data-tg-off);
    }

    &:active:before {
      transform: rotateY(-20deg);
    }
  }
  
  &:checked + .tgl-btn {
    &:before {
      transform: rotateY(180deg);
    }
    
    &:after {
      transform: rotateY(0);
      left: 0;
      background: #7FC6A6;
    }
    
    &:active:after {
      transform: rotateY(20deg);
    }
  }
}

/** Toggle buttons
 * @mallendeo
 */