// ========================================================
// Icon Classes
// ========================================================

// Stack
.icon-stack {
  display: inline-block;
  position: relative;
  svg:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 200;
    transform: translateY(-50%) translateX(-50%);
    font-size: 0.7em;
  }
}

// Hover
.icon-hover {
  display: inline-block;
  position: relative;
  cursor: pointer;
  svg:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 200;
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
  }
  &:hover {
    svg:first-child { opacity: 0; }
    svg:last-child { opacity: 1; }
  }
}

// Pulse
@keyframes pulse {
  0%   { transform:scale(1); }
  15%  { transform:scale(1.15); }
  40%  { transform:scale(1.25); }
  75%  { transform:scale(0.85); }
  100% { transform:scale(1); }
}
.icon-pulse {
  animation: pulse 400ms linear 1;
}

// Rotate
@keyframes rotate {
  100% { transform: rotate(360deg); }
}
.icon-rotate-fast {
  animation: rotate 1s linear infinite;
}
.icon-rotate {
  animation: rotate 2s linear infinite;
}
.icon-rotate-slow {
  animation: rotate 3s linear infinite;
}

// Animation Utility Classes
.icon-once { animation-iteration-count: 1; }
.icon-forever { animation-iteration-count: infinite; }