fix(date-picker): disabled state styles (#1834)

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

Author: SisIvanova

src/components/date-picker/themes/shared/date-picker.common.scss

@@ -66,7 +66,7 @@ $input-theme: input-theme.$material;
     }
 }
 
-:host(:not([readonly])) {
+:host(:not([disabled],[readonly])) {
     --affix-color: #{var-get($theme, 'input-prefix-color')};
 
     igc-date-time-input[readonly] {

src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss

@@ -37,7 +37,7 @@ $theme: $indigo;
     }
 }
 
-:host(:not([readonly]):hover) {
+:host(:not([readonly],[disabled]):hover) {
     igc-input[readonly]::part(container),
     igc-date-time-input:hover::part(container) {
         background: var-get($theme, 'box-background-hover');

src/components/input/themes/shared/input.common.scss

@@ -30,7 +30,7 @@ $theme: $base;
 }
 
 :host(:focus-within),
-:host(:not([readonly]):hover) {
+:host(:not([readonly],[disabled]):hover) {
     [part~='input']::placeholder {
         color: var-get($theme, 'hover-placeholder-color');
     }

src/components/input/themes/shared/input.fluent.scss

@@ -95,7 +95,7 @@ $theme: $fluent;
     }
 }
 
-:host(:not([readonly], :focus-within):hover) {
+:host(:not([readonly], [disabled], :focus-within):hover) {
     [part^='container'] {
         &::before {
             // The color: here is the actual box-shadow color. If we don't provide color-value to the shadow it
@@ -121,7 +121,7 @@ $theme: $fluent;
     }
 }
 
-:host([aria-haspopup]:not([readonly], :focus-within):hover) {
+:host([aria-haspopup]:not([readonly], [disabled], :focus-within):hover) {
     [part^='container'] {
         &::before {
             color: var-get($theme, 'hover-border-color');

src/components/input/themes/shared/input.indigo.scss

@@ -125,8 +125,8 @@ $transition-duration: .25s;
     }
 }
 
-:host(:not([readonly]):hover),
-:host([readonly][role='combobox']:hover) {
+:host(:not([disabled],[readonly]):hover),
+:host(:not([disabled])[readonly][role='combobox']:hover) {
     [part~='filled'] {
         [part~='input'] {
             color: var-get($theme, 'filled-text-hover-color');