.viewport
  - $list = ['Macarons', 'Gummy Bears, Gummy Bears, Gummy Bears, Gummy Bears, Gummy Bears', 'Oreos', 'Laffy Taffy', 'Skittles']
  .todos  
    %h1.title 
      Pure CSS Grocery list
    %i.divider
    %input.toggle#toggle(type='checkbox')
    %label.btn-toggle(for='toggle')
      Toggle
    - $list.each_with_index do |my_item, index| 

      %input.input(type='checkbox' id='ch-#{index}' name='ch-#{index}'){:checked => (index == 1 ? "" : nil) }
      %label.item(for='ch-#{index}' style='--item: #{index}')
        .item__content
          .pseudo-check
            .checkmark
              .goo
          %span.item__text
            = my_item
      .progress
    .end
      .goo

// Fancy Checkboxes
.input 
  display: none
.pseudo-check
  display: inline-block
  border-radius: .4em
  vertical-align: middle
  position: relative
  transition: all .3s
  box-shadow: inset 0 .05em .15em rgba(0, 0, 0, .3)
  top: -.11em
  +size(1.3em)
.checkmark
  position: relative
  margin: 25% 20%
  clip-path: polygon(0 56%, 35% 87%, 100% 15%, 85% 0, 34% 56%, 15% 39%)
  +size(.75em)
.goo
  border-radius: 50%
  background-color: #fff
  background-color: #39d76e
  position: absolute
  left: 15%
  top: 67%
  opacity: 0
  transition: transform .5s ease-in, opacity .4s .1s
  transform-origin: center
  transform: scale(.1)
  +size(.06em .09em)

.item 
  position: relative
  display: inline-block
  flex-grow: 1
  color: #456
  min-width: 100%
  cursor: pointer
  perspective: 1000px
  margin: 0 -1em
  &__content
    $delay: calc((5 - var(--item)) * .05s)
    transform: rotateX(-90deg)
    background-color: #fff
    transform-origin: top left
    box-sizing: border-box
    padding: 1em 1em
    margin-bottom: -3.5em
    border-top: 1px solid #efefef
    transition: all .5s $delay cubic-bezier(.28,-0.54,.45,2)
    backface-visibility: hidden
    .item:first-of-type &
      border-top: none
  &__text 
    position: relative
    max-width: calc(100% - 1.8em)
    overflow: hidden
    height: 30px
    text-overflow: ellipsis
    display: inline-block
    white-space: nowrap
  &__text::after 
    content: ''
    display: block 
    height: 2px 
    width: 0%
    top: 50%
    left: -2.5%
    position: absolute
    background-color: #39d76e
    transition: all .2s .1s



.parent 
  .child 
    background-color: pink
  .child-2
    background-color: red 
    
    
.progress
  background-color: #39d76e
  width: .01%
  height: 5px
  position: relative
  order: -1
  transition: width .4s
  margin-bottom: 1rem
 
//Styling checked fancy checkboxes
.input:checked 
  & + .item .item__text::after 
    width: 105%
    
  & + .item .pseudo-check
    background: #39d76e
  & + .item + .progress 
    width: 20%
    transition: width .4s .1s
    
  & + .item .goo 
    background-color: #fff
    transform: scale(40)
    opacity: 1
    transition: transform .3s cubic-bezier(1,-0.46,.41,1.34), opacity 0
  & + .item + .stuff 
    float: right


.todos
  width: 95%
  box-sizing: border-box
  max-width: 400px
  display: flex
  flex-wrap: wrap
  padding: 1em 
  position: relative
  padding-bottom: 0.5em
  margin: auto
  border-radius: .1em .1em .3em .3em
  border-top: 20px solid #6836c8
  border-top: 20px solid #04c6df
  background-color: #fff
  box-shadow: 0 30px 40px rgba(0, 0, 0, .4)
  z-index: 2

.divider
  width: 100%
  height: 2px
  order: 0
    
.title 
  order: -4
  width: 100%
  margin-top: 0
  margin-bottom: -5px
  font-size: 1rem
  color: #456
  text-transform: uppercase
  padding-bottom: 1rem 
  border-bottom: 5px solid #d9dee3
  letter-spacing: 0.02em

.toggle
  display: none
  
.toggle:checked
  & ~ .item
    // background-color: #abc
    .item__content
      $delay: calc(var(--item) * .16s)
      margin-bottom: 0em
      transform: rotateX(0deg)
      transition: all .23s $delay cubic-bezier(.28,-0.54,.45,2.1)
  & + .btn-toggle::after 
    top: 35%
    transform: rotateZ(-135deg)

.btn-toggle 
  position: absolute
  top: 1em
  right: 1em
  border: 2px solid #89a
  text-indent: -9999px
  border-radius: 50%
  cursor: pointer
  +size(20px)
  &::after 
    content: ''
    display: block
    border: 2px solid #89a
    border-top: none
    border-left: none
    position: absolute
    top: 16%
    left: 24%
    transition: transform .3s
    transform: rotateZ(45deg)
    +size(8px)

.end 
  display: block
  opacity: 0
  pointer-events: none
  clip-path: polygon(0 56%, 35% 87%, 100% 15%, 85% 0, 34% 56%, 15% 39%)
  +size(8em)
  position: absolute
  top: 230px
  right: calc(50% + 0px)
  transform: translate(50%, -50%)
  z-index: 4
  overflow: hidden
  transition: opacity .1s, all 0 .4s
  .goo 
    background: linear-gradient(#ff3052, #ff51b6)
    transform: scale(1)
    +size(3em)
  
  
.input:checked
  & ~ & ~ & ~ & ~ & ~ .end
    $sp-properties: .2s cubic-bezier(.28,-0.54,.45,1.3) 
    $sp-properties-2: .5s cubic-bezier(.99,-0.4,.14,1.51)
    opacity: 1
    top: 33px
    right: calc(0% + 65px)
    transition: opacity .1s, width .3s $sp-properties, height .3s $sp-properties, top .3s $sp-properties-2, right .3s $sp-properties-2
    +size(1em)
    .goo 
      transition: all .4s
      left: 35%
      top: 17%
      transform: scale(4)
      opacity: 1
  
body
  padding: 0
  margin: 0
  position: relative
.viewport 
  font-family: 'Avenir', sans-serif
  font-size: 1.3em
  display: flex 
  position: absolute
  width: 100vw
  height: 100vh
  max-width: 100vw
  max-height: 100vh
  align-items: center
  overflow: hidden
  background: linear-gradient(to top, #2a037d, #5a3fb9)
  &::after 
    content: ''
    display: block 
    position: absolute
    background: linear-gradient(#fa0, #ff6e12)
    border-radius: 50%
    left: -10%
    bottom: -35vh
    +size(200vw 80vh)