/* BJJ Academy Icon Styles */

/* Base icon styles */
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  width: 1em;
  height: 1em;
}

/* Size variants */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }
.icon-3xl { width: 64px; height: 64px; }

/* Color variants */
.icon-primary { color: var(--primary, #e74c3c); }
.icon-secondary { color: var(--secondary, #2c3e50); }
.icon-accent { color: var(--accent, #f39c12); }
.icon-success { color: #27ae60; }
.icon-warning { color: #f39c12; }
.icon-danger { color: #e74c3c; }
.icon-info { color: #3498db; }
.icon-light { color: #ecf0f1; }
.icon-dark { color: #2c3e50; }
.icon-muted { color: #95a5a6; }

/* Social media icons */
.icon-social {
  transition: all 0.3s ease;
  border-radius: 50%;
  padding: 8px;
}

.icon-social:hover {
  transform: translateY(-2px);
}

.icon-instagram { color: #e4405f; }
.icon-facebook { color: #1877f2; }
.icon-youtube { color: #ff0000; }
.icon-twitter { color: #1da1f2; }

.icon-social.icon-instagram:hover { background: rgba(228, 64, 95, 0.1); }
.icon-social.icon-facebook:hover { background: rgba(24, 119, 242, 0.1); }
.icon-social.icon-youtube:hover { background: rgba(255, 0, 0, 0.1); }
.icon-social.icon-twitter:hover { background: rgba(29, 161, 242, 0.1); }

/* BJJ specific icons */
.icon-belt {
  color: var(--primary);
}

.icon-gi {
  color: var(--secondary);
}

.icon-medal,
.icon-trophy {
  color: var(--accent);
}

/* Icon animations */
.icon-spin {
  animation: icon-spin 2s linear infinite;
}

.icon-pulse {
  animation: icon-pulse 2s infinite;
}

.icon-bounce {
  animation: icon-bounce 1s infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes icon-bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* Interactive states */
.icon-button {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.1);
}

.icon-button:active {
  transform: scale(0.95);
}

/* Icon with text */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-text .icon {
  flex-shrink: 0;
}

/* Responsive icon sizes */
@media (max-width: 768px) {
  .icon-responsive-lg { width: 20px; height: 20px; }
  .icon-responsive-xl { width: 24px; height: 24px; }
  .icon-responsive-2xl { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .icon-responsive-lg { width: 16px; height: 16px; }
  .icon-responsive-xl { width: 20px; height: 20px; }
  .icon-responsive-2xl { width: 24px; height: 24px; }
}

/* Accessibility */
.icon[aria-hidden="true"] {
  pointer-events: none;
}

/* Print styles */
@media print {
  .icon {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }
}