Add specificity to EuiComboBox focus ring hack (#49981)

src/legacy/ui/public/styles/_legacy/_base.scss

@@ -4,13 +4,14 @@
 input.ng-invalid,
 textarea.ng-invalid,
 select.ng-invalid {
-  &.ng-dirty, &.ng-touched {
+  &.ng-dirty,
+  &.ng-touched {
     border-color: $euiColorDanger !important;
   }
 }
 
-input[type="radio"],
-input[type="checkbox"],
+input[type='radio'],
+input[type='checkbox'],
 .radio,
 .radio-inline,
 .checkbox,
@@ -18,7 +19,7 @@ input[type="checkbox"],
   &[disabled],
   fieldset[disabled] & {
     cursor: default;
-    opacity: .8;
+    opacity: 0.8;
   }
 }
 
@@ -27,7 +28,7 @@ input[type="checkbox"],
   align-items: center;
   padding-left: 0 !important;
 
-  input[type="checkbox"] {
+  input[type='checkbox'] {
     float: none;
     margin: 0 $euiSizeXS;
     position: static;
@@ -95,7 +96,6 @@ input[type="checkbox"],
   }
 }
 
-
 // Too overused in many places to be moved elsewhere
 
 .page-row {
@@ -114,7 +114,7 @@ input[type="checkbox"],
 // state. This is useful when you've already hand crafted your own
 // focus states in Kibana.
 :focus {
-  &:not([class^="eui"]):not(.kbn-resetFocusState) {
+  &:not([class^='eui']):not(.kbn-resetFocusState) {
     @include euiFocusRing;
   }
 }
@@ -122,7 +122,8 @@ input[type="checkbox"],
 // A neccessary hack so that the above focus policy doesn't polute some EUI
 // entrenched inputs.
 .euiComboBox {
-  input:focus {
+  // :not() specificity needed to override the above
+  input:not([class^='eui']):focus {
     animation: none !important;
   }
 }