ic-input-validation {
  max-width: var(--input-width, 20rem);
  display: flex;
}

ic-input-validation.ic-input-validation-with-status {
  margin-top: var(--ic-space-xs);
}

ic-input-validation.ic-input-validation-full-width {
  width: 100%;
  max-width: none;
}

ic-input-validation span.status-icon {
  padding-right: var(--ic-space-xxs);
}

ic-input-validation span.status-icon > svg {
  height: 1.25rem;
  width: 1.25rem;
}

ic-input-validation span.icon-success > svg {
  fill: var(--ic-input-validation-success-icon-color);
}

ic-input-validation span.icon-error > svg {
  fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));
}

ic-input-validation span.icon-warning > svg {
  fill: var(--ic-input-validation-warning-icon-color);
}

ic-input-validation .statustext {
  flex-grow: 1;
  color: var(
    --ic-input-validation-status-text-color,
    var(--ic-color-text-primary)
  );

  --ic-typography-color: var(
    --ic-input-validation-status-text-color,
    var(--ic-color-text-primary)
  );
}

ic-input-validation .sr-only {
  position: absolute;
  left: -9999px;
}