fix(switch): style component using sass theme (#16491)

* fix(switch): style component using sass theme

* fix(switch): indigo border-radius

* fix(switch): hover shadow

Author: SisIvanova

projects/igniteui-angular/src/lib/switch/themes/_base.scss

@@ -84,7 +84,7 @@ $_theme: $material;
             }
 
             @include e(thumb) {
-                background: var-get($_theme, 'border-hover-color');
+                background: var-get($_theme, 'thumb-off-hover-color');
             }
 
             @include e(label) {

projects/igniteui-angular/src/lib/switch/themes/shared/bootstrap.scss

@@ -49,6 +49,12 @@ $_theme: $bootstrap;
         @include e(thumb) {
             background: var-get($_theme, 'thumb-on-color');
         }
+
+        &:hover {
+            @include e(composite) {
+                border-color: var-get($_theme, 'border-on-hover-color');
+            }
+        }
     }
 
     @include mx(disabled, checked) {

projects/igniteui-angular/src/lib/switch/themes/shared/indigo.scss

@@ -26,7 +26,6 @@ $_theme: $indigo;
 
     @include m(focused) {
         @include e(composite) {
-            border-radius: var-get($_theme, 'border-radius-thumb');
             box-shadow: 0 0 0 rem(3px) var-get($_theme, 'focus-outline-color');
         }
     }

projects/igniteui-angular/src/lib/switch/themes/shared/material.scss

@@ -12,7 +12,7 @@ $_theme: $material;
     --switch-height: #{rem(14px)};
     --switch-thumb-size: #{rem(20px)};
     --switch-on-offset: #{rem(1px)};
-    --switch-off-offset: 0;
+    --switch-off-offset: #{rem(-1px)};
     --label-margin: #{rem(12px)};
 
     @include e(label) {
@@ -21,22 +21,15 @@ $_theme: $material;
         }
     }
 
-    @include e(composite) {
-        border-width: 0;
-    }
-
     @include e(ripple) {
         display: block;
     }
 
     @include e(thumb) {
         box-shadow: var-get($_theme, 'resting-elevation');
-    }
 
-    &:hover {
-        @include e(thumb) {
-            background: var-get($_theme, 'thumb-off-color');
-            box-shadow: var-get($_theme, 'resting-elevation');
+        &:hover {
+            box-shadow: var-get($_theme, 'hover-elevation');
         }
     }