/**
 * MS Icons V17 - Frontend Styles
 * V17: Support du gap personnalisable
 */

/* Wrapper principal */
.msi-v10-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  /* V17: Gap défini par le style inline, fallback 16px */
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Liens d'icônes */
.msi-v10-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}

.msi-v10-link:hover {
  background: rgba(79, 70, 229, 0.05) !important;
}

/* Icônes SVG */
.msi-v10-link svg.msi-v10-icon {
  width: var(--msi-v10-icon-size, 24px) !important;
  height: var(--msi-v10-icon-size, 24px) !important;
  min-width: var(--msi-v10-icon-size, 24px) !important;
  min-height: var(--msi-v10-icon-size, 24px) !important;
  stroke: var(--msi-v10-icon-color, #6B7280) !important;
  fill: none !important;
  stroke-width: 2 !important;
  transition: stroke 0.2s ease !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.msi-v10-link:hover svg.msi-v10-icon {
  stroke: var(--msi-v10-icon-hover-color, #4F46E5) !important;
}

/* Classes de taille */
.msi-v10-size-16 svg.msi-v10-icon { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; }
.msi-v10-size-20 svg.msi-v10-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; }
.msi-v10-size-24 svg.msi-v10-icon { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; }
.msi-v10-size-28 svg.msi-v10-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important; }
.msi-v10-size-32 svg.msi-v10-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; }
.msi-v10-size-40 svg.msi-v10-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
.msi-v10-size-48 svg.msi-v10-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; }
.msi-v10-size-56 svg.msi-v10-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }
.msi-v10-size-64 svg.msi-v10-icon { width: 64px !important; height: 64px !important; min-width: 64px !important; min-height: 64px !important; }

/* Responsive */
@media (max-width: 768px) {
  /* V17: Gap géré par le style inline, pas d'écrasement */
  .msi-v10-size-56 svg.msi-v10-icon { width: 48px !important; height: 48px !important; }
  .msi-v10-size-64 svg.msi-v10-icon { width: 56px !important; height: 56px !important; }
}