feat(carousel): update carousel theme to match webcomponents (#16284)

Co-authored-by: Silvia Ivanova <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 4 people

projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss

@@ -247,7 +247,6 @@
             background: var-get($theme, 'indicator-dot-color');
 
             @if $variant != 'indigo' {
-                @include animation('scale-out-center' .15s $ease-out-quad forwards);
                 inset: rem(1px);
             } @else {
                 width: rem(8px);
@@ -261,11 +260,11 @@
         &:hover {
             border-color: var-get($theme, 'indicator-active-border-color');
 
-            @if $variant == 'indigo' {
-                &::after {
-                    background: var-get($theme, 'indicator-hover-dot-color');
-                }
+            &::after {
+                background: var-get($theme, 'indicator-hover-dot-color');
+            }
 
+            @if $variant == 'indigo' {
                 &::before {
                     position: absolute;
                     content: '';
@@ -290,7 +289,7 @@
                 content: '';
                 width: inherit;
                 height: inherit;
-                border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
+                border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
                 inset-inline-start: 0;
                 top: 0;
                 border-radius: border-radius(50%);
@@ -304,12 +303,14 @@
             }
         }
 
-        @if $variant == 'indigo' {
-            &:hover {
-                &::after {
-                    background: var-get($theme, 'indicator-active-hover-dot-color');
-                }
+        &:hover {
+            border-color: var-get($theme, 'indicator-active-hover-dot-color');
 
+            &::after {
+                background: var-get($theme, 'indicator-active-hover-dot-color');
+            }
+
+            @if $variant == 'indigo' {
                 &::before {
                     border-color: var-get($theme, 'indicator-active-hover-dot-color');
                 }