@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

.a-form-alert {
  --form-alert-icon-color: var(--form-alert-icon-color-default);

  display: flex;
  gap: math.div(5px, $base-font-size-px) + rem;

  .cf-icon-svg {
    color: var(--form-alert-icon-color);
    flex: none;
    margin-top: math.div(1px, $base-font-size-px) + rem;
  }

  &__text {
    display: block;
  }

  &--success .cf-icon-svg {
    --form-alert-icon-color: var(--form-alert-icon-color-success);
  }

  &--warning .cf-icon-svg {
    --form-alert-icon-color: var(--form-alert-icon-color-warning);
  }

  &--error .cf-icon-svg {
    --form-alert-icon-color: var(--form-alert-icon-color-error);
  }
}