fix(material/select): ensure arrow is centered on all densities

On lower densities some form field appearances hide the label which caused the arrow to be misaligned. These changes switch the arrow to absolute position which should be more robust.

Fixes #26757.

Author: crisbeto

src/material/select/select.scss

@@ -22,13 +22,21 @@ $scale: 0.75 !default;
   display: inline-block;
   width: 100%;
   outline: none;
+
+  // Outside a form field we want `relative` to contain any absolute child elements.
+  position: relative;
+
+  // Inside a form field we want `static` so that absolute child
+  // elements can be positioned relative to the form field.
+  .mat-mdc-form-field & {
+    position: static;
+  }
 }
 
 .mat-mdc-select-trigger {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
-  position: relative;
   box-sizing: border-box;
   width: 100%;
 
@@ -39,10 +47,17 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-value {
+  $horizontal-padding: $mat-select-arrow-size * 2;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding-right: $horizontal-padding;
+
+  [dir='rtl'] & {
+    padding-left: $horizontal-padding;
+    padding-right: 0;
+  }
 }
 
 .mat-mdc-select-value-text {
@@ -52,18 +67,14 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-arrow-wrapper {
-  height: 24px;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-
-  // When used in a fill appearance with a label, form-field the arrow should be shifted up 8px.
-  .mat-form-field-appearance-fill & {
-    transform: translateY(-8px);
-  }
-
-  .mat-form-field-appearance-fill .mdc-text-field--no-label & {
-    transform: none;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+
+  [dir='rtl'] & {
+    right: auto;
+    left: 0;
   }
 }
 
@@ -73,11 +84,12 @@ $scale: 0.75 !default;
   position: relative;
 
   svg {
-    fill: currentColor;
+    // Needs to be absolute, because it's actually larger than the container.
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    fill: currentColor;
 
     @include cdk.high-contrast(active, off) {
       // On Chromium browsers the `currentColor` blends in with the