@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../../components/icon-sprite/icon-sprite.scss";

$ds-form-field__error-icon-size: 20px;

.ds-form-field__help-text {
  margin-top: ds-spacing($ds-s-050);
  margin-bottom: 0;
  color: $ds-color-text-primary-subtle;
  @include ds-typography($ds-typography-functional-body-sm);
}

.ds-form-field__error-message {
  display: none;
  color: $ds-color-text-primary;
}

.ds-form-field__error,
.invalid {
  .ds-form-field__error-message {
    display: flex;
    margin-top: ds-spacing($ds-s-050);
    .ds-icon {
      margin: ds-spacing(0 $ds-s-050 0 0, rem);
      height: ds-px-to-rem($ds-form-field__error-icon-size);
      width: ds-px-to-rem($ds-form-field__error-icon-size);
      line-height: 0;
      flex-shrink: 0;
      svg {
        fill: $ds-color-text-critical;
      }
    }
    span {
      @include ds-typography($ds-typography-functional-body-sm);
    }
  }

  .ds-form-field__help-text {
    display: none;
  }
}

.ds-force-px {
  &.ds-form-field__error,
  .invalid {
    .ds-form-field__error-message {
      .ds-icon {
        margin: ds-spacing(0 $ds-s-050 0 0);
        height: $ds-form-field__error-icon-size;
        width: $ds-form-field__error-icon-size;
      }
      span {
        @include ds-typography($ds-typography-functional-body-sm, true);
      }
    }
  }

  .ds-form-field__help-text {
    @include ds-typography($ds-typography-functional-body-sm, true);
  }
}