Use background-image for native select caret (#594)

Author: lindsaym-fa

src/styles/native/select.css

@@ -73,19 +73,11 @@ select:focus,
 /* Replace native select caret */
 select {
   appearance: none;
-}
-label:has(select) {
-  position: relative;
-  --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
 
-  &::after {
-    content: '';
-    background-color: var(--wa-color-neutral-on-quiet);
-    mask: var(--icon-caret) 50% 50% no-repeat;
-    width: 1rem;
-    height: var(--wa-form-control-height);
-    position: absolute;
-    bottom: var(--wa-form-control-border-width);
-    right: var(--wa-space);
-  }
+  --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
+
+  background-image: var(--icon-caret), var(--icon-caret);
+  background-repeat: no-repeat;
+  background-position: center right var(--wa-space);
+  background-blend-mode: hue, difference;
 }