<h3>Click the card to flip</h3>

<div class="card--container">
  <div class="card--flipper">
    <div class="side--a">
      <i class="fa fa-twitter"></i>
      <a target="_blank" id="twitter" href="https://twitter.com/TJ_egan">
        <p>TJ Egan</p>
        <p>@tjegan</p>
      </a>
    </div>
    <div class="side--b">
      <i class="fa fa-spotify"></i>
      <a target="_blank" id="spotify" href="https://play.spotify.com/user/tj_egan">
        <p>tj_egan</p>
      </a>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,600,700);

// Set perspective on card container
.card--container {
  perspective: 1000px;
  height: 200px;
  width: 150px;
}

// Add state for when card is clicked
.card--container.flip .card--flipper {
  transform: rotateY(180deg); 
}

// Hover Effects
.card--container:hover {
  transform: scale(1.1); 
  
  .side {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }
  
  i {
    animation-play-state: running;
  }
}


.card--flipper {
  position: relative;
  transform-style: preserve-3d; 
}

// Card Styles
.side {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 150px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  
  // LINK
  a {
    background-color: #fff;
    padding: .5em 0;
    width: 100%;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
  }
  
  // ICON 
  i {
      animation: .5s rock infinite linear;
      animation-play-state: paused;
      margin-top: .5em;
      background-color: #fff;
      padding: .3em;
      border-radius: 40% 40% 0 40%;
      font-size: 4em;
    }
  
    // TEXT
    p {
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 500;
      font-size: 1.1em;
      padding: 0 8px;
    }
  
  // SIDE A
  &--a {
    @extend .side;
    z-index: 2;
    transform: rotateY(0deg);
    
    // STYLES
    background-color: #50ABF1;
    border: 8px solid #50ABF1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #50ABF1;
    
    // SIDE A LINK
    a {
      color: #50ABF1;
      border-top: 10px solid lighten(#50ABF1, 10%);
    }
  }
  
  // SIDE B
  &--b {
    @extend .side;
    transform: rotateY(180deg); 
    
    // STYLES
    background-color: #24CF5F;
    border: 8px solid #24CF5F;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #24CF5F;
    
    
    // ICON
    i {
      border-radius: 40% 40% 40% 0;
    }
    
    // LINK
    a {
      color: #24CF5F;
      border-top: 10px solid lighten(#24CF5F, 10%);
      justify-content: center;
    }
  }
}

// Rocking animation
@keyframes rock {
  0% { transform: rotateZ(0deg) }
  25% { transform: rotateZ(10deg) }
  50% { transform: rotateZ(0deg) }
  75% { transform: rotateZ(-10deg) }
  100% { transform: rotateZ(0deg) }
}

// BASE STYLES
body {
  background-color: #fff;
}


h3 {
  font-size: 2em;
  margin-bottom: 2em;
  color: $gray-10;
}

document.querySelector('.card--container').addEventListener('click', (evt) => {
  evt.currentTarget.classList.toggle('flip')
})