refactor(select): use gray on icon when expanded and in item

Author: thetaPC

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

@@ -240,3 +240,19 @@
 :host(.label-floating.select-fill-outline) .select-outline-notch {
   border-top: none;
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+/**
+ * When the select is focused the icon should
+ * take on the highlight color.
+ * The icon should also take on the highlight
+ * color if there is a validation state.
+ */
+:host(.select-expanded) .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);
+}

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

@@ -86,17 +86,8 @@
   @include transform(rotate(180deg));
 }
 
-/**
- * When the select is focused the icon should
- * take on the highlight color.
- * The icon should also take on the highlight
- * color if there is a validation state.
- */
-:host(.select-expanded) .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,19 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+/**
+ * When the select is focused the icon should
+ * take on the highlight color.
+ * The icon should also take on the highlight
+ * color if there is a validation state.
+ */
+:host(.select-expanded) .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);
+}