feat(radio): implement invalid state (#12597)

* feat(radio): implement invalid state

---------

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: SisIvanova

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

@@ -20,7 +20,6 @@
 
             @include e(ripple) {
                 @extend %radio-ripple--hover !optional;
-                @extend %radio-ripple--hover-unchecked !optional;
             }
         }
 
@@ -31,7 +30,6 @@
 
             @include e(ripple) {
                 @extend %radio-ripple--hover !optional;
-                @extend %radio-ripple--hover-unchecked !optional;
                 @extend %radio-ripple--pressed !optional;
             }
         }
@@ -64,10 +62,12 @@
             @include e(ripple) {
                 @extend %radio-ripple--focused !optional;
             }
-        }
 
-        @include mx(focused, checked) {
-            @extend  %igx-radio--focused-checked !optional;
+            &:hover {
+                @include e(ripple) {
+                    @extend %radio-ripple--focused !optional;
+                }
+            }
         }
 
         @include m(checked) {
@@ -105,9 +105,59 @@
             @include e(composite) {
                 @extend %radio-composite--disabled !optional;
             }
+
+            @include e(label) {
+                @extend %radio-label--disabled !optional;
+            }
+        }
+
+        @include m(invalid) {
+            @extend %radio-display--invalid !optional;
+
+            @include e(composite) {
+                @extend %radio-composite--invalid !optional;
+            }
+
+            @include e(label) {
+                @extend %radio-label--invalid !optional;
+            }
+
+            &:hover {
+                @include e(ripple) {
+                    @extend %radio-ripple--hover !optional;
+                    @extend %radio-ripple--hover-invalid !optional;
+                }
+
+                @include e(composite) {
+                    @extend %igx-radio-hover__composite--invalid !optional;
+                }
+            }
+
+            &:active {
+                @include e(composite) {
+                    @extend %igx-radio-hover__composite--invalid !optional;
+                }
+
+                @include e(ripple) {
+                    @extend %radio-ripple--hover !optional;
+                    @extend %radio-ripple--hover-invalid !optional;
+                    @extend %radio-ripple--pressed !optional;
+                }
+            }
+        }
+
+        @include mx(focused, invalid) {
+            @extend %igx-radio--focused--invalid !optional;
+
+            @include e(ripple) {
+                @extend %radio-ripple--focused !optional;
+                @extend %radio-ripple--focused-invalid !optional;
+            }
         }
 
         @include mx(focused, checked) {
+            @extend %igx-radio--focused-checked !optional;
+
             @include e(ripple) {
                 @extend %radio-ripple--focused !optional;
                 @extend %radio-ripple--focused-checked !optional;
@@ -119,14 +169,35 @@
                 @extend %radio-composite--x--disabled !optional;
             }
         }
+
+        @include mx(checked, invalid) {
+            @include e(composite) {
+                @extend %radio-composite--x--invalid !optional;
+            }
+
+            &:hover {
+                @include e(composite) {
+                    @extend %radio-composite--x--invalid--hover !optional;
+                }
+            }
+
+            &:active {
+                @include e(composite) {
+                    @extend %radio-composite--x--invalid--hover !optional;
+                }
+            }
+        }
+
+        @include mx(checked, invalid, focused) {
+            @extend %igx-radio--focused--invalid--checked !optional;
+        }
     }
 
     @include b(igx-radio-group) {
-        display: block;
+        @extend %radio-group-display !optional;
 
         @include m(vertical) {
-            display: flex;
-            flex-flow: column;
+            @extend %radio-group-display--vertical !optional;
         }
     }
 }