@syncfusion/ej2-splitbuttons 25.2.4 → 26.2.4

package/styles/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;
@@ -115,27 +115,31 @@
   content: "\e70d";
 }
 
-/*! drop-down button layout */
 .e-dropdown-btn,
 .e-dropdown-btn.e-btn {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   text-transform: none;
   white-space: normal;
   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);
   padding: 7px 16px;
 }
 .e-dropdown-btn:focus,
 .e-dropdown-btn.e-btn:focus {
-  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-dropdown-btn:focus-visible,
 .e-dropdown-btn.e-btn:focus-visible {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
 }
 .e-dropdown-btn:active,
 .e-dropdown-btn.e-btn:active {
-  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-dropdown-btn .e-btn-icon,
 .e-dropdown-btn.e-btn .e-btn-icon {
@@ -168,7 +172,6 @@
   line-height: 1;
   padding: 6px 12px;
 }
-
 .e-bigger .e-dropdown-btn .e-btn-icon,
 .e-bigger.e-dropdown-btn .e-btn-icon {
   font-size: 18px;
@@ -194,8 +197,10 @@
 .e-dropdown-popup ul {
   border: 0 solid rgba(var(--color-sf-outline-variant));
   border-radius: 4px;
-  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
+  -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-sizing: border-box;
+          box-sizing: border-box;
   font-size: 14px;
   font-weight: 400;
   list-style-image: none;
@@ -206,18 +211,23 @@
   overflow: hidden;
   padding: 4px 0;
   -webkit-user-select: none;
+     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
 .e-dropdown-popup ul .e-item {
   cursor: pointer;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   height: 32px;
   line-height: 32px;
   padding: 0 12px;
 }
+.e-dropdown-popup ul .e-item.e-separator {
+  padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
 .e-dropdown-popup ul .e-item.e-url {
   padding: 0;
 }
@@ -238,7 +248,8 @@
 .e-dropdown-popup ul .e-item.e-disabled {
   cursor: auto;
   pointer-events: none;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup ul .e-item.e-separator {
   border-bottom-style: solid;
@@ -251,7 +262,8 @@
 }
 .e-dropdown-popup.e-transparent {
   background: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup.e-transparent .e-dropdown-menu {
   border: 0;
@@ -269,7 +281,8 @@
 
 *.e-bigger .e-dropdown-popup ul,
 *.e-bigger.e-dropdown-popup ul {
-  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: 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);
   font-size: 16px;
   max-width: 202px;
   min-width: 112px;
@@ -296,8 +309,8 @@
   line-height: normal;
 }
 
-/*! drop-down button theme */
 .e-dropdown-popup {
+  background: -webkit-gradient(linear, left bottom, left top, from(rgba(var(--color-sf-surface), 1)), to(rgba(var(--color-sf-surface), 1))), rgba(var(--color-sf-surface));
   background: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1)), rgba(var(--color-sf-surface));
   color: rgba(var(--color-sf-on-surface));
 }
@@ -309,7 +322,8 @@
 }
 .e-dropdown-popup ul .e-item.e-focused {
   background: rgba(var(--color-sf-on-surface), 0.04);
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-dropdown-popup ul .e-item:hover {
   background: rgba(var(--color-sf-on-surface), 0.05);
@@ -333,7 +347,8 @@
 .e-dropdown-btn.e-btn.e-inherit {
   background: inherit;
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }
 .e-dropdown-btn.e-inherit:hover, .e-dropdown-btn.e-inherit:focus, .e-dropdown-btn.e-inherit:active, .e-dropdown-btn.e-inherit.e-active,
@@ -343,41 +358,49 @@
 .e-dropdown-btn.e-btn.e-inherit.e-active {
   background: rgba(0, 0, 0, 0.056);
   border-color: transparent;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   color: inherit;
 }
 
-/* stylelint-disable-line no-empty-source */
-/*! splitbutton layout */
 .e-split-btn-wrapper {
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   white-space: nowrap;
+  width: -webkit-min-content;
+  width: -moz-min-content;
   width: min-content;
   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-split-btn-wrapper .e-split-btn {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
   text-transform: none;
   z-index: 1;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-split-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-split-btn:focus-visible {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
 }
 .e-split-btn-wrapper .e-split-btn:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   z-index: 2;
 }
 .e-split-btn-wrapper .e-split-btn.e-top-icon-btn {
@@ -406,12 +429,14 @@
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   margin-left: -1px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   padding-left: 4px;
   padding-right: 4px;
 }
 .e-split-btn-wrapper .e-dropdown-btn:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   z-index: 2;
 }
 .e-split-btn-wrapper .e-dropdown-btn:disabled:focus, .e-split-btn-wrapper .e-dropdown-btn:disabled:hover, .e-split-btn-wrapper .e-dropdown-btn:disabled:active {
@@ -421,22 +446,28 @@
   outline-offset: 0;
 }
 .e-split-btn-wrapper .e-btn:hover {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:focus {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:focus-visible {
-  box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #000000;
+  -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
+          box-shadow: 0 0 0 1px #fff, 0 0 0 3px #000;
 }
 .e-split-btn-wrapper .e-btn:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn:disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper .e-btn.e-inherit:focus, .e-split-btn-wrapper .e-btn.e-inherit:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
   border-bottom-left-radius: 0;
@@ -469,7 +500,8 @@
   border-top-right-radius: 0;
   margin-left: 0;
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-vertical {
   display: inline-block;
@@ -484,7 +516,8 @@
   border-top-right-radius: 100px;
   line-height: 1;
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn .e-icon-top {
   padding-bottom: 4px;
@@ -496,7 +529,8 @@
   margin-left: 0;
   margin-top: -1px;
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper.e-vertical .e-dropdown-btn .e-icon-bottom {
   padding-top: 0;
@@ -514,12 +548,14 @@
 .e-bigger .e-split-btn-wrapper,
 .e-bigger.e-split-btn-wrapper {
   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-bigger .e-split-btn-wrapper .e-split-btn,
 .e-bigger.e-split-btn-wrapper .e-split-btn {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   padding-left: 12px;
   padding-right: 6px;
 }
@@ -594,9 +630,10 @@
   padding-top: 0;
 }
 
-/*! splitbutton theme */
 .e-split-btn-wrapper .e-split-btn {
-  border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, right top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to right, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
   border-width: 0 1px 0 0;
 }
 .e-split-btn-wrapper .e-split-btn:focus {
@@ -612,7 +649,8 @@
   border-color: transparent;
 }
 .e-split-btn-wrapper.e-splitbtn-disabled {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 .e-split-btn-wrapper:hover :not(e-active) .e-split-btn {
   border-right-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1));
@@ -621,7 +659,9 @@
   border-right-color: rgba(var(--color-sf-secondary), 0);
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn {
-  border-image: linear-gradient(to left, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to left, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, right top, left top, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to left, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
   border-width: 0 0 0 1px;
 }
 .e-split-btn-wrapper.e-rtl .e-split-btn:focus {
@@ -647,7 +687,9 @@
   border-left-color: rgba(var(--color-sf-secondary), 0);
 }
 .e-split-btn-wrapper.e-vertical .e-split-btn {
-  border-image: linear-gradient(to bottom, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+  -o-border-image: linear-gradient(to bottom, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
+     border-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(var(--color-sf-surface), 1)), color-stop(75%, rgba(var(--color-sf-outline-variant), 1))) 1;
+     border-image: linear-gradient(to bottom, rgba(var(--color-sf-surface), 1) 25%, rgba(var(--color-sf-outline-variant), 1) 75%) 1;
   border-width: 0 0 2px;
   border-bottom-color: rgba(var(--color-sf-outline-variant));
   border-right-color: linear-gradient(0deg, rgba(var(--color-sf-surface), 1), rgba(var(--color-sf-surface), 1));
@@ -702,14 +744,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 {
@@ -739,8 +785,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;
 }
@@ -749,11 +796,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;
@@ -787,8 +829,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;
 }
@@ -797,11 +840,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;
@@ -829,8 +867,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 {
@@ -937,17 +977,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,
@@ -966,14 +1009,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,
@@ -992,7 +1037,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,
@@ -1001,13 +1047,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,
@@ -1016,12 +1067,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,
@@ -1030,11 +1084,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,
@@ -1043,11 +1100,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,
@@ -1056,11 +1116,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,
@@ -1069,11 +1132,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,
@@ -1087,7 +1153,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,
@@ -1099,7 +1166,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,
@@ -1110,7 +1178,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,
@@ -1121,7 +1190,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,
@@ -1132,7 +1202,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,
@@ -1143,7 +1214,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,
@@ -1154,7 +1226,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,
@@ -1162,12 +1235,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,
@@ -1175,12 +1252,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,
@@ -1188,11 +1268,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,
@@ -1200,11 +1283,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,
@@ -1212,11 +1298,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,
@@ -1224,11 +1313,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,
@@ -1238,7 +1330,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;
 }
@@ -1248,9 +1341,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));
@@ -1263,9 +1358,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));
@@ -1278,9 +1375,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));
@@ -1293,9 +1392,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));
@@ -1308,9 +1409,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));
@@ -1323,7 +1426,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));
 }
@@ -1333,7 +1437,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));
 }
@@ -1343,7 +1448,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));
 }
@@ -1353,7 +1459,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));
 }
@@ -1363,7 +1470,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));
 }
@@ -1373,7 +1481,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));
 }
@@ -1383,7 +1492,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;
 }
@@ -1393,7 +1503,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));
 }
@@ -1403,7 +1514,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));
 }
@@ -1413,7 +1525,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));
 }
@@ -1423,7 +1536,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));
 }
@@ -1433,7 +1547,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));
 }
@@ -1443,7 +1558,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));
 }
@@ -1572,23 +1688,46 @@
 }
 
 /* stylelint-disable property-no-vendor-prefix */
+@-webkit-keyframes material-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
 @keyframes material-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes fabric-spinner-rotate {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes fabric-spinner-rotate {
   0% {
+    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
+    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
-/*! Progress Button Layout */
 .e-progress-btn {
   position: relative;
 }
@@ -1598,9 +1737,11 @@
   opacity: 0;
   position: absolute;
   top: 0;
+  -webkit-transition: opacity 0.3s linear;
   transition: opacity 0.3s linear;
 }
 .e-progress-btn .e-spinner {
+  -webkit-transition: all 0.3s linear;
   transition: all 0.3s linear;
 }
 .e-progress-btn .e-btn-content {
@@ -1633,6 +1774,7 @@
   opacity: 0;
 }
 .e-progress-btn.e-spin-top, .e-progress-btn.e-spin-bottom {
+  -webkit-transition: padding 0.3s linear;
   transition: padding 0.3s linear;
 }
 .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-top .e-btn-content,
@@ -1642,10 +1784,12 @@
   line-height: 1;
 }
 .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-center .e-spinner {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
 .e-progress-btn.e-progress-active:not(.e-hide-spinner).e-spin-left:not(.e-round) .e-spinner {
   padding-right: 12px;
@@ -1731,21 +1875,35 @@
   left: auto;
   position: relative;
   top: auto;
-  transform: none;
+  -webkit-transform: none;
+          transform: none;
 }
 .e-progress-btn .e-cont-animate {
-  -ms-flex-align: center;
-      align-items: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   height: 100%;
-  -ms-flex-pack: center;
-      justify-content: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
 }
+@-webkit-keyframes ProgressSlideLeft {
+  from {
+    left: 0%;
+    opacity: 1;
+  }
+  to {
+    left: -100%;
+    opacity: 0;
+  }
+}
 @keyframes ProgressSlideLeft {
   from {
     left: 0%;
@@ -1756,6 +1914,16 @@
     opacity: 0;
   }
 }
+@-webkit-keyframes ProgressSlideRight {
+  from {
+    left: 0%;
+    opacity: 1;
+  }
+  to {
+    left: 100%;
+    opacity: 0;
+  }
+}
 @keyframes ProgressSlideRight {
   from {
     left: 0%;
@@ -1766,6 +1934,18 @@
     opacity: 0;
   }
 }
+@-webkit-keyframes ProgressSlideUp {
+  from {
+    height: auto;
+    opacity: 1;
+    top: 0;
+  }
+  to {
+    height: auto;
+    opacity: 0;
+    top: -100px;
+  }
+}
 @keyframes ProgressSlideUp {
   from {
     height: auto;
@@ -1778,6 +1958,18 @@
     top: -100px;
   }
 }
+@-webkit-keyframes ProgressSlideDown {
+  from {
+    height: auto;
+    opacity: 1;
+    top: 0;
+  }
+  to {
+    height: auto;
+    opacity: 0;
+    top: 100px;
+  }
+}
 @keyframes ProgressSlideDown {
   from {
     height: auto;
@@ -1790,22 +1982,48 @@
     top: 100px;
   }
 }
+@-webkit-keyframes ProgressZoomIn {
+  from {
+    opacity: 1;
+    -webkit-transform: translate(0, 0) scale(1);
+            transform: translate(0, 0) scale(1);
+  }
+  to {
+    opacity: 0;
+    -webkit-transform: translate(0, 0) scale(3);
+            transform: translate(0, 0) scale(3);
+  }
+}
 @keyframes ProgressZoomIn {
   from {
     opacity: 1;
-    transform: translate(0, 0) scale(1);
+    -webkit-transform: translate(0, 0) scale(1);
+            transform: translate(0, 0) scale(1);
   }
   to {
     opacity: 0;
-    transform: translate(0, 0) scale(3);
+    -webkit-transform: translate(0, 0) scale(3);
+            transform: translate(0, 0) scale(3);
+  }
+}
+@-webkit-keyframes ProgressZoomOut {
+  from {
+    -webkit-transform: translate(0, 0) scale(1);
+            transform: translate(0, 0) scale(1);
+  }
+  to {
+    -webkit-transform: translate(0, 0) scale(0);
+            transform: translate(0, 0) scale(0);
   }
 }
 @keyframes ProgressZoomOut {
   from {
-    transform: translate(0, 0) scale(1);
+    -webkit-transform: translate(0, 0) scale(1);
+            transform: translate(0, 0) scale(1);
   }
   to {
-    transform: translate(0, 0) scale(0);
+    -webkit-transform: translate(0, 0) scale(0);
+            transform: translate(0, 0) scale(0);
   }
 }
 
@@ -2047,7 +2265,10 @@
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
-*.e-danger .e-progress,
+*.e-danger .e-progress {
+  background: rgba(var(--color-sf-on-surface), 0.12);
+}
+
 *.e-info .e-progress {
   background: rgba(var(--color-sf-on-surface), 0.12);
 }