refactor(input-group): read-only styles using new directive

Author: SisIvanova

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-component.scss

@@ -30,9 +30,5 @@
         @include m(dropdown) {
             @extend %date-picker--dropdown !optional;
         }
-
-        @include m(readonly) {
-            @extend %date-picker--readonly !optional;
-        }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss

@@ -91,95 +91,4 @@
             --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
         }
     }
-
-    %date-picker--readonly igx-input-group {
-        igx-prefix,
-        [igxPrefix],
-        igx-suffix,
-        [igxSuffix] {
-            color: var(--disabled-text-color);
-
-            @if $variant == 'fluent' {
-                background: transparent;
-            }
-
-            @if $variant == 'bootstrap' {
-                background: var(--border-disabled-background);
-            }
-        }
-
-        @if $variant == 'bootstrap' {
-            %form-group-input {
-                background: var(--border-disabled-background);
-            }
-        }
-
-        &%form-group-display--box:not(%form-group-display--disabled) {
-            %form-group-bundle {
-                background: var(--box-background-focus);
-
-                &:hover {
-                    &:has(input[readonly][role="combobox"])::after {
-                        border-block-end-color: var(--idle-bottom-line-color);
-                    }
-                }
-            }
-        }
-
-        &%form-group-display--border:not(%form-group-display--disabled) {
-            %form-group-bundle:hover {
-                %form-group-bundle-start,
-                %igx-input-group__filler,
-                %form-group-bundle-end {
-                    border-color: var(--border-color);
-                }
-
-                %igx-input-group__notch {
-                    border-block-start-color: var(--border-color);
-                    border-block-end-color: var(--border-color);
-                }
-            }
-        }
-        
-        &:not(%form-group-display--disabled) {
-            %form-group-bundle:not(:focus-within) {
-                @if $variant == 'indigo' {
-                    &::after {
-                        border-block-end-color: var(--disabled-text-color);
-                    }
-
-                    &:hover {
-                        background: unset;
-                    }
-                }
-
-                &:hover:has(input[readonly][role="combobox"]) {
-                    &::before {
-                        @if $variant == 'fluent' {
-                            box-shadow: inset 0 0 0 rem(1px) var(--border-color);
-                        }
-                    }
-
-                    &::after {
-                        @if $variant == 'material' {
-                            border-block-end-color: var(--border-color);
-                        } @else if $variant == 'indigo' {
-                            border-block-end-color: var(--disabled-text-color);
-                        } 
-                    }
-                }
-            }
-        }
-
-        &:hover {
-            %form-group-input--hover {
-                cursor: default;
-                color: va(--filled-text-color);
-
-                &::placeholder {
-                    color: var(--placeholder-color);
-                }
-            }
-        }
-    }
 }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -42,11 +42,11 @@
         }
 
         @include e(notch) {
-            @extend  %igx-input-group__notch !optional;
+            @extend %igx-input-group__notch !optional;
         }
 
         @include e(filler) {
-            @extend  %igx-input-group__filler !optional;
+            @extend %igx-input-group__filler !optional;
         }
 
         @include e(input) {
@@ -111,20 +111,24 @@
             @extend %suffixed !optional;
         }
 
+        @include m(readonly) {
+            @extend %form-group-display--readonly !optional;
+        }
+
         // Textarea modifier
         @include m(textarea-group) {
             @extend %textarea-group !optional;
 
             @include e(bundle-main) {
-                @extend  %form-group-textarea-group-bundle-main !optional;
+                @extend %form-group-textarea-group-bundle-main !optional;
             }
 
             @include e(bundle) {
-                @extend  %form-group-textarea-group-bundle !optional;
+                @extend %form-group-textarea-group-bundle !optional;
             }
 
             @include e(label) {
-                @extend  %form-group-textarea-label !optional;
+                @extend %form-group-textarea-label !optional;
             }
         }
 
@@ -282,6 +286,8 @@
         }
 
         @include m(invalid) {
+            @extend %form-group-display--invalid !optional;
+
             @include e(label) {
                 @extend %form-group-label--error !optional;
             }