@syncfusion/ej2-splitbuttons 20.1.55 → 20.2.38

package/styles/button-group/_layout.scss

@@ -12,7 +12,7 @@
     input:focus+label.e-btn,
     .e-btn:focus,
     .e-btn:hover {
-      @if $skin-name != 'tailwind' and $skin-name != 'tailwind-dark' {
+      @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' {
         z-index: 2;
       }
     }

package/styles/button-group/_material3-definition.scss

@@ -0,0 +1,31 @@
+//layout variables
+$btn-grp-margin: -1px !default;
+$btn-grp-margin-left: -1px !default;
+$btn-grp-wrapper-border: 4px !default;
+$btn-grp-round-radius: 20px !default;
+$btn-grp-icon-font-size: 16px !default;
+$btn-grp-icon-font-size-bigger: 20px !default;
+
+//Normal Outline GroupButton
+$btn-grp-outline-focus-border-color: $secondary-border-color !default;
+$btn-grp-outline-focus-color: inherit !default;
+
+//Outline Primary
+$btn-grp-outline-primary-focus-border-color: $primary !default;
+$btn-grp-outline-focus-primary-color: inherit !default;
+
+//Outline Success
+$btn-grp-outline-success-focus-border-color: $btn-success-focus-border-color !default;
+$btn-grp-outline-focus-success-color: inherit !default;
+
+//Outline Info
+$btn-grp-outline-info-focus-border-color: $btn-info-focus-border-color !default;
+$btn-grp-outline-focus-info-color: inherit !default;
+
+//Outline warning
+$btn-grp-outline-warning-focus-border-color: $btn-warning-focus-border-color !default;
+$btn-grp-outline-focus-warning-color: inherit !default;
+
+//Outline danger
+$btn-grp-outline-danger-focus-border-color: $btn-danger-focus-border-color !default;
+$btn-grp-outline-focus-danger-color: inherit !default;

package/styles/button-group/_theme.scss

@@ -22,9 +22,12 @@
     .e-btn:focus,
     input:focus+label.e-btn {
       @include button-focus;
-      @if $skin-name != 'bootstrap5' {
+      @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
         box-shadow: none;
       }
+      @if $skin-name == 'bootstrap5' {
+        border-color: $btn-focus-bgcolor;
+      }
       outline-color: $btn-grp-outline-focus-color;
       @if $skin-name == 'fabric' {
         outline-offset: -2px;
@@ -36,9 +39,12 @@
 
       &.e-primary {
         @include primary-focus;
-        @if $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
+        @if $skin-name == 'bootstrap5' {
+          border-color: $btn-primary-focus-bgcolor;
+        }
         outline-color: $btn-grp-outline-focus-primary-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -47,9 +53,12 @@
 
       &.e-success {
         @include success-focus;
-        @if $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
+        @if $skin-name == 'bootstrap5' {
+          border-color: $btn-success-focus-bgcolor;
+        }
         outline-color: $btn-grp-outline-focus-success-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -58,9 +67,12 @@
 
       &.e-info {
         @include info-focus;
-        @if $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
+        @if $skin-name == 'bootstrap5' {
+          border-color: $btn-info-focus-bgcolor;
+        }
         outline-color: $btn-grp-outline-focus-info-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -69,9 +81,12 @@
 
       &.e-warning {
         @include warning-focus;
-        @if $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
+        @if $skin-name == 'bootstrap5' {
+          border-color: $btn-warning-focus-bgcolor;
+        }
         outline-color: $btn-grp-outline-focus-warning-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -80,9 +95,12 @@
 
       &.e-danger {
         @include danger-focus;
-        @if $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
+        @if $skin-name == 'bootstrap5' {
+          border-color: $btn-danger-focus-bgcolor;
+        }
         outline-color: $btn-grp-outline-focus-danger-color;
         @if $skin-name == 'fabric' {
           border-color: transparent;
@@ -99,43 +117,61 @@
 
       &.e-outline {
         @include outline-focus;
-        @if $skin-name != 'bootstrap5' {
+        @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
           box-shadow: none;
         }
+        @if $skin-name == 'bootstrap5' {
+          border-color: $btn-outline-focus-bgcolor;
+        }
 
         &.e-primary {
           @include outline-primary-focus;
-          @if $skin-name != 'bootstrap5' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
+          @if $skin-name == 'bootstrap5' {
+            border-color: $btn-outline-primary-focus-bgcolor;
+          }
         }
 
         &.e-success {
           @include outline-success-focus;
-          @if $skin-name != 'bootstrap5' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
+          @if $skin-name == 'bootstrap5' {
+            border-color: $btn-success-focus-bgcolor;
+          }
         }
 
         &.e-info {
           @include outline-info-focus;
-          @if $skin-name != 'bootstrap5' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
+          @if $skin-name == 'bootstrap5' {
+            border-color: $btn-info-hover-bgcolor;
+          }
         }
 
         &.e-warning {
           @include outline-warning-focus;
-          @if $skin-name != 'bootstrap5' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
+          @if $skin-name == 'bootstrap5' {
+            border-color: $btn-warning-hover-bgcolor;
+          }
         }
 
         &.e-danger {
           @include outline-danger-focus;
-          @if $skin-name != 'bootstrap5' {
+          @if $skin-name != 'bootstrap5' and $skin-name != 'tailwind' {
             box-shadow: none;
           }
+          @if $skin-name == 'bootstrap5' {
+            border-color: $btn-danger-hover-bgcolor;
+          }
         }
       }
     }

package/styles/button-group/bootstrap-dark.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/bootstrap.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/bootstrap4.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/bootstrap5-dark.css

@@ -260,6 +260,7 @@
   outline: #6c757d 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -271,6 +272,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0b5ed7;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -281,6 +283,7 @@
   border-color: #198754;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(66, 190, 133, 0.5);
+  border-color: #157347;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -291,6 +294,7 @@
   border-color: #0dcaf0;
   color: #000;
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -301,6 +305,7 @@
   border-color: #ffc107;
   color: #000;
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -311,6 +316,7 @@
   border-color: #dc3545;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(232, 120, 131, 0.5);
+  border-color: #bb2d3b;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -330,36 +336,42 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0d6efd;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 4px rgba(66, 190, 133, 0.5);
+  border-color: #157347;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 4px rgba(232, 120, 131, 0.5);
+  border-color: #bb2d3b;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/button-group/bootstrap5.css

@@ -260,6 +260,7 @@
   outline: #6c757d 0 solid;
   outline-offset: 0;
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -271,6 +272,7 @@
   color: #fff;
   outline: #6c757d 0 solid;
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0b5ed7;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -281,6 +283,7 @@
   border-color: #198754;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5);
+  border-color: #157347;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -291,6 +294,7 @@
   border-color: #0dcaf0;
   color: #000;
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -301,6 +305,7 @@
   border-color: #ffc107;
   color: #000;
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -311,6 +316,7 @@
   border-color: #dc3545;
   color: #fff;
   box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5);
+  border-color: #bb2d3b;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -330,36 +336,42 @@
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
   box-shadow: 0 0 0 4px rgba(130, 138, 145, 0.5);
+  border-color: #5c636a;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
   box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
+  border-color: #0d6efd;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
   box-shadow: 0 0 0 4px rgba(60, 153, 110, 0.5);
+  border-color: #157347;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
   box-shadow: 0 0 0 4px rgba(49, 210, 242, 0.5);
+  border-color: #31d2f2;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
   box-shadow: 0 0 0 4px rgba(255, 202, 44, 0.5);
+  border-color: #ffca2c;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
   box-shadow: 0 0 0 4px rgba(225, 83, 97, 0.5);
+  border-color: #bb2d3b;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,

package/styles/button-group/fabric-dark.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/fabric.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/fluent-dark.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;
@@ -269,7 +261,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
   background-color: #006cbf;
   border-color: #0078d4;
-  color: #fff;
+  color: #1b1a19;
   outline: 1px solid;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
@@ -281,7 +273,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
   background-color: #0a5f0a;
   border-color: #0b6a0b;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -292,7 +284,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
   background-color: #03767a;
   border-color: #038387;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -303,7 +295,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
   background-color: #cf6228;
   border-color: #ca5010;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -314,7 +306,7 @@
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
   background-color: #bc2f32;
   border-color: #d13438;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: 0 0 rgba(0, 0, 0, 0);
   box-shadow: none;
   outline-color: inherit;
@@ -387,7 +379,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
   background-color: #0060aa;
   border-color: #0060aa;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-success,
@@ -398,7 +390,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
   background-color: #095509;
   border-color: #095509;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-info,
@@ -408,7 +400,7 @@
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
   background-color: #359c9f;
-  color: #fff;
+  color: #1b1a19;
   border-color: #359c9f;
   box-shadow: none;
 }
@@ -420,7 +412,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
   background-color: #d57340;
   border-color: #d57340;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-danger,
@@ -431,7 +423,7 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
   background-color: #a72a2d;
   border-color: #a72a2d;
-  color: #fff;
+  color: #1b1a19;
   box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-outline,
@@ -454,7 +446,7 @@
   background-color: #0060aa;
   border-color: #0078d4;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-success,
 .e-btn-group input:active + label.e-btn.e-outline.e-success,
@@ -465,7 +457,7 @@
   background-color: #095509;
   border-color: #095509;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-info,
 .e-btn-group input:active + label.e-btn.e-outline.e-info,
@@ -476,7 +468,7 @@
   background-color: #359c9f;
   border-color: #359c9f;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-warning,
 .e-btn-group input:active + label.e-btn.e-outline.e-warning,
@@ -487,7 +479,7 @@
   background-color: #d57340;
   border-color: #d57340;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:active.e-outline.e-danger,
 .e-btn-group input:active + label.e-btn.e-outline.e-danger,
@@ -498,7 +490,7 @@
   background-color: #a72a2d;
   border-color: #a72a2d;
   box-shadow: none;
-  color: #fff;
+  color: #1b1a19;
 }
 .e-btn-group .e-btn:disabled,
 .e-btn-group input:disabled + label.e-btn,

package/styles/button-group/fluent.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/highcontrast-light.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/highcontrast.css

@@ -7,14 +7,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/material-dark.css

@@ -8,14 +8,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;

package/styles/button-group/material.css

@@ -8,14 +8,6 @@
       flex-direction: row;
   position: relative;
 }
-*.e-btn-group input:focus + label.e-btn,
-*.e-btn-group .e-btn:focus,
-*.e-btn-group .e-btn:hover,
-*.e-css.e-btn-group input:focus + label.e-btn,
-*.e-css.e-btn-group .e-btn:focus,
-*.e-css.e-btn-group .e-btn:hover {
-  z-index: 2;
-}
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
   margin-bottom: 0;