survey-react 1.9.89 → 1.9.91

package/modern.css

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.89
+ * surveyjs - Survey JavaScript library v1.9.91
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -108,7 +108,7 @@ sv-popup {
 }
 
 .sv-popup__body-content {
-  background-color: var(--background, #fff);
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   width: 100%;
   height: 100%;
@@ -124,14 +124,14 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-  padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
+  padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
 }
 .sv-popup.sv-popup--modal .sv-popup__container {
   position: static;
 }
 .sv-popup.sv-popup--modal .sv-popup__body-content {
-  padding: calc(4 * var(--base-unit, 8px));
+  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: auto;
 }
 
@@ -142,26 +142,26 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__container {
   background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
   max-width: 100vw;
-  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--base-unit, 8px));
-  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--base-unit, 8px));
+  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
-  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: unset;
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
   border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
-  background: var(--background, #fff);
-  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
-  padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
-  height: calc(100% - (1 * var(--base-unit, 8px)));
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
+  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(100% - (1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
-  margin-top: calc(2 * var(--base-unit, 8px));
+  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
@@ -193,7 +193,7 @@ sv-popup {
 .sv-popup__scrolling-content *::-webkit-scrollbar {
   height: 6px;
   width: 6px;
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
 .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
@@ -209,22 +209,22 @@ sv-popup {
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--base-unit, 8px))) rotate(180deg);
+  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
 }
 
 .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--base-unit, 8px)), calc(-1 * var(--base-unit, 8px)));
+  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup--show-pointer.sv-popup--right {
-  transform: translate(calc(1 * var(--base-unit, 8px)));
+  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
   transform: translate(-12px, -4px) rotate(-90deg);
 }
 
 .sv-popup--show-pointer.sv-popup--left {
-  transform: translate(calc(-1 * var(--base-unit, 8px)));
+  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
   transform: translate(-4px, -4px) rotate(90deg);
@@ -239,79 +239,42 @@ sv-popup {
   display: block;
   width: 0;
   height: 0;
-  border-left: calc(1 * var(--base-unit, 8px)) solid transparent;
-  border-right: calc(1 * var(--base-unit, 8px)) solid transparent;
-  border-bottom: calc(1 * var(--base-unit, 8px)) solid var(--background, #fff);
+  border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
   align-self: center;
 }
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(4 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   font-style: normal;
   font-weight: 700;
-  margin-bottom: calc(2 * var(--base-unit, 8px));
+  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
   display: flex;
-  margin-top: calc(4 * var(--base-unit, 8px));
+  margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-popup__body-footer .sv-action-bar {
-  gap: calc(1.5 * var(--base-unit, 8px));
+  gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-popup__button {
-  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
-  background: var(--background, #fff);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  margin: 2px;
-  cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
-  font-style: normal;
-  font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
-  text-align: center;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border: none;
-  outline: none;
-}
-
-.sv-popup__button:hover {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
-}
-
-.sv-popup__button:disabled {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
-  cursor: default;
-}
-
-.sv-popup__button:disabled:hover {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-.sv-popup__button--apply {
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
-}
-
-.sv-popup__button--apply:disabled {
-  background-color: var(--background-dim, #f3f3f3);
+  margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-popup--modal .sv-list__filter,
 .sv-popup--overlay .sv-list__filter {
-  padding-top: calc(1 * var(--base-unit, 8px));
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--modal .sv-list__filter-icon,
 .sv-popup--overlay .sv-list__filter-icon {
-  top: calc(2.5 * var(--base-unit, 8px));
+  top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-dropdown-popup.sv-popup--overlay {
@@ -330,8 +293,8 @@ sv-popup {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
-  padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
-  border-radius: calc(12.5 * var(--base-unit, 8px));
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -343,43 +306,43 @@ sv-popup {
   height: calc(var(--sv-popup-overlay-height, 100vh));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
-  background-color: var(--background-dim-light, #f9f9f9);
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   margin-top: 0;
-  padding-top: calc(0.5 * var(--base-unit, 8px));
-  padding-bottom: calc(0.5 * var(--base-unit, 8px));
+  padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  width: calc(2 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
+  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
   padding: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
+  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
-  padding: calc(1 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px));
-  background-color: var(--background, #fff);
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
@@ -387,32 +350,32 @@ sv-popup {
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
-  height: calc(3 * var(--base-unit, 8px));
-  width: calc(3 * var(--base-unit, 8px));
-  padding: calc(0.5 * var(--base-unit, 8px));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   appearance: none;
   border: none;
   border-radius: 100%;
   background-color: transparent;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
-  height: calc(2 * var(--base-unit, 8px));
-  width: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   font-family: var(--font-family);
-  padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
-  background: var(--background, #fff);
+  background: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
@@ -429,17 +392,17 @@ sv-popup {
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
-  --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--base-unit, 8px) * 8);
-  --sv-popup-overlay-max-width: calc(100% - var(--base-unit, 8px) * 8);
+  --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
+  --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   position: absolute;
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--base-unit, 8px));
+  min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: auto;
   width: auto;
-  min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
+  min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   overflow: hidden;
@@ -468,7 +431,7 @@ sv-popup {
   display: inline-block;
   vertical-align: top;
   margin-top: 22px;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -479,7 +442,7 @@ sv-popup {
   display: inline-block;
   vertical-align: top;
   margin-top: 22px;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   width: 16px;
   height: 16px;
   cursor: pointer;
@@ -507,7 +470,7 @@ sv-popup {
 
 .sv_progress-buttons__list li {
   width: 138px;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-family: var(--font-family, var(--font-family));
   position: relative;
   text-align: center;
@@ -594,9 +557,9 @@ sv-popup {
 
 .sv-container-modern {
   color: var(--text-color, #404040);
-  font-size: var(--font-size, var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: var(--font-size, var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-family: var(--font-family, var(--font-family));
-  margin-bottom: calc(10 * var(--base-unit, 8px));
+  margin-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-container-modern__title {
@@ -643,6 +606,10 @@ sv-popup {
   margin: 0;
 }
 
+.sv-body {
+  width: 100%;
+}
+
 .sv-body__timer,
 .sv-body__page,
 .sv-body__footer.sv-footer.sv-action-bar {
@@ -666,7 +633,7 @@ sv-popup {
 }
 
 .sv-body__timer {
-  padding: 0 calc(1 * var(--base-unit, 8px));
+  padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
 }
 
@@ -2487,11 +2454,11 @@ select.sv-dropdown {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-separator {
-  margin: 0 calc(1 * var(--base-unit, 8px));
+  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-separator {
-  margin: 0 calc(0.5 * var(--base-unit, 8px));
+  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action-bar-item {
@@ -2499,7 +2466,7 @@ select.sv-dropdown {
   -moz-appearance: none;
   appearance: none;
   display: flex;
-  padding: calc(1 * var(--base-unit, 8px));
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
   border: none;
   border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
@@ -2516,17 +2483,17 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-item {
-  height: calc(5 * var(--base-unit, 8px));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
-  margin: 0 calc(1 * var(--base-unit, 8px));
+  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item {
-  height: calc(4 * var(--base-unit, 8px));
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(2 * var(--base-unit, 8px));
-  margin: 0 calc(0.5 * var(--base-unit, 8px));
+  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action:first-of-type .sv-action-bar-item {
@@ -2538,11 +2505,11 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon {
-  margin-inline-start: calc(1 * var(--base-unit, 8px));
+  margin-inline-start: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon {
-  margin-inline-start: calc(0.5 * var(--base-unit, 8px));
+  margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-action-bar-item__icon svg {
@@ -2555,7 +2522,7 @@ button.sv-action-bar-item {
 .sv-action-bar-item:not(.sv-action-bar-item--pressed):hover:enabled,
 .sv-action-bar-item:not(.sv-action-bar-item--pressed):focus:enabled {
   outline: none;
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
 .sv-action-bar-item--active.sv-action-bar-item--pressed:focus, .sv-action-bar-item--active.sv-action-bar-item--pressed:focus-visible {
@@ -2578,7 +2545,7 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar-item--secondary .sv-action-bar-item__icon use {
-  fill: var(--secondary, #ff9814);
+  fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
 }
 
 .sv-action-bar-item--active .sv-action-bar-item__icon use {
@@ -2590,15 +2557,15 @@ button.sv-action-bar-item {
   -moz-appearance: none;
   appearance: none;
   display: flex;
-  height: calc(5 * var(--base-unit, 8px));
-  padding: calc(1 * var(--base-unit, 8px));
+  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
   border: none;
   border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
   background-color: transparent;
   cursor: pointer;
-  line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-family: var(--font-family, var(--font-family));
 }
 
@@ -2649,44 +2616,44 @@ button.sv-action-bar-item {
 }
 
 .sv-action-bar-item--pressed:not(.sv-action-bar-item--active) {
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
   opacity: 50%;
 }
 
 .sv-dragged-element-shortcut {
-  height: calc(3 * var(--base-unit, 8px));
-  min-width: calc(12.5 * var(--base-unit, 8px));
-  border-radius: calc(4.5 * var(--base-unit, 8px));
-  background-color: var(--background, #fff);
-  padding: calc(2 * var(--base-unit, 8px));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
+  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   cursor: grabbing;
   position: absolute;
-  z-index: 1000;
+  z-index: 10000;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  padding-left: calc(2.5 * var(--base-unit, 8px));
-  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-matrixdynamic__drag-icon {
-  padding-top: calc(1.75 * var(--base-unit, 8px));
+  padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-matrixdynamic__drag-icon:after {
   content: " ";
   display: block;
-  height: calc(0.75 * var(--base-unit, 8px));
-  width: calc(2.5 * var(--base-unit, 8px));
+  height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: 1px solid #e7e7e7;
   box-sizing: border-box;
-  border-radius: calc(1.25 * var(--base-unit, 8px));
+  border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
   cursor: move;
-  margin-top: calc(1.5 * var(--base-unit, 8px));
+  margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-matrix-row--drag-drop-ghost-mod td {
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
 .sv-matrix-row--drag-drop-ghost-mod td > * {
@@ -2726,7 +2693,7 @@ sv-popup {
 }
 
 .sv-popup__body-content {
-  background-color: var(--background, #fff);
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   width: 100%;
   height: 100%;
@@ -2742,14 +2709,14 @@ sv-popup {
   align-items: center;
   justify-content: center;
   background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
-  padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
+  padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
 }
 .sv-popup.sv-popup--modal .sv-popup__container {
   position: static;
 }
 .sv-popup.sv-popup--modal .sv-popup__body-content {
-  padding: calc(4 * var(--base-unit, 8px));
+  padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: auto;
 }
 
@@ -2760,26 +2727,26 @@ sv-popup {
 .sv-popup--overlay.sv-popup--overlay .sv-popup__container {
   background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
   max-width: 100vw;
-  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--base-unit, 8px));
-  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--base-unit, 8px));
+  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
   width: 100%;
-  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: unset;
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
   max-height: var(--sv-popup-overlay-height, 100vh);
   max-width: 100vw;
   border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
-  background: var(--background, #fff);
-  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
-  padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
-  height: calc(100% - (1 * var(--base-unit, 8px)));
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
+  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(100% - (1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 10 * var(--base-unit, 8px));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
-  margin-top: calc(2 * var(--base-unit, 8px));
+  margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
   width: 100%;
@@ -2811,7 +2778,7 @@ sv-popup {
 .sv-popup__scrolling-content *::-webkit-scrollbar {
   height: 6px;
   width: 6px;
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 .sv-popup__scrolling-content::-webkit-scrollbar-thumb,
 .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
@@ -2827,22 +2794,22 @@ sv-popup {
 }
 
 .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--base-unit, 8px))) rotate(180deg);
+  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
 }
 
 .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
-  transform: translate(calc(-1 * var(--base-unit, 8px)), calc(-1 * var(--base-unit, 8px)));
+  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 
 .sv-popup--show-pointer.sv-popup--right {
-  transform: translate(calc(1 * var(--base-unit, 8px)));
+  transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
   transform: translate(-12px, -4px) rotate(-90deg);
 }
 
 .sv-popup--show-pointer.sv-popup--left {
-  transform: translate(calc(-1 * var(--base-unit, 8px)));
+  transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
 }
 .sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
   transform: translate(-4px, -4px) rotate(90deg);
@@ -2857,79 +2824,42 @@ sv-popup {
   display: block;
   width: 0;
   height: 0;
-  border-left: calc(1 * var(--base-unit, 8px)) solid transparent;
-  border-right: calc(1 * var(--base-unit, 8px)) solid transparent;
-  border-bottom: calc(1 * var(--base-unit, 8px)) solid var(--background, #fff);
+  border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
   align-self: center;
 }
 
 .sv-popup__body-header {
   font-family: Open Sans;
-  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(4 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
   font-style: normal;
   font-weight: 700;
-  margin-bottom: calc(2 * var(--base-unit, 8px));
+  margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 
 .sv-popup__body-footer {
   display: flex;
-  margin-top: calc(4 * var(--base-unit, 8px));
+  margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-popup__body-footer .sv-action-bar {
-  gap: calc(1.5 * var(--base-unit, 8px));
+  gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-popup__button {
-  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
-  background: var(--background, #fff);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-  border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  margin: 2px;
-  cursor: pointer;
-  font-family: var(--font-family, var(--font-family));
-  font-style: normal;
-  font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
-  text-align: center;
-  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  border: none;
-  outline: none;
-}
-
-.sv-popup__button:hover {
-  box-shadow: 0 0 0 2px var(--sjs-primary-backcolor, var(--primary, #19b394));
-}
-
-.sv-popup__button:disabled {
-  color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  opacity: 0.25;
-  cursor: default;
-}
-
-.sv-popup__button:disabled:hover {
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
-}
-
-.sv-popup__button--apply {
-  background-color: var(--sjs-primary-backcolor, var(--primary, #19b394));
-  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
-}
-
-.sv-popup__button--apply:disabled {
-  background-color: var(--background-dim, #f3f3f3);
+  margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-popup--modal .sv-list__filter,
 .sv-popup--overlay .sv-list__filter {
-  padding-top: calc(1 * var(--base-unit, 8px));
+  padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-popup--modal .sv-list__filter-icon,
 .sv-popup--overlay .sv-list__filter-icon {
-  top: calc(2.5 * var(--base-unit, 8px));
+  top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-dropdown-popup.sv-popup--overlay {
@@ -2948,8 +2878,8 @@ sv-popup {
   color: var(--sjs-primary-backcolor, var(--primary, #19b394));
   border: none;
   box-shadow: none;
-  padding: calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
-  border-radius: calc(12.5 * var(--base-unit, 8px));
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   margin: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -2961,43 +2891,43 @@ sv-popup {
   height: calc(var(--sv-popup-overlay-height, 100vh));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
-  background-color: var(--background-dim-light, #f9f9f9);
+  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
   margin-top: 0;
-  padding-top: calc(0.5 * var(--base-unit, 8px));
-  padding-bottom: calc(0.5 * var(--base-unit, 8px));
+  padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
   height: calc(100% - 6 * var(--base-unit, 8px));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
-  width: calc(2 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
+  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
   padding: 0;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list {
   flex-grow: 1;
-  padding: calc(0.5 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
   display: flex;
   align-items: center;
-  padding: calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
   position: static;
-  top: calc(1.5 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
+  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
-  padding: calc(1 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px));
-  background-color: var(--background, #fff);
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
   pointer-events: none;
@@ -3005,32 +2935,32 @@ sv-popup {
   opacity: 0.25;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
-  height: calc(3 * var(--base-unit, 8px));
-  width: calc(3 * var(--base-unit, 8px));
-  padding: calc(0.5 * var(--base-unit, 8px));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   appearance: none;
   border: none;
   border-radius: 100%;
   background-color: transparent;
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
-  height: calc(2 * var(--base-unit, 8px));
-  width: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   font-family: var(--font-family);
-  padding: calc(0.5 * var(--base-unit, 8px)) 0 calc(0.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item--focused .sv-list__item-body {
-  background: var(--background, #fff);
+  background: var(--sjs-general-backcolor, var(--background, #fff));
 }
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover.sv-list__item--selected .sv-list__item-body,
 .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus.sv-list__item--selected .sv-list__item-body,
@@ -3047,17 +2977,17 @@ sv-popup {
 }
 
 .sv-dropdown-popup.sv-popup--overlay.sv-popup--tablet .sv-popup__body-content {
-  --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--base-unit, 8px) * 8);
-  --sv-popup-overlay-max-width: calc(100% - var(--base-unit, 8px) * 8);
+  --sv-popup-overlay-max-height: calc(var(--sv-popup-overlay-height, 100vh) - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
+  --sv-popup-overlay-max-width: calc(100% - var(--sjs-base-unit, var(--base-unit, 8px)) * 8);
   position: absolute;
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
   max-height: var(--sv-popup-overlay-max-height);
-  min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--base-unit, 8px));
+  min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
   height: auto;
   width: auto;
-  min-width: min(40 * var(--base-unit, 8px), var(--sv-popup-overlay-max-width));
+  min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
   max-width: var(--sv-popup-overlay-max-width);
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
   overflow: hidden;
@@ -3073,7 +3003,7 @@ sv-popup {
   display: flex;
   align-items: center;
   flex-direction: row;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   overflow: auto;
   border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -3091,12 +3021,12 @@ sv-popup {
   align-items: center;
   appearance: none;
   width: 100%;
-  padding: 11px calc(2 * var(--base-unit, 8px));
-  line-height: calc(3 * var(--base-unit, 8px));
+  padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   outline: none;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-weight: 400;
-  background: var(--background, #fff);
+  background: var(--sjs-general-backcolor, var(--background, #fff));
   cursor: pointer;
   overflow: hidden;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3107,12 +3037,12 @@ sv-popup {
 }
 
 .sv-button-group__item--hover:hover {
-  background-color: var(--background-dim, #f3f3f3);
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
 }
 
 .sv-button-group__item-icon {
   display: block;
-  height: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-button-group__item-icon use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3126,7 +3056,7 @@ sv-popup {
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 .sv-button-group__item--selected:hover {
-  background-color: var(--background, #fff);
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sv-button-group__item-decorator {
@@ -3143,7 +3073,7 @@ sv-popup {
 }
 
 .sv-button-group__item-icon + .sv-button-group__item-caption {
-  margin-left: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-button-group__item--disabled {
@@ -3155,7 +3085,7 @@ sv-popup {
   fill: var(--sjs-general-forecolor, var(--foreground, #161616));
 }
 .sv-button-group__item--disabled:hover {
-  background-color: var(--background, #fff);
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sv-button-group:focus-within {
@@ -3211,7 +3141,7 @@ sv-popup {
   background-color: cadetblue;
   padding: 1px;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-style: normal;
   font-weight: 400;
   line-height: 1.42857143;
@@ -3240,7 +3170,7 @@ sv-popup {
 .sv_window_title {
   padding: 8px 14px;
   margin: 0;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
@@ -3257,7 +3187,7 @@ sv-popup {
 .sv_window_title a:link,
 .sv_window_title a:visited {
   text-decoration: none;
-  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(0.875 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-style: normal;
   color: black;
 }
@@ -3278,8 +3208,8 @@ sv-popup {
 
 .sv-brand-info__text {
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: #161616;
 }
 
@@ -3292,8 +3222,8 @@ sv-popup {
 
 .sv-brand-info__terms {
   font-weight: 400;
-  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(2 * var(--base-unit, 8px));
+  font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-brand-info__terms a {
   color: #909090;
@@ -3328,21 +3258,21 @@ sv-popup {
 
 .sv-ranking-item:focus .sv-ranking-item__icon--focus {
   visibility: visible;
-  top: calc(0.6 * var(--base-unit, 8px));
-  height: calc(3 * var(--base-unit, 8px));
+  top: calc(0.6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-item:focus .sv-ranking-item__index {
-  background: var(--background, #fff);
-  outline: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  outline: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
 }
 
 .sv-ranking-item__content.sv-ranking-item__content {
   display: flex;
   align-items: center;
   line-height: 1em;
-  padding: calc(0.5 * var(--base-unit, 8px)) 0px;
-  border-radius: calc(12.5 * var(--base-unit, 8px));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-item__icon-container {
@@ -3351,17 +3281,17 @@ sv-popup {
   top: 0;
   bottom: 0;
   flex-shrink: 0;
-  width: calc(3 * var(--base-unit, 8px));
-  height: calc(4 * var(--base-unit, 8px));
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-item__icon.sv-ranking-item__icon {
   visibility: hidden;
   fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
   position: absolute;
-  top: calc(1 * var(--base-unit, 8px));
-  width: calc(1.75 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
+  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-item__index.sv-ranking-item__index {
@@ -3371,15 +3301,15 @@ sv-popup {
   justify-content: center;
   background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   border-radius: 100%;
-  border: calc(0.25 * var(--base-unit, 8px)) solid transparent;
-  width: calc(5 * var(--base-unit, 8px));
-  height: calc(5 * var(--base-unit, 8px));
-  line-height: calc(3 * var(--base-unit, 8px));
+  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
+  width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-sizing: border-box;
   font-weight: 600;
-  margin-left: calc(0 * var(--base-unit, 8px));
+  margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-ranking-item__index.sv-ranking-item__index.sv-ranking-item__index--empty:empty {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
@@ -3393,9 +3323,9 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
-  margin: 0 calc(2 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
@@ -3405,19 +3335,19 @@ sv-popup {
 
 .sv-ranking-item__ghost.sv-ranking-item__ghost {
   display: none;
-  background-color: var(--background-dim, #f3f3f3);
-  border-radius: calc(12.5 * var(--base-unit, 8px));
-  padding: calc(0.5 * var(--base-unit, 8px)) 0px;
-  width: calc(25 * var(--base-unit, 8px));
-  height: calc(5 * var(--base-unit, 8px));
+  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
+  width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   z-index: 1;
   position: absolute;
-  left: calc(5 * var(--base-unit, 8px));
+  left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 [dir=rtl] .sv-ranking-item__ghost {
   left: initilal;
-  right: calc(5 * var(--base-unit, 8px));
+  right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-item--ghost .sv-ranking-item__ghost {
@@ -3429,8 +3359,8 @@ sv-popup {
 }
 
 .sv-ranking-item--drag .sv-ranking-item__content {
-  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
-  border-radius: calc(12.5 * var(--base-unit, 8px));
+  box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.1);
+  border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
@@ -3478,7 +3408,7 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__text {
-  margin-right: calc(4 * var(--base-unit, 8px));
+  margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon--hover {
@@ -3486,20 +3416,20 @@ sv-popup {
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon {
-  width: calc(1.75 * var(--base-unit, 8px));
-  height: calc(2 * var(--base-unit, 8px));
-  top: calc(1 * var(--base-unit, 8px));
+  width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-ranking-shortcut .sv-ranking-item__icon-container {
-  margin-left: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-list {
   padding: 0;
   margin: 0;
   overflow-y: auto;
-  background: var(--background, #fff);
+  background: var(--sjs-general-backcolor, var(--background, #fff));
   font-family: var(--font-family, var(--font-family));
   list-style-type: none;
 }
@@ -3508,15 +3438,15 @@ sv-popup {
   width: 100%;
   font-family: var(--font-family, var(--font-family));
   box-sizing: border-box;
-  padding: calc(1.5 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
+  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .sv-list__empty-text {
-  line-height: calc(3 * var(--base-unit, 8px));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   font-weight: 400;
   text-align: center;
   color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3537,12 +3467,12 @@ sv-popup {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  padding-block: calc(1 * var(--base-unit, 8px));
-  padding-inline-end: calc(8 * var(--base-unit, 8px));
-  padding-inline-start: calc(2 * var(--base-unit, 8px));
+  padding-block: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -3553,14 +3483,14 @@ sv-popup {
   outline: none;
 }
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
-  border: calc(0.25 * var(--base-unit, 8px)) solid var(--sjs-border-light, var(--border-light, #eaeaea));
+  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
   border-radius: calc(1 * var(--sjs-corner-radius, 4px));
-  padding-block: calc(0.75 * var(--base-unit, 8px));
-  padding-inline-end: calc(7.75 * var(--base-unit, 8px));
-  padding-inline-start: calc(1.75 * var(--base-unit, 8px));
+  padding-block: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-end: calc(7.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
-  margin-inline-start: calc(-0.25 * var(--base-unit, 8px));
+  margin-inline-start: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-list__item:hover,
@@ -3576,16 +3506,16 @@ sv-popup {
   padding: 0;
 }
 .sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
-  padding-top: calc(1.5 * var(--base-unit, 8px));
-  padding-bottom: calc(1.5 * var(--base-unit, 8px));
-  gap: calc(2 * var(--base-unit, 8px));
+  padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
   display: flex;
 }
 
 .sv-list__item-icon {
   float: left;
-  width: calc(3 * var(--base-unit, 8px));
-  height: calc(3 * var(--base-unit, 8px));
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-list__item-icon svg {
   display: block;
@@ -3601,7 +3531,7 @@ sv-popup {
 }
 
 .sv-list__item-separator {
-  margin: calc(1 * var(--base-unit, 8px)) 0;
+  margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
   height: 1px;
   background-color: var(--sjs-border-default, var(--border, #d6d6d6));
 }
@@ -3620,7 +3550,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
 .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-icon use,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-icon use,
 li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
-  fill: var(--background, #fff);
+  fill: var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sv-multi-select-list .sv-list__item.sv-list__item--selected .sv-list__item-body,
@@ -3650,19 +3580,19 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 
 .sv-list__filter {
   border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
-  background: var(--background, #fff);
-  padding-bottom: calc(1 * var(--base-unit, 8px));
+  background: var(--sjs-general-backcolor, var(--background, #fff));
+  padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-list__filter-icon {
   display: block;
   position: absolute;
-  top: calc(1.5 * var(--base-unit, 8px));
-  inset-inline-start: calc(2 * var(--base-unit, 8px));
+  top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  inset-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-list__filter-icon .sv-svg-icon {
-  width: calc(3 * var(--base-unit, 8px));
-  height: calc(3 * var(--base-unit, 8px));
+  width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 .sv-list__filter-icon .sv-svg-icon use {
   fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3673,15 +3603,15 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
   -moz-appearance: none;
   appearance: none;
   display: block;
-  background: var(--background, #fff);
+  background: var(--sjs-general-backcolor, var(--background, #fff));
   box-sizing: border-box;
   width: 100%;
   outline: none;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
-  padding-inline-start: calc(7 * var(--base-unit, 8px));
-  line-height: calc(3 * var(--base-unit, 8px));
+  padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   border: none;
 }
 
@@ -3705,24 +3635,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 .sv-save-data_root {
   position: absolute;
   left: 50%;
-  bottom: calc(3 * var(--base-unit, 8px));
-  background: var(--background, #fff);
+  bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  background: var(--sjs-general-backcolor, var(--background, #fff));
   opacity: 0;
-  padding: calc(3 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
+  padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
   border-radius: calc(2 * var(--sjs-corner-radius, 4px));
   color: var(--sjs-general-forecolor, var(--foreground, #161616));
-  min-width: calc(30 * var(--base-unit, 8px));
+  min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
   text-align: center;
   z-index: 1600;
   font-family: var(--font-family, var(--font-family));
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  transform: translateX(-50%) translateY(calc(3 * var(--base-unit, 8px)));
+  transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
   transition-timing-function: ease-in;
   transition-property: transform, opacity;
   transition-delay: 0.25s;
@@ -3753,31 +3683,31 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
 }
 
 .sv-save-data_root.sv-save-data_error {
-  background-color: var(--red, #e60a3e);
-  color: var(--background, #fff);
+  background-color: var(--sjs-special-red, var(--red, #e60a3e));
+  color: var(--sjs-general-backcolor, var(--background, #fff));
   font-weight: 600;
-  padding: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
-  gap: calc(6 * var(--base-unit, 8px));
+  padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
 }
 
 .sv-save-data_root.sv-save-data_error .sv-save-data_button {
   font-weight: 600;
-  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--base-unit, 8px))));
-  line-height: calc(3 * var(--base-unit, 8px));
-  height: calc(5 * var(--base-unit, 8px));
+  font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
+  line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
+  height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
   color: #ffffff;
-  background-color: var(--red, #e60a3e);
-  border: calc(0.25 * var(--base-unit, 8px)) solid #ffffff;
+  background-color: var(--sjs-special-red, var(--red, #e60a3e));
+  border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
   border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
-  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+  padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
   display: flex;
   align-items: center;
 }
 
 .sv-save-data_root.sv-save-data_error .sv-save-data_button:hover,
 .sv-save-data_root.sv-save-data_error .sv-save-data_button:focus {
-  color: var(--red, #e60a3e);
-  background-color: var(--background, #fff);
+  color: var(--sjs-special-red, var(--red, #e60a3e));
+  background-color: var(--sjs-general-backcolor, var(--background, #fff));
 }
 
 .sv-save-data_root.sv-save-data_success {
@@ -4060,7 +3990,7 @@ body {
 }
 
 .sv-skeleton-element {
-  background-color: var(--background-dim, var(--background-dim, #f3f3f3));
+  background-color: var(--background-dim, var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3)));
 }
 
 /*# sourceMappingURL=modern.css.map*/