/**
 * Icon Styles - DS-03
 * Tokenized icon system for consistent SVG iconography
 */

.bb-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: 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);
  height: var(--icon-size-xs);
}

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

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

/* 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);
}

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

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

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