diff --git a/projects/igniteui-angular/splitter/src/splitter/themes/_base.scss b/projects/igniteui-angular/splitter/src/splitter/themes/_base.scss
index fa900505662..e6bfbb04adc 100644
--- a/projects/igniteui-angular/splitter/src/splitter/themes/_base.scss
+++ b/projects/igniteui-angular/splitter/src/splitter/themes/_base.scss
@@ -13,13 +13,14 @@ $theme: $base;
 
 @include layer(base) {
     $splitter-color: var-get($theme, 'bar-color');
+    $splitter-size: var-get($theme, 'size');
     $hitbox-size: rem(4px);
     $debug-hitbox: false;
     $hitbox-debug-color: rgba(coral, 0.24);
 
     @include b(igx-splitter) {
-        //splitter-size + borders
-        --splitter-size: #{unitless(map.get($theme, 'size')) + 2};
+        //splitter-size (convert rem to px) + padding
+        --splitter-size: calc(#{unitless(map.get($theme, 'size'))} * (var(--ig-base-font-size, 16px) / 1px) + 2);
 
         &[aria-orientation='horizontal'] {
             [dir='rtl'] & {
@@ -29,9 +30,12 @@ $theme: $base;
     }
 
     @include b(igx-splitter-bar-host) {
-        &:focus {
-            outline: transparent solid rem(1px);
-            box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'focus-color');
+        transition: box-shadow 0.15s ease-in;
+
+        &:focus-visible {
+            outline: none;
+            box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-color');
+            z-index: 100;
         }
     }
 
@@ -42,7 +46,7 @@ $theme: $base;
         justify-content: center;
         align-items: center;
         background: $splitter-color;
-        border: rem(1px) solid $splitter-color;
+        padding-block: rem(1px);
         z-index: 99;
         opacity: 0.68;
         transition: opacity 0.15s $ease-out-quad !important;
@@ -69,6 +73,23 @@ $theme: $base;
             opacity: 1;
         }
 
+        &:active {
+            background: var-get($theme, 'bar-color-active');
+            opacity: 1;
+
+            @include e(handle) {
+                background: var-get($theme, 'handle-color-active');
+            }
+
+            @include e(expander, $m: 'start') {
+                border-block-end-color: var-get($theme, 'expander-color-active');
+            }
+
+            @include e(expander, $m: 'end') {
+                border-block-start-color: var-get($theme, 'expander-color-active');
+            }
+        }
+
         @include e(handle) {
             background: var-get($theme, 'handle-color');
             border-radius: var-get($theme, 'border-radius');
@@ -79,12 +100,12 @@ $theme: $base;
 
         @include e(handle, $m: horizontal) {
             width: 25%;
-            height: var-get($theme, 'size');
+            height: $splitter-size;
             margin: 0 rem(48px);
         }
 
         @include e(handle, $m: vertical) {
-            width: var-get($theme, 'size');
+            width: $splitter-size;
             height: 25%;
             margin: rem(48px) 0;
         }
@@ -93,8 +114,8 @@ $theme: $base;
             position: relative;
             width: 0;
             height: 0;
-            border-inline-end: var-get($theme, 'size') solid transparent;
-            border-inline-start: var-get($theme, 'size') solid transparent;
+            border-inline-end: $splitter-size solid transparent;
+            border-inline-start: $splitter-size solid transparent;
             cursor: pointer;
             opacity: 0;
             transition: opacity 0.25s 0.5s ease;
@@ -109,7 +130,7 @@ $theme: $base;
         }
 
         @include e(expander, $m: 'start') {
-            border-bottom: var-get($theme, 'size') solid
+            border-block-end: $splitter-size solid
                 var-get($theme, 'expander-color');
 
             &::before {
@@ -121,8 +142,7 @@ $theme: $base;
         }
 
         @include e(expander, $m: 'end') {
-            border-bottom: unset;
-            border-top: var-get($theme, 'size') solid
+            border-block-start: $splitter-size solid
                 var-get($theme, 'expander-color');
 
             &::before {
@@ -153,6 +173,7 @@ $theme: $base;
         @include m(vertical) {
             flex-direction: column;
             height: 100%;
+            padding: 0 rem(1px);
 
             &::before,
             &::after {
@@ -170,10 +191,10 @@ $theme: $base;
             }
 
             @include e(expander, $m: 'start') {
-                border-top: var-get($theme, 'size') solid transparent;
-                border-inline-end: var-get($theme, 'size') solid
+                border-block-start: $splitter-size solid transparent;
+                border-inline-end: $splitter-size solid
                     var-get($theme, 'expander-color');
-                border-bottom: var-get($theme, 'size') solid transparent;
+                border-block-end: $splitter-size solid transparent;
                 border-inline-start: unset;
 
                 &::before {
@@ -185,10 +206,10 @@ $theme: $base;
             }
 
             @include e(expander, $m: 'end') {
-                border-top: var-get($theme, 'size') solid transparent;
+                border-block-start: $splitter-size solid transparent;
                 border-inline-end: unset;
-                border-bottom: var-get($theme, 'size') solid transparent;
-                border-inline-start: var-get($theme, 'size') solid
+                border-block-end: $splitter-size solid transparent;
+                border-inline-start: $splitter-size solid
                     var-get($theme, 'expander-color');
 
                 &::before {
@@ -198,6 +219,18 @@ $theme: $base;
                     width: calc(#{map.get($theme, 'size')} * 3);
                 }
             }
+
+            &:active {
+                @include e(expander, $m: 'start') {
+                    border-block-end-color: transparent;
+                    border-inline-end-color: var-get($theme, 'expander-color-active');
+                }
+
+                @include e(expander, $m: 'end') {
+                    border-block-start-color: transparent;
+                    border-inline-start-color: var-get($theme, 'expander-color-active');
+                }
+            }
         }
     }
 }
diff --git a/projects/igniteui-angular/splitter/src/splitter/themes/shared/indigo.scss b/projects/igniteui-angular/splitter/src/splitter/themes/shared/indigo.scss
index 02b211283c7..6e6de0e3a78 100644
--- a/projects/igniteui-angular/splitter/src/splitter/themes/shared/indigo.scss
+++ b/projects/igniteui-angular/splitter/src/splitter/themes/shared/indigo.scss
@@ -9,16 +9,12 @@ $slim-splitter: calc(1 / var(--splitter-size));
 
 @include themed-block(igx-splitter, indigo) {
     @include b(igx-splitter-bar-host) {
-        &:focus {
-            box-shadow: none;
+        transition: box-shadow 0.25s 0.1s ease-in;
 
-            .igx-splitter-bar {
-                opacity: 1;
-                background: var-get($theme, 'focus-color');
-                border-color: var-get($theme, 'focus-color');
-            }
+        &:focus-visible {
+            transition-duration: 0.15s;
 
-            .igx-splitter-bar--collapsible {
+            .igx-splitter-bar {
                 [aria-orientation='horizontal'] & {
                     transform: scaleX(1);
                 }
@@ -27,16 +23,29 @@ $slim-splitter: calc(1 / var(--splitter-size));
                     transform: scaleY(1);
                 }
 
-                .igx-splitter-bar__handle,
-                .igx-splitter-bar__expander {
-                    opacity: 1;
-                    pointer-events: auto;
+                transition-delay: 0s !important;
+
+                &.igx-splitter-bar--collapsible {
+                    .igx-splitter-bar__handle,
+                    .igx-splitter-bar__expander {
+                        opacity: 0.68;
+                        pointer-events: auto;
+                    }
+
+                    &:hover {
+                        .igx-splitter-bar__handle,
+                        .igx-splitter-bar__expander {
+                            opacity: 1;
+                        }
+                    }
                 }
             }
         }
     }
 
     @include b(igx-splitter-bar) {
+        transition: all 0.25s 0.3s $ease-in-out-quad !important;
+
         [aria-orientation='horizontal'] & {
             transform: scaleX($slim-splitter);
         }
@@ -45,34 +54,42 @@ $slim-splitter: calc(1 / var(--splitter-size));
             transform: scaleY($slim-splitter);
         }
 
+        &:hover {
+            [aria-orientation='horizontal'] & {
+                transform: scaleX(1);
+            }
+
+            [aria-orientation='vertical'] & {
+                transform: scaleY(1);
+            }
+
+            transition-delay: 0s !important;
+        }
+
         @include m(collapsible) {
             @include e(handle) {
                 opacity: 0;
                 pointer-events: none;
+                transition-delay: 0.3s;
             }
 
             @include e(expander) {
                 opacity: 0;
                 pointer-events: none;
+                transition-delay: 0.3s;
             }
 
             &:hover {
-                [aria-orientation='horizontal'] & {
-                    transform: scaleX(1);
-                }
-
-                [aria-orientation='vertical'] & {
-                    transform: scaleY(1);
-                }
-
                 @include e(handle) {
                     opacity: 1;
                     pointer-events: auto;
+                    transition-delay: 0.1s;
                 }
 
                 @include e(expander) {
                     opacity: 1;
                     pointer-events: auto;
+                    transition-delay: 0.1s;
                 }
             }
         }