Use nested selectors in core/modules/field_ui/css/field_ui_add_field.module.pcss.css

core/modules/field_ui/css/field_ui_add_field.module.pcss.css

@@ -91,39 +91,27 @@
 .field-option,
 .subfield-option {
   cursor: pointer;
-}
-
-.field-option.focus,
-.subfield-option.focus{
-  outline: 3px solid var(--color-focus);
-  outline-offset: 2px;
-}
-
-.field-option.hover,
-.subfield-option.hover {
-  border-color: var(--color-gray);
-  box-shadow: inset 0 0 0 1px var(--color-gray), var(--details-box-shadow);
-}
-
-.field-option:not(.selected, .error):hover .form-boolean,
-.subfield-option:not(.selected, .error):hover .form-boolean {
-  border-color: var(--input-fg-color);
-  box-shadow: inset 0 0 0 1px var(--input-fg-color);
-}
-
-.field-option.selected,
-.subfield-option.selected {
-  border-color: var(--color-blue);
-  box-shadow: inset 0 0 0 2px var(--color-blue-600), var(--details-box-shadow);
-}
-
-.field-option.error,
-.subfield-option.error {
-  border-color: var(--color-red-500);
-  box-shadow: inset 0 0 0 1px var(--color-red-500), var(--details-box-shadow);
-}
-
-.field-option .form-item__label.has-error,
-.subfield-option .form-item__label.has-error {
-  color: currentColor;
+  &.focus {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+  &.hover {
+    border-color: var(--color-gray);
+    box-shadow: inset 0 0 0 1px var(--color-gray), var(--details-box-shadow);
+  }
+  &:not(.selected, .error):hover .form-boolean {
+    border-color: var(--input-fg-color);
+    box-shadow: inset 0 0 0 1px var(--input-fg-color);
+  }
+  &.selected {
+    border-color: var(--color-blue);
+    box-shadow: inset 0 0 0 2px var(--color-blue-600), var(--details-box-shadow);
+  }
+  &.error {
+    border-color: var(--color-red-500);
+    box-shadow: inset 0 0 0 1px var(--color-red-500), var(--details-box-shadow);
+  }
+  & .form-item__label.has-error {
+    color: currentColor;
+  }
 }