fix(input): correctly apply placeholder styles (#11107)

**Related Issue:** #8967 

## Summary

Breaks the placeholder styles into separate lines to avoid a browser
specific selector erroring out the whole line.

<img width="1436" alt="Screenshot 2024-12-18 at 3 21 01 PM"
src="https://github.com/user-attachments/assets/721214f6-48a4-486d-b98e-e8d30e8b6099"
/>


BEGIN_COMMIT_OVERRIDE
END_COMMIT_OVERRIDE

packages/calcite-components/src/components/input/input.scss

@@ -33,6 +33,11 @@
  *
  */
 
+@mixin input-placeholder-styles {
+  @apply font-normal;
+  color: var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3));
+}
+
 :host {
   @apply block;
 }
@@ -155,17 +160,27 @@ input {
     block-size 0,
     outline-offset 0s;
   -webkit-appearance: none;
-  &::placeholder,
-  &:-ms-input-placeholder,
-  &::-ms-input-placeholder {
-    @apply font-normal;
-    color: var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3));
-  }
+
   &:placeholder-shown {
     @apply text-ellipsis;
   }
 }
 
+// Placeholder styles
+// Do not combine these style rules. The browser interprets the rule as one. When combined, properties like -ms can not be found in non-Microsoft browsers and thus the whole selector is invalidated and is ignored.
+:-ms-input-placeholder {
+  @include input-placeholder-styles;
+}
+
+::-ms-input-placeholder {
+  @include input-placeholder-styles;
+}
+
+::placeholder {
+  @include input-placeholder-styles;
+}
+// End Placeholder styles
+
 textarea {
   border-radius: var(--calcite-input-corner-radius, var(--calcite-corner-radius-sharp));
 }