/**
 * Icons Size Variations
 * Different sizes for icon components
 */

/* Small Icons */
.icon-small {
  font-size: 16px;
  min-width: 16px;
  height: 16px;
}

/* Medium Icons */
.icon-medium {
  font-size: 24px;
  min-width: 24px;
  height: 24px;
}

/* Large Icons */
.icon-large {
  font-size: 32px;
  min-width: 32px;
  height: 32px;
}

/* Extra Large Icons */
.icon-xlarge {
  font-size: 48px;
  min-width: 48px;
  height: 48px;
}

/* Icon Spacing */
.icon-with-text {
  margin-right: calc(var(--spacing-unit) * 0.5);
}

[dir="rtl"] .icon-with-text {
  margin-right: 0;
  margin-left: calc(var(--spacing-unit) * 0.5);
}