@syncfusion/ej2-splitbuttons 33.2.3 → 34.1.29

package/styles/bds-lite.css

@@ -2,66 +2,6 @@
 
 
 
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-/* stylelint-disable-line no-empty-source */
 .e-dropdown-popup {
   position: absolute;
   border-radius: 8px;
@@ -109,10 +49,6 @@
   content: "\e729";
 }
 
-
-
-
-
 /* stylelint-disable */
 .e-btn.e-primary:focus {
   -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
@@ -172,51 +108,6 @@
   font-weight: 600;
 }
 
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  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;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
 .e-dropdown-btn,
 .e-dropdown-btn.e-btn {
   -webkit-box-shadow: none;
@@ -380,114 +271,6 @@
   display: block !important; /* stylelint-disable-line declaration-no-important */
 }
 
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  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;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
 .e-dropdown-popup {
   background: var(--color-sf-bg-primary-alt);
   color: var(--color-sf-utility-secondary-text-color);
@@ -512,141 +295,33 @@
   color: var(--color-sf-text-primary);
 }
 .e-dropdown-popup ul .e-item:active .e-menu-url, .e-dropdown-popup ul .e-item.e-selected .e-menu-url {
-  color: var(--color-sf-text-primary);
-}
-.e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon {
-  color: var(--color-sf-text-primary);
-}
-.e-dropdown-popup ul .e-separator {
-  border-bottom-color: var(--color-sf-border-secondary);
-}
-
-.e-dropdown-btn.e-inherit,
-.e-dropdown-btn.e-btn.e-inherit {
-  background: inherit;
-  border-color: transparent;
-  -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,
-.e-dropdown-btn.e-btn.e-inherit:hover,
-.e-dropdown-btn.e-btn.e-inherit:focus,
-.e-dropdown-btn.e-btn.e-inherit:active,
-.e-dropdown-btn.e-btn.e-inherit.e-active {
-  background: rgba(0, 0, 0, 0.056);
-  border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  color: inherit;
-}
-
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  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;
-  margin: 0 6px;
-  border-radius: 6px;
+  color: var(--color-sf-text-primary);
+}
+.e-dropdown-popup ul .e-item:active .e-menu-icon, .e-dropdown-popup ul .e-item.e-selected .e-menu-icon {
+  color: var(--color-sf-text-primary);
+}
+.e-dropdown-popup ul .e-separator {
+  border-bottom-color: var(--color-sf-border-secondary);
 }
 
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
+.e-dropdown-btn.e-inherit,
+.e-dropdown-btn.e-btn.e-inherit {
+  background: inherit;
+  border-color: transparent;
+  -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,
+.e-dropdown-btn.e-btn.e-inherit:hover,
+.e-dropdown-btn.e-btn.e-inherit:focus,
+.e-dropdown-btn.e-btn.e-inherit:active,
+.e-dropdown-btn.e-btn.e-inherit.e-active {
+  background: rgba(0, 0, 0, 0.056);
+  border-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  color: inherit;
 }
 
 .e-split-btn-wrapper {
@@ -821,114 +496,6 @@
   border-top-left-radius: 0;
 }
 
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
-.e-dropdown-popup {
-  position: absolute;
-  border-radius: 8px;
-  margin-top: 4px;
-}
-
-.e-dropdown-popup ul {
-  border: 1px solid var(--color-sf-border-secondary);
-  border-radius: 8px;
-  -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-          box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-size: 14px;
-  font-weight: 500;
-  list-style-image: none;
-  list-style-position: outside;
-  list-style-type: none;
-  margin: 0;
-  min-width: 120px;
-  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;
-  margin: 0 6px;
-  border-radius: 6px;
-}
-
-.e-dropdown-popup ul .e-item.e-url {
-  padding: 0;
-}
-
 .e-split-btn-wrapper .e-split-btn {
   border-right-color: var(--color-sf-utility-secondary-border-color);
 }
@@ -1027,69 +594,6 @@
   border-color: transparent;
 }
 
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
 /* stylelint-disable */
 *.e-btn-group,
 *.e-css.e-btn-group {
@@ -1290,102 +794,39 @@
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-*.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child,
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-*.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child,
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child {
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
-}
-*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl,
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl {
-  border-radius: 20px;
-}
-*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type,
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type {
-  border-bottom-right-radius: 20px;
-  border-top-right-radius: 20px;
-}
-*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type,
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type {
-  border-bottom-left-radius: 20px;
-  border-top-left-radius: 20px;
-}
-*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child),
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child),
-*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
+*.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child,
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:first-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
+*.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child,
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical):not(.e-rtl) .e-split-btn-wrapper:last-child .e-btn:last-child {
+  border-bottom-right-radius: 20px;
+  border-top-right-radius: 20px;
 }
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
+*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl,
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl {
+  border-radius: 20px;
 }
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
+*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type,
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type {
+  border-bottom-right-radius: 20px;
+  border-top-right-radius: 20px;
 }
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
+*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type,
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type {
+  border-bottom-left-radius: 20px;
+  border-top-left-radius: 20px;
 }
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
+*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child),
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:last-of-type:not(:last-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
 }
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
+*.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child),
+*.e-css.e-btn-group.e-round-corner:not(.e-vertical).e-rtl .e-btn:first-of-type:not(:first-child) {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 
 /* stylelint-disable */
@@ -1945,110 +1386,6 @@
   border-color: #b32218;
   outline-color: inherit;
 }
-/* stylelint-disable property-no-vendor-prefix */
-@-webkit-keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes material-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@keyframes fabric-spinner-rotate {
-  0% {
-    -webkit-transform: rotate(0);
-    transform: rotate(0);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
 .e-progress-btn {
   position: relative;
 }
@@ -2348,81 +1685,25 @@
   }
 }
 
-
-
-
-
-/* stylelint-disable */
-.e-btn.e-primary:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-success:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
-}
-
-.e-btn.e-info:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
-}
-
-.e-btn.e-warning:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
-}
-
-.e-btn.e-danger:focus {
-  -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-          box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
-}
-
-.e-btn.e-outline.e-info {
-  background: transparent !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-btn.e-outline.e-info:hover {
-  background: var(--color-sf-utility-info-bg-color-hover) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-outline.e-info:active {
-  background: var(--color-sf-utility-info-bg-color-pressed) !important;
-  border-color: var(--color-sf-utility-info-border-color) !important;
-  color: var(--color-sf-utility-info-text-hover) !important;
-}
-
-.e-btn.e-flat.e-info {
-  color: var(--color-sf-utility-info-text) !important;
-}
-
-.e-bigger .e-btn,
-.e-bigger .e-btn,
-.e-bigger .e-css.e-btn,
-.e-bigger.e-css.e-btn {
-  font-size: 14px;
-  line-height: 1.572em;
-  padding: 8px 15px;
-  border-radius: 8px !important;
-  font-weight: 600;
-}
-
 /*! Progress Button Theme */
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-utility-secondary-text-color);
   stroke: var(--color-sf-utility-secondary-text-color);
 }
+.e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke-width: 3px;
+}
 .e-progress-btn .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-utility-secondary-text-color);
+  stroke-width: 3px;
 }
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-on-brand-solid-primary);
   stroke: var(--color-sf-on-brand-solid-primary);
 }
+.e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
+}
 .e-progress-btn.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-on-brand-solid-primary);
 }
@@ -2430,20 +1711,19 @@
   fill: var(--color-sf-brand-solid-primary);
   stroke: var(--color-sf-brand-solid-primary);
 }
-.e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-base-white);
-}
-.e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: var(--color-sf-brand-solid-primary);
-  stroke: var(--color-sf-brand-solid-primary);
+.e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
 }
-.e-progress-btn.e-primary.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-on-brand-solid-primary);
+.e-progress-btn.e-primary.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-primary.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: #fff;
 }
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-base-white);
   stroke: var(--color-sf-base-white);
 }
+.e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
+}
 .e-progress-btn.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-base-white);
 }
@@ -2451,20 +1731,19 @@
   fill: #057647;
   stroke: #057647;
 }
-.e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #057647;
-}
-.e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #057647;
-  stroke: #057647;
+.e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
 }
-.e-progress-btn.e-success.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-base-white);
+.e-progress-btn.e-success.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-success.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: #fff;
 }
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-utility-info-text);
   stroke: var(--color-sf-utility-info-text);
 }
+.e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(104, 64, 198, 0.2);
+}
 .e-progress-btn.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-utility-info-text);
 }
@@ -2472,20 +1751,19 @@
   fill: var(--color-sf-bg-primary);
   stroke: var(--color-sf-bg-primary);
 }
-.e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-bg-primary);
-}
-.e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: var(--color-sf-bg-primary);
-  stroke: var(--color-sf-bg-primary);
+.e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
 }
-.e-progress-btn.e-info.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-utility-info-text);
+.e-progress-btn.e-info.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-info.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: #fff;
 }
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-base-white);
   stroke: var(--color-sf-base-white);
 }
+.e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
+}
 .e-progress-btn.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-base-white);
 }
@@ -2494,22 +1772,18 @@
   stroke: #b54707;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: #b54707;
+  stroke: rgba(255, 255, 255, 0.2);
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #b54707;
-}
-.e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #b54707;
-  stroke: #b54707;
-}
-.e-progress-btn.e-warning.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-base-white);
+  stroke: #fff;
 }
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-base-white);
   stroke: var(--color-sf-base-white);
 }
+.e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
+}
 .e-progress-btn.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-base-white);
 }
@@ -2517,20 +1791,19 @@
   fill: #d92c20;
   stroke: #d92c20;
 }
-.e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: #d92c20;
-}
-.e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
-  fill: #d92c20;
-  stroke: #d92c20;
+.e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
 }
-.e-progress-btn.e-danger.e-outline:hover .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus .e-spinner-pane .e-spinner-inner svg .e-path-arc {
-  stroke: var(--color-sf-base-white);
+.e-progress-btn.e-danger.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-danger.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
+  stroke: #fff;
 }
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg {
   fill: var(--color-sf-brand-solid-primary);
   stroke: var(--color-sf-brand-solid-primary);
 }
+.e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(126, 86, 216, 0.2);
+}
 .e-progress-btn.e-outline.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-primary .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-brand-solid-primary);
 }
@@ -2538,6 +1811,9 @@
   fill: #057647;
   stroke: #057647;
 }
+.e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(5, 118, 71, 0.2);
+}
 .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #057647;
 }
@@ -2545,6 +1821,9 @@
   fill: var(--color-sf-bg-primary);
   stroke: var(--color-sf-bg-primary);
 }
+.e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(255, 255, 255, 0.2);
+}
 .e-progress-btn.e-outline.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-info .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-bg-primary);
 }
@@ -2552,6 +1831,9 @@
   fill: #b54707;
   stroke: #b54707;
 }
+.e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(181, 71, 7, 0.2);
+}
 .e-progress-btn.e-outline.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-warning .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #b54707;
 }
@@ -2559,6 +1841,9 @@
   fill: #d92c20;
   stroke: #d92c20;
 }
+.e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(217, 44, 32, 0.2);
+}
 .e-progress-btn.e-outline.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-flat.e-danger .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #d92c20;
 }
@@ -2566,6 +1851,9 @@
   fill: var(--color-sf-brand-primary);
   stroke: var(--color-sf-brand-primary);
 }
+.e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-circle {
+  stroke: rgba(126, 86, 216, 0.2);
+}
 .e-progress-btn.e-link .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: var(--color-sf-brand-primary);
 }
@@ -2584,25 +1872,52 @@
   background: rgba(var(--color-sf-fg-secondary), 0.2);
 }
 
-*.e-flat.e-primary .e-progress,
+*.e-flat.e-primary .e-progress {
+  background: rgba(255, 255, 255, 0.2);
+}
+*.e-flat.e-success .e-progress {
+  background: rgba(255, 255, 255, 0.2);
+}
+*.e-flat.e-info .e-progress {
+  background: rgba(104, 64, 198, 0.2);
+}
+*.e-flat.e-warning .e-progress {
+  background: rgba(255, 255, 255, 0.2);
+}
+*.e-flat.e-danger .e-progress {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+*.e-outline:not(:focus).e-primary .e-progress {
+  background: rgba(126, 86, 216, 0.2);
+}
+*.e-outline:not(:focus).e-success .e-progress {
+  background: rgba(5, 118, 71, 0.2);
+}
+*.e-outline:not(:focus).e-info .e-progress {
+  background: rgba(255, 255, 255, 0.2);
+}
+*.e-outline:not(:focus).e-warning .e-progress {
+  background: rgba(181, 71, 7, 0.2);
+}
+*.e-outline:not(:focus).e-danger .e-progress {
+  background: rgba(217, 44, 32, 0.2);
+}
+
 *.e-flat:not(:focus).e-primary .e-progress {
-  background: rgba(var(--color-sf-on-brand-solid-primary), 1);
+  background: rgba(126, 86, 216, 0.2);
 }
-*.e-flat.e-success .e-progress,
 *.e-flat:not(:focus).e-success .e-progress {
-  background: rgba(var(--color-sf-base-white), 1);
+  background: rgba(5, 118, 71, 0.2);
 }
-*.e-flat.e-info .e-progress,
 *.e-flat:not(:focus).e-info .e-progress {
-  background: rgba(var(--color-sf-utility-info-text), 1);
+  background: rgba(255, 255, 255, 0.2);
 }
-*.e-flat.e-warning .e-progress,
 *.e-flat:not(:focus).e-warning .e-progress {
-  background: rgba(var(--color-sf-base-white), 1);
+  background: rgba(181, 71, 7, 0.2);
 }
-*.e-flat.e-danger .e-progress,
 *.e-flat:not(:focus).e-danger .e-progress {
-  background: rgba(var(--color-sf-base-white), 1);
+  background: rgba(217, 44, 32, 0.2);
 }
 
 .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {