.root svg {
}

.xxs,
.xxs svg {
  height: 0.5rem;
  width: 0.5rem;
}

.xs,
.xs svg {
  height: var(--font-size-icon-xs);
  width: var(--font-size-icon-xs);
}

.sm,
.sm svg {
  height: var(--font-size-icon-sm);
  width: var(--font-size-icon-sm);
}
.md,
.md svg {
  height: var(--font-size-icon-md);
  width: var(--font-size-icon-md);
}
.lg,
.lg svg {
  height: var(--font-size-icon-lg);
  width: var(--font-size-icon-lg);
}
.xl,
.xl svg {
  height: var(--font-size-icon-xl);
  width: var(--font-size-icon-xl);
}

.colorTeal svg {
  color: $colors-teal-600;
  stroke: $colors-teal-600;
}

.colorTealLight svg {
  color: $colors-teal-200;
  stroke: $colors-teal-200;
}

.colorError svg {
  color: var(--palette-error-500);
  stroke: var(--palette-error-500);
}

.colorSuccess svg {
  color: var(--palette-success-500);
  stroke: var(--palette-success-500);
}

.colorStream svg {
  color: var(--palette-primary-500);
  stroke: var(--palette-primary-500);
}

.colorWhite svg {
  background: var(--palette-text-000);
  color: var(--palette-text-000);
  stroke: var(--palette-text-000);
}

.strokeWidthThin svg {
  stroke-width: 1;
}

.strokeWidthRegular svg {
  stroke-width: 2;
}

.strokeWidthSemiBold svg {
  stroke-width: 3;
}

.strokeWidthBold svg {
  stroke-width: 4;
}

.noFill svg {
  fill: none;
}

.filled svg {
  fill: currentColor;
}

.tealFill svg {
  fill: $colors-teal-600;
}

.tealLightFill svg {
  fill: $colors-teal-200;
}
