<div class="container">
  <a href="" class="button"><i class="fa"></i></a>
</div>

<p class="view-collection">&bull; #codevember &bull; <a href="https://codepen.io/collection/nxZbMW/" target="_blank">View Collection</a> &bull;<br />
  <span>Handcrafted with <span class="love">♥</span> from Austin, TX by <a href="https://twitter.com/fleetingftw">James Fleeting</a></span></p>

@use postcss-simple-vars;
@use postcss-media-minmax;
@use postcss-nested;

$bp: 255px;

.container {
  flex: 0 0 auto;
  width: 70px;
  height: 150px;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
}

.button {
  display: inline-block;
  padding: 12px 12px 10px;
  border: 0;
  border-radius: 3px;
  background: #bf4d28;
  text-decoration: none;
  transition: all 1.2s ease-in-out;
  
  i::after {
    content: "\f019";
    font-size: 40px;
    color: #fff;
  }
  
  &:hover {
    animation: pulse 0.2s 2 both;
  }
  
  &.loading {
    i {
      animation: loading 2s infinite linear;
      
      &::after {
        content: "\f1ce";
      }        
    }
  }
  
  &.success {
    border-radius: 50%;
    background: #80bca3;
    
    i::after {
      content: "\f00c";
      color: transparent;
      animation: change-icon 1s 0.6s linear both;
    }
  }
}

@keyframes loading {
  0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100% {
      -webkit-transform: rotate(359deg);
      transform: rotate(359deg);
  }
}

@keyframes change-icon {
  0% {
    color: transparent;
  }
  
  100% {
    color: #fff;
  }
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}


html, body {
  height: 100%;
  
  @media screen and (height <= $bp) {
    height: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, #343436 0%,#1d1f20 100%);
  
  @media screen and (height <= $bp) {
    display: block;
  }
}

.view-collection {
  flex: 0 0 auto;
  margin: 10px 0 0;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
  
  span {
    font-size: 13px;
  }
  
  .love {
    color: #cc0000;
  }
  
  a {
    color: #bf4d28;
    text-decoration: none;
    transition: all 0.7s;
    
    &:hover, &:focus {
      color: #80bca3;
    }
  }
}

let downloadButton = document.querySelector('.button');
if(downloadButton) {    
  downloadButton.addEventListener('click', function(event) {
    event.preventDefault();
    
    /* Start loading process. */
    downloadButton.classList.add('loading');
    
    /* Set delay before switching from loading to success. */
    window.setTimeout(function() {
      downloadButton.classList.remove('loading');
      downloadButton.classList.add('success');
    }, 3000);
    
    /* Reset animation. */
    window.setTimeout(function() {
      downloadButton.classList.remove('success');
    }, 8000);
  });
};