.amplify-text {
  display: block;
  color: var(--amplify-components-text-color);

  @at-root b#{&},
    em#{&},
    i#{&},
    span#{&},
    strong#{&} {
    display: inline;
  }

  &--truncated {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &--primary {
    color: var(--amplify-components-text-primary-color);
  }

  &--secondary {
    color: var(--amplify-components-text-secondary-color);
  }

  &--tertiary {
    color: var(--amplify-components-text-tertiary-color);
  }

  &--error {
    color: var(--amplify-components-text-error-color);
  }

  &--info {
    color: var(--amplify-components-text-info-color);
  }

  &--success {
    color: var(--amplify-components-text-success-color);
  }

  &--warning {
    color: var(--amplify-components-text-warning-color);
  }
}