make phone input look better with animated and outlined styles

Author: CGastrell

projects/packages/forms/src/blocks/contact-form/editor.scss

@@ -955,7 +955,7 @@
 			.jetpack-field__input,
 			.jetpack-field__textarea,
 			.jetpack-field-dropdown__toggle {
-				padding-top: 1.4em;
+				padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
 				padding-left: var(--jetpack--contact-form--animated-left-offset);
 			}
 

projects/packages/forms/src/blocks/input-phone/editor.scss

@@ -100,6 +100,10 @@
 .is-style-animated .jetpack-contact-form .jetpack-field.jetpack-field-phone,
 .is-style-animated .jetpack-contact-form .jetpack-field.jetpack-field-telephone {
 
+	.jetpack-field__input {
+		padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
+	}
+
 	&:not(.has-placeholder):not(.is-selected),
 	&:not(.has-placeholder):not(.has-child-selected) {
 
@@ -120,6 +124,13 @@
 .is-style-outlined .jetpack-contact-form .jetpack-field.jetpack-field-phone,
 .is-style-outlined .jetpack-contact-form .jetpack-field.jetpack-field-telephone {
 
+	.jetpack-field__input {
+
+		&.is-selected {
+			box-shadow: unset;
+		}
+	}
+
 	&:not(.has-placeholder):not(.is-selected),
 	&:not(.has-placeholder):not(.has-child-selected) {
 

projects/packages/forms/src/contact-form/css/phone-field.scss

@@ -74,10 +74,14 @@
 	.is-style-animated & {
 
 		.jetpack-field__input-phone-wrapper {
-			padding-top: 1.4em;
+			padding-top: max(var(--jetpack--contact-form--input-padding-top, 0), 1.4em);
 			padding-left: var(--jetpack--contact-form--animated-left-offset);
 			padding-right: var(--jetpack--contact-form--animated-right-offset);
 
+			&:has(.jetpack-field__input-element:focus) {
+				outline: unset;
+			}
+
 			&:not(:has(*:focus, *:active)) {
 
 				.jetpack-field__input-prefix:not(:has(~ .has-placeholder),:has(~ .has-value)) {
@@ -103,6 +107,10 @@
 
 		.jetpack-field__input-phone-wrapper {
 
+			&:has(.jetpack-field__input-element:focus) {
+				outline: unset;
+			}
+
 			&:not(:has(*:focus, *:active)) {
 
 				// notched label is game of superpositions with z-index,