/**
 * Icon Component Styles
 * @module atoms/icon
 *
 * Uses project design tokens. Single-dash naming for compatibility.
 */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Rounded", sans-serif;
  font-size: var(--icon-lg);
  font-variation-settings: 'FILL' var(--theme-icon-fill), 'GRAD' var(--theme-icon-grad);
  line-height: 1;
  color: currentColor;
}

/* Base rendering for all Material Symbols icons */
.material-symbols-rounded {
  font-variation-settings: 'FILL' var(--theme-icon-fill), 'GRAD' var(--theme-icon-grad);
  font-optical-sizing: auto;
}

/* ==========================================================================
   Sizes
   ========================================================================== */

.icon-xs {
  font-size: var(--icon-sm);
}

.icon-sm {
  font-size: var(--icon-md);
}

.icon-lg {
  font-size: var(--icon-2xl);
}

.icon-xl {
  font-size: var(--icon-3xl);
}

/* ==========================================================================
   Variants
   ========================================================================== */

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

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

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

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

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

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

/* ==========================================================================
   States
   ========================================================================== */

/* Spin animation */
.icon-spin {
  animation: spin 1s linear infinite;
}