/* Custom CSS for Tabler UI Button Animations */

/* Base button animation class */
.btn-animate-icon {
  transition: all 0.2s ease-in-out;
}

.btn-animate-icon svg {
  transition: all 0.2s ease-in-out;
}

/* Rotate animation */
.btn-animate-icon-rotate:hover svg {
  transform: rotate(90deg);
  transition: all 0.2s ease-in-out;
}

/* Shake animation */
@keyframes shake {
  0%, 100% {transform: translateX(0);}
  20%, 60% {transform: translateX(-3px);}
  40%, 80% {transform: translateX(3px);}
}

.btn-animate-icon-shake:hover svg {
  animation: shake 0.5s ease-in-out;
}

/* Pulse animation */
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}

.btn-animate-icon-pulse:hover svg {
  animation: pulse 0.5s ease-in-out;
}

/* Tada animation */
@keyframes tada {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  100% {transform: scale(1) rotate(0);}
}

.btn-animate-icon-tada:hover svg {
  animation: tada 0.8s ease-in-out;
}

/* Move start animation */
.btn-animate-icon-move-start:hover svg {
  transform: translateX(-5px);
  transition: all 0.2s ease-in-out;
}

/* Hover effect for all animated buttons */
.btn-animate-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}