@telekom/scale-components/dist/collection/components/helper-text/helper-text.css

Scale is the digital design system for Telekom products and experiences.

:host {
  --color-informational: var(
    --telekom-color-text-and-icon-functional-informational
  );
  --color-warning: var(--telekom-color-text-and-icon-functional-warning);
  --color-danger: var(--telekom-color-text-and-icon-functional-danger);
  --color-success: var(--telekom-color-text-and-icon-functional-success);
  --color-neutral: var(--telekom-color-text-and-icon-additional);
  --font-size: 0.75rem;
  --font-weight: 700;
  --line-height: 1.35;
  --icon-size-helper-text: 11px;
}

.helper-text {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  justify-content: flex-end;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

[part='text'] {
  text-align: left;
}

scale-icon-alert-information,
scale-icon-alert-error,
scale-icon-alert-success {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--telekom-spacing-composition-space-03);
  margin-top: 0.1666em; /* magic */
}

.scale-icon {
  height: var(--icon-size-helper-text);
  width: var(--icon-size-helper-text);
}

.helper-text--informational {
  color: var(--color-informational);
}

.helper-text--warning {
  color: var(--color-warning);
}

.helper-text--danger {
  color: var(--color-danger);
}

.helper-text--success {
  color: var(--color-success);
}

.helper-text--neutral {
  color: var(--color-neutral);
}