fix(calendar): add inactive range styles for material, indigo, and fluent themes

Author: desig9stein

src/components/calendar/themes/shared/fluent/days-view.fluent.scss

@@ -682,3 +682,17 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
         }
     }
 }
+
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
+    color: var-get($theme, 'date-selected-range-foreground');
+
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
+    }
+
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
+    }
+}

src/components/calendar/themes/shared/indigo/days-view.indigo.scss

@@ -670,3 +670,18 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         border-color: var-get($theme, 'date-selected-focus-border-color');
     }
 }
+
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
+    color: var-get($theme, 'date-selected-range-foreground');
+    border-color: transparent;
+
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
+    }
+
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
+    }
+}

src/components/calendar/themes/shared/material/days-view.material.scss

@@ -464,3 +464,17 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         border-color: var-get($theme, 'date-selected-focus-border-color');
     }
 }
+
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
+    color: var-get($theme, 'date-selected-range-foreground');
+
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
+    }
+
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
+    }
+}