refactor(select): use class and not

Author: thetaPC

core/src/components/select/select.md.outline.scss

@@ -240,3 +240,10 @@
 :host(.label-floating.select-fill-outline) .select-outline-notch {
   border-top: none;
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+:host(.in-item.select-expanded) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}

core/src/components/select/select.md.scss

@@ -92,17 +92,13 @@
  * The icon should also take on the highlight
  * color if there is a validation state.
  */
-:host(.select-expanded) .select-wrapper .select-icon,
+:host(.select-expanded:not(.in-item)) .select-wrapper .select-icon,
 :host(.ion-focused.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
 :host(.ion-focused) .select-wrapper .select-icon {
   color: var(--highlight-color);
 }
 
-:host(.in-item.select-expanded) .select-wrapper .select-icon {
-  color: #{$text-color-step-500};
-}
-
 // Select Shape Rounded
 // ----------------------------------------------------------------
 

core/src/components/select/select.md.solid.scss

@@ -79,3 +79,10 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+:host(.in-item.select-expanded) .select-wrapper .select-icon {
+  color: var(--highlight-color);
+}