/**
 * Icon Component Styles
 *
 * Inline SVG icons with consistent sizing and theming.
 * Comprehensive icon library for actions, features, contact, and social media.
 *
 * @package HubTerapeutico
 * @since 1.0.0
 */

/* ============================================
   BASE ICON STYLES
   ============================================ */

.hub-icon {
  /* Display */
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  
  /* Default size */
  width: 24px;
  height: 24px;
  
  /* Color inherits from parent by default */
  color: currentColor;
  
  /* Smooth transitions */
  transition: color var(--hub-transition-base, 0.3s ease);
}


/* ============================================
   SIZE VARIANTS
   ============================================ */

.hub-icon--small {
  width: 16px;
  height: 16px;
}

.hub-icon--medium {
  width: 24px;
  height: 24px;
}

.hub-icon--large {
  width: 32px;
  height: 32px;
}

.hub-icon--custom-size {
  /* Size set via inline style */
}


/* ============================================
   COLOR MODIFIERS
   ============================================ */

.hub-icon--currentColor {
  color: currentColor;
}

.hub-icon--inherit {
  color: inherit;
}

.hub-icon--primary {
  color: var(--color-primary);
}

.hub-icon--secondary {
  color: var(--color-primary-dark);
}

.hub-icon--dark {
  color: var(--color-gray-900);
}

.hub-icon--light {
  color: var(--color-gray-600);
}

.hub-icon--white {
  color: var(--color-white);
}

.hub-icon--muted {
  color: var(--color-gray-500);
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  /* Slightly reduce icon sizes on tablets */
  .hub-icon--large {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  /* Further adjust icon sizes on very small screens */
  .hub-icon--large {
    width: 24px;
    height: 24px;
  }
  
  .hub-icon--medium {
    width: 20px;
    height: 20px;
  }
  
  .hub-icon--small {
    width: 14px;
    height: 14px;
  }
}