From b5bcc6b1d1fdd452ed1b28f95b75a8f75a78e563 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Thu, 9 Apr 2026 08:30:17 +0300
Subject: [PATCH 1/4] feat(button-group): update button group styles and
 implement new properties

---
 .../button-group/_button-group-theme.scss     | 376 +++---------------
 1 file changed, 48 insertions(+), 328 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index 1cd13a4877e..8a5e4a56a75 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -13,8 +13,6 @@
     $outline-btn-indent: rem(2px);
 
     $variant: map.get($theme, '_meta', 'theme');
-    $bootstrap-theme: $variant == 'bootstrap';
-    $indigo-theme: $variant == 'indigo';
     $group-item-min-width: map.get((
         'material': rem(42px),
         'fluent': rem(42px),
@@ -22,18 +20,6 @@
         'indigo': rem(32px),
     ), $variant);
 
-    %item-overlay {
-        &::before {
-            content: '';
-            z-index: -1;
-            position: absolute;
-            pointer-events: none;
-            width: 100%;
-            height: 100%;
-            background: var-get($theme, 'item-focused-background');
-        }
-    }
-
     %igx-group-display {
         display: flex;
         box-shadow: var-get($theme, 'elevation');
@@ -72,7 +58,11 @@
         }
 
         &:not(:nth-child(1)) {
-            margin-inline-start: rem(-1px);
+            @if $variant != 'fluent' {
+                margin-inline-start: rem(-1px);
+            } @else {
+                border-inline-start: 0;
+            }
         }
 
         &:first-of-type {
@@ -105,36 +95,13 @@
             }
         }
 
-        @if $variant != 'fluent' {
-            &:active {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-        }
-
-        @if $variant == 'material' {
-            &:hover,
-            &:active {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-background');
-            }
-
-            &:hover {
-                &::before {
-                    background: var-get($theme, 'item-hover-background');
-                }
-            }
-        }
+        &:active {
+            color: var-get($theme, 'item-hover-text-color');
+            background: var-get($theme, 'item-active-background');
+            border-color: var-get($theme, 'item-hover-border-color');
 
-        @if $variant == 'bootstrap' {
-            &:active {
-                @extend %item-overlay;
+            igx-icon {
+                color: var-get($theme, 'item-hover-icon-color');
             }
         }
 
@@ -144,11 +111,6 @@
 
                 --ig-icon-size: #{$icon-size};
             }
-
-            &:active {
-                background: var-get($theme, 'item-focused-background');
-                color: var-get($theme, 'item-text-color');
-            }
         }
 
         @if $variant == 'indigo' {
@@ -161,91 +123,30 @@
             }
 
             &:hover {
-                border-color: var-get($theme, 'item-hover-border-color');
                 z-index: 1;
             }
 
             &:active {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
                 z-index: 2;
             }
         }
 
         &[igxButton].igx-button--focused {
-            &:hover {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-
-            @if $variant != 'fluent' {
-                color: var-get($theme, 'item-hover-text-color');
-                background: var-get($theme, 'item-hover-background');
-                border-color: var-get($theme, 'item-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-hover-icon-color');
-                }
-            }
-
-            @if $variant == 'material' {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-background');
-
-                &::before {
-                    background: var-get($theme, 'item-hover-background');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-background');
-
-                    &::before {
-                        background: var-get($theme, 'item-focused-hover-background');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-background');
-                    color: var-get($theme, 'item-hover-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
+            color: var-get($theme, 'item-focused-text-color');
+            background: var-get($theme, 'item-focused-background');
+            border-color: var-get($theme, 'item-focused-border-color');
 
-                    &::before {
-                        background: var-get($theme, 'item-focused-background');
-                    }
-                }
+            igx-icon {
+                color: var-get($theme, 'item-icon-color');
             }
 
             @if $variant == 'bootstrap' {
-                background: var-get($theme, 'item-background');
                 z-index: 1;
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
-
-                &:active {
-                    background: var-get($theme, 'item-hover-background');
-                    color: var-get($theme, 'item-hover-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
-                }
             }
 
             @if $variant == 'fluent' {
-                background: var-get($theme, 'item-background');
-                color: var-get($theme, 'item-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-icon-color');
-                }
+                border-color: var-get($theme, 'item-border-color');
 
                 &::after {
                     content: '';
@@ -257,36 +158,20 @@
                     height: calc(100% - (#{$outline-btn-indent} * 2));
                     box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color');
                 }
-
-                &:active {
-                    background: var-get($theme, 'item-focused-background');
-                }
             }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'item-focused-text-color');
-                background: var-get($theme, 'item-focused-background');
-                border-color: var-get($theme, 'item-focused-border-color');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
                 z-index: 2;
+            }
 
-                igx-icon {
-                    color: var-get($theme, 'item-icon-color');
-                }
-
-                &:hover {
-                    border-color: var-get($theme, 'item-hover-border-color');
-                }
-
-                &:active {
-                    color: var-get($theme, 'item-hover-text-color');
-                    background: var-get($theme, 'item-hover-background');
-                    border-color: var-get($theme, 'item-hover-border-color');
+            &:hover {
+                background: var-get($theme, 'item-focused-hover-background');
+                border-color: var-get($theme, 'item-focused-hover-border-color');
+            }
 
-                    igx-icon {
-                        color: var-get($theme, 'item-hover-icon-color');
-                    }
-                }
+            &:active {
+                background: var-get($theme, 'item-active-background');
             }
         }
     }
@@ -337,219 +222,54 @@
             }
         }
 
-        @if $variant == 'material' {
-            &:hover {
-                @extend %item-overlay;
-
-                background: var-get($theme, 'item-selected-background');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-            }
-
-            &:active {
-                @extend %item-overlay;
-
-                color: var-get($theme, 'item-selected-hover-text-color');
-                background: var-get($theme, 'item-selected-background');
-                border-color: var-get($theme, 'item-selected-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
+        &:active {
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+            color: var-get($theme, 'item-selected-hover-text-color');
+            background: var-get($theme, 'item-selected-active-background');
 
-                &::before {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
+            igx-icon {
+                color: var-get($theme, 'item-selected-hover-icon-color');
             }
         }
 
-        @if $variant == 'bootstrap' {
-            &:active {
-                @extend %item-overlay;
+        &[igxButton].igx-button--focused {
+            background: var-get($theme, 'item-selected-focus-background');
+            border-color: var-get($theme, 'item-selected-hover-border-color');
 
+            @if $variant == 'indigo' {
                 color: var-get($theme, 'item-selected-text-color');
                 border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-hover-background');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
+                box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
+                z-index: 2;
             }
-        }
 
-        @if $variant == 'fluent' {
             &:hover {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                @extend %item-overlay;
+                background: var-get($theme, 'item-selected-focus-hover-background');
 
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-            }
-
-            &:active {
-                background: var-get($theme, 'item-selected-focus-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
+                @if $variant != 'indigo' {
+                    border-color: var-get($theme, 'item-selected-border-color');
+                } @else {
+                    border-color: var-get($theme, 'item-selected-hover-border-color');
                 }
             }
-        }
 
-        @if $variant == 'indigo' {
             &:active {
-                background: var-get($theme, 'item-selected-hover-background');
-                color: var-get($theme, 'item-selected-hover-text-color');
+                background: var-get($theme, 'item-selected-active-background');
                 border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
-            }
-        }
-
-        &[igxButton].igx-button--focused {
-            @if $variant != 'fluent' {
-                &:hover {
-                    color: var-get($theme, 'item-selected-hover-text-color');
-                    background: var-get($theme, 'item-selected-hover-background');
-                    border-color: var-get($theme, 'item-selected-hover-border-color');
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-hover-background');
-                    color: var-get($theme, 'item-selected-hover-text-color');
-
-                    &::before {
-                        background: var-get($theme, 'item-selected-focus-background');
-                    }
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-            }
-
-            @if $variant == 'material' or $variant == 'fluent' {
-                &:hover {
-                    @extend %item-overlay;
-
-                    &::before {
-                        background: var-get($theme, 'item-selected-focus-hover-background');
-                    }
-                }
-            }
-
-            @if $variant == 'material' {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-hover-text-color');
-                border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                &::before {
-                    background: var-get($theme, 'item-selected-hover-background');
-                }
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-hover-icon-color');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-selected-background');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-background');
-                }
-            }
-
-            @if $variant == 'bootstrap' {
-                color: var-get($theme, 'item-selected-text-color');
-                border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-background');
-                box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-            }
-
-            @if $variant == 'fluent' {
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-
-                &:hover {
-                    background: var-get($theme, 'item-selected-background');
-                    color: var-get($theme, 'item-selected-text-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
-
-                &:active {
-                    background: var-get($theme, 'item-selected-focus-background');
-                }
-            }
-
-            @if $variant == 'indigo' {
-                box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
-                border-color: var-get($theme, 'item-selected-border-color');
-                background: var-get($theme, 'item-selected-background');
-                color: var-get($theme, 'item-selected-text-color');
-
-                igx-icon {
-                    color: var-get($theme, 'item-selected-icon-color');
-                }
-
-                &:hover,
-                &:active {
-                    border-color: var-get($theme, 'item-selected-hover-border-color');
-
-                    igx-icon {
-                        color: var-get($theme, 'item-selected-hover-icon-color');
-                    }
-                }
             }
         }
 
         &[igxButton][disabled='true'] {
-            position: relative;
-
-            &::before {
-                position: absolute;
-                content: '';
-                top: 0;
-                bottom: 0;
-                inset-inline-end: 0;
-                inset-inline-start: 0;
-                background: var-get($theme, 'disabled-selected-background');
+            color: var-get($theme, 'disabled-selected-text-color');
+            background: var-get($theme, 'disabled-selected-background');
+            border-color: var-get($theme, 'disabled-selected-border-color');
+
+            igx-icon {
+                color: var-get($theme, 'disabled-selected-icon-color');
             }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'disabled-selected-text-color');
-                background: var-get($theme, 'disabled-selected-background');
                 border: none;
-
-                igx-icon {
-                    color: var-get($theme, 'disabled-selected-icon-color');
-                }
-
-                &::before {
-                    display: none;
-                }
             }
         }
     }

From d4aaffd4b79e9366019ad61bfa0e57b3f0b47ba8 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 14:08:29 +0300
Subject: [PATCH 2/4] feat(button-group): update button group styles

---
 .../button-group/_button-group-theme.scss     | 60 +++++++++++++------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index 8a5e4a56a75..a4f4259e964 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -86,6 +86,7 @@
         }
 
         &:hover {
+            z-index: 1;
             color: var-get($theme, 'item-hover-text-color');
             background: var-get($theme, 'item-hover-background');
             border-color: var-get($theme, 'item-hover-border-color');
@@ -96,9 +97,10 @@
         }
 
         &:active {
+            z-index: 2;
             color: var-get($theme, 'item-hover-text-color');
             background: var-get($theme, 'item-active-background');
-            border-color: var-get($theme, 'item-hover-border-color');
+            border-color: var-get($theme, 'item-active-border-color');
 
             igx-icon {
                 color: var-get($theme, 'item-hover-icon-color');
@@ -121,14 +123,6 @@
 
                 --ig-icon-size: #{$icon-size};
             }
-
-            &:hover {
-                z-index: 1;
-            }
-
-            &:active {
-                z-index: 2;
-            }
         }
 
         &[igxButton].igx-button--focused {
@@ -137,7 +131,11 @@
             border-color: var-get($theme, 'item-focused-border-color');
 
             igx-icon {
-                color: var-get($theme, 'item-icon-color');
+                @if $variant == 'indigo' {
+                    color: var-get($theme, 'item-icon-color');
+                } @else {
+                    color: var-get($theme, 'item-focused-text-color');
+                }
             }
 
             @if $variant == 'bootstrap' {
@@ -168,10 +166,22 @@
             &:hover {
                 background: var-get($theme, 'item-focused-hover-background');
                 border-color: var-get($theme, 'item-focused-hover-border-color');
+                color: var-get($theme, 'item-focused-hover-text-color');
+
+                igx-icon {
+                    color: var-get($theme, 'item-focused-hover-text-color');
+                }
+
+                @if $variant == 'indigo' {
+                    igx-icon {
+                        color: var-get($theme, 'item-hover-icon-color');
+                    }
+                }
             }
 
             &:active {
                 background: var-get($theme, 'item-active-background');
+                border-color: var-get($theme, 'item-active-border-color');
             }
         }
     }
@@ -202,7 +212,7 @@
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
         position: relative;
-        z-index: 1;
+        z-index: 3;
 
         &[igxButton] {
             border-color: var-get($theme, 'item-selected-border-color');
@@ -223,7 +233,7 @@
         }
 
         &:active {
-            border-color: var-get($theme, 'item-selected-hover-border-color');
+            border-color: var-get($theme, 'item-selected-active-border-color');
             color: var-get($theme, 'item-selected-hover-text-color');
             background: var-get($theme, 'item-selected-active-background');
 
@@ -235,9 +245,21 @@
         &[igxButton].igx-button--focused {
             background: var-get($theme, 'item-selected-focus-background');
             border-color: var-get($theme, 'item-selected-hover-border-color');
+            color: var-get($theme, 'item-selected-text-color');
+
+            igx-icon {
+                color: var-get($theme, 'item-selected-icon-color');
+            }
+
+            @if $variant == 'material' {
+                color: var-get($theme, 'item-selected-hover-text-color');
+
+                igx-icon {
+                    color: var-get($theme, 'item-selected-hover-icon-color');
+                }
+            }
 
             @if $variant == 'indigo' {
-                color: var-get($theme, 'item-selected-text-color');
                 border-color: var-get($theme, 'item-selected-border-color');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
                 z-index: 2;
@@ -245,17 +267,21 @@
 
             &:hover {
                 background: var-get($theme, 'item-selected-focus-hover-background');
+                color: var-get($theme, 'item-selected-hover-text-color');
+                border-color: var-get($theme, 'item-selected-border-color');
 
-                @if $variant != 'indigo' {
-                    border-color: var-get($theme, 'item-selected-border-color');
-                } @else {
+                igx-icon {
+                    color: var-get($theme, 'item-selected-hover-icon-color');
+                }
+
+                @if $variant == 'indigo' {
                     border-color: var-get($theme, 'item-selected-hover-border-color');
                 }
             }
 
             &:active {
                 background: var-get($theme, 'item-selected-active-background');
-                border-color: var-get($theme, 'item-selected-hover-border-color');
+                border-color: var-get($theme, 'item-selected-active-border-color');
             }
         }
 

From cf95dc0093fe14a7d62e538c3e43932d297fb93d Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 15:55:58 +0300
Subject: [PATCH 3/4] fix(button-group): fix z-indexes

---
 .../components/button-group/_button-group-theme.scss     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index a4f4259e964..f807015248c 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -126,6 +126,7 @@
         }
 
         &[igxButton].igx-button--focused {
+            z-index: 2;
             color: var-get($theme, 'item-focused-text-color');
             background: var-get($theme, 'item-focused-background');
             border-color: var-get($theme, 'item-focused-border-color');
@@ -139,7 +140,6 @@
             }
 
             @if $variant == 'bootstrap' {
-                z-index: 1;
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
             }
 
@@ -160,7 +160,6 @@
 
             @if $variant == 'indigo' {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
-                z-index: 2;
             }
 
             &:hover {
@@ -212,7 +211,6 @@
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
         position: relative;
-        z-index: 3;
 
         &[igxButton] {
             border-color: var-get($theme, 'item-selected-border-color');
@@ -262,7 +260,10 @@
             @if $variant == 'indigo' {
                 border-color: var-get($theme, 'item-selected-border-color');
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
-                z-index: 2;
+            }
+
+            @if $variant == 'bootstrap' {
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
             }
 
             &:hover {

From fcc815665a9ba64ed356178b178ed9b939582bf3 Mon Sep 17 00:00:00 2001
From: didimmova <d.dimova11@gmail.com>
Date: Tue, 14 Apr 2026 18:22:19 +0300
Subject: [PATCH 4/4] feat(button-group): update active states and z-indexes

---
 .../button-group/_button-group-theme.scss     | 55 +++++++++++--------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
index f807015248c..dfeab6925fd 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss
@@ -85,26 +85,25 @@
             }
         }
 
-        &:hover {
-            z-index: 1;
+        &:hover,
+        &:active {
             color: var-get($theme, 'item-hover-text-color');
-            background: var-get($theme, 'item-hover-background');
-            border-color: var-get($theme, 'item-hover-border-color');
 
             igx-icon {
                 color: var-get($theme, 'item-hover-icon-color');
             }
         }
 
+        &:hover {
+            z-index: 1;
+            background: var-get($theme, 'item-hover-background');
+            border-color: var-get($theme, 'item-hover-border-color');
+        }
+
         &:active {
             z-index: 2;
-            color: var-get($theme, 'item-hover-text-color');
             background: var-get($theme, 'item-active-background');
             border-color: var-get($theme, 'item-active-border-color');
-
-            igx-icon {
-                color: var-get($theme, 'item-hover-icon-color');
-            }
         }
 
         @if $variant == 'fluent' {
@@ -162,9 +161,8 @@
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
             }
 
-            &:hover {
-                background: var-get($theme, 'item-focused-hover-background');
-                border-color: var-get($theme, 'item-focused-hover-border-color');
+            &:hover,
+            &:active {
                 color: var-get($theme, 'item-focused-hover-text-color');
 
                 igx-icon {
@@ -178,6 +176,11 @@
                 }
             }
 
+            &:hover {
+                background: var-get($theme, 'item-focused-hover-background');
+                border-color: var-get($theme, 'item-focused-hover-border-color');
+            }
+
             &:active {
                 background: var-get($theme, 'item-active-background');
                 border-color: var-get($theme, 'item-active-border-color');
@@ -207,6 +210,7 @@
     }
 
     %igx-group-item-selected {
+        z-index: 2;
         color: var-get($theme, 'item-selected-text-color');
         background: var-get($theme, 'item-selected-background');
         border-color: var-get($theme, 'item-selected-border-color');
@@ -220,24 +224,23 @@
             color: var-get($theme, 'item-selected-icon-color');
         }
 
-        &:hover {
-            border-color: var-get($theme, 'item-selected-hover-border-color');
+        &:hover,
+        &:active {
             color: var-get($theme, 'item-selected-hover-text-color');
-            background: var-get($theme, 'item-selected-hover-background');
 
             igx-icon {
                 color: var-get($theme, 'item-selected-hover-icon-color');
             }
         }
 
+        &:hover {
+            border-color: var-get($theme, 'item-selected-hover-border-color');
+            background: var-get($theme, 'item-selected-hover-background');
+        }
+
         &:active {
             border-color: var-get($theme, 'item-selected-active-border-color');
-            color: var-get($theme, 'item-selected-hover-text-color');
             background: var-get($theme, 'item-selected-active-background');
-
-            igx-icon {
-                color: var-get($theme, 'item-selected-hover-icon-color');
-            }
         }
 
         &[igxButton].igx-button--focused {
@@ -266,10 +269,9 @@
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
             }
 
-            &:hover {
-                background: var-get($theme, 'item-selected-focus-hover-background');
+            &:hover,
+            &:active {
                 color: var-get($theme, 'item-selected-hover-text-color');
-                border-color: var-get($theme, 'item-selected-border-color');
 
                 igx-icon {
                     color: var-get($theme, 'item-selected-hover-icon-color');
@@ -280,9 +282,14 @@
                 }
             }
 
+            &:hover {
+                background: var-get($theme, 'item-selected-focus-hover-background');
+                border-color: var-get($theme, 'item-selected-border-color');
+            }
+
             &:active {
-                background: var-get($theme, 'item-selected-active-background');
                 border-color: var-get($theme, 'item-selected-active-border-color');
+                background: var-get($theme, 'item-selected-active-background');
             }
         }