fix(material/form-field): inconsistent height for non-text inputs

Fixes that some non-text input variants were taller than the text ones.

Fixes #26915.

Author: crisbeto

src/material/form-field/_mdc-text-field-structure-overrides.scss

@@ -20,6 +20,36 @@
     border: none;
   }
 
+  .mat-mdc-form-field-input-control {
+    // Due to the native input masking these inputs can be slightly taller than
+    // the plain text inputs. We normalize it by resetting the line height.
+    &[type='date'],
+    &[type='datetime'],
+    &[type='datetime-local'],
+    &[type='month'],
+    &[type='week'],
+    &[type='time'] {
+      line-height: 1;
+    }
+
+    // Reduce the size of the native buttons in a date/time input,
+    // because they can increase the height of the input (see #13317).
+    &::-webkit-inner-spin-button,
+    &::-webkit-calendar-picker-indicator,
+    &::-webkit-clear-button {
+      font-size: 0.75em;
+    }
+
+    // Native datetime inputs have an element in the shadow DOM that makes them taller than
+    // other inputs. These changes reset the user agent styles to make them consistent.
+    // via https://8yd.no/article/date-input-height-in-safari
+    &::-webkit-datetime-edit {
+      line-height: 1;
+      padding: 0;
+      margin-bottom: -2px;
+    }
+  }
+
   .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
     // In order to ensure proper alignment of the floating label, we reset its line-height.
     // The line-height is not important as the element is absolutely positioned and only has one