fix(date-picker): fix hover/focus issues in the date-picker theme

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -382,6 +382,16 @@
         justify-content: space-between;
         margin: $cal-row-margin;
         padding: $cal-row-padding;
+
+        %cal-value {
+            &:first-of-type {
+                padding-left: em(8px);
+            }
+
+            &:last-of-type {
+                padding-right: em(8px);
+            }
+        }
     }
 
     %cal-row-display--wrap {

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

@@ -10,6 +10,8 @@
 /// @requires igx-elevation
 /// @requires rem
 @mixin igx-date-picker($theme) {
+    $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'));
+
     %date-picker {
         min-width: 200px;
         max-width: 340px;
@@ -87,15 +89,21 @@
 
         %cal-value--selected {
             color: --var($theme, 'date-selected-text-color');
-            background: --var($theme, 'date-selected-background') !important;
+            // background: --var($theme, 'date-selected-background') !important;
         }
 
         %cal-value--current {
             color: --var($theme, 'date-current-text-color');
         }
 
         %cal-value--hover {
-            background: --var($theme, 'date-hover-background');
+            %cal-value-content::after {
+                background: --var($theme, 'date-hover-background');
+            }
+
+            &%cal-value--selected %cal-value-content::after {
+                background: rgba($selected-hover-color, .18);
+            }
         }
     }