/**
 * Icon Styles - DS-03/DS-04
 * Tokenized icon system for consistent SVG iconography
 * Replaces all emojis throughout the app
 */

.bb-icon {
  width: var(--icon-size-md, 20px);
  height: var(--icon-size-md, 20px);
  color: var(--color-icon-default, currentColor);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
}

.bb-icon--fill {
  fill: currentColor;
  stroke: none;
}

.bb-icon--xs {
  width: var(--icon-size-xs, 14px);
  height: var(--icon-size-xs, 14px);
}

.bb-icon--sm {
  width: var(--icon-size-sm, 18px);
  height: var(--icon-size-sm, 18px);
}

.bb-icon--lg {
  width: var(--icon-size-lg, 24px);
  height: var(--icon-size-lg, 24px);
}

.bb-icon--xl {
  width: var(--icon-size-xl, 32px);
  height: var(--icon-size-xl, 32px);
}

/* Icon color variants */
.bb-icon--accent {
  color: var(--color-icon-accent, var(--accent));
}

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

/* Icon container for flex layouts */
.bb-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon with text spacing */
.bb-icon + span,
span + .bb-icon {
  margin-left: var(--space-xs, 8px);
}

.bb-icon-container + span,
span + .bb-icon-container {
  margin-left: var(--space-xs, 8px);
}

/* Icon in dropdown items */
.bb-identity-dropdown__icon svg,
.bb-identity-dropdown__icon .bb-icon {
  width: var(--icon-size-sm, 18px);
  height: var(--icon-size-sm, 18px);
  color: currentColor;
}

/* Ensure icons inherit text color */
.bb-icon svg {
  width: 100%;
  height: 100%;
  color: inherit;
  fill: inherit;
  stroke: inherit;
}

/* Icon in buttons */
button .bb-icon,
.btn .bb-icon {
  vertical-align: middle;
}

/* Icon in empty states */
.empty-state__icon .bb-icon,
.empty-state-icon .bb-icon {
  width: var(--icon-size-xl, 32px);
  height: var(--icon-size-xl, 32px);
  color: var(--color-icon-muted, var(--text-muted));
  opacity: 0.6;
  margin-bottom: var(--space-md, 16px);
}