fix(@clayui/css): Forms use fixed value for $input-height-inner, $input-height-inner-half, $input-height-inner-quarter to reduce Sass errors with CSS custom properties in $input-line-height and $input-padding-y

fix(@clayui/css): Custom Forms $custom-select-feedback-icon-size, $custom-file-height-inner don't use $input-height-inner-* variables and change to fixed values to reduce Sass errors when input variables contain css custom properties

The variables are deprecated any only used for Bootstrap 4's HTML 5 form validation components

fixes #4247

Author: pat270

packages/clay-css/src/scss/atlas/variables/_forms.scss

@@ -245,6 +245,10 @@ $form-control-label-size: map-deep-merge(
 	$form-control-label-size
 );
 
+// Form Control Tag Group
+
+$form-control-inset-margin-y: 0.3125rem !default;
+
 // Form Group
 
 $form-group-item-label-spacer: ($input-label-font-size * $line-height-base) +

packages/clay-css/src/scss/variables/_custom-forms.scss

@@ -339,8 +339,7 @@ $custom-select-feedback-icon-position: center right
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-select-feedback-icon-size: $input-height-inner-half
-	$input-height-inner-half !default;
+$custom-select-feedback-icon-size: 18px 18px !default;
 
 // Custom Select Lg
 
@@ -481,7 +480,7 @@ $custom-file-font-weight: $input-font-weight !default;
 
 /// @deprecated as of v3.x with no replacement
 
-$custom-file-height-inner: $input-height-inner !default;
+$custom-file-height-inner: 36px !default;
 
 /// @deprecated as of v3.x with no replacement
 

packages/clay-css/src/scss/variables/_forms.scss

@@ -51,30 +51,21 @@ $input-placeholder-disabled-color: null !default;
 
 $input-plaintext-color: $body-color !default;
 
-/// Deprecated
+/// @deprecated with no replacement
 
 $input-height-border: $input-border-top-width + $input-border-bottom-width !default;
 
-/// Deprecated
+/// @deprecated with no replacement
 
-$input-height-inner: add(
-	$input-line-height * 1em,
-	$input-padding-y * 2
-) !default;
+$input-height-inner: 36px !default;
 
-/// Deprecated
+/// @deprecated with no replacement
 
-$input-height-inner-half: add(
-	$input-line-height * 0.5em,
-	$input-padding-y
-) !default;
+$input-height-inner-half: 18px 18px !default;
 
-/// Deprecated
+/// @deprecated with no replacement
 
-$input-height-inner-quarter: add(
-	$input-line-height * 0.25em,
-	$input-padding-y / 2
-) !default;
+$input-height-inner-quarter: 9px !default;
 
 // Input Lg
 
@@ -207,12 +198,8 @@ $form-control-tag-group-padding-y: (
 			(map-get($form-control-label-size, margin-top))
 	) / 2 !default;
 
-$form-control-inset-min-height: $input-font-size * $input-line-height !default;
-$form-control-inset-margin-y: (
-		$input-height - $input-border-bottom-width - $input-border-top-width -
-			($form-control-tag-group-padding-y * 2) -
-			$form-control-inset-min-height
-	) / 2 !default;
+$form-control-inset-min-height: 1.5rem !default;
+$form-control-inset-margin-y: 0.125rem !default;
 
 $form-control-inset: () !default;
 $form-control-inset: map-deep-merge(