@syncfusion/ej2-splitbuttons 25.2.4 → 26.2.4

package/styles/button-group/material3.css

@@ -100,7 +100,7 @@
   --color-sf-on-warning: 99, 52, 0;
   --color-sf-on-warning-container: 255, 220, 193;
   --color-sf-spreadsheet-gridline: 231, 224, 236;
-  --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
+  --color-sf-shadow-focus-ring1: 0 0 0 1px #000, 0 0 0 3px #fff;
   --color-sf-success-text: 0, 0, 0;
   --color-sf-warning-text: 0, 0, 0;
   --color-sf-info-text: 0, 0, 0;
@@ -112,14 +112,18 @@
 /* stylelint-disable */
 *.e-btn-group,
 *.e-css.e-btn-group {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   border-radius: 4px;
-  -ms-flex-direction: row;
-      flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
   position: relative;
   border-radius: 4px;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
 }
 *.e-btn-group input + label.e-btn,
 *.e-css.e-btn-group input + label.e-btn {
@@ -149,8 +153,9 @@
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:not(:first-of-type):not(:last-of-type) {
   border-radius: 0;
 }
-*.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type,
-*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
+*.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type, *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child),
+*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type,
+*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
@@ -159,11 +164,6 @@
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
-*.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child),
-*.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type:not(:last-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
 *.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper + .e-btn,
 *.e-css.e-btn-group:not(.e-rtl):not(.e-vertical) .e-split-btn-wrapper + .e-btn {
   border-bottom-left-radius: 0;
@@ -197,8 +197,9 @@
 *.e-css.e-btn-group.e-rtl .e-btn:not(:first-of-type):not(:last-of-type) {
   border-radius: 0;
 }
-*.e-btn-group.e-rtl .e-btn:first-of-type,
-*.e-css.e-btn-group.e-rtl .e-btn:first-of-type {
+*.e-btn-group.e-rtl .e-btn:first-of-type, *.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child),
+*.e-css.e-btn-group.e-rtl .e-btn:first-of-type,
+*.e-css.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -207,11 +208,6 @@
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-*.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child),
-*.e-css.e-btn-group.e-rtl .e-btn:last-of-type:not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
 *.e-btn-group.e-rtl .e-split-btn-wrapper + .e-btn,
 *.e-css.e-btn-group.e-rtl .e-split-btn-wrapper + .e-btn {
   border-bottom-right-radius: 0;
@@ -239,8 +235,10 @@
 }
 *.e-btn-group.e-vertical,
 *.e-css.e-btn-group.e-vertical {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 *.e-btn-group.e-vertical input,
 *.e-css.e-btn-group.e-vertical input {
@@ -347,17 +345,20 @@
 /* stylelint-disable */
 .e-btn-group .e-btn,
 .e-css.e-btn-group .e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:hover,
 .e-css.e-btn-group .e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:focus-visible,
 .e-btn-group input:focus-visible + label.e-btn,
 .e-css.e-btn-group .e-btn:focus-visible,
 .e-css.e-btn-group input:focus-visible + label.e-btn {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000 !important;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
   z-index: 1;
 }
 .e-btn-group .e-btn:focus-visible.e-primary, .e-btn-group .e-btn:focus-visible.e-success, .e-btn-group .e-btn:focus-visible.e-info, .e-btn-group .e-btn:focus-visible.e-warning, .e-btn-group .e-btn:focus-visible.e-danger,
@@ -376,14 +377,16 @@
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-info,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-warning,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-danger {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000 !important;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
   z-index: 1;
 }
 .e-btn-group .e-btn:focus-visible.e-outline,
 .e-btn-group input:focus-visible + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus-visible.e-outline,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000 !important;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
   z-index: 1;
 }
 .e-btn-group .e-btn:focus-visible.e-outline.e-primary, .e-btn-group .e-btn:focus-visible.e-outline.e-success, .e-btn-group .e-btn:focus-visible.e-outline.e-info, .e-btn-group .e-btn:focus-visible.e-outline.e-warning, .e-btn-group .e-btn:focus-visible.e-outline.e-danger,
@@ -402,7 +405,8 @@
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-outline.e-danger {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000 !important;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000 !important;
   z-index: 1;
 }
 .e-btn-group .e-btn:focus,
@@ -411,13 +415,18 @@
 .e-css.e-btn-group .e-btn:focus,
 .e-css.e-btn-group input:focus-visible + label.e-btn,
 .e-css.e-btn-group input:focus + label.e-btn {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08)), rgba(var(--color-sf-surface));
-  border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
+  -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
+     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.08)), to(rgba(var(--color-sf-on-surface), 0.08)));
+     border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.08), rgba(var(--color-sf-on-surface), 0.08));
   color: rgba(var(--color-sf-on-surface));
   outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
   outline-offset: 0;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-primary,
@@ -426,12 +435,15 @@
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.08)), to(rgba(var(--color-sf-on-primary), 0.08))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.08), rgba(var(--color-sf-on-primary), 0.08)), rgba(var(--color-sf-primary));
   border-color: rgba(var(--color-sf-primary));
   color: rgba(var(--color-sf-on-primary));
   outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-success,
@@ -440,11 +452,14 @@
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-success-text), 0.08)), to(rgba(var(--color-sf-success-text), 0.08))), rgba(var(--color-sf-success));
   background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.08), rgba(var(--color-sf-success-text), 0.08)), rgba(var(--color-sf-success));
   border-color: rgba(var(--color-sf-success));
   color: rgba(var(--color-sf-success-text));
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-info,
@@ -453,11 +468,14 @@
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-info-text), 0.08)), to(rgba(var(--color-sf-info-text), 0.08))), rgba(var(--color-sf-info));
   background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.08), rgba(var(--color-sf-info-text), 0.08)), rgba(var(--color-sf-info));
   border-color: rgba(var(--color-sf-info));
   color: rgba(var(--color-sf-info-text));
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-warning,
@@ -466,11 +484,14 @@
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-warning-text), 0.08)), to(rgba(var(--color-sf-warning-text), 0.08))), rgba(var(--color-sf-warning));
   background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.08), rgba(var(--color-sf-warning-text), 0.08)), rgba(var(--color-sf-warning));
   border-color: rgba(var(--color-sf-warning));
   color: rgba(var(--color-sf-warning-text));
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-danger,
@@ -479,11 +500,14 @@
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus-visible + label.e-btn.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-danger-text), 0.08)), to(rgba(var(--color-sf-danger-text), 0.08))), rgba(var(--color-sf-error));
   background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.08), rgba(var(--color-sf-danger-text), 0.08)), rgba(var(--color-sf-error));
   border-color: rgba(var(--color-sf-error));
   color: rgba(var(--color-sf-danger-text));
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline-color: inherit;
 }
 .e-btn-group .e-btn:focus.e-link,
@@ -497,7 +521,8 @@
   color: rgba(var(--color-sf-info));
   background-color: transparent;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   outline: none;
 }
 .e-btn-group .e-btn:focus.e-outline,
@@ -509,7 +534,8 @@
   background: rgba(var(--color-sf-on-surface), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
   color: rgba(var(--color-sf-on-surface));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-btn-group input:focus-visible + label.e-btn.e-outline.e-primary,
@@ -520,7 +546,8 @@
   background: rgba(var(--color-sf-primary), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
   color: rgba(var(--color-sf-primary));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-success,
 .e-btn-group input:focus-visible + label.e-btn.e-outline.e-success,
@@ -531,7 +558,8 @@
   background: rgba(var(--color-sf-success), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
   color: rgba(var(--color-sf-success));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-info,
 .e-btn-group input:focus-visible + label.e-btn.e-outline.e-info,
@@ -542,7 +570,8 @@
   background: rgba(var(--color-sf-info), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
   color: rgba(var(--color-sf-info));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-btn-group input:focus-visible + label.e-btn.e-outline.e-warning,
@@ -553,7 +582,8 @@
   background: rgba(var(--color-sf-warning), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
   color: rgba(var(--color-sf-warning));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-btn-group input:focus-visible + label.e-btn.e-outline.e-danger,
@@ -564,7 +594,8 @@
   background: rgba(var(--color-sf-error), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
   color: rgba(var(--color-sf-error));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active,
 .e-btn-group input:active + label.e-btn,
@@ -572,12 +603,16 @@
 .e-css.e-btn-group .e-btn:active,
 .e-css.e-btn-group input:active + label.e-btn,
 .e-css.e-btn-group input:checked + label.e-btn {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12)), rgba(var(--color-sf-surface));
-  border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
+  -o-border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
+     border-image: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-surface), 0.12)), to(rgba(var(--color-sf-on-surface), 0.12)));
+     border-image: linear-gradient(0deg, rgba(var(--color-sf-on-surface), 0.12), rgba(var(--color-sf-on-surface), 0.12));
   color: rgba(var(--color-sf-on-surface));
   outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
   outline-offset: 0;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-primary,
 .e-btn-group input:active + label.e-btn.e-primary,
@@ -585,12 +620,15 @@
 .e-css.e-btn-group .e-btn:active.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
   border-color: rgba(var(--color-sf-primary));
   color: rgba(var(--color-sf-on-primary));
   outline: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface)) 0 solid;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-success,
 .e-btn-group input:active + label.e-btn.e-success,
@@ -598,11 +636,14 @@
 .e-css.e-btn-group .e-btn:active.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-success-text), 0.12)), to(rgba(var(--color-sf-success-text), 0.12))), rgba(var(--color-sf-success));
   background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success));
   border-color: rgba(var(--color-sf-success));
   color: rgba(var(--color-sf-success-text));
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-info,
 .e-btn-group input:active + label.e-btn.e-info,
@@ -610,11 +651,14 @@
 .e-css.e-btn-group .e-btn:active.e-info,
 .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: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-info-text), 0.12)), to(rgba(var(--color-sf-info-text), 0.12))), rgba(var(--color-sf-info));
   background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info));
   color: rgba(var(--color-sf-info-text));
   border-color: rgba(var(--color-sf-info));
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-warning,
 .e-btn-group input:active + label.e-btn.e-warning,
@@ -622,11 +666,14 @@
 .e-css.e-btn-group .e-btn:active.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-warning-text), 0.12)), to(rgba(var(--color-sf-warning-text), 0.12))), rgba(var(--color-sf-warning));
   background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning));
   border-color: rgba(var(--color-sf-warning));
   color: rgba(var(--color-sf-warning-text));
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-danger,
 .e-btn-group input:active + label.e-btn.e-danger,
@@ -634,11 +681,14 @@
 .e-css.e-btn-group .e-btn:active.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-danger-text), 0.12)), to(rgba(var(--color-sf-danger-text), 0.12))), rgba(var(--color-sf-error));
   background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error));
   border-color: rgba(var(--color-sf-error));
   color: rgba(var(--color-sf-danger-text));
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: none;
+  -webkit-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+          box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-btn-group .e-btn:active.e-outline,
 .e-btn-group input:active + label.e-btn.e-outline,
@@ -648,7 +698,8 @@
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
   background: rgba(var(--color-sf-on-surface), 0.12);
   border-color: rgba(var(--color-sf-outline));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface));
   box-shadow: none;
 }
@@ -658,9 +709,11 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-on-primary), 0.12)), to(rgba(var(--color-sf-on-primary), 0.12))), rgba(var(--color-sf-primary));
   background: linear-gradient(0deg, rgba(var(--color-sf-on-primary), 0.12), rgba(var(--color-sf-on-primary), 0.12)), rgba(var(--color-sf-primary));
   border-color: rgba(var(--color-sf-primary));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-primary));
   background: rgba(var(--color-sf-primary), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
@@ -673,9 +726,11 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-success-text), 0.12)), to(rgba(var(--color-sf-success-text), 0.12))), rgba(var(--color-sf-success));
   background: linear-gradient(0deg, rgba(var(--color-sf-success-text), 0.12), rgba(var(--color-sf-success-text), 0.12)), rgba(var(--color-sf-success));
   border-color: rgba(var(--color-sf-success));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-success-text));
   background: rgba(var(--color-sf-success), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
@@ -688,9 +743,11 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-info-text), 0.12)), to(rgba(var(--color-sf-info-text), 0.12))), rgba(var(--color-sf-info));
   background: linear-gradient(0deg, rgba(var(--color-sf-info-text), 0.12), rgba(var(--color-sf-info-text), 0.12)), rgba(var(--color-sf-info));
   border-color: rgba(var(--color-sf-info));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-info-text));
   background: rgba(var(--color-sf-info), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
@@ -703,9 +760,11 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-warning-text), 0.12)), to(rgba(var(--color-sf-warning-text), 0.12))), rgba(var(--color-sf-warning));
   background: linear-gradient(0deg, rgba(var(--color-sf-warning-text), 0.12), rgba(var(--color-sf-warning-text), 0.12)), rgba(var(--color-sf-warning));
   border-color: rgba(var(--color-sf-warning));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-warning-text));
   background: rgba(var(--color-sf-warning), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
@@ -718,9 +777,11 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-danger-text), 0.12)), to(rgba(var(--color-sf-danger-text), 0.12))), rgba(var(--color-sf-error));
   background: linear-gradient(0deg, rgba(var(--color-sf-danger-text), 0.12), rgba(var(--color-sf-danger-text), 0.12)), rgba(var(--color-sf-error));
   border-color: rgba(var(--color-sf-error));
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-danger-text));
   background: rgba(var(--color-sf-error), 0.12);
   border: 1px solid rgba(var(--color-sf-outline));
@@ -733,7 +794,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn {
   background-color: rgba(var(--color-sf-secondary), 0.12);
   border-color: rgba(var(--color-sf-secondary), 0);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1));
 }
@@ -743,7 +805,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-primary {
   background: rgba(var(--color-sf-secondary), 0.12);
   border-color: rgba(var(--color-sf-secondary), 0);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-primary));
 }
@@ -753,7 +816,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-success {
   background: rgba(var(--color-sf-secondary), 0.12);
   border-color: rgba(var(--color-sf-secondary), 0);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-success));
 }
@@ -763,7 +827,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-info {
   background: rgba(var(--color-sf-secondary), 0.12);
   border-color: rgba(var(--color-sf-secondary), 0);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-info));
 }
@@ -773,7 +838,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-warning {
   background: rgba(var(--color-sf-secondary), 0.12);
   border-color: rgba(var(--color-sf-secondary), 0);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-warning));
 }
@@ -783,7 +849,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-danger {
   background: rgba(var(--color-sf-secondary), 0.12);
   border-color: rgba(var(--color-sf-secondary), 0);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-error));
 }
@@ -793,7 +860,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-link {
   color: rgba(var(--color-sf-on-surface), 0.38);
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   text-decoration: none;
   border-color: transparent;
 }
@@ -803,7 +871,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline {
   background: transparent;
   border-color: rgba(var(--color-sf-secondary), 0.12);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-outline));
 }
@@ -813,7 +882,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-primary {
   background: transparent;
   border-color: rgba(var(--color-sf-secondary), 0.12);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-primary));
 }
@@ -823,7 +893,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
   background: transparent;
   border-color: rgba(var(--color-sf-secondary), 0.12);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-success));
 }
@@ -833,7 +904,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
   background: transparent;
   border-color: rgba(var(--color-sf-secondary), 0.12);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-info));
 }
@@ -843,7 +915,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
   background: transparent;
   border-color: rgba(var(--color-sf-secondary), 0.12);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-warning));
 }
@@ -853,7 +926,8 @@
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
   background: transparent;
   border-color: rgba(var(--color-sf-secondary), 0.12);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: rgba(var(--color-sf-on-surface), 0.38);
   border-color: rgba(var(--color-sf-error));
 }