survey-creator-core 1.9.109 → 1.9.111

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * SurveyJS Creator v1.9.109
2
+ * SurveyJS Creator v1.9.111
3
3
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * Github: https://github.com/surveyjs/survey-creator
5
5
  * License: https://surveyjs.io/Licenses#SurveyCreator
@@ -225,14 +225,14 @@
225
225
  }
226
226
 
227
227
  /*# sourceMappingURL=fonts.fontless.css.map*//*!
228
- * SurveyJS Creator v1.9.109
228
+ * SurveyJS Creator v1.9.111
229
229
  * (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
230
230
  * Github: https://github.com/surveyjs/survey-creator
231
231
  * License: https://surveyjs.io/Licenses#SurveyCreator
232
232
  */
233
233
  .svc-context-container {
234
234
  display: flex;
235
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
235
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
236
236
  width: max-content;
237
237
  }
238
238
 
@@ -241,10 +241,10 @@
241
241
  box-sizing: border-box;
242
242
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
243
243
  border-radius: 50%;
244
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
245
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
244
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
245
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
246
246
  cursor: pointer;
247
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
247
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
248
248
  outline: none;
249
249
  }
250
250
  .svc-context-button use {
@@ -345,13 +345,13 @@ svc-tab-json-editor-textarea {
345
345
 
346
346
  .svc-json-error {
347
347
  font-family: var(--font-family);
348
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
349
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
350
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
348
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
349
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
350
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
351
351
  background: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
352
352
  display: flex;
353
353
  align-items: center;
354
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
354
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
355
355
  }
356
356
 
357
357
  .svc-json-errors__item:not(:first-of-type) .svc-json-error {
@@ -373,7 +373,7 @@ svc-tab-json-editor-textarea {
373
373
 
374
374
  .svc-json-error__container {
375
375
  display: flex;
376
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
376
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
377
377
  }
378
378
 
379
379
  .svc-json-error__title {
@@ -385,19 +385,19 @@ svc-tab-json-editor-textarea {
385
385
  flex-grow: 0;
386
386
  flex-shrink: 0;
387
387
  pointer-events: all;
388
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
389
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
390
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
388
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
389
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
390
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
391
391
  background: var(--sjs-general-backcolor, var(--background, #fff));
392
392
  border: none;
393
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
393
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
394
394
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
395
395
  cursor: pointer;
396
396
  }
397
397
  .svc-json-error__fix-button svg {
398
398
  fill: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
399
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
400
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
399
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
400
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
401
401
  }
402
402
 
403
403
  .svc-json-error__fix-button:hover svg {
@@ -520,6 +520,7 @@ svc-tab-json-editor-textarea {
520
520
  justify-content: center;
521
521
  width: 100%;
522
522
  height: 100%;
523
+ box-shadow: inset 0px -1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
523
524
  }
524
525
 
525
526
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -547,10 +548,10 @@ svc-tab-test {
547
548
  border: 0;
548
549
  }
549
550
  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
550
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
551
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
551
552
  margin-left: auto;
552
553
  margin-right: auto;
553
- margin-bottom: 72px;
554
+ margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
554
555
  margin-top: 8px;
555
556
  }
556
557
 
@@ -573,7 +574,7 @@ svc-tab-test {
573
574
  left: 0;
574
575
  right: 0;
575
576
  justify-content: center;
576
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
577
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
577
578
  }
578
579
  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
579
580
  padding: 0;
@@ -582,13 +583,14 @@ svc-tab-test {
582
583
  margin: 0;
583
584
  }
584
585
  .svc-test-tab__content-actions .sv-action-bar-item {
585
- font-family: var(--font-family, var(--font-family));
586
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
587
+ font-family: var(--font-family);
586
588
  font-style: normal;
587
589
  font-weight: 600;
588
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
589
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
590
+ font-size: calc(0.75 * var(--small-bold-font-size));
591
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
590
592
  width: 100%;
591
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
593
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
592
594
  }
593
595
  .svc-test-tab__content-actions .svc-page-selector {
594
596
  max-width: 50%;
@@ -605,7 +607,7 @@ svc-tab-test {
605
607
  font-family: var(--font-family);
606
608
  font-style: normal;
607
609
  font-weight: 400;
608
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
610
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
609
611
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
610
612
  text-align: center;
611
613
  overflow: hidden;
@@ -623,15 +625,15 @@ svc-tab-test {
623
625
  }
624
626
 
625
627
  .sl-table__cell.st-table__cell--actions:first-of-type .sv-action-bar {
626
- margin-top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
627
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
628
+ margin-top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
629
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
628
630
  }
629
631
 
630
632
  .sl-table .sl-table__detail-button.sl-table__detail-button {
631
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
632
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
633
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
634
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
633
635
  box-sizing: border-box;
634
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
636
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
635
637
  padding: 0;
636
638
  }
637
639
  .sl-table .sl-table__detail-button.sl-table__detail-button:hover:enabled, .sl-table .sl-table__detail-button.sl-table__detail-button.sv-focused--by-key {
@@ -643,8 +645,8 @@ svc-tab-test {
643
645
  }
644
646
 
645
647
  .sl-table__remove-button .sv-action-bar-item {
646
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
647
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
648
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
649
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
648
650
  cursor: pointer;
649
651
  }
650
652
  .sl-table__remove-button .sv-action-bar-item:hover:enabled, .sl-table__remove-button .sv-action-bar-item.sv-focused--by-key {
@@ -666,8 +668,8 @@ svc-tab-test {
666
668
 
667
669
  .sl-table__row #remove-row .sv-action-bar-item {
668
670
  border: none;
669
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
670
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
671
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
672
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
671
673
  }
672
674
  .sl-table__row #remove-row .sv-action-bar-item__icon use {
673
675
  fill: var(--sjs-special-red, var(--red, #e60a3e));
@@ -682,17 +684,18 @@ svc-tab-test {
682
684
  .sl-table__cell .svc-action-button:focus,
683
685
  .sl-table__cell .svc-action-button:hover:enabled,
684
686
  .sl-table__cell .svc-action-button:focus:enabled {
687
+ --medium-bold-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
685
688
  font-family: var(--font-family);
686
689
  font-style: normal;
687
690
  font-weight: bold;
688
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
689
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
691
+ font-size: calc(3 * var(--medium-bold-font-size));
692
+ line-height: calc(4 * var(--medium-bold-font-size));
690
693
  background: transparent;
691
694
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
692
695
  outline: none;
693
696
  border: none;
694
697
  box-shadow: none;
695
- max-height: calc(13.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
698
+ max-height: calc(13.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
696
699
  overflow: hidden;
697
700
  display: -webkit-box;
698
701
  -webkit-line-clamp: 3;
@@ -702,10 +705,10 @@ svc-tab-test {
702
705
  .sl-table__cell {
703
706
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
704
707
  font-weight: bold;
705
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
708
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
706
709
  font-family: var(--font-family);
707
710
  vertical-align: top;
708
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
711
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
709
712
  width: 100%;
710
713
  }
711
714
 
@@ -744,14 +747,14 @@ svc-tab-test {
744
747
  text-align: left;
745
748
  }
746
749
  .sl-table tbody tr:last-of-type .sl-table__cell {
747
- padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
750
+ padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
748
751
  }
749
752
  .sl-table tr:first-of-type .sl-table__cell {
750
- padding-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
753
+ padding-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
751
754
  }
752
755
  .sl-table td:first-of-type,
753
756
  .sl-table th:first-of-type {
754
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
757
+ padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
755
758
  }
756
759
  .sl-table td:first-of-type .sv-action-bar,
757
760
  .sl-table th:first-of-type .sv-action-bar {
@@ -759,7 +762,7 @@ svc-tab-test {
759
762
  }
760
763
  .sl-table td:last-of-type,
761
764
  .sl-table th:last-of-type {
762
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
765
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
763
766
  }
764
767
 
765
768
  .sl-panel .sl-panel__footer {
@@ -773,12 +776,12 @@ svc-tab-test {
773
776
  }
774
777
  .sl-panel .sl-panel__footer button.sl-panel__done-button {
775
778
  width: 100%;
776
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(10 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
779
+ margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
777
780
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
778
781
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
779
782
  font-family: var(--font-family);
780
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
781
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
783
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
784
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
782
785
  display: flex;
783
786
  align-items: center;
784
787
  vertical-align: baseline;
@@ -805,7 +808,7 @@ svc-tab-test {
805
808
  .sl-question {
806
809
  display: flex;
807
810
  align-items: center;
808
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
811
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
809
812
  }
810
813
 
811
814
  .sl-row {
@@ -819,7 +822,7 @@ svc-tab-test {
819
822
  }
820
823
 
821
824
  .sl-question__header--left {
822
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
825
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
823
826
  }
824
827
 
825
828
  .sl-row .sd-scrollable-container:not(.sd-scrollable-container--compact) {
@@ -828,8 +831,8 @@ svc-tab-test {
828
831
 
829
832
  .sl-question__title {
830
833
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
831
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
832
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
834
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
835
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
833
836
  margin: 0;
834
837
  font-weight: 600;
835
838
  }
@@ -838,19 +841,19 @@ svc-tab-test {
838
841
  }
839
842
 
840
843
  .sl-row--multiple .sl-question {
841
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
844
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
842
845
  }
843
846
 
844
847
  .svc-logic-question-value {
845
848
  --sd-base-padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
846
849
  --sd-base-vertical-padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
847
850
  --sd-page-vertical-padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
848
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
849
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
851
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
852
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
850
853
  }
851
854
 
852
855
  .svc-logic_trigger-editor {
853
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
856
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
854
857
  }
855
858
 
856
859
  .svc-logic_trigger-editor .svc-logic-question-value {
@@ -862,7 +865,7 @@ svc-tab-test {
862
865
  }
863
866
 
864
867
  .spg-comment.sl-comment {
865
- height: calc(17 * var(--sjs-base-unit, var(--base-unit, 8px)));
868
+ height: calc(17 * (var(--sjs-base-unit, var(--base-unit, 8px))));
866
869
  }
867
870
  .svc-tab-translation {
868
871
  width: 100%;
@@ -873,15 +876,15 @@ svc-tab-test {
873
876
  .st-properties {
874
877
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
875
878
  flex-grow: 1;
876
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
877
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
878
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
879
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
880
+ padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
881
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
879
882
  }
880
883
  .st-properties .spg-table .spg-table__cell:first-of-type {
881
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
884
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
882
885
  }
883
886
  .st-properties .spg-table .spg-table__question-wrapper {
884
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
887
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
885
888
  }
886
889
  .st-properties .spg-table .spg-table__question-wrapper .spg-checkbox {
887
890
  margin: 0;
@@ -895,10 +898,11 @@ svc-tab-test {
895
898
  }
896
899
 
897
900
  .st-no-strings {
901
+ --center-text-font-size: var(--sjs-base-unit, var(--base-unit, 8px));
898
902
  font-family: var(--font-family);
899
903
  font-style: normal;
900
904
  font-weight: 400;
901
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
905
+ font-size: calc(2 * var(--center-text-font-size));
902
906
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
903
907
  width: 100%;
904
908
  position: absolute;
@@ -935,7 +939,7 @@ svc-tab-test {
935
939
  }
936
940
 
937
941
  .st-property-panel .spg-panel__content .spg-row:first-child {
938
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
942
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
939
943
  }
940
944
 
941
945
  .st-strings-header .st-table__cell {
@@ -949,19 +953,20 @@ svc-tab-test {
949
953
 
950
954
  .st-title.st-panel__title,
951
955
  .st-table__cell.st-table__cell--header {
952
- font-family: var(--font-family, var(--font-family));
956
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
957
+ font-family: var(--font-family);
953
958
  font-style: normal;
954
959
  font-weight: 600;
955
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
956
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
960
+ font-size: calc(0.75 * var(--small-bold-font-size));
961
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
957
962
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
958
963
  text-align: left;
959
964
  }
960
965
 
961
966
  .st-title.st-panel__title {
962
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
963
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
964
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
967
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
968
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
969
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
965
970
  margin: 0;
966
971
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
967
972
  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
@@ -978,26 +983,27 @@ svc-tab-test {
978
983
  box-sizing: border-box;
979
984
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
980
985
  border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
981
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
986
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
982
987
  }
983
988
 
984
989
  td.st-table__cell:first-of-type {
985
- font-family: var(--font-family, var(--font-family));
990
+ --default-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
991
+ font-family: var(--font-family);
986
992
  font-style: normal;
987
993
  font-weight: 600;
988
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
989
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
994
+ font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
995
+ line-height: calc(1.5 * var(--default-bold-font-size));
990
996
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
991
997
  max-width: 300px;
992
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
998
+ padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
993
999
  }
994
1000
  td.st-table__cell:first-of-type span {
995
1001
  display: inline-block;
996
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1002
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
997
1003
  }
998
1004
 
999
1005
  .st-panel-indent .st-table__cell:first-of-type span {
1000
- padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1006
+ padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1001
1007
  }
1002
1008
 
1003
1009
  .st-table {
@@ -1008,10 +1014,11 @@ td.st-table__cell:first-of-type span {
1008
1014
  }
1009
1015
 
1010
1016
  .st-comment {
1011
- font-family: var(--font-family, var(--font-family));
1017
+ --default-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
1018
+ font-family: var(--font-family);
1012
1019
  font-style: normal;
1013
- font-size: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1014
- line-height: calc(1.5 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1020
+ font-size: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
1021
+ line-height: calc(1.5 * var(--default-font-size));
1015
1022
  display: block;
1016
1023
  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1017
1024
  border: unset;
@@ -1023,9 +1030,34 @@ td.st-table__cell:first-of-type span {
1023
1030
  }
1024
1031
 
1025
1032
  .sd-translation-line-skeleton {
1026
- min-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1033
+ min-height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1027
1034
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
1028
1035
  }
1036
+
1037
+ .st-navigation-btn {
1038
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1039
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1040
+ }
1041
+
1042
+ .svc-translation-machine {
1043
+ margin-right: auto;
1044
+ }
1045
+
1046
+ .st-body__footer {
1047
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1048
+ background: var(--sjs-general-backcolor, var(--background, #fff));
1049
+ border-bottom: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
1050
+ }
1051
+
1052
+ .st-translation-dialog .sv-popup__body-header {
1053
+ margin-bottom: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1054
+ }
1055
+
1056
+ .st-translation-dialog .st-root-modern > .sd-root-modern__wrapper {
1057
+ border-radius: 4px;
1058
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1059
+ overflow: hidden;
1060
+ }
1029
1061
  .svc-tab-logic-edit {
1030
1062
  width: 100%;
1031
1063
  height: 100%;
@@ -1057,23 +1089,23 @@ td.st-table__cell:first-of-type span {
1057
1089
  }
1058
1090
 
1059
1091
  .svc-logic-paneldynamic div.svc-logic-operator {
1060
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1092
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1061
1093
  box-sizing: content-box;
1062
1094
  }
1063
1095
 
1064
1096
  .svc-logic-paneldynamic .svc-logic-operator {
1065
1097
  -webkit-appearance: none;
1066
1098
  appearance: none;
1067
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1068
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1099
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1100
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1069
1101
  border: none;
1070
1102
  outline: none;
1071
1103
  font-weight: 600;
1072
1104
  font-family: var(--font-family);
1073
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1105
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1074
1106
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1075
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1076
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1107
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1108
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1077
1109
  cursor: pointer;
1078
1110
  }
1079
1111
  .svc-logic-paneldynamic .svc-logic-operator option {
@@ -1139,11 +1171,11 @@ td.st-table__cell:first-of-type span {
1139
1171
 
1140
1172
  .svc-logic-condition-remove.svc-icon-remove {
1141
1173
  display: none;
1142
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1143
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1174
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1175
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1144
1176
  background-repeat: no-repeat;
1145
1177
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A");
1146
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1178
+ background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1147
1179
  background-position: center;
1148
1180
  }
1149
1181
 
@@ -1158,7 +1190,7 @@ td.st-table__cell:first-of-type span {
1158
1190
  }
1159
1191
 
1160
1192
  .svc-logic-condition-remove-question {
1161
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1193
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1162
1194
  }
1163
1195
 
1164
1196
  .svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
@@ -1172,7 +1204,7 @@ td.st-table__cell:first-of-type span {
1172
1204
  .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn,
1173
1205
  .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn {
1174
1206
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1175
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1207
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1176
1208
  }
1177
1209
  .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover, .svc-logic-operator--action.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:focus,
1178
1210
  .svc-logic-operator--operator.sl-paneldynamic__add-btn.sl-paneldynamic__add-btn:hover,
@@ -1188,17 +1220,17 @@ td.st-table__cell:first-of-type span {
1188
1220
  top: 35%;
1189
1221
  }
1190
1222
  .svc-logic-tab__content.svc-logic-tab__empty .svc-logic-tab__content-action {
1191
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1192
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1223
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1224
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1193
1225
  }
1194
1226
  .svc-logic-tab__content .svc-logic-tab__content-action {
1195
1227
  margin-left: 25%;
1196
1228
  margin-right: 25%;
1197
- margin-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1229
+ margin-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1198
1230
  }
1199
1231
  .svc-logic-tab__content .svc-logic-tab__content-action--disabled {
1200
1232
  cursor: default;
1201
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
1233
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
1202
1234
  }
1203
1235
  .svc-logic-tab__content .svc-logic-tab__content-action--disabled:focus, .svc-logic-tab__content .svc-logic-tab__content-action--disabled:hover {
1204
1236
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -1257,16 +1289,20 @@ td.st-table__cell:first-of-type span {
1257
1289
  white-space: nowrap;
1258
1290
  }
1259
1291
 
1292
+ .sl-list__item-body {
1293
+ padding-block: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1294
+ }
1295
+
1260
1296
  .svc-logic-placeholder {
1261
- width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
1297
+ width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1262
1298
  min-width: 100%;
1263
1299
  max-width: 100%;
1264
1300
  box-sizing: border-box;
1265
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1301
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1266
1302
  background: var(--sjs-general-backcolor, var(--background, #fff));
1267
1303
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1268
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1269
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1304
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1305
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1270
1306
  }
1271
1307
 
1272
1308
  .sv-popup--overlay .svc-logic-placeholder {
@@ -1277,12 +1313,12 @@ td.st-table__cell:first-of-type span {
1277
1313
  font-family: var(--font-family);
1278
1314
  font-style: normal;
1279
1315
  font-weight: 400;
1280
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1281
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1316
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1317
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1282
1318
  text-align: center;
1283
1319
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1284
1320
  display: block;
1285
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1321
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1286
1322
  }
1287
1323
 
1288
1324
  .svc-logic-tab__leave-apply-button {
@@ -1316,7 +1352,7 @@ svc-tab-designer {
1316
1352
  }
1317
1353
 
1318
1354
  .svc-tab-designer--with-place-holder .svc-designer-header {
1319
- min-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
1355
+ min-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1320
1356
  }
1321
1357
 
1322
1358
  .svc-tab-designer .svc-designer-header .sd-container-modern__title {
@@ -1329,14 +1365,14 @@ svc-tab-designer {
1329
1365
  display: flex;
1330
1366
  }
1331
1367
  .svc-tab-designer .sd-container-modern {
1332
- min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
1368
+ min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1333
1369
  width: 100%;
1334
1370
  box-sizing: border-box;
1335
1371
  margin-left: auto;
1336
1372
  margin-right: auto;
1337
1373
  }
1338
1374
  .svc-tab-designer .sd-container-modern.sd-container-modern--static {
1339
- max-width: calc(84 * var(--sjs-base-unit, var(--base-unit, 8px)));
1375
+ max-width: calc(84 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1340
1376
  }
1341
1377
  .svc-tab-designer .sd-container-modern.sd-container-modern--responsive {
1342
1378
  max-width: initial;
@@ -1360,16 +1396,16 @@ svc-tab-designer {
1360
1396
  flex-direction: column;
1361
1397
  align-items: center;
1362
1398
  justify-content: center;
1363
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1399
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1364
1400
  box-sizing: border-box;
1365
1401
  }
1366
1402
 
1367
1403
  .svc-designer-placeholder-page {
1368
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1404
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1369
1405
  }
1370
1406
 
1371
1407
  .svc-designer-placeholder-page .svc-page__footer {
1372
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1408
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1373
1409
  margin: auto;
1374
1410
  }
1375
1411
 
@@ -1390,10 +1426,10 @@ svc-tab-designer {
1390
1426
  margin-left: 0;
1391
1427
  }
1392
1428
  .svc-creator--mobile .svc-question__content--selected .svc-rating-question-controls {
1393
- bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
1429
+ bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1394
1430
  }
1395
1431
  .svc-creator--mobile .svc-page {
1396
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1432
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
1397
1433
  }
1398
1434
  .svc-creator--mobile .svc-page__content {
1399
1435
  padding-left: 0;
@@ -1404,26 +1440,26 @@ svc-tab-designer {
1404
1440
  margin: 0;
1405
1441
  }
1406
1442
  .svc-creator--mobile .svc-page__content.svc-page__content--selected .sd-page__title {
1407
- margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
1443
+ margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
1408
1444
  }
1409
1445
  .svc-creator--mobile .svc-page__content .sd-page {
1410
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1446
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1411
1447
  }
1412
1448
  .svc-creator--mobile .svc-page__content .svc-page__footer {
1413
- margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1414
- margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1449
+ margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1450
+ margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1415
1451
  }
1416
1452
  .svc-creator--mobile .svc-question__content {
1417
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1453
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1418
1454
  }
1419
1455
  .svc-creator--mobile .svc-question__content.svc-question__content--selected {
1420
- padding-bottom: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
1456
+ padding-bottom: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1421
1457
  }
1422
1458
  .svc-creator--mobile .svc-tab-designer {
1423
1459
  justify-content: initial;
1424
1460
  }
1425
1461
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title {
1426
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1462
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1427
1463
  flex-direction: column-reverse;
1428
1464
  align-items: flex-start;
1429
1465
  }
@@ -1431,19 +1467,19 @@ svc-tab-designer {
1431
1467
  margin-top: 0;
1432
1468
  }
1433
1469
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title .svc-logo-image-placeholder {
1434
- margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1435
- margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1470
+ margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1471
+ margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1436
1472
  }
1437
1473
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h3 {
1438
1474
  margin: 0;
1439
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1440
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1475
+ font-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1476
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1441
1477
  }
1442
1478
  .svc-creator--mobile .svc-tab-designer .sd-title.sd-container-modern__title h5 {
1443
1479
  margin: 0;
1444
1480
  }
1445
1481
  .svc-creator--mobile .svc-tab-designer .sd-container-modern {
1446
- min-width: calc(43 * var(--sjs-base-unit, var(--base-unit, 8px)));
1482
+ min-width: calc(43 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1447
1483
  padding: 0;
1448
1484
  }
1449
1485
  .svc-creator--mobile .svc-properties-wrapper {
@@ -1451,13 +1487,13 @@ svc-tab-designer {
1451
1487
  }
1452
1488
  .svc-creator--mobile .svc-question__content-actions {
1453
1489
  width: calc(100% - 3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1454
- left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1490
+ left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1455
1491
  }
1456
1492
  .svc-creator--mobile .svc-question__content-actions .sv-action-bar-item {
1457
1493
  border: 0;
1458
1494
  }
1459
1495
  .svc-creator--mobile .svc-page__content-actions .sv-action-bar {
1460
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1496
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
1461
1497
  }
1462
1498
  .svc-creator--mobile .svc-page__content-actions .sv-action-bar .sv-action .sv-action__content {
1463
1499
  padding-right: 0;
@@ -1484,10 +1520,10 @@ svc-tab-test {
1484
1520
  border: 0;
1485
1521
  }
1486
1522
  .svc-test-tab__content .svc-plugin-tab__content .svc-preview__test-again {
1487
- width: calc(33 * var(--sjs-base-unit, var(--base-unit, 8px)));
1523
+ width: calc(33 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1488
1524
  margin-left: auto;
1489
1525
  margin-right: auto;
1490
- margin-bottom: 72px;
1526
+ margin-bottom: calc(12 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1491
1527
  margin-top: 8px;
1492
1528
  }
1493
1529
 
@@ -1510,7 +1546,7 @@ svc-tab-test {
1510
1546
  left: 0;
1511
1547
  right: 0;
1512
1548
  justify-content: center;
1513
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1549
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
1514
1550
  }
1515
1551
  .svc-test-tab__content-actions .sv-action-bar.sv-action-bar--pages .sv-action__content {
1516
1552
  padding: 0;
@@ -1519,13 +1555,14 @@ svc-tab-test {
1519
1555
  margin: 0;
1520
1556
  }
1521
1557
  .svc-test-tab__content-actions .sv-action-bar-item {
1522
- font-family: var(--font-family, var(--font-family));
1558
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
1559
+ font-family: var(--font-family);
1523
1560
  font-style: normal;
1524
1561
  font-weight: 600;
1525
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1526
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1562
+ font-size: calc(0.75 * var(--small-bold-font-size));
1563
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
1527
1564
  width: 100%;
1528
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1565
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1529
1566
  }
1530
1567
  .svc-test-tab__content-actions .svc-page-selector {
1531
1568
  max-width: 50%;
@@ -1544,23 +1581,24 @@ svc-tab-test {
1544
1581
 
1545
1582
  .svc-notifier {
1546
1583
  position: absolute;
1547
- bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1548
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1584
+ bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1585
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
1549
1586
  background: var(--sjs-general-backcolor, var(--background, #fff));
1550
1587
  opacity: 0;
1551
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1588
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1552
1589
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1553
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1590
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1554
1591
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
1555
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
1592
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1556
1593
  text-align: center;
1557
1594
  z-index: 1600;
1558
1595
  visibility: hidden;
1559
- font-family: var(--font-family, var(--font-family));
1596
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
1597
+ font-family: var(--font-family);
1560
1598
  font-style: normal;
1561
1599
  font-weight: 600;
1562
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1563
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
1600
+ font-size: calc(0.75 * var(--small-bold-font-size));
1601
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
1564
1602
  }
1565
1603
 
1566
1604
  .svc-notifier.svc-notifier--error {
@@ -1571,7 +1609,7 @@ svc-tab-test {
1571
1609
 
1572
1610
  .svc-creator--mobile .svc-notifier {
1573
1611
  left: 0;
1574
- bottom: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
1612
+ bottom: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1575
1613
  width: 100%;
1576
1614
  box-sizing: border-box;
1577
1615
  opacity: 1;
@@ -1674,10 +1712,10 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1674
1712
 
1675
1713
  .svc-creator__banner {
1676
1714
  position: absolute;
1677
- bottom: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1715
+ bottom: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1678
1716
  width: 100%;
1679
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1680
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1717
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1718
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1681
1719
  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
1682
1720
  text-align: center;
1683
1721
  overflow: hidden;
@@ -1691,7 +1729,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1691
1729
  height: 100%;
1692
1730
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1693
1731
  /* Shadow / Medium */
1694
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1732
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1695
1733
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
1696
1734
  transition: max-width 0.1s ease-in-out, padding 0.2s ease-in-out;
1697
1735
  }
@@ -1700,7 +1738,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1700
1738
  color: var(--sjs-primary-forecolor, var(--primary-foreground, #fff));
1701
1739
  font-family: var(--font-family);
1702
1740
  font-weight: bold;
1703
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1741
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1704
1742
  text-transform: uppercase;
1705
1743
  vertical-align: middle;
1706
1744
  }
@@ -1710,9 +1748,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1710
1748
  }
1711
1749
 
1712
1750
  .sv-drag-drop-ghost {
1713
- top: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
1751
+ top: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1714
1752
  width: 100%;
1715
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1753
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1716
1754
  background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
1717
1755
  position: absolute;
1718
1756
  }
@@ -1724,11 +1762,11 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1724
1762
 
1725
1763
  .sv-drag-drop-ghost--item-value-bottom {
1726
1764
  top: initial;
1727
- bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1765
+ bottom: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1728
1766
  }
1729
1767
 
1730
1768
  .sv-list__filter {
1731
- margin-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1769
+ margin-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
1732
1770
  }
1733
1771
  .sd-element__title .svc-string-editor {
1734
1772
  display: inline-block;
@@ -1781,12 +1819,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1781
1819
  z-index: 20;
1782
1820
  padding: 0px;
1783
1821
  vertical-align: top;
1784
- margin-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1785
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1822
+ margin-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1823
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1786
1824
  font-family: var(--font-family);
1787
1825
  font-weight: 400;
1788
1826
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
1789
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1827
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1790
1828
  }
1791
1829
 
1792
1830
  .svc-string-editor__border {
@@ -1800,9 +1838,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1800
1838
  }
1801
1839
 
1802
1840
  .svc-string-editor__error {
1803
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1804
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
1805
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1841
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
1842
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1843
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1806
1844
  color: red;
1807
1845
  display: none;
1808
1846
  }
@@ -1811,9 +1849,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1811
1849
  position: absolute;
1812
1850
  left: 100%;
1813
1851
  height: 100%;
1814
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1852
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1815
1853
  top: 0;
1816
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1854
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1817
1855
  z-index: 12;
1818
1856
  display: none;
1819
1857
  align-items: center;
@@ -1830,9 +1868,9 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1830
1868
  }
1831
1869
 
1832
1870
  .svc-string-editor__button--edit {
1833
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1834
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1835
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1871
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1872
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1873
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
1836
1874
  }
1837
1875
  .svc-string-editor__button--edit .sv-svg-icon {
1838
1876
  vertical-align: bottom;
@@ -1849,26 +1887,26 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1849
1887
  display: flex;
1850
1888
  top: 0;
1851
1889
  bottom: 0;
1852
- left: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1853
- right: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1890
+ left: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1891
+ right: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1854
1892
  border-radius: 3px;
1855
- box-shadow: 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) rgba(0, 0, 0, 0.16);
1893
+ box-shadow: 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) rgba(0, 0, 0, 0.16);
1856
1894
  }
1857
1895
 
1858
1896
  .svc-string-editor:focus-within .svc-string-editor__border {
1859
1897
  display: flex;
1860
- top: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1861
- bottom: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1862
- left: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1863
- right: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
1898
+ top: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1899
+ bottom: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1900
+ left: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1901
+ right: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1864
1902
  border-radius: 3px;
1865
1903
  box-sizing: content-box;
1866
1904
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1867
- box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sjs-primary-backcolor, var(--primary, #19b394));
1905
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-primary-backcolor, var(--primary, #19b394));
1868
1906
  }
1869
1907
 
1870
1908
  .svc-string-editor.svc-string-editor--error:focus-within .svc-string-editor__border {
1871
- box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) var(--sjs-special-red, var(--red, #e60a3e));
1909
+ box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1)), 0px 0px 0px calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-special-red, var(--red, #e60a3e));
1872
1910
  }
1873
1911
 
1874
1912
  .sd-boolean .sv-string-editor:focus-within {
@@ -1876,7 +1914,7 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1876
1914
  }
1877
1915
 
1878
1916
  .sd-rating .sd-rating__item:focus-within {
1879
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1917
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1880
1918
  }
1881
1919
  .sd-rating:not(.sd-rating__min-text) .svc-string-editor:focus-within .svc-string-editor__border {
1882
1920
  display: none;
@@ -1884,12 +1922,12 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1884
1922
 
1885
1923
  .sd-table__cell--actions .svc-string-editor__button--done,
1886
1924
  .sd-matrixdynamic__add-btn .svc-string-editor__button--done {
1887
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1925
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1888
1926
  }
1889
1927
 
1890
1928
  .sd-table__cell--column-title .svc-matrix-cell:not(:focus):focus-within .svc-matrix-cell--selected {
1891
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1892
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1929
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
1930
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1893
1931
  display: block;
1894
1932
  }
1895
1933
  .sd-table__cell--column-title .svc-string-editor:focus-within .svc-string-editor__border {
@@ -1897,8 +1935,8 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1897
1935
  }
1898
1936
 
1899
1937
  .sd-item__control-label .svc-string-editor:focus-within .svc-string-editor__border {
1900
- left: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1901
- right: calc(-0.7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1938
+ left: calc(-0.7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1939
+ right: calc(-0.7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1902
1940
  }
1903
1941
 
1904
1942
  .svc-string-editor:hover ~ .sd-question__required-text, .svc-string-editor:focus-within ~ .sd-question__required-text {
@@ -1907,16 +1945,16 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1907
1945
  .svc-btn {
1908
1946
  display: flex;
1909
1947
  align-items: center;
1910
- height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1911
- line-height: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
1948
+ height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1949
+ line-height: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1912
1950
  vertical-align: baseline;
1913
1951
  text-align: center;
1914
1952
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
1915
1953
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
1916
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1954
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1917
1955
  cursor: pointer;
1918
1956
  user-select: none;
1919
- outline: solid calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) transparent;
1957
+ outline: solid calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) transparent;
1920
1958
  }
1921
1959
  .svc-btn .svc-text {
1922
1960
  display: flex;
@@ -1936,14 +1974,14 @@ survey-creator ::-webkit-scrollbar-thumb:hover,
1936
1974
 
1937
1975
  .svc-action-button {
1938
1976
  display: inline-block;
1939
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1977
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1940
1978
  box-sizing: border-box;
1941
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1979
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1942
1980
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
1943
1981
  font-weight: 600;
1944
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
1945
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1946
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
1982
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1983
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1984
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
1947
1985
  }
1948
1986
  .svc-action-button:focus, .svc-action-button:hover {
1949
1987
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -1966,9 +2004,9 @@ svc-page-navigator,
1966
2004
 
1967
2005
  .svc-page-navigator__navigator-icon {
1968
2006
  display: block;
1969
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1970
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
1971
- padding: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2007
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2008
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2009
+ padding: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1972
2010
  border-radius: 50%;
1973
2011
  cursor: pointer;
1974
2012
  }
@@ -1977,9 +2015,9 @@ svc-page-navigator,
1977
2015
  }
1978
2016
 
1979
2017
  .svc-page-navigator__selector {
1980
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1981
- height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
1982
- min-height: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2018
+ width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2019
+ height: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2020
+ min-height: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
1983
2021
  }
1984
2022
 
1985
2023
  survey-creator .svc-page-navigator__selector:hover, survey-creator .svc-page-navigator__selector:focus,
@@ -2007,20 +2045,20 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
2007
2045
  }
2008
2046
 
2009
2047
  .svc-page-navigator__popup {
2010
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2048
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2011
2049
  }
2012
2050
 
2013
2051
  .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
2014
- margin-right: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2052
+ margin-right: calc(6.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2015
2053
  }
2016
2054
 
2017
2055
  .svc-tab-designer__page-navigator {
2018
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2056
+ width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2019
2057
  position: absolute;
2020
- padding: calc(16.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2058
+ padding: calc(16.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2021
2059
  top: 0;
2022
2060
  bottom: 0;
2023
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2061
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
2024
2062
  }
2025
2063
 
2026
2064
  .svc-creator__toolbox--right .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
@@ -2028,21 +2066,21 @@ survey-creator .svc-page-navigator__selector:hover .svc-page-navigator__navigato
2028
2066
  [style*="direction:rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content,
2029
2067
  [style*="direction: rtl"] .svc-tab-designer--with-page-navigator .svc-tab-designer_content {
2030
2068
  margin-right: 0;
2031
- margin-left: calc(6.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2069
+ margin-left: calc(6.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2032
2070
  }
2033
2071
  .svc-creator__toolbox--right .svc-tab-designer__page-navigator,
2034
2072
  [dir=rtl] .svc-tab-designer__page-navigator,
2035
2073
  [style*="direction:rtl"] .svc-tab-designer__page-navigator,
2036
2074
  [style*="direction: rtl"] .svc-tab-designer__page-navigator {
2037
2075
  right: unset;
2038
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2076
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
2039
2077
  }
2040
2078
  svc-page-navigator-item,
2041
2079
  .svc-page-navigator-item {
2042
2080
  display: block;
2043
- width: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2044
- height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2045
- min-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2081
+ width: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2082
+ height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2083
+ min-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2046
2084
  cursor: pointer;
2047
2085
  position: relative;
2048
2086
  }
@@ -2083,22 +2121,22 @@ svc-page-navigator-item,
2083
2121
  }
2084
2122
 
2085
2123
  .svc-page-navigator-item--selected .svc-page-navigator-item__dot {
2086
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2087
- height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2124
+ width: var(--sjs-base-unit, var(--base-unit, 8px));
2125
+ height: var(--sjs-base-unit, var(--base-unit, 8px));
2088
2126
  right: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
2089
2127
  top: calc(50% - 1.5 * var(--sjs-base-unit, var(--base-unit, 8px)) / 2);
2090
2128
  background: var(--sjs-general-backcolor, var(--background, #fff));
2091
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
2129
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
2092
2130
  }
2093
2131
 
2094
2132
  .svc-page-navigator-item__banner {
2095
2133
  overflow: hidden;
2096
2134
  white-space: nowrap;
2097
2135
  text-overflow: ellipsis;
2098
- right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2136
+ right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2099
2137
  display: flex;
2100
2138
  align-items: center;
2101
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2139
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2102
2140
  animation: 0.5s ease-in;
2103
2141
  padding: 0;
2104
2142
  opacity: 0;
@@ -2107,8 +2145,8 @@ svc-page-navigator-item,
2107
2145
  .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
2108
2146
  position: absolute;
2109
2147
  display: inline-block;
2110
- top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2111
- right: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2148
+ top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2149
+ right: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2112
2150
  }
2113
2151
 
2114
2152
  .svc-creator__toolbox--right .svc-page-navigator-item__banner,
@@ -2123,20 +2161,20 @@ svc-page-navigator-item,
2123
2161
  [style*="direction:rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot,
2124
2162
  [style*="direction: rtl"] .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
2125
2163
  right: unset;
2126
- left: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2164
+ left: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2127
2165
  }
2128
2166
 
2129
2167
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--disabled) .svc-page-navigator-item__banner .svc-page-navigator-item__dot {
2130
- width: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2131
- height: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2168
+ width: var(--sjs-base-unit, var(--base-unit, 8px));
2169
+ height: var(--sjs-base-unit, var(--base-unit, 8px));
2132
2170
  border: none;
2133
2171
  background: var(--sjs-primary-backcolor, var(--primary, #19b394));
2134
2172
  }
2135
2173
 
2136
2174
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
2137
2175
  .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
2138
- padding: 0 calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2139
- max-width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2176
+ padding: 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2177
+ max-width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2140
2178
  opacity: 1;
2141
2179
  }
2142
2180
 
@@ -2148,7 +2186,7 @@ svc-page-navigator-item,
2148
2186
  [style*="direction:rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner,
2149
2187
  [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):hover .svc-page-navigator-item__banner,
2150
2188
  [style*="direction: rtl"] .svc-page-navigator-item-content:not(.svc-page-navigator-item--selected):focus .svc-page-navigator-item__banner {
2151
- padding: 0 calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2189
+ padding: 0 calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2152
2190
  }
2153
2191
 
2154
2192
  .svc-page-navigator-item--disabled .svc-page-navigator-item__banner {
@@ -2160,31 +2198,31 @@ svc-page {
2160
2198
  }
2161
2199
 
2162
2200
  .svc-page {
2163
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2201
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2164
2202
  }
2165
2203
  .svc-page .sd-page__title {
2166
- margin: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 0 0;
2204
+ margin: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 0 0;
2167
2205
  }
2168
2206
 
2169
2207
  .svc-page__content {
2170
2208
  position: relative;
2171
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2172
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2209
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2210
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2173
2211
  box-sizing: border-box;
2174
2212
  width: 100%;
2175
2213
  outline: none;
2176
2214
  }
2177
2215
  .svc-page__content .sd-page {
2178
2216
  margin: 0;
2179
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2217
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2180
2218
  }
2181
2219
 
2182
2220
  .svc-page__content-actions {
2183
2221
  position: absolute;
2184
2222
  display: none;
2185
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2223
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
2186
2224
  inset-inline-end: 0;
2187
- padding: 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2225
+ padding: 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2188
2226
  z-index: 1;
2189
2227
  }
2190
2228
 
@@ -2207,9 +2245,9 @@ svc-page {
2207
2245
 
2208
2246
  .svc-page__footer {
2209
2247
  overflow: visible;
2210
- margin-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2211
- margin-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2212
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2248
+ margin-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2249
+ margin-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2250
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2213
2251
  }
2214
2252
  .svc-page__footer .sv-action {
2215
2253
  flex: 1 1 0;
@@ -2220,20 +2258,20 @@ svc-page {
2220
2258
  }
2221
2259
 
2222
2260
  .svc-page__add-new-question .svc-text {
2223
- margin-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
2261
+ margin-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2224
2262
  }
2225
2263
 
2226
2264
  .svc-page__question-type-selector {
2227
2265
  appearance: none;
2228
2266
  display: flex;
2229
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2230
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2267
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2268
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2231
2269
  box-sizing: border-box;
2232
2270
  border: none;
2233
2271
  border-radius: 2px;
2234
2272
  background-color: transparent;
2235
2273
  cursor: pointer;
2236
- margin-inline-end: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2274
+ margin-inline-end: var(--sjs-base-unit, var(--base-unit, 8px));
2237
2275
  outline: none;
2238
2276
  }
2239
2277
  .svc-page__question-type-selector use {
@@ -2250,8 +2288,8 @@ svc-page {
2250
2288
  content: " ";
2251
2289
  position: absolute;
2252
2290
  background: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
2253
- left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2254
- bottom: calc(11.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2291
+ left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2292
+ bottom: calc(11.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2255
2293
  width: calc(100% - 48px);
2256
2294
  height: 2px;
2257
2295
  }
@@ -2274,9 +2312,9 @@ svc-page {
2274
2312
  flex-wrap: nowrap;
2275
2313
  margin-top: 0;
2276
2314
  padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2277
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2315
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2278
2316
  padding-bottom: 2px;
2279
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2317
+ margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2280
2318
  margin-bottom: -2px;
2281
2319
  }
2282
2320
  .svc-row .sd-row.sd-row--multiple .sd-row--multiple {
@@ -2284,7 +2322,7 @@ svc-page {
2284
2322
  }
2285
2323
 
2286
2324
  .sd-panel .svc-row .sd-row--multiple {
2287
- padding: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
2325
+ padding: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2288
2326
  box-shadow: none;
2289
2327
  border-radius: 0;
2290
2328
  padding: 2px;
@@ -2301,12 +2339,12 @@ svc-page {
2301
2339
  box-shadow: none;
2302
2340
  }
2303
2341
  .svc-row.svc-row--ghost .sd-row {
2304
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2342
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2305
2343
  }
2306
2344
  .svc-row.svc-row--ghost:last-child .sd-row {
2307
2345
  height: initial;
2308
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2309
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2346
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2347
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2310
2348
  }
2311
2349
  .svc-row.svc-row--ghost + .svc-row .sd-page__row {
2312
2350
  margin-top: 0;
@@ -2314,8 +2352,8 @@ svc-page {
2314
2352
 
2315
2353
  .svc-panel .svc-row.svc-row--ghost.svc-row.svc-row--ghost .sd-row {
2316
2354
  height: initial;
2317
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2318
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2355
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2356
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2319
2357
  }
2320
2358
 
2321
2359
  .svc-row--drag-over-top:before {
@@ -2349,13 +2387,13 @@ svc-page {
2349
2387
  .svc-carry-forward-panel {
2350
2388
  box-sizing: border-box;
2351
2389
  width: 100%;
2352
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2353
- border-radius: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2390
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2391
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2354
2392
  background-color: #F8F8F8;
2355
2393
  text-align: center;
2356
2394
  font-weight: 400;
2357
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2358
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2395
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2396
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2359
2397
  color: rgba(0, 0, 0, 0.45);
2360
2398
  }
2361
2399
 
@@ -2403,9 +2441,9 @@ svc-question {
2403
2441
  position: relative;
2404
2442
  width: 100%;
2405
2443
  height: 100%;
2406
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2444
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2407
2445
  box-sizing: border-box;
2408
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2446
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2409
2447
  background: var(--sjs-general-backcolor, var(--background, #fff));
2410
2448
  box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
2411
2449
  outline: none;
@@ -2413,8 +2451,8 @@ svc-question {
2413
2451
 
2414
2452
  .svc-question__content .sd-selectbase:not(.sd-imagepicker) {
2415
2453
  overflow-x: auto;
2416
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2417
- margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2454
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2455
+ margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2418
2456
  }
2419
2457
  .svc-question__content .sd-table .sd-selectbase:not(.sd-imagepicker) {
2420
2458
  overflow-x: visible;
@@ -2445,16 +2483,16 @@ svc-question {
2445
2483
  .svc-question__content-actions {
2446
2484
  position: absolute;
2447
2485
  display: none;
2448
- bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2449
- inset-inline-start: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2450
- inset-inline-end: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2486
+ bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2487
+ inset-inline-start: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2488
+ inset-inline-end: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2451
2489
  }
2452
2490
  .svc-question__content-actions .sv-action--convertTo {
2453
2491
  max-width: max-content;
2454
2492
  }
2455
2493
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item--icon {
2456
2494
  max-width: 100%;
2457
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2495
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2458
2496
  }
2459
2497
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title {
2460
2498
  overflow: hidden;
@@ -2466,9 +2504,9 @@ svc-question {
2466
2504
  .svc-question__content-actions .sv-action--convertTo .sv-action-bar-item__title::after {
2467
2505
  content: " ";
2468
2506
  display: inline-block;
2469
- margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2470
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2471
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2507
+ margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2508
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2509
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2472
2510
  vertical-align: bottom;
2473
2511
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L13 6H3L8 11Z' fill='%23ff9814'/%3E%3C/svg%3E%0A");
2474
2512
  }
@@ -2489,9 +2527,9 @@ svc-question {
2489
2527
  margin-inline-end: auto;
2490
2528
  }
2491
2529
  .svc-question__content-actions .sv-dots {
2492
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2493
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2494
- margin-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2530
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2531
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
2532
+ margin-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2495
2533
  }
2496
2534
  .svc-question__content-actions .sv-dots.sv-action--hidden {
2497
2535
  width: 0;
@@ -2532,17 +2570,17 @@ svc-question {
2532
2570
  }
2533
2571
 
2534
2572
  .svc-question__content .sd-question.sd-question--table {
2535
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2536
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2573
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2574
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2537
2575
  }
2538
2576
 
2539
2577
  .svc-dragged-element-shortcut {
2540
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2541
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2578
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2579
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2542
2580
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2543
2581
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2544
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2545
- padding-right: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2582
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2583
+ padding-right: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2546
2584
  cursor: grabbing;
2547
2585
  position: absolute;
2548
2586
  z-index: 1000;
@@ -2565,19 +2603,20 @@ svc-question {
2565
2603
  }
2566
2604
 
2567
2605
  .svc-dragged-element-shortcut__text {
2568
- font-family: var(--font-family, var(--font-family));
2606
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
2607
+ font-family: var(--font-family);
2569
2608
  font-style: normal;
2570
2609
  font-weight: 600;
2571
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2572
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
2573
- margin-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2574
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2610
+ font-size: calc(0.75 * var(--small-bold-font-size));
2611
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2612
+ margin-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2613
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2575
2614
  }
2576
2615
 
2577
2616
  .svc-dragged-element-shortcut__icon {
2578
2617
  position: absolute;
2579
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2580
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2618
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2619
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2581
2620
  }
2582
2621
 
2583
2622
  .svc-question__content--drag-over-inside .svc-panel__placeholder_frame,
@@ -2725,7 +2764,7 @@ svc-question .sv-action-bar,
2725
2764
  top: 0;
2726
2765
  left: 0;
2727
2766
  visibility: hidden;
2728
- height: calc(3.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2767
+ height: calc(3.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2729
2768
  width: 100%;
2730
2769
  display: flex;
2731
2770
  align-items: center;
@@ -2734,7 +2773,7 @@ svc-question .sv-action-bar,
2734
2773
 
2735
2774
  .svc-question__drag-element {
2736
2775
  width: 100%;
2737
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2776
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2738
2777
  opacity: 0.5;
2739
2778
  }
2740
2779
  .svc-question__drag-element use {
@@ -2790,12 +2829,12 @@ svc-question .sv-action-bar,
2790
2829
  border: 1px dashed var(--sjs-border-default, var(--border, #d6d6d6));
2791
2830
  width: 100%;
2792
2831
  box-sizing: border-box;
2793
- height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
2832
+ height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2794
2833
  display: flex;
2795
2834
  align-items: center;
2796
2835
  justify-content: center;
2797
2836
  flex-direction: column;
2798
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
2837
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2799
2838
  flex-grow: 1;
2800
2839
  }
2801
2840
 
@@ -2808,12 +2847,12 @@ svc-question .sv-action-bar,
2808
2847
 
2809
2848
  .svc-panel__add-new-question {
2810
2849
  align-items: center;
2811
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2850
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2812
2851
  margin-left: 0;
2813
2852
  margin-right: 0;
2814
2853
  width: auto;
2815
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2816
- line-height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2854
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2855
+ line-height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2817
2856
  vertical-align: baseline;
2818
2857
  text-align: center;
2819
2858
  cursor: pointer;
@@ -2829,8 +2868,8 @@ svc-question .sv-action-bar,
2829
2868
  align-items: center;
2830
2869
  flex-grow: 1;
2831
2870
  justify-content: center;
2832
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2833
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2871
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2872
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2834
2873
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2835
2874
  text-wrap: nowrap;
2836
2875
  }
@@ -2838,16 +2877,16 @@ svc-question .sv-action-bar,
2838
2877
  .svc-panel__question-type-selector {
2839
2878
  appearance: none;
2840
2879
  display: flex;
2841
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2842
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2880
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2881
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2843
2882
  box-sizing: border-box;
2844
2883
  border: none;
2845
2884
  border-radius: 2px;
2846
2885
  background-color: transparent;
2847
2886
  cursor: pointer;
2848
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2887
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
2849
2888
  outline: none;
2850
- top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2889
+ top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2851
2890
  margin: 0;
2852
2891
  position: absolute;
2853
2892
  right: 0;
@@ -2867,7 +2906,7 @@ svc-question .sv-action-bar,
2867
2906
  }
2868
2907
 
2869
2908
  .sd-panel .svc-row {
2870
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2909
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2871
2910
  }
2872
2911
  .sd-panel .svc-row:first-of-type {
2873
2912
  margin-top: 0;
@@ -2875,7 +2914,7 @@ svc-question .sv-action-bar,
2875
2914
  .sd-panel .svc-row .sd-row {
2876
2915
  margin-top: 0;
2877
2916
  margin-bottom: 0;
2878
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2917
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
2879
2918
  }
2880
2919
 
2881
2920
  .svc-question__content .sd-element__header--location-top {
@@ -2893,7 +2932,7 @@ svc-question .sv-action-bar,
2893
2932
  padding-top: 0;
2894
2933
  }
2895
2934
  .svc-question__content .sd-table__cell--detail-panel .sd-panel__content {
2896
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2935
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2897
2936
  }
2898
2937
  .svc-question__content .sd-paneldynamic__panel-wrapper {
2899
2938
  padding: 0;
@@ -2907,14 +2946,24 @@ svc-question .sv-action-bar,
2907
2946
  }
2908
2947
 
2909
2948
  .svc-question__content .svc-carry-forward-panel {
2910
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2949
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2911
2950
  }
2912
2951
 
2913
2952
  .svc-question__content--ranking .svc-carry-forward-panel {
2914
2953
  margin-top: 0;
2915
2954
  }
2955
+
2956
+ .svc-required-action .sv-svg-icon use {
2957
+ fill: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
2958
+ }
2959
+
2960
+ .svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:hover,
2961
+ .svc-required-action--active:not(.sv-action-bar-item--pressed):enabled:focus,
2962
+ .svc-required-action--active {
2963
+ background-color: var(--sjs-secondary-backcolor-semi-light, rgba(255, 152, 20, 0.1));
2964
+ }
2916
2965
  .svc-question__dropdown-choices {
2917
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2966
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2918
2967
  }
2919
2968
 
2920
2969
  .svc-question__dropdown-choice--collapsed:nth-last-child(1) {
@@ -2930,14 +2979,14 @@ svc-question .sv-action-bar,
2930
2979
  }
2931
2980
 
2932
2981
  .svc-question__dropdown-choices--wrapper .svc-action-button {
2933
- margin-left: calc(6.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2934
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2982
+ margin-left: calc(6.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2983
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
2935
2984
  cursor: pointer;
2936
2985
  }
2937
2986
  .svc-image-question-controls {
2938
2987
  position: absolute;
2939
- top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2940
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2988
+ top: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2989
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
2941
2990
  display: none;
2942
2991
  }
2943
2992
 
@@ -2946,7 +2995,7 @@ svc-question .sv-action-bar,
2946
2995
  }
2947
2996
 
2948
2997
  .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) {
2949
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(8 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
2998
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
2950
2999
  }
2951
3000
  .svc-question__content--image:not(.svc-question__content--loading):not(.svc-question__content--empty) .sd-image__image {
2952
3001
  border-radius: 0;
@@ -2961,6 +3010,10 @@ svc-question .sv-action-bar,
2961
3010
  display: none;
2962
3011
  }
2963
3012
 
3013
+ .svc-question__content--image .sd-file__choose-btn--text .sv-svg-icon {
3014
+ display: none;
3015
+ }
3016
+
2964
3017
  .svc-question__content--loading .sd-image {
2965
3018
  display: none;
2966
3019
  }
@@ -2969,7 +3022,7 @@ svc-question .sv-action-bar,
2969
3022
  position: relative;
2970
3023
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2971
3024
  width: 100%;
2972
- height: calc(27.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3025
+ height: calc(27.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2973
3026
  border: 1px dashed var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
2974
3027
  }
2975
3028
 
@@ -2992,7 +3045,7 @@ svc-question .sv-action-bar,
2992
3045
  }
2993
3046
 
2994
3047
  .svc-question__content .sd-rating {
2995
- margin-inline-start: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
3048
+ margin-inline-start: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2996
3049
  width: calc(100% - 9 * var(--sjs-base-unit, var(--base-unit, 8px)));
2997
3050
  }
2998
3051
  .svc-question__content .sd-rating.sd-rating--wrappable fieldset {
@@ -3021,13 +3074,13 @@ svc-question .sv-action-bar,
3021
3074
  }
3022
3075
  .svc-question__content .svc-rating-question-controls {
3023
3076
  display: flex;
3024
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3077
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3025
3078
  min-width: auto;
3026
3079
  justify-content: flex-start;
3027
3080
  }
3028
3081
  .svc-question__content .sd-rating__item--fixed-size:focus-within {
3029
3082
  width: unset;
3030
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3083
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3031
3084
  }
3032
3085
 
3033
3086
  .svc-creator--mobile .svc-rating-question-content {
@@ -3052,23 +3105,23 @@ svc-question .sv-action-bar,
3052
3105
  .svc-item-value-wrapper {
3053
3106
  position: relative;
3054
3107
  display: flex;
3055
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3108
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3056
3109
  align-items: center;
3057
- margin-left: calc(-5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3110
+ margin-left: calc(-5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3058
3111
  }
3059
3112
 
3060
3113
  .svc-question__dropdown-choice .svc-item-value-wrapper,
3061
3114
  .sd-selectbase .svc-item-value-wrapper {
3062
3115
  align-items: flex-start;
3063
- min-width: calc(28 * var(--sjs-base-unit, var(--base-unit, 8px)));
3116
+ min-width: calc(28 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3064
3117
  }
3065
3118
  .svc-question__dropdown-choice .svc-item-value__item,
3066
3119
  .sd-selectbase .svc-item-value__item {
3067
- padding-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3120
+ padding-right: var(--sjs-base-unit, var(--base-unit, 8px));
3068
3121
  }
3069
3122
 
3070
3123
  .svc-question__content .sd-selectbase__column {
3071
- margin-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3124
+ margin-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3072
3125
  }
3073
3126
  .svc-question__content .sd-selectbase--mobile .sd-selectbase__column,
3074
3127
  .svc-question__content .sd-selectbase__column:first-of-type,
@@ -3082,9 +3135,9 @@ svc-question .sv-action-bar,
3082
3135
  .svc-item-value--dragging {
3083
3136
  background: var(--sjs-general-backcolor, var(--background, #fff));
3084
3137
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3085
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3086
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3087
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3138
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3139
+ padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3140
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3088
3141
  -moz-user-select: none;
3089
3142
  -webkit-user-select: none;
3090
3143
  -ms-user-select: none;
@@ -3093,8 +3146,8 @@ svc-question .sv-action-bar,
3093
3146
 
3094
3147
  .svc-item-value-controls {
3095
3148
  display: flex;
3096
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3097
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3149
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3150
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3098
3151
  box-sizing: border-box;
3099
3152
  flex-shrink: 0;
3100
3153
  min-width: 72px;
@@ -3103,11 +3156,11 @@ svc-question .sv-action-bar,
3103
3156
 
3104
3157
  .svc-item-value-controls__button {
3105
3158
  border-radius: 50%;
3106
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3159
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
3107
3160
  cursor: pointer;
3108
3161
  display: inline-block;
3109
3162
  outline: none;
3110
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3163
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3111
3164
  box-sizing: content-box;
3112
3165
  }
3113
3166
  .svc-item-value-controls__button .sv-svg-icon {
@@ -3128,7 +3181,7 @@ svc-question .sv-action-bar,
3128
3181
  }
3129
3182
 
3130
3183
  .svc-item-value-controls__drag {
3131
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3184
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
3132
3185
  cursor: move;
3133
3186
  opacity: 0.25;
3134
3187
  }
@@ -3181,7 +3234,7 @@ svc-question .sv-action-bar,
3181
3234
 
3182
3235
  .sv-ranking .svc-item-value-wrapper {
3183
3236
  align-items: center;
3184
- min-width: calc(27 * var(--sjs-base-unit, var(--base-unit, 8px)));
3237
+ min-width: calc(27 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3185
3238
  }
3186
3239
  .sv-ranking .svc-item-value__item {
3187
3240
  padding-right: 0;
@@ -3253,8 +3306,8 @@ svc-question .sv-action-bar,
3253
3306
  .svc-item-value__ghost {
3254
3307
  display: none;
3255
3308
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3256
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3257
- width: calc(25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3309
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3310
+ width: calc(25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3258
3311
  height: 40px;
3259
3312
  z-index: 11;
3260
3313
  position: absolute;
@@ -3284,7 +3337,7 @@ svc-question .sv-action-bar,
3284
3337
  .svc-creator--mobile .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
3285
3338
  .svc-creator--mobile .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
3286
3339
  .svc-creator--mobile .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
3287
- margin-left: calc(-3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3340
+ margin-left: calc(-3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3288
3341
  }
3289
3342
 
3290
3343
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag-icon,
@@ -3295,7 +3348,7 @@ svc-question .sv-action-bar,
3295
3348
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-wrapper,
3296
3349
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-wrapper,
3297
3350
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__dropdown-choices .svc-item-value-wrapper {
3298
- margin-left: calc(-6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3351
+ margin-left: calc(-6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3299
3352
  }
3300
3353
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .svc-question__content--ranking .svc-item-value-controls__drag,
3301
3354
  .svc-creator--touch:not(.svc-creator--mobile) .svc-tab-designer .sd-selectbase .svc-item-value-controls__drag,
@@ -3332,8 +3385,8 @@ svc-question .sv-action-bar,
3332
3385
 
3333
3386
  .svc-image-item-value-controls {
3334
3387
  position: absolute;
3335
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3336
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3388
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3389
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
3337
3390
  }
3338
3391
 
3339
3392
  .svc-image-item-value--new .svc-image-item-value-controls {
@@ -3369,8 +3422,8 @@ svc-question .sv-action-bar,
3369
3422
  display: none;
3370
3423
  cursor: move;
3371
3424
  position: absolute;
3372
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3373
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3425
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3426
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
3374
3427
  }
3375
3428
 
3376
3429
  .svc-question__content--selected .svc-image-item-value-wrapper:hover .svc-image-item-value-controls__drag-area-indicator {
@@ -3393,7 +3446,7 @@ svc-question .sv-action-bar,
3393
3446
  width: 100%;
3394
3447
  }
3395
3448
  .svc-image-item-value--single .sd-imagepicker__image {
3396
- height: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3449
+ height: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3397
3450
  }
3398
3451
 
3399
3452
  .svc-image-item-value__loading {
@@ -3407,20 +3460,20 @@ svc-question .sv-action-bar,
3407
3460
  }
3408
3461
 
3409
3462
  .svc-question__adorner .sd-table .sd-table__cell--column-title {
3410
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3463
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
3411
3464
  }
3412
3465
  .svc-question__adorner .sd-table .sd-table__cell--column-title .svc-matrix-cell {
3413
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3466
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
3414
3467
  }
3415
3468
 
3416
3469
  .svc-matrix-cell--selected {
3417
3470
  position: absolute;
3418
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
3419
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3420
- top: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3421
- left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3422
- right: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3423
- bottom: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3471
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
3472
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3473
+ top: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3474
+ left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3475
+ right: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3476
+ bottom: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3424
3477
  display: none;
3425
3478
  }
3426
3479
  .svc-matrix-cell--selected.svc-visible {
@@ -3428,8 +3481,8 @@ svc-question .sv-action-bar,
3428
3481
  }
3429
3482
 
3430
3483
  .svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
3431
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
3432
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3484
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-secondary-backcolor-light, var(--secondary-light, rgba(255, 152, 20, 0.25)));
3485
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3433
3486
  display: block;
3434
3487
  }
3435
3488
 
@@ -3443,13 +3496,13 @@ svc-question .sv-action-bar,
3443
3496
 
3444
3497
  .svc-matrix-cell__question-controls-button {
3445
3498
  display: block;
3446
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3447
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3499
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3500
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3448
3501
  background: var(--sjs-general-backcolor, var(--background, #fff));
3449
3502
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3450
3503
  box-sizing: border-box;
3451
3504
  border-radius: 50%;
3452
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3505
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3453
3506
  cursor: pointer;
3454
3507
  }
3455
3508
  .svc-matrix-cell__question-controls-button use {
@@ -3462,12 +3515,12 @@ svc-question .sv-action-bar,
3462
3515
 
3463
3516
  .svc-question__content--in-popup {
3464
3517
  width: calc(100% - 25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3465
- min-width: calc(70 * var(--sjs-base-unit, var(--base-unit, 8px)));
3466
- padding: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3518
+ min-width: calc(70 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3519
+ padding: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3467
3520
  }
3468
3521
 
3469
3522
  .svc-matrix-cell__popup .sv-popup__scrolling-content {
3470
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3523
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
3471
3524
  padding-top: 0;
3472
3525
  }
3473
3526
  .svc-matrix-cell__popup .svc-question__content {
@@ -3478,43 +3531,44 @@ svc-question .sv-action-bar,
3478
3531
  }
3479
3532
 
3480
3533
  .svc-question__content .sd-table__cell--detail-panel {
3481
- padding-left: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3534
+ padding-left: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3482
3535
  }
3483
3536
  .svd-test-results {
3484
3537
  font-family: var(--font-family);
3485
- width: 80%;
3486
- margin: auto;
3487
- margin-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3488
- background-color: var(--sjs-general-backcolor, var(--background, #fff));
3489
- box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3490
3538
  border-radius: 4px;
3539
+ box-shadow: inset 0px 1px 0px 0px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3540
+ padding: calc(12 * var(--sjs-base-unit, var(--base-unit, 8px)));
3491
3541
  }
3492
3542
  .svd-test-results .svd-test-results__header {
3493
3543
  display: flex;
3494
3544
  justify-content: space-between;
3495
3545
  align-items: center;
3496
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3497
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3546
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3547
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3498
3548
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3499
3549
  border-bottom: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
3550
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3500
3551
  }
3501
3552
  .svd-test-results .svd-test-results__header .svd-test-results__header-text {
3502
3553
  margin: 0;
3503
3554
  }
3504
3555
  .svd-test-results .svd-test-results__header .svd-test-results__header-types {
3505
3556
  display: flex;
3506
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3557
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
3507
3558
  }
3508
3559
  .svd-test-results .svd-test-results__text {
3509
3560
  display: flex;
3510
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3511
- width: calc(100% - 6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3561
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3562
+ width: calc(100% - 6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3512
3563
  overflow: auto;
3513
3564
  user-select: text;
3514
3565
  white-space: pre-wrap;
3566
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3515
3567
  }
3516
3568
  .svd-test-results .svd-test-results__table {
3569
+ background-color: var(--sjs-general-backcolor, var(--background, #fff));
3517
3570
  width: 100%;
3571
+ box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15));
3518
3572
  }
3519
3573
  .svd-test-results .svd-test-results__table table {
3520
3574
  width: 100%;
@@ -3522,7 +3576,7 @@ svc-question .sv-action-bar,
3522
3576
  }
3523
3577
  .svd-test-results .svd-test-results__table table .svd-test-results__marker {
3524
3578
  position: absolute;
3525
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3579
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3526
3580
  }
3527
3581
  .svd-test-results .svd-test-results__table table .svd-test-results__marker .sv-svg-icon {
3528
3582
  transition: transform 0.2s ease-in-out;
@@ -3535,7 +3589,7 @@ svc-question .sv-action-bar,
3535
3589
  transform: rotate(90deg);
3536
3590
  }
3537
3591
  .svd-test-results .svd-test-results__table table th {
3538
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3592
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
3539
3593
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3540
3594
  text-align: left;
3541
3595
  font-weight: 600;
@@ -3543,11 +3597,11 @@ svc-question .sv-action-bar,
3543
3597
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3544
3598
  }
3545
3599
  .svd-test-results .svd-test-results__table table th:nth-child(1) {
3546
- padding-left: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3600
+ padding-left: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3547
3601
  }
3548
3602
  .svd-test-results .svd-test-results__table table td {
3549
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3550
- max-width: calc(50 * var(--sjs-base-unit, var(--base-unit, 8px)));
3603
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) var(--sjs-base-unit, var(--base-unit, 8px));
3604
+ max-width: calc(50 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3551
3605
  overflow: auto;
3552
3606
  border-top: 2px solid var(--sjs-border-light, var(--border-light, #eaeaea));
3553
3607
  user-select: text;
@@ -3559,7 +3613,7 @@ svc-question .sv-action-bar,
3559
3613
  }
3560
3614
  .svd-test-results .svd-test-results__table table td:nth-child(2) {
3561
3615
  width: 50%;
3562
- padding-right: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3616
+ padding-right: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3563
3617
  }
3564
3618
  .svd-test-results .svd-test-results__table table .survey-result-value {
3565
3619
  word-break: break-all;
@@ -3572,7 +3626,7 @@ svc-question .sv-action-bar,
3572
3626
  }
3573
3627
  .svc-designer-header .sd-container-modern__title {
3574
3628
  gap: 0;
3575
- column-gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3629
+ column-gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3576
3630
  }
3577
3631
 
3578
3632
  .svc-logo-image {
@@ -3585,32 +3639,32 @@ svc-question .sv-action-bar,
3585
3639
  }
3586
3640
  .svc-logo-image .svc-image-item-value-controls {
3587
3641
  display: block;
3588
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3589
- right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3642
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3643
+ right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3590
3644
  }
3591
3645
 
3592
3646
  .svc-logo-image__loading {
3593
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3594
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3595
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3647
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3648
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3649
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
3596
3650
  box-sizing: border-box;
3597
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3651
+ margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3598
3652
  }
3599
3653
 
3600
3654
  .svc-logo-image-placeholder {
3601
- font-size: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3655
+ font-size: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3602
3656
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3603
3657
  opacity: 0.25;
3604
3658
  white-space: nowrap;
3605
3659
  word-break: keep-all;
3606
3660
  padding: 0;
3607
- width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3608
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3661
+ width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3662
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3609
3663
  display: flex;
3610
3664
  justify-content: center;
3611
3665
  align-items: center;
3612
- margin-right: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3613
- border-radius: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3666
+ margin-right: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3667
+ border-radius: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3614
3668
  }
3615
3669
  .svc-logo-image-placeholder:hover {
3616
3670
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
@@ -3620,8 +3674,8 @@ svc-question .sv-action-bar,
3620
3674
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3621
3675
  }
3622
3676
  .svc-logo-image-placeholder svg {
3623
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3624
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3677
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3678
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3625
3679
  }
3626
3680
 
3627
3681
  .svc-logo-image-placeholder use {
@@ -3662,7 +3716,7 @@ svc-question .sv-action-bar,
3662
3716
  }
3663
3717
 
3664
3718
  .svc-link-value-button {
3665
- margin-left: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3719
+ margin-left: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3666
3720
  }
3667
3721
 
3668
3722
  .svc-question-link__clear-button {
@@ -3676,7 +3730,7 @@ svc-question .sv-action-bar,
3676
3730
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
3677
3731
  }
3678
3732
  .svc-property-panel__item {
3679
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3733
+ margin: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
3680
3734
  width: 100%;
3681
3735
  }
3682
3736
  .svc-property-panel__group {
@@ -3684,7 +3738,7 @@ svc-question .sv-action-bar,
3684
3738
  -moz-appearance: none;
3685
3739
  appearance: none;
3686
3740
  width: 100%;
3687
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3741
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3688
3742
  border: none;
3689
3743
  outline: none;
3690
3744
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3693,7 +3747,7 @@ svc-question .sv-action-bar,
3693
3747
  background: var(--sjs-general-backcolor, var(--background, #fff));
3694
3748
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
3695
3749
  font-family: var(--font-family);
3696
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3750
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3697
3751
  }
3698
3752
 
3699
3753
  .svc-property-panel__group:disabled,
@@ -3717,9 +3771,9 @@ svc-question .sv-action-bar,
3717
3771
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3718
3772
  }
3719
3773
  .svc-tabbed-menu-item {
3720
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3721
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3722
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3774
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3775
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3776
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3723
3777
  box-sizing: border-box;
3724
3778
  cursor: pointer;
3725
3779
  }
@@ -3753,7 +3807,7 @@ svc-question .sv-action-bar,
3753
3807
 
3754
3808
  .svc-tabbed-menu-item .svc-tabbed-menu-item__text {
3755
3809
  white-space: nowrap;
3756
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3810
+ line-height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3757
3811
  }
3758
3812
 
3759
3813
  .svc-tabbed-menu-item-container .sv-dots__item {
@@ -3764,7 +3818,7 @@ svc-question .sv-action-bar,
3764
3818
  white-space: nowrap;
3765
3819
  overflow: hidden;
3766
3820
  align-items: center;
3767
- height: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3821
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3768
3822
  }
3769
3823
 
3770
3824
  .svc-tabbed-menu-wrapper {
@@ -3777,12 +3831,12 @@ svc-question .sv-action-bar,
3777
3831
  align-items: center;
3778
3832
  z-index: 20;
3779
3833
  outline: none;
3780
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3834
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3781
3835
  }
3782
3836
  .svc-toolbox__item sv-svg-icon,
3783
3837
  .svc-toolbox__item .sv-svg-icon {
3784
3838
  display: block;
3785
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3839
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3786
3840
  }
3787
3841
 
3788
3842
  .svc-toolbox__item-container {
@@ -3798,13 +3852,13 @@ svc-question .sv-action-bar,
3798
3852
  box-sizing: border-box;
3799
3853
  align-items: center;
3800
3854
  margin-right: 0;
3801
- margin-left: calc(-1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3855
+ margin-left: calc(-1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3802
3856
  }
3803
3857
  .svc-toolbox__item-banner .svc-toolbox__item-icon {
3804
3858
  position: absolute;
3805
3859
  display: block;
3806
- left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3807
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3860
+ left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3861
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3808
3862
  }
3809
3863
  .svc-toolbox__item-banner .svc-toolbox__item-title {
3810
3864
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
@@ -3822,8 +3876,8 @@ svc-question .sv-action-bar,
3822
3876
  [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner,
3823
3877
  [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner {
3824
3878
  flex-direction: row-reverse;
3825
- padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3826
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3879
+ padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3880
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3827
3881
  margin-left: 0;
3828
3882
  margin-right: 0;
3829
3883
  transform: translateX(calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))));
@@ -3836,8 +3890,8 @@ svc-question .sv-action-bar,
3836
3890
  [style*="direction:rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title,
3837
3891
  [style*="direction: rtl"] .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
3838
3892
  [style*="direction: rtl"] .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
3839
- padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3840
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3893
+ padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
3894
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3841
3895
  }
3842
3896
  .svc-creator__toolbox--right .svc-toolbox__item,
3843
3897
  [dir=rtl] .svc-toolbox__item,
@@ -3868,38 +3922,39 @@ svc-question .sv-action-bar,
3868
3922
  [style*="direction:rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon,
3869
3923
  [style*="direction: rtl"] .svc-toolbox__item-banner .svc-toolbox__item-icon {
3870
3924
  left: auto;
3871
- right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3925
+ right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3872
3926
  }
3873
3927
 
3874
3928
  .svc-toolbox__item-title {
3875
- font-family: var(--font-family, var(--font-family));
3929
+ --small-bold-font-size: var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))));
3930
+ font-family: var(--font-family);
3876
3931
  font-style: normal;
3877
3932
  font-weight: 600;
3878
- font-size: calc(0.75 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3879
- line-height: calc(1 * var(--sjs-font-size, calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)))));
3933
+ font-size: calc(0.75 * var(--small-bold-font-size));
3934
+ line-height: var(--sjs-font-size, calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3880
3935
  display: block;
3881
- padding-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3882
- padding-right: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3936
+ padding-left: var(--sjs-base-unit, var(--base-unit, 8px));
3937
+ padding-right: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3883
3938
  white-space: nowrap;
3884
3939
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
3885
3940
  }
3886
3941
 
3887
3942
  .svc-toolbox__item:hover .svc-toolbox__item-banner,
3888
3943
  .svc-toolbox__item:focus .svc-toolbox__item-banner {
3889
- max-width: calc(100 * var(--sjs-base-unit, var(--base-unit, 8px)));
3890
- padding-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3891
- padding-right: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3944
+ max-width: calc(100 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3945
+ padding-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3946
+ padding-right: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3892
3947
  opacity: 1;
3893
3948
  }
3894
3949
  .svc-toolbox__item:hover .svc-toolbox__item-banner .svc-toolbox__item-title,
3895
3950
  .svc-toolbox__item:focus .svc-toolbox__item-banner .svc-toolbox__item-title {
3896
- padding-left: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3951
+ padding-left: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3897
3952
  }
3898
3953
 
3899
3954
  .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):focus,
3900
3955
  .svc-toolbox:not(.svc-toolbox--compact) .svc-toolbox__item:not(.sv-dots):hover {
3901
3956
  overflow: hidden;
3902
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3957
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3903
3958
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
3904
3959
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3905
3960
  transition: 0.1s ease-in-out;
@@ -3917,7 +3972,7 @@ svc-question .sv-action-bar,
3917
3972
  .svc-toolbox__tool .sv-dots__item:focus:enabled,
3918
3973
  .svc-toolbox__tool .sv-dots__item.sv-action-bar-item--pressed {
3919
3974
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3920
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3975
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3921
3976
  }
3922
3977
  .svc-toolbox__tool .sv-dots__item:hover:enabled .sv-svg-icon use,
3923
3978
  .svc-toolbox__tool .sv-dots__item:focus:enabled .sv-svg-icon use,
@@ -3935,10 +3990,10 @@ svc-question .sv-action-bar,
3935
3990
  display: none;
3936
3991
  }
3937
3992
  .svc-toolbox-popup .sv-list__item .sv-list__item-body {
3938
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3939
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3940
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3941
- padding-inline-end: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3993
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3994
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3995
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3996
+ padding-inline-end: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3942
3997
  }
3943
3998
 
3944
3999
  .svc-toolbox .svc-toolbox__tool--pressed .svc-toolbox__item:not(.sv-dots),
@@ -3963,14 +4018,14 @@ svc-toolbox {
3963
4018
 
3964
4019
  .svc-toolbox {
3965
4020
  height: 100%;
3966
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4021
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3967
4022
  box-sizing: border-box;
3968
4023
  overflow-y: auto;
3969
4024
  direction: rtl;
3970
4025
  }
3971
4026
 
3972
4027
  .svc-toolbox--compact {
3973
- width: calc(10.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4028
+ width: calc(10.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3974
4029
  overflow: visible;
3975
4030
  direction: ltr;
3976
4031
  }
@@ -3991,25 +4046,25 @@ svc-toolbox {
3991
4046
  }
3992
4047
 
3993
4048
  .svc-toolbox__tool .sv-dots__item {
3994
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3995
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4049
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4050
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3996
4051
  }
3997
4052
 
3998
4053
  .svc-toolbox__category-separator {
3999
4054
  height: 1px;
4000
- width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4055
+ width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4001
4056
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
4002
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4057
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0 calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4003
4058
  }
4004
4059
 
4005
4060
  .svc-toolbox__category-header {
4006
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4007
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4061
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4062
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4008
4063
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4009
4064
  border-bottom: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4010
4065
  box-sizing: border-box;
4011
4066
  width: 100%;
4012
- min-width: calc(20 * var(--sjs-base-unit, var(--base-unit, 8px)));
4067
+ min-width: calc(20 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4013
4068
  position: relative;
4014
4069
  }
4015
4070
 
@@ -4019,9 +4074,9 @@ svc-toolbox {
4019
4074
 
4020
4075
  .svc-toolbox__category-title {
4021
4076
  font-family: var(--font-family);
4022
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4077
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4023
4078
  font-weight: bold;
4024
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4079
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4025
4080
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4026
4081
  vertical-align: middle;
4027
4082
  display: block;
@@ -4029,8 +4084,8 @@ svc-toolbox {
4029
4084
 
4030
4085
  .svc-toolbox__category-header__controls {
4031
4086
  position: absolute;
4032
- right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4033
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4087
+ right: var(--sjs-base-unit, var(--base-unit, 8px));
4088
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
4034
4089
  display: none;
4035
4090
  }
4036
4091
 
@@ -4047,7 +4102,7 @@ svc-toolbox {
4047
4102
  }
4048
4103
  .svc-toolbox__tool .sv-action__content {
4049
4104
  display: flex;
4050
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4105
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4051
4106
  flex-direction: column;
4052
4107
  align-items: flex-start;
4053
4108
  }
@@ -4090,8 +4145,9 @@ svc-toolbox {
4090
4145
  .svc-side-bar__container-header {
4091
4146
  background: var(--sjs-general-backcolor, var(--background, #fff));
4092
4147
  box-shadow: inset 0px -2px 0px var(--sjs-primary-backcolor, var(--primary, #19b394));
4093
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4148
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4094
4149
  display: flex;
4150
+ height: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4095
4151
  }
4096
4152
 
4097
4153
  .svc-side-bar__container-content {
@@ -4108,7 +4164,7 @@ svc-toolbox {
4108
4164
  flex-direction: column;
4109
4165
  align-items: flex-start;
4110
4166
  width: 100%;
4111
- padding: 0px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4167
+ padding: 0px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4112
4168
  box-sizing: border-box;
4113
4169
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4114
4170
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4116,26 +4172,23 @@ svc-toolbox {
4116
4172
 
4117
4173
  .svc-side-bar__container-title {
4118
4174
  display: flex;
4119
- line-height: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4175
+ line-height: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4120
4176
  flex-grow: 1;
4121
4177
  flex-shrink: 0;
4122
4178
  justify-content: flex-end;
4123
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4179
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4124
4180
  }
4125
4181
 
4126
4182
  .svc-side-bar__container-actions {
4127
4183
  width: 100%;
4128
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4184
+ box-sizing: border-box;
4185
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
4129
4186
  }
4130
4187
  .svc-side-bar__container-actions .sv-action-bar {
4131
4188
  justify-content: flex-end;
4132
4189
  padding: 0;
4133
4190
  }
4134
4191
 
4135
- .svc-side-bar__container-close {
4136
- display: none;
4137
- }
4138
-
4139
4192
  .svc-flex-column.svc-side-bar__wrapper {
4140
4193
  width: auto;
4141
4194
  border-left: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4171,6 +4224,17 @@ svc-toolbox {
4171
4224
  max-width: 100%;
4172
4225
  }
4173
4226
 
4227
+ .sv-action--object-selector {
4228
+ max-width: 70%;
4229
+ }
4230
+ .sv-action--object-selector .sv-action-bar-item {
4231
+ flex-shrink: 1;
4232
+ }
4233
+ .sv-action--object-selector .sv-action-bar-item__title {
4234
+ overflow: hidden;
4235
+ text-overflow: ellipsis;
4236
+ }
4237
+
4174
4238
  .svc-full-container.svc-creator__side-bar--left {
4175
4239
  flex-direction: row-reverse;
4176
4240
  }
@@ -4194,40 +4258,11 @@ svc-toolbox {
4194
4258
  margin-inline-end: auto;
4195
4259
  }
4196
4260
 
4197
- .sv-mobile-side-bar .svc-side-bar__container-actions {
4198
- display: none;
4199
- }
4200
- .sv-mobile-side-bar .svc-side-bar__container-title {
4201
- display: block;
4202
- font-weight: bold;
4203
- font-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4204
- line-height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4205
- flex: unset;
4206
- }
4207
- .sv-mobile-side-bar .svc-side-bar__wrapper {
4208
- top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4209
- background: none;
4210
- }
4211
- .sv-mobile-side-bar .svc-side-bar__container {
4261
+ .sv-mobile-side-bar .svc-flyout-side-bar .svc-side-bar__wrapper {
4212
4262
  width: 100%;
4213
- min-width: 338px;
4214
- }
4215
- .sv-mobile-side-bar .svc-side-bar__container-header {
4216
- border: unset;
4217
- box-shadow: 0px calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4218
- border-radius: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px 0px;
4219
4263
  }
4220
- .sv-mobile-side-bar .svc-side-bar__container-content {
4221
- height: calc(100% - 20 * var(--sjs-base-unit, var(--base-unit, 8px)));
4222
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4223
- }
4224
- .sv-mobile-side-bar .svc-side-bar__container-close {
4225
- display: flex;
4226
- background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4227
- }
4228
- .sv-mobile-side-bar .svc-side-bar__container-close .svc-side-bar__container-close-button {
4264
+ .sv-mobile-side-bar .svc-side-bar__container {
4229
4265
  width: 100%;
4230
- margin: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4231
4266
  }
4232
4267
 
4233
4268
  .svc-side-bar .svc-toolbox {
@@ -4236,7 +4271,7 @@ svc-toolbox {
4236
4271
  .spg-action-bar {
4237
4272
  display: flex;
4238
4273
  box-sizing: content-box;
4239
- padding-right: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4274
+ padding-right: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4240
4275
  position: relative;
4241
4276
  align-items: center;
4242
4277
  margin-left: auto;
@@ -4252,15 +4287,15 @@ svc-toolbox {
4252
4287
  -moz-appearance: none;
4253
4288
  appearance: none;
4254
4289
  display: flex;
4255
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4290
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4256
4291
  box-sizing: border-box;
4257
4292
  border: none;
4258
4293
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4259
4294
  font-weight: 600;
4260
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4261
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4295
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4296
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4262
4297
  font-family: var(--font-family);
4263
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4298
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4264
4299
  background-color: transparent;
4265
4300
  cursor: pointer;
4266
4301
  }
@@ -4291,7 +4326,7 @@ svc-toolbox {
4291
4326
  }
4292
4327
 
4293
4328
  button.spg-action-button--large {
4294
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4329
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4295
4330
  }
4296
4331
 
4297
4332
  .spg-action-button:disabled {
@@ -4309,7 +4344,7 @@ button.spg-action-button--large {
4309
4344
  }
4310
4345
 
4311
4346
  .spg-action-button--text {
4312
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4347
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4313
4348
  }
4314
4349
 
4315
4350
  .spg-question {
@@ -4326,9 +4361,9 @@ button.spg-action-button--large {
4326
4361
  .spg-question__title {
4327
4362
  width: 100%;
4328
4363
  margin: 0;
4329
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4330
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4331
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4364
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
4365
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4366
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4332
4367
  font-family: var(--font-family);
4333
4368
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4334
4369
  font-weight: normal;
@@ -4357,35 +4392,35 @@ button.spg-action-button--large {
4357
4392
  align-items: flex-end;
4358
4393
  padding: 0px;
4359
4394
  font-family: var(--font-family);
4360
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4361
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4395
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4396
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4362
4397
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4363
4398
  position: absolute;
4364
- inset-inline-end: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
4365
- inset-block-end: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4399
+ inset-inline-end: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4400
+ inset-block-end: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4366
4401
  }
4367
4402
 
4368
4403
  .spg-question__description {
4369
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4370
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4404
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4405
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4371
4406
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4372
- padding-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4407
+ padding-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4373
4408
  white-space: normal;
4374
4409
  }
4375
4410
 
4376
4411
  .spg-row-narrow__question {
4377
- margin-top: calc(-2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4412
+ margin-top: calc(-2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4378
4413
  }
4379
4414
 
4380
4415
  .spg-row--multiple > div > .spg-row-narrow__question {
4381
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4416
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4382
4417
  }
4383
4418
 
4384
4419
  .spg-question--location--left {
4385
4420
  flex-direction: row;
4386
4421
  background: var(--sjs-general-backcolor, var(--background, #fff));
4387
4422
  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4388
- line-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4423
+ line-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4389
4424
  vertical-align: middle;
4390
4425
  align-items: stretch;
4391
4426
  }
@@ -4402,7 +4437,7 @@ button.spg-action-button--large {
4402
4437
  align-items: center;
4403
4438
  }
4404
4439
  .spg-question__header--location--left .spg-question__title {
4405
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4440
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4406
4441
  border-right: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4407
4442
  display: inline-block;
4408
4443
  }
@@ -4421,15 +4456,15 @@ button.spg-action-button--large {
4421
4456
 
4422
4457
  .spg-row--multiple {
4423
4458
  display: flex;
4424
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4459
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4425
4460
  flex-wrap: wrap;
4426
4461
  }
4427
4462
  .spg-row--multiple > div {
4428
4463
  flex-grow: 1;
4429
- min-width: calc(25.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4464
+ min-width: calc(25.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4430
4465
  }
4431
4466
  .spg-row--multiple > div .spg-question__header--location--left {
4432
- min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4467
+ min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4433
4468
  }
4434
4469
  .spg-row--multiple > div input {
4435
4470
  min-width: max(17 * var(--sjs-base-unit, var(--base-unit, 8px)), 100%);
@@ -4437,33 +4472,33 @@ button.spg-action-button--large {
4437
4472
  }
4438
4473
 
4439
4474
  .spg-question__erbox {
4440
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4475
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4441
4476
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4442
4477
  background-color: var(--sjs-special-red-light, var(--red-light, rgba(230, 10, 62, 0.1)));
4443
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4444
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4478
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4479
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4445
4480
  }
4446
4481
  .spg-question__erbox > div {
4447
4482
  display: flex;
4448
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4483
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4449
4484
  }
4450
4485
 
4451
4486
  .spg-question__erbox-icon {
4452
4487
  display: block;
4453
4488
  flex-grow: 0;
4454
4489
  flex-shrink: 0;
4455
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4456
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4457
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4490
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4491
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4492
+ background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4458
4493
  background-repeat: no-repeat;
4459
4494
  background-position: 0 0;
4460
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4495
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4461
4496
  white-space: normal;
4462
4497
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.0336 15.4803L14.5736 1.45346C13.9936 0.487805 12.9936 0 12.0036 0C11.0136 0 10.0136 0.487805 9.43364 1.45346L0.973642 15.4803C-0.226358 17.4714 1.21364 20 3.54364 20H20.4536C22.7836 20 24.2236 17.4714 23.0236 15.4803H23.0336ZM21.3336 17.5112C21.2436 17.6605 20.9936 18.0189 20.4636 18.0189H3.54364C3.01364 18.0189 2.76364 17.6705 2.67364 17.5112C2.58364 17.3519 2.41364 16.9537 2.68364 16.5057L11.1436 2.47885C11.4036 2.04082 11.8336 1.99104 12.0036 1.99104C12.1736 1.99104 12.5936 2.04082 12.8636 2.47885L21.3136 16.5057C21.5836 16.9537 21.4136 17.3519 21.3236 17.5112H21.3336ZM13.0036 7.05824V12.0358C13.0036 12.5834 12.5536 13.0314 12.0036 13.0314C11.4536 13.0314 11.0036 12.5834 11.0036 12.0358V7.05824C11.0036 6.5107 11.4536 6.06272 12.0036 6.06272C12.5536 6.06272 13.0036 6.5107 13.0036 7.05824ZM13.0036 15.0224C13.0036 15.5699 12.5536 16.0179 12.0036 16.0179C11.4536 16.0179 11.0036 15.5699 11.0036 15.0224C11.0036 14.4749 11.4536 14.0269 12.0036 14.0269C12.5536 14.0269 13.0036 14.4749 13.0036 15.0224Z' fill='%23E60A3E'/%3E%3C/svg%3E");
4463
4498
  }
4464
4499
 
4465
4500
  .spg-question__erbox--location--bottom {
4466
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4501
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4467
4502
  }
4468
4503
 
4469
4504
  .spg-input {
@@ -4474,12 +4509,12 @@ button.spg-action-button--large {
4474
4509
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4475
4510
  box-sizing: border-box;
4476
4511
  width: 100%;
4477
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4512
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4478
4513
  border: none;
4479
4514
  box-shadow: inset 0 0 0 1px var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4480
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4515
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4481
4516
  outline: none;
4482
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4517
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4483
4518
  font-family: var(--font-family);
4484
4519
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4485
4520
  }
@@ -4504,7 +4539,7 @@ button.spg-action-button--large {
4504
4539
  .spg-input[type=color] {
4505
4540
  padding-left: 0;
4506
4541
  padding-right: 0;
4507
- min-width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
4542
+ min-width: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4508
4543
  }
4509
4544
 
4510
4545
  .spg-input__edit-button {
@@ -4514,9 +4549,9 @@ button.spg-action-button--large {
4514
4549
  background: var(--sjs-general-backcolor, var(--background, #fff));
4515
4550
  border: none;
4516
4551
  outline: none;
4517
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4518
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4519
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4552
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4553
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4554
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4520
4555
  line-height: 0;
4521
4556
  }
4522
4557
  .spg-input__edit-button:hover {
@@ -4543,9 +4578,9 @@ button.spg-action-button--large {
4543
4578
  display: flex;
4544
4579
  justify-content: space-between;
4545
4580
  cursor: default;
4546
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4581
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4547
4582
  align-items: center;
4548
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4583
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4549
4584
  box-shadow: 0 0 0 1px inset var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
4550
4585
  }
4551
4586
 
@@ -4556,7 +4591,7 @@ button.spg-action-button--large {
4556
4591
  height: auto;
4557
4592
  }
4558
4593
  .spg-input-container--multiline sv-ng-question-comment {
4559
- height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
4594
+ height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4560
4595
  }
4561
4596
  .spg-input-container--multiline .spg-input-container__input {
4562
4597
  box-sizing: border-box;
@@ -4566,13 +4601,13 @@ button.spg-action-button--large {
4566
4601
  .spg-input-container__input {
4567
4602
  flex-grow: 1;
4568
4603
  width: 100%;
4569
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4604
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4570
4605
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4571
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4606
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4572
4607
  font-family: var(--font-family);
4573
4608
  outline: none;
4574
4609
  border: none;
4575
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4610
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4576
4611
  background-color: transparent;
4577
4612
  }
4578
4613
 
@@ -4582,15 +4617,15 @@ button.spg-action-button--large {
4582
4617
 
4583
4618
  .spg-input-container__buttons-container {
4584
4619
  display: flex;
4585
- gap: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4620
+ gap: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4586
4621
  }
4587
4622
 
4588
4623
  .spg-dropdown {
4589
4624
  border-radius: 0;
4590
4625
  display: flex;
4591
- padding-right: calc(5.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4626
+ padding-right: calc(5.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4592
4627
  line-height: normal;
4593
- background-position: right calc(1.625 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
4628
+ background-position: right calc(1.625 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
4594
4629
  }
4595
4630
 
4596
4631
  .spg-dropdown__filter-string-input {
@@ -4602,11 +4637,11 @@ button.spg-action-button--large {
4602
4637
  }
4603
4638
 
4604
4639
  .spg-comment {
4605
- height: calc(9 * var(--sjs-base-unit, var(--base-unit, 8px)));
4640
+ height: calc(9 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4606
4641
  max-width: 100%;
4607
- min-width: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4608
- min-height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
4609
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4642
+ min-width: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4643
+ min-height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4644
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4610
4645
  }
4611
4646
 
4612
4647
  .spg-panel__title {
@@ -4615,7 +4650,7 @@ button.spg-action-button--large {
4615
4650
  appearance: none;
4616
4651
  box-sizing: border-box;
4617
4652
  width: 100%;
4618
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4653
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4619
4654
  border: none;
4620
4655
  outline: none;
4621
4656
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -4624,7 +4659,7 @@ button.spg-action-button--large {
4624
4659
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
4625
4660
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
4626
4661
  font-family: var(--font-family);
4627
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4662
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4628
4663
  font-weight: 400;
4629
4664
  margin: 0;
4630
4665
  }
@@ -4651,7 +4686,7 @@ button.spg-action-button--large {
4651
4686
  flex-direction: column;
4652
4687
  align-items: flex-start;
4653
4688
  width: 100%;
4654
- padding: 0 calc(4 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4689
+ padding: 0 calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4655
4690
  box-sizing: border-box;
4656
4691
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4657
4692
  box-shadow: inset 0px -1px 0px var(--sjs-border-default, var(--border, #d6d6d6));
@@ -4659,14 +4694,14 @@ button.spg-action-button--large {
4659
4694
 
4660
4695
  .spg-panel__content .spg-row {
4661
4696
  width: 100%;
4662
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4697
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4663
4698
  }
4664
4699
  .spg-panel__content .spg-row--multiple {
4665
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4700
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4666
4701
  }
4667
4702
 
4668
4703
  .sv-mobile-side-bar .spg-panel__content {
4669
- padding: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4704
+ padding: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4670
4705
  }
4671
4706
 
4672
4707
  .spg-question__nopadding .spg-panel__content {
@@ -4676,7 +4711,7 @@ button.spg-action-button--large {
4676
4711
 
4677
4712
  .spg-checkbox {
4678
4713
  cursor: pointer;
4679
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4714
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4680
4715
  }
4681
4716
 
4682
4717
  .spg-checkbox--disabled {
@@ -4691,17 +4726,17 @@ button.spg-action-button--large {
4691
4726
 
4692
4727
  .spg-checkbox__caption {
4693
4728
  font-family: var(--font-family);
4694
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4729
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4695
4730
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
4696
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4731
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4697
4732
  }
4698
4733
 
4699
4734
  .spg-checkbox__rectangle {
4700
4735
  background: var(--sjs-general-backcolor, var(--background, #fff));
4701
4736
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
4702
4737
  box-sizing: border-box;
4703
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4704
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4738
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4739
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4705
4740
  flex-shrink: 0;
4706
4741
  padding: 1px 1px;
4707
4742
  }
@@ -4725,10 +4760,10 @@ button.spg-action-button--large {
4725
4760
 
4726
4761
  .spg-checkbox--checked .spg-checkbox__svg {
4727
4762
  display: block;
4728
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4729
- height: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4763
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4764
+ height: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4730
4765
  background-repeat: no-repeat;
4731
- background-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4766
+ background-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4732
4767
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
4733
4768
  }
4734
4769
 
@@ -4758,11 +4793,11 @@ button.spg-action-button--large {
4758
4793
  .spg-selectbase__label {
4759
4794
  display: flex;
4760
4795
  align-items: flex-start;
4761
- gap: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4796
+ gap: var(--sjs-base-unit, var(--base-unit, 8px));
4762
4797
  }
4763
4798
 
4764
4799
  .spg-matrixdynamic__drag-element {
4765
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4800
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4766
4801
  }
4767
4802
  .spg-matrixdynamic__drag-element:hover {
4768
4803
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
@@ -4770,13 +4805,13 @@ button.spg-action-button--large {
4770
4805
  .spg-matrixdynamic__drag-element:after {
4771
4806
  content: " ";
4772
4807
  display: block;
4773
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4808
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4774
4809
  }
4775
4810
 
4776
4811
  .spg-drag-element__svg {
4777
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4778
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4779
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4812
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4813
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4814
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4780
4815
  display: block;
4781
4816
  opacity: 0.5;
4782
4817
  }
@@ -4793,7 +4828,7 @@ button.spg-action-button--large {
4793
4828
  .spg-matrixdynamic__drag-drop-ghost-position-bottom::after {
4794
4829
  content: "";
4795
4830
  width: 100%;
4796
- height: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4831
+ height: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4797
4832
  background-color: var(--sjs-secondary-backcolor, var(--secondary, #ff9814));
4798
4833
  position: absolute;
4799
4834
  left: 0;
@@ -4808,7 +4843,7 @@ button.spg-action-button--large {
4808
4843
  }
4809
4844
 
4810
4845
  .spg-matrixdynamic__placeholder {
4811
- padding: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4846
+ padding: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4812
4847
  display: flex;
4813
4848
  flex-direction: column;
4814
4849
  justify-content: center;
@@ -4822,8 +4857,8 @@ button.spg-action-button--large {
4822
4857
  }
4823
4858
 
4824
4859
  .spg-matrixdynamic__placeholder-text {
4825
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4826
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4860
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4861
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4827
4862
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4828
4863
  }
4829
4864
 
@@ -4831,29 +4866,29 @@ button.spg-action-button--large {
4831
4866
  display: none;
4832
4867
  appearance: none;
4833
4868
  border: none;
4834
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4869
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4835
4870
  background: transparent;
4836
4871
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
4837
4872
  font-family: var(--font-family);
4838
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4873
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4839
4874
  font-weight: 600;
4840
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4875
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4841
4876
  }
4842
4877
 
4843
4878
  .spg-smiley-icon {
4844
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4845
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4846
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4879
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4880
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4881
+ margin: var(--sjs-base-unit, var(--base-unit, 8px));
4847
4882
  border-radius: 100px;
4848
4883
  border: 1px solid var(--sjs-general-forecolor, var(--foreground, #161616));
4849
4884
  display: flex;
4850
4885
  justify-content: center;
4851
4886
  align-items: center;
4852
- margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4887
+ margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4853
4888
  }
4854
4889
  .spg-smiley-icon svg {
4855
- width: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4856
- height: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4890
+ width: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4891
+ height: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4857
4892
  fill: var(--sjs-general-forecolor, var(--foreground, #161616));
4858
4893
  }
4859
4894
 
@@ -4875,7 +4910,7 @@ button.spg-action-button--large {
4875
4910
  padding: 0;
4876
4911
  }
4877
4912
  .spg-table__cell .spg-checkbox {
4878
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4913
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4879
4914
  }
4880
4915
 
4881
4916
  .spg-table__cell--detail-panel {
@@ -4891,12 +4926,12 @@ button.spg-action-button--large {
4891
4926
 
4892
4927
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input {
4893
4928
  appearance: none;
4894
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4895
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4929
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4930
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4896
4931
  box-shadow: none;
4897
- border-radius: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4932
+ border-radius: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4898
4933
  background-color: transparent;
4899
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
4934
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
4900
4935
  height: auto;
4901
4936
  }
4902
4937
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-input[type=color] {
@@ -4912,19 +4947,19 @@ button.spg-action-button--large {
4912
4947
 
4913
4948
  .spg-table__cell:not(.spg-table__cell--detail-panel) .spg-dropdown {
4914
4949
  width: max-content;
4915
- padding-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4916
- background-size: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4917
- background-position: right calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) top 50%, 0 0;
4950
+ padding-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4951
+ background-size: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4952
+ background-position: right calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) top 50%, 0 0;
4918
4953
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15L17 10H7L12 15Z' fill='%2390909080'/%3E%3C/svg%3E%0A");
4919
4954
  background-repeat: no-repeat;
4920
4955
  }
4921
4956
 
4922
4957
  .spg-table__cell:not(.spg-table__cell--detail-panel):first-of-type .spg-text {
4923
- padding-left: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
4958
+ padding-left: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4924
4959
  }
4925
4960
 
4926
4961
  .spg-table__cell--actions:first-of-type {
4927
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4962
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4928
4963
  }
4929
4964
 
4930
4965
  .spg-table__cell--actions:last-of-type .spg-action-bar {
@@ -4933,15 +4968,15 @@ button.spg-action-button--large {
4933
4968
 
4934
4969
  .spg-table__cell--actions > .spg-matrixdynamic__drag-element {
4935
4970
  display: inline-block;
4936
- margin-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4971
+ margin-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4937
4972
  cursor: move;
4938
4973
  }
4939
4974
 
4940
4975
  .spg-table__cell--header {
4941
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
4976
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4942
4977
  font-weight: normal;
4943
4978
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
4944
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
4979
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4945
4980
  background: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
4946
4981
  text-align: left;
4947
4982
  white-space: nowrap;
@@ -4957,14 +4992,14 @@ button.spg-action-button--large {
4957
4992
  }
4958
4993
 
4959
4994
  .spg-table__question-wrapper {
4960
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
4995
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
4961
4996
  }
4962
4997
 
4963
4998
  .spg-question-group .spg-row {
4964
4999
  margin-top: 0;
4965
5000
  }
4966
5001
  .spg-question-group .spg-row:not(:first-of-type) {
4967
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5002
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
4968
5003
  }
4969
5004
 
4970
5005
  .spg-color-editor__color-input {
@@ -4982,7 +5017,7 @@ button.spg-action-button--large {
4982
5017
 
4983
5018
  .spg-color-editor__color-item {
4984
5019
  display: flex;
4985
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5020
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4986
5021
  }
4987
5022
  .spg-color-editor__color-item .spg-color-editor__color-swatch {
4988
5023
  margin-left: 0;
@@ -4993,16 +5028,16 @@ button.spg-action-button--large {
4993
5028
  flex-shrink: 0;
4994
5029
  flex-grow: 0;
4995
5030
  border-radius: 3px;
4996
- width: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
4997
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5031
+ width: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5032
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
4998
5033
  box-sizing: border-box;
4999
5034
  border: 1px solid rgba(0, 0, 0, 0.16);
5000
- margin-left: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5035
+ margin-left: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5001
5036
  }
5002
5037
  .spg-color-editor__color-swatch .sv-svg-icon {
5003
5038
  position: absolute;
5004
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5005
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5039
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5040
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5006
5041
  left: 50%;
5007
5042
  top: 50%;
5008
5043
  transform: translate(-50%, -50%);
@@ -5018,7 +5053,7 @@ button.spg-action-button--large {
5018
5053
  }
5019
5054
 
5020
5055
  .spg-color-editor .spg-input__edit-button + * {
5021
- margin-inline-end: calc(-0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5056
+ margin-inline-end: calc(-0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5022
5057
  }
5023
5058
 
5024
5059
  .spg-file-edit__choose-button {
@@ -5032,10 +5067,10 @@ button.spg-action-button--large {
5032
5067
  .spg-theme-builder-root .spg-paneldynamic__separator {
5033
5068
  border: none;
5034
5069
  margin: 0;
5035
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5070
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5036
5071
  }
5037
5072
  .spg-theme-builder-root .spg-panel__footer {
5038
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) auto 0;
5073
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) auto 0;
5039
5074
  }
5040
5075
  .spg-theme-builder-root .spg-paneldynamic__add-btn {
5041
5076
  margin: 0 auto;
@@ -5054,7 +5089,7 @@ button.spg-action-button--large {
5054
5089
  min-width: 0;
5055
5090
  }
5056
5091
  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left {
5057
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5092
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5058
5093
  box-sizing: border-box;
5059
5094
  }
5060
5095
  .spg-theme-builder-root .spg-row--multiple > div .spg-question--location--left .spg-input {
@@ -5074,19 +5109,19 @@ button.spg-action-button--large {
5074
5109
  }
5075
5110
  .spg-theme-builder-root .spg-panel__content .spg-panel__content {
5076
5111
  padding: 0;
5077
- padding-bottom: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5112
+ padding-bottom: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5078
5113
  box-shadow: none;
5079
5114
  }
5080
5115
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__title {
5081
5116
  background-color: transparent;
5082
5117
  box-shadow: none;
5083
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
5118
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
5084
5119
  }
5085
5120
  .spg-theme-builder-root .spg-panel__content .spg-panel__content::after {
5086
5121
  content: " ";
5087
5122
  display: block;
5088
5123
  position: relative;
5089
- left: calc(-4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5124
+ left: calc(-4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5090
5125
  top: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5091
5126
  width: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)) + 100%);
5092
5127
  height: 1px;
@@ -5102,7 +5137,7 @@ button.spg-action-button--large {
5102
5137
  content: none;
5103
5138
  }
5104
5139
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row {
5105
- margin-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5140
+ margin-top: var(--sjs-base-unit, var(--base-unit, 8px));
5106
5141
  }
5107
5142
  .spg-theme-builder-root .spg-panel__content .spg-panel__content .spg-panel__content .spg-row:first-of-type {
5108
5143
  margin-top: 0;
@@ -5140,7 +5175,7 @@ button.spg-action-button--large {
5140
5175
  }
5141
5176
 
5142
5177
  .sv-popup--modal {
5143
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5178
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5144
5179
  }
5145
5180
  .sv-popup--modal.sv-property-editor .sv-popup__container .sv-popup_shadow {
5146
5181
  background-color: transparent;
@@ -5157,7 +5192,7 @@ button.spg-action-button--large {
5157
5192
  }
5158
5193
  .sv-popup--modal .sd-body,
5159
5194
  .sv-popup--modal .sl-body {
5160
- min-width: calc(78 * var(--sjs-base-unit, var(--base-unit, 8px)));
5195
+ min-width: calc(78 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5161
5196
  }
5162
5197
 
5163
5198
  .sv-popup.sv-property-editor .sd-root-modern {
@@ -5165,8 +5200,8 @@ button.spg-action-button--large {
5165
5200
  }
5166
5201
 
5167
5202
  .svc-object-selector .sv-popup__container {
5168
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5169
- margin-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5203
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
5204
+ margin-right: var(--sjs-base-unit, var(--base-unit, 8px));
5170
5205
  }
5171
5206
 
5172
5207
  .svc-object-selector__content {
@@ -5178,8 +5213,8 @@ button.spg-action-button--large {
5178
5213
  }
5179
5214
 
5180
5215
  .spg-title .spg-action-bar {
5181
- margin-top: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5182
- margin-bottom: calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5216
+ margin-top: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5217
+ margin-bottom: calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5183
5218
  margin-right: 1px;
5184
5219
  }
5185
5220
 
@@ -5188,7 +5223,7 @@ button.spg-action-button--large {
5188
5223
  }
5189
5224
 
5190
5225
  .spg-body--empty {
5191
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5226
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5192
5227
  }
5193
5228
  .svc-text {
5194
5229
  font-family: var(--font-family);
@@ -5198,13 +5233,13 @@ button.spg-action-button--large {
5198
5233
  }
5199
5234
 
5200
5235
  .svc-text--normal {
5201
- font-size: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5202
- line-height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5236
+ font-size: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5237
+ line-height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5203
5238
  }
5204
5239
 
5205
5240
  .svc-text--small {
5206
- font-size: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5207
- line-height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
5241
+ font-size: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5242
+ line-height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5208
5243
  }
5209
5244
 
5210
5245
  .svc-text--bold {
@@ -5236,15 +5271,15 @@ button.spg-action-button--large {
5236
5271
  }
5237
5272
 
5238
5273
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
5239
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
5274
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5240
5275
  }
5241
5276
 
5242
5277
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
5243
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
5278
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5244
5279
  }
5245
5280
 
5246
5281
  .svc-creator--mobile .sv-action-bar-separator {
5247
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
5282
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5248
5283
  }
5249
5284
 
5250
5285
  .sv-action-bar--small-size-mode .sv-action-bar-item {
@@ -5263,11 +5298,17 @@ button.spg-action-button--large {
5263
5298
  display: flex;
5264
5299
  }
5265
5300
  .svc-top-bar .svc-toolbar-wrapper .sv-action-bar {
5266
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5301
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
5267
5302
  justify-content: flex-end;
5268
5303
  }
5304
+ .svc-top-bar .svc-toolbar-wrapper .sv-action-bar-separator {
5305
+ display: none;
5306
+ }
5307
+ .svc-top-bar .svc-toolbar-wrapper .sv-action-bar > .sv-action:not(.sv-action--hidden) ~ .sv-action .sv-action-bar-separator {
5308
+ display: inline-block;
5309
+ }
5269
5310
  .svc-top-bar .svc-toolbar-wrapper .sv-action .sv-action-bar-item {
5270
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
5311
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
5271
5312
  }
5272
5313
 
5273
5314
  .svc-footer-bar .svc-toolbar-wrapper {
@@ -5275,7 +5316,7 @@ button.spg-action-button--large {
5275
5316
  left: 0;
5276
5317
  right: 0;
5277
5318
  bottom: 0;
5278
- height: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
5319
+ height: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
5279
5320
  }
5280
5321
  .svc-footer-bar .svc-toolbar-wrapper .sv-action-bar {
5281
5322
  justify-content: center;