/* ===================================
   ICON ATOM - Atomic Design Foundation
   ===================================

   Centralized icon system for consistent iconography.
   Uses design tokens from design-tokens.css
*/

/* Base icon styles */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: var(--text-muted);
}

/* Icons inside buttons inherit the button's text color */
.btn .icon {
  color: inherit;
}

/* Icon sizes */
.icon-xs {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.icon-sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.icon-md {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.icon-lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.icon-xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

/* SVG rendering -- Bootstrap Icons are fill-based (no stroke) */
.icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: inline;
  max-width: none;
  transition: fill var(--duration-200) var(--easing-out);
}

/* Clickable icons - color change on hover, no background */
.icon-clickable {
  cursor: pointer;
  border-radius: var(--border-radius-sm);
  padding: var(--space-0_5);
  color: var(--text-muted);
  transition: color var(--duration-200) var(--easing-out);
}

.icon-clickable:hover {
  color: var(--text-primary);
}

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

.icon-clickable--danger:hover {
  color: var(--color-error);
}

.icon-clickable--danger:active {
  color: var(--color-error);
}

.icon-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

/* Icon in buttons */
.btn .icon {
  margin: 0;
}

.btn .icon svg {
  transition: none;
}

.btn-icon .icon {
  margin: 0;
}

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

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

/* Icon colors (semantic) */
.icon-success {
  color: var(--color-success);
}

.icon-warning {
  color: var(--color-warning);
}

.icon-error {
  color: var(--color-error);
}

.icon-info {
  color: var(--color-info);
}

.icon-muted {
  color: var(--text-muted);
}

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

/* Icon alignment helpers */
.icon-align-text {
  vertical-align: text-bottom;
  margin-bottom: 0.125em;
}

.icon-align-middle {
  vertical-align: middle;
}

/* Icon groups */
.icon-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .icon-xs {
    width: calc(var(--icon-size-xs) * 0.875);
    height: calc(var(--icon-size-xs) * 0.875);
  }

  .icon-sm {
    width: calc(var(--icon-size-sm) * 0.875);
    height: calc(var(--icon-size-sm) * 0.875);
  }

  .icon-md {
    width: calc(var(--icon-size-md) * 0.875);
    height: calc(var(--icon-size-md) * 0.875);
  }

  .icon-lg {
    width: calc(var(--icon-size-lg) * 0.875);
    height: calc(var(--icon-size-lg) * 0.875);
  }

  .icon-xl {
    width: calc(var(--icon-size-xl) * 0.875);
    height: calc(var(--icon-size-xl) * 0.875);
  }
}