refactor(radio-group): styling improvements

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss

@@ -597,31 +597,33 @@
     }
 
     %radio-group-display {
-        display: block;
+        display: grid;
+        column-gap: $horizontal-group-margin;
+        align-items: start;
         width: max-content;
+    }
 
-        %radio-display:not(:last-of-type) {
-            margin-inline-end: $horizontal-group-margin;
-        }
-
+    %radio-group-display:not(%radio-group-display--vertical) {
         [igxLabel] {
-            display: block;
             margin-block-end: rem(16px);
         }
+
+        igx-radio {
+            grid-row: 2;
+        }
     }
 
     %radio-group-display--vertical {
-        display: flex;
-        flex-flow: column;
+        row-gap: $vertical-group-margin;
 
-        %radio-display:not(:last-of-type) {
-            margin-inline-end: 0;
-            margin-block-end: $vertical-group-margin;
+        [igxLabel] {
+            margin-block-end: if($variant == 'material', rem(16px), rem(8px));
         }
 
         &%radio-group-display--before {
+            igx-radio,
             [igxLabel] {
-                text-align: end;
+                justify-self: flex-end;
             }
         }
     }

src/app/input-controls/input-controls.sample.html

@@ -62,13 +62,13 @@ <h4 class="sample-title">Angular Inputs</h4>
                 [checked]="properties.checked"
                 [disabled]="properties.disabled"
                 [invalid]="properties.invalid"
-                >Radio Button 1</igx-radio>
+                >Radio Button</igx-radio>
 
                 <igx-radio
                 [disabled]="properties.disabled"
                 [invalid]="properties.invalid"
                 [labelPosition]="properties.labelPosition"
-                >Radio Button 2</igx-radio>
+                >Second Radio Button</igx-radio>
             </igx-radio-group>
         </article>
     </div>