// why am i creating this
input(type="checkbox" id="releaseTheEvil")

.container
   .column.icon
      img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/appstore.png")
   .column.info
      .title Updates Available
      .details #[.text Do you want to install the updates now or try tonight?]
   .column.actions
      .button #[.text Install]
      label.button(for="releaseTheEvil")
         .text Later
         .hint please dont click me :<      

.dontClickLater
   -for(var i = 0; i < 50; i++) 
      .container
         .column.icon
            img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/appstore.png")
         .column.info
            .title Updates Available
            .details #[.text Do you want to install the updates now or try tonight?]
         .column.actions
            .button #[.text Install]
            .button #[.text Later]
      

html, body{
   padding:0px;
   margin:0px;
   background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/mojave-night%20copy.jpg);
   background-size:cover;
   font-family: 'Karla', sans-serif;
   color:#FFF;
   overflow:hidden;
   height:100%;
}

.container, .container * {
   display:block;
   box-sizing:border-box;
   background:none;
   margin:0;
   padding:0;
}

.container {
   width:325px;
   position:absolute;
   top:50%;
   left:50%;
   transform:translateX(-50%) translateY(-50%);
   transform-origin:50% 50%;
   transition:all 1s;
   display:flex;
   background: linear-gradient(to bottom, #E6E8EB, darken(#E6E8EB, 10));
   border-radius:4px;
   font-size:12px;
   color:#222;
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
   border:1px solid rgba(0, 0, 0, 0.1);
   border-top:none;
   .column {
      &.icon {
         width:5em;
         position:relative;
         
         img {
            width:60%;
            height:auto;
            position:absolute;
            top:50%;
            left:50%;
            transform:translateX(-50%) translateY(-50%);
         }
      }
      
      &.info {
         flex:1;
         padding:0.75em 0;
         
         .title {
            font-size:1.3em;
            font-weight:600;
         }
         
         .details {
            margin-top:0.25em;
            font-size:1.1em;
         }
      }
      
      &.actions {
         width:5.5em;
         display:flex;
         flex-direction: column;
         border-left: 1px solid rgba(0, 0, 0, 0.15);
         .button {
            flex:1;
            display:flex;
            position:relative;
            
            .text {
               margin:auto;
            }
            
            + .button {
               border-top: 1px solid rgba(0, 0, 0, 0.15);
            }
            
            &:hover {
               background: rgba(0, 0, 0, 0.1);
               cursor: pointer;
            }
            
            .hint {
               position:absolute;
               bottom:0%;
               left:50%;
               transform:translateY(calc(100% + 1.5em)) translateX(-50%);
               background:rgba(0, 0, 0, 0.25);
               border-radius:5px;
               color:#FFF;
               padding:1em;
               white-space:nowrap;
               transition: all 0.25s;
               pointer-events: none;
               &:after {
                  content: '';
                  position:absolute;
                  top:0%;
                  left:50%;
                  transform:translateY(-100%) translateX(-50%);
                  border:1em solid transparent;
                  border-bottom:1em solid rgba(0, 0, 0, 0.25);
                  
               }
            }
         }
      }
   }
}

.dontClickLater {
   display:none;
   
   .container {
      opacity:0;
   }
}

#releaseTheEvil {
   display:none;
}

#releaseTheEvil:checked {
   ~ .dontClickLater {
      display:flex;
   }
   
   + .container {
      top:0%;
      opacity:0;
   }
}

@for $i from 1 through 100 {
   .dontClickLater .container:nth-of-type(#{$i}) {
      animation: 
         opacity 0.25s linear forwards,
         updates-#{$i} random()*10s+2s ease-in-out infinite alternate;
      $time: random() * 20s + 1s;
      animation-delay: $time, $time;
   }
   
   @keyframes updates-#{$i} {
      $rotateSome: if(random() < 0.25, 1, 0);
      $rotationStart: if($rotateSome > 0, random() * 360deg - 180deg, 0);
      $rotationEnd: if($rotateSome > 0, random() * 360deg - 180deg, 0);
      
      from {
         transform:
            rotateZ($rotationStart) 
            translateX(random() * 150vw - 75vw) 
            translateY(random() * 150vh - 75vh);
      }
      to {
         transform:
            rotateZ($rotationEnd) 
            translateX(random() * 150vw - 75vw) 
            translateY(random() * 100vh - 60vh);
      }
   }
}

@keyframes opacity {
   from { opacity: 0; }
   to { opacity: 1; }
}