Refactor #5071 - Improve the structure of some components to comply with standards

components/lib/radiobutton/style/RadioButtonStyle.js

@@ -1,26 +1,54 @@
 import BaseStyle from 'primevue/base/style';
 
+const css = `
+@layer primevue {
+    .p-radiobutton {
+        position: relative;
+        display: inline-flex;
+        user-select: none;
+        vertical-align: bottom;
+    }
+
+    .p-radiobutton-input {
+        cursor: pointer;
+    }
+
+    .p-radiobutton-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-radiobutton-icon {
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        transform: translateZ(0) scale(.1);
+        border-radius: 50%;
+        visibility: hidden;
+    }
+
+    .p-radiobutton.p-highlight .p-radiobutton-icon {
+        transform: translateZ(0) scale(1.0, 1.0);
+        visibility: visible;
+    }
+}
+`;
+
 const classes = {
     root: ({ instance, props }) => [
         'p-radiobutton p-component',
-        {
-            'p-radiobutton-checked': instance.checked,
-            'p-radiobutton-disabled': props.disabled,
-            'p-radiobutton-focused': instance.focused
-        }
-    ],
-    input: ({ instance, props }) => [
-        'p-radiobutton-box',
         {
             'p-highlight': instance.checked,
-            'p-disabled': props.disabled,
-            'p-focus': instance.focused
+            'p-disabled': props.disabled
         }
     ],
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
     icon: 'p-radiobutton-icon'
 };
 
 export default BaseStyle.extend({
     name: 'radiobutton',
+    css,
     classes
 });