popupMenu: Use selected pseudoclass instead of class

- drop :focus from menuitem drawing
- update menuitem drawing function to style :selected

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7637
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3314>

data/theme/gnome-shell-sass/_drawing.scss

@@ -376,11 +376,11 @@
   } @else {
     @include button(normal, $c:$bg);
   }
-  &:focus,
   &:hover {
     @include button(hover, $c:$bg);
   }
   &:active {@include button(active, $c:$bg);}
+  &:selected,
   &:checked {@include button(checked, $c:$bg);}
   &:insensitive {@include button(insensitive, $c:$bg);}
 }

js/ui/popupMenu.js

@@ -204,11 +204,11 @@ export const PopupBaseMenuItem = GObject.registerClass({
         if (activeChanged) {
             this._active = active;
             if (active) {
-                this.add_style_class_name('selected');
+                this.add_style_pseudo_class('selected');
                 if (this.can_focus)
                     this.grab_key_focus();
             } else {
-                this.remove_style_class_name('selected');
+                this.remove_style_pseudo_class('selected');
                 // Remove the CSS active state if the user press the button and
                 // while holding moves to another menu item, so we don't paint all items.
                 // The correct behaviour would be to set the new item with the CSS