fix(time-picker): remove duplicate box-shadow and stray background

Author: simeonoff

projects/igniteui-angular/time-picker/src/time-picker/themes/_base.scss

@@ -8,17 +8,15 @@
 $theme: digest-schema($material-time-picker);
 
 @include layer(base) {
+    $border-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
+
     @include b(igx-time-picker) {
         @include sizable();
 
         --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 
         display: flex;
         flex-flow: column nowrap;
-        border-radius: var-get($theme, 'border-radius');
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
-        background: var-get($theme, 'background-color');
-        overflow: hidden;
         min-width: fit-content;
 
         igx-divider {
@@ -161,12 +159,22 @@ $theme: digest-schema($material-time-picker);
             min-width: sizable(rem(290px), rem(314px), rem(360px));
             box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'),
                 var-get($theme, 'dropdown-elevation');
+            background: var-get($theme, 'background-color');
+            border-radius: var-get($theme, 'border-radius');
+            overflow: hidden;
 
             @include e(body) {
                 min-width: auto;
             }
         }
 
+        @include m(dialog) {
+            box-shadow: $border-shadow, var-get($theme, 'modal-elevation');
+            background: var-get($theme, 'background-color');
+            border-radius: var-get($theme, 'border-radius');
+            overflow: hidden;
+        }
+
         @include m(vertical) {
             @include e(main) {
                 display: flex;

projects/igniteui-angular/time-picker/src/time-picker/time-picker.component.html

@@ -60,7 +60,11 @@
 </ng-template>
 
 <div #toggleDirective="toggle" igxToggle role="dialog" class="igx-time-picker"
-    [ngClass]="{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}">
+    [ngClass]="{
+        'igx-time-picker--dropdown': isDropdown,
+        'igx-time-picker--dialog': !isDropdown,
+        'igx-time-picker--vertical': isVertical && !isDropdown
+    }">
     <div class="igx-time-picker__main">
         @if (!this.isDropdown && !this.hideHeader) {
             <div class="igx-time-picker__header">