fix(picker): alternative approach for disabled hover fix

An alernative way to fix the issues caused by the
postcss-hover-media-feature plugin moving hover styles below where they
should be. Moves disabled styles to the very bottom, so they come after
the hover media query added during the build.

Author: jawinn

components/picker/index.css

@@ -228,7 +228,7 @@ governing permissions and limitations under the License.
 		border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width)));
 	}
 
-	&:hover {
+	.spectrum-Picker:hover {
 		color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover)));
 		background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover)));
 		border-color: var(--highcontrast-picker-border-color-hover, var(--mod-picker-border-color-hover, var(--spectrum-picker-border-color-hover)));
@@ -343,25 +343,6 @@ governing permissions and limitations under the License.
 	}
 }
 
-/* Disabled state. */
-.spectrum-Picker.spectrum-Picker:disabled,
-.spectrum-Picker.spectrum-Picker.is-disabled {
-	cursor: default;
-	background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
-	border-color: var(--highcontrast-picker-border-color-disabled, transparent);
-	color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
-
-	.spectrum-Picker-icon,
-	.spectrum-Picker-menuIcon,
-	.spectrum-Picker-validationIcon {
-		color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
-	}
-
-	.spectrum-Picker-label.is-placeholder {
-		color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
-	}
-}
-
 .spectrum-Picker-label {
 	/* Be the biggest, but also shrink! */
 	flex: 1 1 auto;
@@ -488,3 +469,24 @@ governing permissions and limitations under the License.
 	display: inline-flex;
 	vertical-align: top;
 }
+
+/* Disabled state:
+   Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves
+   all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */
+.spectrum-Picker:disabled,
+.spectrum-Picker.is-disabled {
+	cursor: default;
+	background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled)));
+	border-color: var(--highcontrast-picker-border-color-disabled, transparent);
+	color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
+
+	.spectrum-Picker-icon,
+	.spectrum-Picker-menuIcon,
+	.spectrum-Picker-validationIcon {
+		color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled)));
+	}
+
+	.spectrum-Picker-label.is-placeholder {
+		color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled)));
+	}
+}