fix(dropdown-item): avoid hover/active styling when disabled (#8398)

**Related Issue:** #6667

## Summary

This addresses pseudo-element selectors kicking in due to the `disabled`
component style mixin not affecting `pointer-events` on the host (by
design).

### Notes

* Screenshot tests were not updated as our current setup does not allow
us to test for pseudo-elements. Something like
https://storybook.js.org/addons/storybook-addon-pseudo-states or
https://www.chromatic.com/docs/interactions/ might help with this in the
future.
* Related styles using `:before` were removed as they do not appear to
be in use (will submit a follow-up clean up PR afterwards).

packages/calcite-components/src/components/dropdown-item/dropdown-item.scss

@@ -103,28 +103,23 @@
   padding-inline-start: theme("padding.10");
 }
 
-:host(:hover) .container,
-:host(:active) .container {
-  @apply bg-foreground-2 text-color-1 no-underline;
-}
-
-:host(:hover) .container--link .dropdown-link,
-:host(:active) .container--link .dropdown-link {
-  @apply text-color-1;
-}
+:host(:hover:not([disabled])),
+:host(:active:not([disabled])) {
+  .container {
+    @apply bg-foreground-2 text-color-1 no-underline;
+  }
 
-:host(:focus) .container {
-  @apply text-color-1 no-underline;
+  .container--link .dropdown-link {
+    @apply text-color-1;
+  }
 }
 
-:host(:active) .container {
+:host(:active:not([disabled])) .container {
   @apply bg-foreground-3;
 }
 
-:host(:hover) .container:before,
-:host(:active) .container:before,
-:host(:focus) .container:before {
-  @apply opacity-100;
+:host(:focus) .container {
+  @apply text-color-1 no-underline;
 }
 
 :host([selected]) .container:not(.container--none-selection),
@@ -177,7 +172,7 @@
   inset-inline-start: theme("spacing.3");
 }
 
-:host(:hover) .dropdown-item-icon {
+:host(:hover:not([disabled])) .dropdown-item-icon {
   color: theme("borderColor.color.1");
   @apply opacity-100;
 }