survey-react 1.9.110 → 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.
Files changed (14) hide show
  1. package/defaultV2.css +768 -670
  2. package/defaultV2.css.map +1 -1
  3. package/defaultV2.min.css +2 -2
  4. package/modern.css +300 -240
  5. package/modern.css.map +1 -1
  6. package/modern.min.css +2 -2
  7. package/package.json +1 -1
  8. package/survey.css +66 -53
  9. package/survey.css.map +1 -1
  10. package/survey.min.css +2 -2
  11. package/survey.react.d.ts +218 -168
  12. package/survey.react.js +522 -288
  13. package/survey.react.js.map +1 -1
  14. package/survey.react.min.js +3 -3
package/modern.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v1.9.110
2
+ * surveyjs - Survey JavaScript library v1.9.111
3
3
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -96,7 +96,7 @@ sv-popup {
96
96
 
97
97
  .sv-popup__container {
98
98
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
99
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
99
+ border-radius: var(--sjs-corner-radius, 4px);
100
100
  position: absolute;
101
101
  padding: 0;
102
102
  }
@@ -104,12 +104,12 @@ sv-popup {
104
104
  .sv-popup__shadow {
105
105
  width: 100%;
106
106
  height: 100%;
107
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
107
+ border-radius: var(--sjs-corner-radius, 4px);
108
108
  }
109
109
 
110
110
  .sv-popup__body-content {
111
111
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
112
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
112
+ border-radius: var(--sjs-corner-radius, 4px);
113
113
  width: 100%;
114
114
  height: 100%;
115
115
  box-sizing: border-box;
@@ -124,14 +124,40 @@ sv-popup {
124
124
  align-items: center;
125
125
  justify-content: center;
126
126
  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
127
- padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
127
+ padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
128
128
  box-sizing: border-box;
129
129
  }
130
130
  .sv-popup.sv-popup--modal .sv-popup__body-content {
131
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
131
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
132
132
  height: auto;
133
133
  }
134
134
 
135
+ .sv-popup--confirm-delete .sv-popup__container {
136
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
137
+ }
138
+ .sv-popup--confirm-delete .sv-popup__body-content {
139
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
140
+ }
141
+ .sv-popup--confirm-delete .sv-popup__body-header {
142
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
143
+ margin-bottom: 0;
144
+ /* UI/Default */
145
+ font-family: var(--font-family);
146
+ font-size: var(--sjs-font-size, 16px);
147
+ font-style: normal;
148
+ font-weight: 400;
149
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
150
+ }
151
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
152
+ display: none;
153
+ }
154
+ .sv-popup--confirm-delete .sv-popup__body-footer {
155
+ padding-bottom: 0;
156
+ }
157
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
158
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
159
+ }
160
+
135
161
  .sv-popup.sv-popup--modal > .sv-popup__container {
136
162
  position: static;
137
163
  }
@@ -146,23 +172,23 @@ sv-popup {
146
172
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
147
173
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
148
174
  width: 100%;
149
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
175
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
150
176
  border: unset;
151
177
  }
152
178
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
153
179
  max-height: var(--sv-popup-overlay-height, 100vh);
154
180
  max-width: 100vw;
155
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
181
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
156
182
  background: var(--sjs-general-backcolor, var(--background, #fff));
157
183
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
158
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
184
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
159
185
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
160
186
  }
161
187
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
162
188
  height: calc(100% - 10 * var(--base-unit, 8px));
163
189
  }
164
190
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
165
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
191
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
166
192
  }
167
193
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
168
194
  width: 100%;
@@ -211,22 +237,22 @@ sv-popup {
211
237
  }
212
238
 
213
239
  .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
214
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
240
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
215
241
  }
216
242
 
217
243
  .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
218
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
244
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
219
245
  }
220
246
 
221
247
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
222
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
248
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
223
249
  }
224
250
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
225
251
  transform: translate(-12px, -4px) rotate(-90deg);
226
252
  }
227
253
 
228
254
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
229
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
255
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
230
256
  }
231
257
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
232
258
  transform: translate(-4px, -4px) rotate(90deg);
@@ -241,42 +267,42 @@ sv-popup {
241
267
  display: block;
242
268
  width: 0;
243
269
  height: 0;
244
- border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
245
- border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
246
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
270
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
271
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
272
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
247
273
  align-self: center;
248
274
  }
249
275
 
250
276
  .sv-popup__body-header {
251
277
  font-family: Open Sans;
252
- font-size: calc(1.5 * var(--sjs-font-size, 16px));
253
- line-height: calc(2 * var(--sjs-font-size, 16px));
278
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
279
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
254
280
  font-style: normal;
255
281
  font-weight: 700;
256
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
282
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
257
283
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
258
284
  }
259
285
 
260
286
  .sv-popup__body-footer {
261
287
  display: flex;
262
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
288
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
263
289
  }
264
290
 
265
291
  .sv-popup__body-footer .sv-action-bar {
266
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
292
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
267
293
  }
268
294
 
269
295
  .sv-popup__button {
270
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
296
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
271
297
  }
272
298
 
273
299
  .sv-popup--modal .sv-list__filter,
274
300
  .sv-popup--overlay .sv-list__filter {
275
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
301
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
276
302
  }
277
303
  .sv-popup--modal .sv-list__filter-icon,
278
304
  .sv-popup--overlay .sv-list__filter-icon {
279
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
305
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
280
306
  }
281
307
 
282
308
  .sv-dropdown-popup.sv-popup--overlay {
@@ -295,8 +321,8 @@ sv-popup {
295
321
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
296
322
  border: none;
297
323
  box-shadow: none;
298
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
299
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
324
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
325
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
300
326
  margin: 0;
301
327
  }
302
328
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -310,40 +336,40 @@ sv-popup {
310
336
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
311
337
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
312
338
  margin-top: 0;
313
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
314
- padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
339
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
315
341
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
316
342
  }
317
343
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
318
344
  height: calc(100% - 6 * var(--base-unit, 8px));
319
345
  }
320
346
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
321
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
322
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
347
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
348
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
323
349
  }
324
350
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
325
351
  padding: 0;
326
352
  }
327
353
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
328
354
  flex-grow: 1;
329
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
355
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
330
356
  }
331
357
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
332
358
  display: flex;
333
359
  align-items: center;
334
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
360
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
335
361
  }
336
362
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
337
363
  position: static;
338
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
339
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
364
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
365
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
340
366
  }
341
367
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
342
368
  display: flex;
343
369
  flex-direction: column;
344
370
  justify-content: center;
345
371
  flex-grow: 1;
346
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
372
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
347
373
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
348
374
  }
349
375
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -352,27 +378,27 @@ sv-popup {
352
378
  opacity: 0.25;
353
379
  }
354
380
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
355
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
356
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
357
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
381
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
382
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
383
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
358
384
  appearance: none;
359
385
  border: none;
360
386
  border-radius: 100%;
361
387
  background-color: transparent;
362
388
  }
363
389
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
364
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
365
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
390
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
391
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
366
392
  }
367
393
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
368
394
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
369
395
  }
370
396
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
371
397
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
372
- font-size: calc(1 * var(--sjs-font-size, 16px));
373
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
398
+ font-size: var(--sjs-font-size, 16px);
399
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
374
400
  font-family: var(--font-family);
375
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
401
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
376
402
  }
377
403
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
378
404
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -403,12 +429,12 @@ sv-popup {
403
429
  left: 50%;
404
430
  top: 50%;
405
431
  max-height: var(--sv-popup-overlay-max-height);
406
- min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
432
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
407
433
  height: auto;
408
434
  width: auto;
409
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
435
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
410
436
  max-width: var(--sv-popup-overlay-max-width);
411
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
437
+ border-radius: var(--sjs-corner-radius, 4px);
412
438
  overflow: hidden;
413
439
  margin: 0;
414
440
  }
@@ -435,7 +461,7 @@ sv-popup {
435
461
  display: inline-block;
436
462
  vertical-align: top;
437
463
  margin-top: 22px;
438
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
464
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
439
465
  width: 16px;
440
466
  height: 16px;
441
467
  cursor: pointer;
@@ -446,7 +472,7 @@ sv-popup {
446
472
  display: inline-block;
447
473
  vertical-align: top;
448
474
  margin-top: 22px;
449
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
475
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
450
476
  width: 16px;
451
477
  height: 16px;
452
478
  cursor: pointer;
@@ -474,7 +500,7 @@ sv-popup {
474
500
 
475
501
  .sv_progress-buttons__list li {
476
502
  width: 138px;
477
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
503
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
478
504
  font-family: var(--font-family, var(--font-family));
479
505
  position: relative;
480
506
  text-align: center;
@@ -528,12 +554,12 @@ sv-popup {
528
554
  }
529
555
 
530
556
  .sv_progress-toc {
531
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
557
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
532
558
  max-width: 336px;
533
559
  height: 100%;
534
560
  background: #FFFFFF;
535
561
  box-sizing: border-box;
536
- min-width: calc(32 * var(--sjs-base-unit, var(--base-unit, 8px)));
562
+ min-width: calc(32 * (var(--sjs-base-unit, var(--base-unit, 8px))));
537
563
  }
538
564
  .sv_progress-toc .sv-list__item.sv-list__item--selected .sv-list__item-body {
539
565
  background: rgba(25, 179, 148, 0.1);
@@ -544,11 +570,11 @@ sv-popup {
544
570
  white-space: break-spaces;
545
571
  }
546
572
  .sv_progress-toc .sv-list__item-body {
547
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
548
- padding-inline-end: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
549
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
550
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
551
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
573
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
574
+ padding-inline-end: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
575
+ border-radius: var(--sjs-corner-radius, 4px);
576
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
577
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
552
578
  }
553
579
 
554
580
  .sv_progress-toc--left {
@@ -561,18 +587,18 @@ sv-popup {
561
587
 
562
588
  .sv_progress-toc--mobile {
563
589
  position: fixed;
564
- top: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
565
- right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
590
+ top: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
591
+ right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
566
592
  width: auto;
567
593
  min-width: auto;
568
594
  height: auto;
569
595
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
570
596
  z-index: 15;
571
- border-radius: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
597
+ border-radius: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
572
598
  }
573
599
  .sv_progress-toc--mobile > div {
574
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
575
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
600
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
601
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
576
602
  }
577
603
  .sv_progress-toc--mobile:hover {
578
604
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -630,7 +656,7 @@ sv-popup {
630
656
 
631
657
  .sv-body {
632
658
  width: 100%;
633
- padding-bottom: calc(10 * var(--sjs-base-unit, var(--base-unit, 8px)));
659
+ padding-bottom: calc(10 * (var(--sjs-base-unit, var(--base-unit, 8px))));
634
660
  }
635
661
 
636
662
  .sv-body__timer,
@@ -656,7 +682,7 @@ sv-popup {
656
682
  }
657
683
 
658
684
  .sv-body__timer {
659
- padding: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
685
+ padding: 0 var(--sjs-base-unit, var(--base-unit, 8px));
660
686
  box-sizing: border-box;
661
687
  }
662
688
 
@@ -1847,6 +1873,10 @@ sv-popup {
1847
1873
  justify-content: space-between;
1848
1874
  }
1849
1875
 
1876
+ .sv-dropdown input[readonly] {
1877
+ pointer-events: none;
1878
+ }
1879
+
1850
1880
  .sv-dropdown:focus,
1851
1881
  .sv-dropdown:focus-within {
1852
1882
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231AB394;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E ");
@@ -2478,11 +2508,11 @@ select.sv-dropdown {
2478
2508
  }
2479
2509
 
2480
2510
  .sv-action-bar--default-size-mode .sv-action-bar-separator {
2481
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2511
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2482
2512
  }
2483
2513
 
2484
2514
  .sv-action-bar--small-size-mode .sv-action-bar-separator {
2485
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2515
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2486
2516
  }
2487
2517
 
2488
2518
  .sv-action-bar-item {
@@ -2490,10 +2520,10 @@ select.sv-dropdown {
2490
2520
  -moz-appearance: none;
2491
2521
  appearance: none;
2492
2522
  display: flex;
2493
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2523
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2494
2524
  box-sizing: border-box;
2495
2525
  border: none;
2496
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2526
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2497
2527
  background-color: transparent;
2498
2528
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2499
2529
  cursor: pointer;
@@ -2507,17 +2537,17 @@ button.sv-action-bar-item {
2507
2537
  }
2508
2538
 
2509
2539
  .sv-action-bar--default-size-mode .sv-action-bar-item {
2510
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2511
- font-size: calc(1 * var(--sjs-font-size, 16px));
2512
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2513
- margin: 0 calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2540
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2541
+ font-size: var(--sjs-font-size, 16px);
2542
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2543
+ margin: 0 var(--sjs-base-unit, var(--base-unit, 8px));
2514
2544
  }
2515
2545
 
2516
2546
  .sv-action-bar--small-size-mode .sv-action-bar-item {
2517
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2518
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
2519
- line-height: calc(1 * var(--sjs-font-size, 16px));
2520
- margin: 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2547
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2548
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
2549
+ line-height: var(--sjs-font-size, 16px);
2550
+ margin: 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2521
2551
  }
2522
2552
 
2523
2553
  .sv-action:first-of-type .sv-action-bar-item {
@@ -2529,11 +2559,11 @@ button.sv-action-bar-item {
2529
2559
  }
2530
2560
 
2531
2561
  .sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon {
2532
- margin-inline-start: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2562
+ margin-inline-start: var(--sjs-base-unit, var(--base-unit, 8px));
2533
2563
  }
2534
2564
 
2535
2565
  .sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon {
2536
- margin-inline-start: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2566
+ margin-inline-start: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2537
2567
  }
2538
2568
 
2539
2569
  .sv-action-bar-item__icon svg {
@@ -2581,15 +2611,15 @@ button.sv-action-bar-item {
2581
2611
  -moz-appearance: none;
2582
2612
  appearance: none;
2583
2613
  display: flex;
2584
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2585
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2614
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2615
+ padding: var(--sjs-base-unit, var(--base-unit, 8px));
2586
2616
  box-sizing: border-box;
2587
2617
  border: none;
2588
- border-radius: calc(0.5 * var(--sjs-corner-radius, 4px));
2618
+ border-radius: calc(0.5 * (var(--sjs-corner-radius, 4px)));
2589
2619
  background-color: transparent;
2590
2620
  cursor: pointer;
2591
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2592
- font-size: calc(1 * var(--sjs-font-size, 16px));
2621
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2622
+ font-size: var(--sjs-font-size, 16px);
2593
2623
  font-family: var(--font-family, var(--font-family));
2594
2624
  }
2595
2625
 
@@ -2648,35 +2678,35 @@ button.sv-action-bar-item {
2648
2678
  }
2649
2679
 
2650
2680
  .sv-dragged-element-shortcut {
2651
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2652
- min-width: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2653
- border-radius: calc(4.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2681
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2682
+ min-width: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2683
+ border-radius: calc(4.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2654
2684
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2655
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2685
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2656
2686
  cursor: grabbing;
2657
2687
  position: absolute;
2658
2688
  z-index: 10000;
2659
2689
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
2660
2690
  font-family: var(--font-family, var(--font-family));
2661
- font-size: calc(1 * var(--sjs-font-size, 16px));
2662
- padding-left: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2663
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
2691
+ font-size: var(--sjs-font-size, 16px);
2692
+ padding-left: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2693
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2664
2694
  }
2665
2695
 
2666
2696
  .sv-matrixdynamic__drag-icon {
2667
- padding-top: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2697
+ padding-top: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2668
2698
  }
2669
2699
 
2670
2700
  .sv-matrixdynamic__drag-icon:after {
2671
2701
  content: " ";
2672
2702
  display: block;
2673
- height: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
2674
- width: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2703
+ height: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2704
+ width: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2675
2705
  border: 1px solid #e7e7e7;
2676
2706
  box-sizing: border-box;
2677
- border-radius: calc(1.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2707
+ border-radius: calc(1.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2678
2708
  cursor: move;
2679
- margin-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2709
+ margin-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2680
2710
  }
2681
2711
 
2682
2712
  .sv-matrix-row--drag-drop-ghost-mod td {
@@ -2708,7 +2738,7 @@ sv-popup {
2708
2738
 
2709
2739
  .sv-popup__container {
2710
2740
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2711
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2741
+ border-radius: var(--sjs-corner-radius, 4px);
2712
2742
  position: absolute;
2713
2743
  padding: 0;
2714
2744
  }
@@ -2716,12 +2746,12 @@ sv-popup {
2716
2746
  .sv-popup__shadow {
2717
2747
  width: 100%;
2718
2748
  height: 100%;
2719
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2749
+ border-radius: var(--sjs-corner-radius, 4px);
2720
2750
  }
2721
2751
 
2722
2752
  .sv-popup__body-content {
2723
2753
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2724
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
2754
+ border-radius: var(--sjs-corner-radius, 4px);
2725
2755
  width: 100%;
2726
2756
  height: 100%;
2727
2757
  box-sizing: border-box;
@@ -2736,14 +2766,40 @@ sv-popup {
2736
2766
  align-items: center;
2737
2767
  justify-content: center;
2738
2768
  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
2739
- padding: calc(11 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(15 * var(--sjs-base-unit, var(--base-unit, 8px)));
2769
+ padding: calc(11 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(15 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2740
2770
  box-sizing: border-box;
2741
2771
  }
2742
2772
  .sv-popup.sv-popup--modal .sv-popup__body-content {
2743
- padding: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2773
+ padding: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2744
2774
  height: auto;
2745
2775
  }
2746
2776
 
2777
+ .sv-popup--confirm-delete .sv-popup__container {
2778
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2779
+ }
2780
+ .sv-popup--confirm-delete .sv-popup__body-content {
2781
+ border-radius: var(--sjs-base-unit, var(--base-unit, 8px));
2782
+ }
2783
+ .sv-popup--confirm-delete .sv-popup__body-header {
2784
+ color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
2785
+ margin-bottom: 0;
2786
+ /* UI/Default */
2787
+ font-family: var(--font-family);
2788
+ font-size: var(--sjs-font-size, 16px);
2789
+ font-style: normal;
2790
+ font-weight: 400;
2791
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px))); /* 150% */
2792
+ }
2793
+ .sv-popup--confirm-delete .sv-popup__scrolling-content {
2794
+ display: none;
2795
+ }
2796
+ .sv-popup--confirm-delete .sv-popup__body-footer {
2797
+ padding-bottom: 0;
2798
+ }
2799
+ .sv-popup--confirm-delete .sv-popup__body-footer .sv-action-bar {
2800
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2801
+ }
2802
+
2747
2803
  .sv-popup.sv-popup--modal > .sv-popup__container {
2748
2804
  position: static;
2749
2805
  }
@@ -2758,23 +2814,23 @@ sv-popup {
2758
2814
  max-height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2759
2815
  height: calc(var(--sv-popup-overlay-height, 100vh) - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2760
2816
  width: 100%;
2761
- padding-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2817
+ padding-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2762
2818
  border: unset;
2763
2819
  }
2764
2820
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-content {
2765
2821
  max-height: var(--sv-popup-overlay-height, 100vh);
2766
2822
  max-width: 100vw;
2767
- border-radius: calc(4 * var(--sjs-corner-radius, 4px)) calc(4 * var(--sjs-corner-radius, 4px)) 0px 0px;
2823
+ border-radius: calc(4 * (var(--sjs-corner-radius, 4px))) calc(4 * (var(--sjs-corner-radius, 4px))) 0px 0px;
2768
2824
  background: var(--sjs-general-backcolor, var(--background, #fff));
2769
2825
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
2770
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2826
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2771
2827
  height: calc(100% - 1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2772
2828
  }
2773
2829
  .sv-popup--overlay.sv-popup--overlay .sv-popup__scrolling-content {
2774
2830
  height: calc(100% - 10 * var(--base-unit, 8px));
2775
2831
  }
2776
2832
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer {
2777
- margin-top: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2833
+ margin-top: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2778
2834
  }
2779
2835
  .sv-popup--overlay.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
2780
2836
  width: 100%;
@@ -2823,22 +2879,22 @@ sv-popup {
2823
2879
  }
2824
2880
 
2825
2881
  .sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
2826
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px)))) rotate(180deg);
2882
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px))))) rotate(180deg);
2827
2883
  }
2828
2884
 
2829
2885
  .sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
2830
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))), calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2886
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))), calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2831
2887
  }
2832
2888
 
2833
2889
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container {
2834
- transform: translate(calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2890
+ transform: translate(var(--sjs-base-unit, var(--base-unit, 8px)));
2835
2891
  }
2836
2892
  .sv-popup--show-pointer.sv-popup--right .sv-popup__container .sv-popup__pointer {
2837
2893
  transform: translate(-12px, -4px) rotate(-90deg);
2838
2894
  }
2839
2895
 
2840
2896
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container {
2841
- transform: translate(calc(-1 * var(--sjs-base-unit, var(--base-unit, 8px))));
2897
+ transform: translate(calc(-1 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
2842
2898
  }
2843
2899
  .sv-popup--show-pointer.sv-popup--left .sv-popup__container .sv-popup__pointer {
2844
2900
  transform: translate(-4px, -4px) rotate(90deg);
@@ -2853,42 +2909,42 @@ sv-popup {
2853
2909
  display: block;
2854
2910
  width: 0;
2855
2911
  height: 0;
2856
- border-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2857
- border-right: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
2858
- border-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-general-backcolor, var(--background, #fff));
2912
+ border-left: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2913
+ border-right: var(--sjs-base-unit, var(--base-unit, 8px)) solid transparent;
2914
+ border-bottom: var(--sjs-base-unit, var(--base-unit, 8px)) solid var(--sjs-general-backcolor, var(--background, #fff));
2859
2915
  align-self: center;
2860
2916
  }
2861
2917
 
2862
2918
  .sv-popup__body-header {
2863
2919
  font-family: Open Sans;
2864
- font-size: calc(1.5 * var(--sjs-font-size, 16px));
2865
- line-height: calc(2 * var(--sjs-font-size, 16px));
2920
+ font-size: calc(1.5 * (var(--sjs-font-size, 16px)));
2921
+ line-height: calc(2 * (var(--sjs-font-size, 16px)));
2866
2922
  font-style: normal;
2867
2923
  font-weight: 700;
2868
- margin-bottom: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2924
+ margin-bottom: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2869
2925
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
2870
2926
  }
2871
2927
 
2872
2928
  .sv-popup__body-footer {
2873
2929
  display: flex;
2874
- margin-top: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
2930
+ margin-top: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2875
2931
  }
2876
2932
 
2877
2933
  .sv-popup__body-footer .sv-action-bar {
2878
- gap: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2934
+ gap: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2879
2935
  }
2880
2936
 
2881
2937
  .sv-popup__button {
2882
- margin: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
2938
+ margin: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2883
2939
  }
2884
2940
 
2885
2941
  .sv-popup--modal .sv-list__filter,
2886
2942
  .sv-popup--overlay .sv-list__filter {
2887
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
2943
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
2888
2944
  }
2889
2945
  .sv-popup--modal .sv-list__filter-icon,
2890
2946
  .sv-popup--overlay .sv-list__filter-icon {
2891
- top: calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2947
+ top: calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2892
2948
  }
2893
2949
 
2894
2950
  .sv-dropdown-popup.sv-popup--overlay {
@@ -2907,8 +2963,8 @@ sv-popup {
2907
2963
  color: var(--sjs-primary-backcolor, var(--primary, #19b394));
2908
2964
  border: none;
2909
2965
  box-shadow: none;
2910
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2911
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2966
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2967
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2912
2968
  margin: 0;
2913
2969
  }
2914
2970
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__container {
@@ -2922,40 +2978,40 @@ sv-popup {
2922
2978
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__body-footer {
2923
2979
  background-color: var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9));
2924
2980
  margin-top: 0;
2925
- padding-top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2926
- padding-bottom: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2981
+ padding-top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2982
+ padding-bottom: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2927
2983
  border-top: 1px solid var(--sjs-border-light, var(--border-light, #eaeaea));
2928
2984
  }
2929
2985
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__scrolling-content {
2930
2986
  height: calc(100% - 6 * var(--base-unit, 8px));
2931
2987
  }
2932
2988
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon .sv-svg-icon {
2933
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2934
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2989
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2990
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2935
2991
  }
2936
2992
  .sv-dropdown-popup.sv-popup--overlay .sv-list__container {
2937
2993
  padding: 0;
2938
2994
  }
2939
2995
  .sv-dropdown-popup.sv-popup--overlay .sv-list {
2940
2996
  flex-grow: 1;
2941
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2997
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2942
2998
  }
2943
2999
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter {
2944
3000
  display: flex;
2945
3001
  align-items: center;
2946
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3002
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2947
3003
  }
2948
3004
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-icon {
2949
3005
  position: static;
2950
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
2951
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3006
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3007
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2952
3008
  }
2953
3009
  .sv-dropdown-popup.sv-popup--overlay .sv-list__empty-container {
2954
3010
  display: flex;
2955
3011
  flex-direction: column;
2956
3012
  justify-content: center;
2957
3013
  flex-grow: 1;
2958
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3014
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2959
3015
  background-color: var(--sjs-general-backcolor, var(--background, #fff));
2960
3016
  }
2961
3017
  .sv-dropdown-popup.sv-popup--overlay .sv-popup__button:disabled {
@@ -2964,27 +3020,27 @@ sv-popup {
2964
3020
  opacity: 0.25;
2965
3021
  }
2966
3022
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button {
2967
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2968
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
2969
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3023
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3024
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3025
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2970
3026
  appearance: none;
2971
3027
  border: none;
2972
3028
  border-radius: 100%;
2973
3029
  background-color: transparent;
2974
3030
  }
2975
3031
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg {
2976
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
2977
- width: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3032
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3033
+ width: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
2978
3034
  }
2979
3035
  .sv-dropdown-popup.sv-popup--overlay .sv-list__filter-clear-button svg use {
2980
3036
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2981
3037
  }
2982
3038
  .sv-dropdown-popup.sv-popup--overlay .sv-list__input {
2983
3039
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
2984
- font-size: calc(1 * var(--sjs-font-size, 16px));
2985
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3040
+ font-size: var(--sjs-font-size, 16px);
3041
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
2986
3042
  font-family: var(--font-family);
2987
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0 calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3043
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0 calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) var(--sjs-base-unit, var(--base-unit, 8px));
2988
3044
  }
2989
3045
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:hover .sv-list__item-body,
2990
3046
  .sv-dropdown-popup.sv-popup--overlay .sv-list__item:focus .sv-list__item-body,
@@ -3015,12 +3071,12 @@ sv-popup {
3015
3071
  left: 50%;
3016
3072
  top: 50%;
3017
3073
  max-height: var(--sv-popup-overlay-max-height);
3018
- min-height: min(var(--sv-popup-overlay-max-height), 31 * var(--sjs-base-unit, var(--base-unit, 8px)));
3074
+ min-height: min(var(--sv-popup-overlay-max-height), 31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3019
3075
  height: auto;
3020
3076
  width: auto;
3021
- min-width: min(40 * var(--sjs-base-unit, var(--base-unit, 8px)), var(--sv-popup-overlay-max-width));
3077
+ min-width: min(40 * (var(--sjs-base-unit, var(--base-unit, 8px))), var(--sv-popup-overlay-max-width));
3022
3078
  max-width: var(--sv-popup-overlay-max-width);
3023
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3079
+ border-radius: var(--sjs-corner-radius, 4px);
3024
3080
  overflow: hidden;
3025
3081
  margin: 0;
3026
3082
  }
@@ -3034,7 +3090,7 @@ sv-popup {
3034
3090
  display: flex;
3035
3091
  align-items: center;
3036
3092
  flex-direction: row;
3037
- font-size: calc(1 * var(--sjs-font-size, 16px));
3093
+ font-size: var(--sjs-font-size, 16px);
3038
3094
  overflow: auto;
3039
3095
  border: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
3040
3096
  }
@@ -3052,10 +3108,10 @@ sv-popup {
3052
3108
  align-items: center;
3053
3109
  appearance: none;
3054
3110
  width: 100%;
3055
- padding: 11px calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3056
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3111
+ padding: 11px calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3112
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3057
3113
  outline: none;
3058
- font-size: calc(1 * var(--sjs-font-size, 16px));
3114
+ font-size: var(--sjs-font-size, 16px);
3059
3115
  font-weight: 400;
3060
3116
  background: var(--sjs-general-backcolor, var(--background, #fff));
3061
3117
  cursor: pointer;
@@ -3073,7 +3129,7 @@ sv-popup {
3073
3129
 
3074
3130
  .sv-button-group__item-icon {
3075
3131
  display: block;
3076
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3132
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3077
3133
  }
3078
3134
  .sv-button-group__item-icon use {
3079
3135
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3104,7 +3160,7 @@ sv-popup {
3104
3160
  }
3105
3161
 
3106
3162
  .sv-button-group__item-icon + .sv-button-group__item-caption {
3107
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3163
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3108
3164
  }
3109
3165
 
3110
3166
  .sv-button-group__item--disabled {
@@ -3175,7 +3231,7 @@ sv-popup {
3175
3231
  background-color: cadetblue;
3176
3232
  padding: 1px;
3177
3233
  font-family: var(--font-family, var(--font-family));
3178
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3234
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3179
3235
  font-style: normal;
3180
3236
  font-weight: 400;
3181
3237
  line-height: 1.42857143;
@@ -3194,7 +3250,7 @@ sv-popup {
3194
3250
  background-clip: padding-box;
3195
3251
  border: 1px solid #ccc;
3196
3252
  border: 1px solid rgba(0, 0, 0, 0.2);
3197
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3253
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
3198
3254
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3199
3255
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
3200
3256
  line-break: auto;
@@ -3204,10 +3260,10 @@ sv-popup {
3204
3260
  .sv_window_title {
3205
3261
  padding: 8px 14px;
3206
3262
  margin: 0;
3207
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3263
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3208
3264
  background-color: #f7f7f7;
3209
3265
  border-bottom: 1px solid #ebebeb;
3210
- border-radius: calc(1 * var(--sjs-corner-radius, 4px)) calc(1 * var(--sjs-corner-radius, 4px)) 0 0;
3266
+ border-radius: var(--sjs-corner-radius, 4px) var(--sjs-corner-radius, 4px) 0 0;
3211
3267
  display: flex;
3212
3268
  }
3213
3269
 
@@ -3222,7 +3278,7 @@ sv-popup {
3222
3278
  .sv_window_title a:link,
3223
3279
  .sv_window_title a:visited {
3224
3280
  text-decoration: none;
3225
- font-size: calc(0.875 * var(--sjs-font-size, 16px));
3281
+ font-size: calc(0.875 * (var(--sjs-font-size, 16px)));
3226
3282
  font-style: normal;
3227
3283
  color: black;
3228
3284
  }
@@ -3247,8 +3303,8 @@ sv-popup {
3247
3303
 
3248
3304
  .sv-brand-info__text {
3249
3305
  font-weight: 600;
3250
- font-size: calc(1 * var(--sjs-font-size, 16px));
3251
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3306
+ font-size: var(--sjs-font-size, 16px);
3307
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3252
3308
  color: #161616;
3253
3309
  }
3254
3310
 
@@ -3261,8 +3317,8 @@ sv-popup {
3261
3317
 
3262
3318
  .sv-brand-info__terms {
3263
3319
  font-weight: 400;
3264
- font-size: calc(0.75 * var(--sjs-font-size, 16px));
3265
- line-height: calc(1 * var(--sjs-font-size, 16px));
3320
+ font-size: calc(0.75 * (var(--sjs-font-size, 16px)));
3321
+ line-height: var(--sjs-font-size, 16px);
3266
3322
  }
3267
3323
  .sv-brand-info__terms a {
3268
3324
  color: #909090;
@@ -3297,21 +3353,21 @@ sv-popup {
3297
3353
 
3298
3354
  .sv-ranking-item:focus .sv-ranking-item__icon--focus {
3299
3355
  visibility: visible;
3300
- top: calc(0.6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3301
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3356
+ top: calc(0.6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3357
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3302
3358
  }
3303
3359
 
3304
3360
  .sv-ranking-item:focus .sv-ranking-item__index {
3305
3361
  background: var(--sjs-general-backcolor, var(--background, #fff));
3306
- outline: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3362
+ outline: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-primary-backcolor, var(--primary, #19b394));
3307
3363
  }
3308
3364
 
3309
3365
  .sv-ranking-item__content.sv-ranking-item__content {
3310
3366
  display: flex;
3311
3367
  align-items: center;
3312
3368
  line-height: 1em;
3313
- padding: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px))) 0px;
3314
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3369
+ padding: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0px;
3370
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3315
3371
  }
3316
3372
 
3317
3373
  .sv-ranking-item__icon-container {
@@ -3320,8 +3376,8 @@ sv-popup {
3320
3376
  top: 0;
3321
3377
  bottom: 0;
3322
3378
  flex-shrink: 0;
3323
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3324
- height: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3379
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3380
+ height: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3325
3381
  }
3326
3382
 
3327
3383
  .sv-ranking-item--disabled.sv-ranking-item--disabled {
@@ -3335,9 +3391,9 @@ sv-popup {
3335
3391
  visibility: hidden;
3336
3392
  fill: var(--sjs-primary-backcolor, var(--primary, #19b394));
3337
3393
  position: absolute;
3338
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3339
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3340
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3394
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3395
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3396
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3341
3397
  }
3342
3398
 
3343
3399
  .sv-ranking-item__index.sv-ranking-item__index {
@@ -3347,21 +3403,21 @@ sv-popup {
3347
3403
  justify-content: center;
3348
3404
  background-color: var(--sjs-primary-backcolor-light, var(--primary-light, rgba(25, 179, 148, 0.1)));
3349
3405
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3350
- font-size: calc(1 * var(--sjs-font-size, 16px));
3406
+ font-size: var(--sjs-font-size, 16px);
3351
3407
  border-radius: 100%;
3352
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid transparent;
3353
- width: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3354
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3355
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3408
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid transparent;
3409
+ width: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3410
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3411
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3356
3412
  box-sizing: border-box;
3357
3413
  font-weight: 600;
3358
- margin-left: calc(0 * var(--sjs-base-unit, var(--base-unit, 8px)));
3414
+ margin-left: calc(0 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3359
3415
  }
3360
3416
  .sv-ranking-item__index.sv-ranking-item__index:empty {
3361
3417
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
3362
3418
  background-position: center;
3363
3419
  background-repeat: no-repeat;
3364
- background-size: calc(1 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3420
+ background-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3365
3421
  }
3366
3422
 
3367
3423
  .sv-ranking-item__text {
@@ -3370,9 +3426,9 @@ sv-popup {
3370
3426
  text-overflow: ellipsis;
3371
3427
  white-space: nowrap;
3372
3428
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3373
- font-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px))));
3374
- line-height: calc(1.5 * var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, var(--sjs-font-size, 16px)))));
3375
- margin: 0 calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3429
+ font-size: var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px));
3430
+ line-height: calc(1.5 * (var(--sjs-font-editorfont-size, var(--sjs-font-size, 16px))));
3431
+ margin: 0 calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3376
3432
  }
3377
3433
 
3378
3434
  .sd-ranking--disabled .sv-ranking-item__text {
@@ -3388,18 +3444,18 @@ sv-popup {
3388
3444
  .sv-ranking-item__ghost.sv-ranking-item__ghost {
3389
3445
  display: none;
3390
3446
  background-color: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
3391
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3392
- width: calc(31 * var(--sjs-base-unit, var(--base-unit, 8px)));
3393
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3447
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3448
+ width: calc(31 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3449
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3394
3450
  z-index: 1;
3395
3451
  position: absolute;
3396
3452
  left: 0;
3397
- top: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3453
+ top: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3398
3454
  }
3399
3455
 
3400
3456
  [dir=rtl] .sv-ranking-item__ghost {
3401
3457
  left: initilal;
3402
- right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3458
+ right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3403
3459
  }
3404
3460
 
3405
3461
  .sv-ranking-item--ghost .sv-ranking-item__ghost {
@@ -3412,7 +3468,7 @@ sv-popup {
3412
3468
 
3413
3469
  .sv-ranking-item--drag .sv-ranking-item__content {
3414
3470
  box-shadow: var(--sjs-shadow-large, 0px 8px 16px 0px rgba(0, 0, 0, 0.1));
3415
- border-radius: calc(12.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3471
+ border-radius: calc(12.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3416
3472
  }
3417
3473
 
3418
3474
  .sv-ranking--drag .sv-ranking-item:hover .sv-ranking-item__icon {
@@ -3460,7 +3516,7 @@ sv-popup {
3460
3516
  }
3461
3517
 
3462
3518
  .sv-ranking-shortcut .sv-ranking-item__text {
3463
- margin-right: calc(4 * var(--sjs-base-unit, var(--base-unit, 8px)));
3519
+ margin-right: calc(4 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3464
3520
  }
3465
3521
 
3466
3522
  .sv-ranking-shortcut .sv-ranking-item__icon--hover {
@@ -3468,16 +3524,16 @@ sv-popup {
3468
3524
  }
3469
3525
 
3470
3526
  .sv-ranking-shortcut .sv-ranking-item__icon {
3471
- width: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3472
- height: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3473
- top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3527
+ width: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3528
+ height: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3529
+ top: var(--sjs-base-unit, var(--base-unit, 8px));
3474
3530
  }
3475
3531
 
3476
3532
  .sv-ranking-shortcut .sv-ranking-item__content {
3477
- padding-left: calc(0.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3533
+ padding-left: calc(0.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3478
3534
  }
3479
3535
  .sv-ranking-shortcut .sv-ranking-item__icon-container {
3480
- margin-left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3536
+ margin-left: var(--sjs-base-unit, var(--base-unit, 8px));
3481
3537
  }
3482
3538
 
3483
3539
  .sv-ranking--select-to-rank {
@@ -3488,12 +3544,12 @@ sv-popup {
3488
3544
  flex-direction: column-reverse;
3489
3545
  }
3490
3546
  .sv-ranking--select-to-rank-vertical .sv-ranking__containers-divider {
3491
- margin: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3547
+ margin: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) 0;
3492
3548
  height: 1px;
3493
3549
  }
3494
3550
  .sv-ranking--select-to-rank-vertical .sv-ranking__container--empty {
3495
- padding-top: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3496
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3551
+ padding-top: var(--sjs-base-unit, var(--base-unit, 8px));
3552
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3497
3553
  display: flex;
3498
3554
  justify-content: center;
3499
3555
  align-items: center;
@@ -3503,24 +3559,24 @@ sv-popup {
3503
3559
  width: 1px;
3504
3560
  }
3505
3561
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--to .sv-ranking-item {
3506
- left: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3562
+ left: var(--sjs-base-unit, var(--base-unit, 8px));
3507
3563
  }
3508
3564
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking-item {
3509
3565
  left: initial;
3510
3566
  }
3511
3567
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--to .sv-ranking__container-placeholder {
3512
- padding-left: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3568
+ padding-left: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3513
3569
  }
3514
3570
  .sv-ranking--select-to-rank-horizontal .sv-ranking__container--empty.sv-ranking__container--from .sv-ranking__container-placeholder {
3515
- padding-right: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3571
+ padding-right: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3516
3572
  }
3517
3573
 
3518
3574
  .sv-ranking__container-placeholder {
3519
3575
  color: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3520
3576
  font-family: var(--font-family, var(--font-family));
3521
3577
  font-style: normal;
3522
- font-size: calc(1 * var(--sjs-font-size, 16px));
3523
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3578
+ font-size: var(--sjs-font-size, 16px);
3579
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3524
3580
  white-space: break-spaces;
3525
3581
  display: flex;
3526
3582
  justify-content: center;
@@ -3558,15 +3614,15 @@ sv-popup {
3558
3614
  width: 100%;
3559
3615
  font-family: var(--font-family, var(--font-family));
3560
3616
  box-sizing: border-box;
3561
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3617
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3562
3618
  overflow: hidden;
3563
3619
  text-overflow: ellipsis;
3564
3620
  white-space: nowrap;
3565
3621
  }
3566
3622
 
3567
3623
  .sv-list__empty-text {
3568
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3569
- font-size: calc(1 * var(--sjs-font-size, 16px));
3624
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3625
+ font-size: var(--sjs-font-size, 16px);
3570
3626
  font-weight: 400;
3571
3627
  text-align: center;
3572
3628
  color: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3587,13 +3643,13 @@ sv-popup {
3587
3643
  width: 100%;
3588
3644
  align-items: center;
3589
3645
  box-sizing: border-box;
3590
- padding-block: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3591
- padding-inline-end: calc(8 * var(--sjs-base-unit, var(--base-unit, 8px)));
3592
- padding-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3646
+ padding-block: var(--sjs-base-unit, var(--base-unit, 8px));
3647
+ padding-inline-end: calc(8 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3648
+ padding-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3593
3649
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3594
3650
  font-weight: normal;
3595
- font-size: calc(1 * var(--sjs-font-size, 16px));
3596
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3651
+ font-size: var(--sjs-font-size, 16px);
3652
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3597
3653
  cursor: pointer;
3598
3654
  overflow: hidden;
3599
3655
  text-align: left;
@@ -3605,14 +3661,14 @@ sv-popup {
3605
3661
  outline: none;
3606
3662
  }
3607
3663
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-list__item-body {
3608
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3609
- border-radius: calc(1 * var(--sjs-corner-radius, 4px));
3610
- padding-block: calc(0.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3611
- padding-inline-end: calc(7.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3612
- padding-inline-start: calc(1.75 * var(--sjs-base-unit, var(--base-unit, 8px)));
3664
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid var(--sjs-border-light, var(--border-light, #eaeaea));
3665
+ border-radius: var(--sjs-corner-radius, 4px);
3666
+ padding-block: calc(0.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3667
+ padding-inline-end: calc(7.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3668
+ padding-inline-start: calc(1.75 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3613
3669
  }
3614
3670
  .sv-list__item.sv-list__item--focused:not(.sv-list__item--selected) .sv-string-viewer {
3615
- margin-inline-start: calc(-0.25 * var(--sjs-base-unit, var(--base-unit, 8px)));
3671
+ margin-inline-start: calc(-0.25 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3616
3672
  }
3617
3673
 
3618
3674
  .sv-list__item:hover,
@@ -3628,17 +3684,17 @@ sv-popup {
3628
3684
  padding: 0;
3629
3685
  }
3630
3686
  .sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
3631
- padding-top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3632
- padding-bottom: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3633
- gap: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3687
+ padding-top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3688
+ padding-bottom: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3689
+ gap: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3634
3690
  display: flex;
3635
3691
  }
3636
3692
 
3637
3693
  .sv-list__item-icon {
3638
3694
  float: left;
3639
3695
  flex-shrink: 0;
3640
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3641
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3696
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3697
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3642
3698
  }
3643
3699
  .sv-list__item-icon svg {
3644
3700
  display: block;
@@ -3654,7 +3710,7 @@ sv-popup {
3654
3710
  }
3655
3711
 
3656
3712
  .sv-list__item-separator {
3657
- margin: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) 0;
3713
+ margin: var(--sjs-base-unit, var(--base-unit, 8px)) 0;
3658
3714
  height: 1px;
3659
3715
  background-color: var(--sjs-border-default, var(--border, #d6d6d6));
3660
3716
  }
@@ -3708,18 +3764,18 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3708
3764
  .sv-list__filter {
3709
3765
  border-bottom: 1px solid var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
3710
3766
  background: var(--sjs-general-backcolor, var(--background, #fff));
3711
- padding-bottom: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px)));
3767
+ padding-bottom: var(--sjs-base-unit, var(--base-unit, 8px));
3712
3768
  }
3713
3769
 
3714
3770
  .sv-list__filter-icon {
3715
3771
  display: block;
3716
3772
  position: absolute;
3717
- top: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3718
- inset-inline-start: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px)));
3773
+ top: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3774
+ inset-inline-start: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3719
3775
  }
3720
3776
  .sv-list__filter-icon .sv-svg-icon {
3721
- width: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3722
- height: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3777
+ width: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3778
+ height: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3723
3779
  }
3724
3780
  .sv-list__filter-icon .sv-svg-icon use {
3725
3781
  fill: var(--sjs-general-forecolor-light, var(--foreground-light, #909090));
@@ -3734,11 +3790,11 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3734
3790
  box-sizing: border-box;
3735
3791
  width: 100%;
3736
3792
  outline: none;
3737
- font-size: calc(1 * var(--sjs-font-size, 16px));
3793
+ font-size: var(--sjs-font-size, 16px);
3738
3794
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3739
- padding: calc(1.5 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3740
- padding-inline-start: calc(7 * var(--sjs-base-unit, var(--base-unit, 8px)));
3741
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3795
+ padding: calc(1.5 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3796
+ padding-inline-start: calc(7 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3797
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3742
3798
  border: none;
3743
3799
  }
3744
3800
 
@@ -3762,24 +3818,24 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3762
3818
  .sv-save-data_root {
3763
3819
  position: fixed;
3764
3820
  left: 50%;
3765
- bottom: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3821
+ bottom: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3766
3822
  background: var(--sjs-general-backcolor, var(--background, #fff));
3767
3823
  opacity: 0;
3768
- padding: calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3824
+ padding: calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3769
3825
  box-shadow: var(--sjs-shadow-medium, 0px 2px 6px 0px rgba(0, 0, 0, 0.1));
3770
- border-radius: calc(2 * var(--sjs-corner-radius, 4px));
3826
+ border-radius: calc(2 * (var(--sjs-corner-radius, 4px)));
3771
3827
  color: var(--sjs-general-forecolor, var(--foreground, #161616));
3772
- min-width: calc(30 * var(--sjs-base-unit, var(--base-unit, 8px)));
3828
+ min-width: calc(30 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3773
3829
  text-align: center;
3774
3830
  z-index: 1600;
3775
3831
  font-family: var(--font-family, var(--font-family));
3776
- font-size: calc(1 * var(--sjs-font-size, 16px));
3777
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3832
+ font-size: var(--sjs-font-size, 16px);
3833
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3778
3834
  display: flex;
3779
3835
  flex-direction: row;
3780
3836
  justify-content: center;
3781
3837
  align-items: center;
3782
- transform: translateX(-50%) translateY(calc(3 * var(--sjs-base-unit, var(--base-unit, 8px))));
3838
+ transform: translateX(-50%) translateY(calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px)))));
3783
3839
  transition-timing-function: ease-in;
3784
3840
  transition-property: transform, opacity;
3785
3841
  transition-delay: 0.25s;
@@ -3813,20 +3869,20 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-icon use {
3813
3869
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
3814
3870
  color: var(--sjs-general-backcolor, var(--background, #fff));
3815
3871
  font-weight: 600;
3816
- padding: calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(2 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3817
- gap: calc(6 * var(--sjs-base-unit, var(--base-unit, 8px)));
3872
+ padding: calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(2 * (var(--sjs-base-unit, var(--base-unit, 8px)))) calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3873
+ gap: calc(6 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3818
3874
  }
3819
3875
 
3820
3876
  .sv-save-data_root.sv-save-data_error .sv-save-data_button {
3821
3877
  font-weight: 600;
3822
- font-size: calc(1 * var(--sjs-font-size, 16px));
3823
- line-height: calc(1.5 * var(--sjs-font-size, 16px));
3824
- height: calc(5 * var(--sjs-base-unit, var(--base-unit, 8px)));
3878
+ font-size: var(--sjs-font-size, 16px);
3879
+ line-height: calc(1.5 * (var(--sjs-font-size, 16px)));
3880
+ height: calc(5 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3825
3881
  color: #ffffff;
3826
3882
  background-color: var(--sjs-special-red, var(--red, #e60a3e));
3827
- border: calc(0.25 * var(--sjs-base-unit, var(--base-unit, 8px))) solid #ffffff;
3828
- border-radius: calc(1.5 * var(--sjs-corner-radius, 4px));
3829
- padding: calc(1 * var(--sjs-base-unit, var(--base-unit, 8px))) calc(3 * var(--sjs-base-unit, var(--base-unit, 8px)));
3883
+ border: calc(0.25 * (var(--sjs-base-unit, var(--base-unit, 8px)))) solid #ffffff;
3884
+ border-radius: calc(1.5 * (var(--sjs-corner-radius, 4px)));
3885
+ padding: var(--sjs-base-unit, var(--base-unit, 8px)) calc(3 * (var(--sjs-base-unit, var(--base-unit, 8px))));
3830
3886
  display: flex;
3831
3887
  align-items: center;
3832
3888
  }
@@ -3972,6 +4028,10 @@ sv-components-container,
3972
4028
  flex-grow: 1;
3973
4029
  }
3974
4030
 
4031
+ .sv-components-row > .sv-components-column--expandable {
4032
+ width: 1px;
4033
+ }
4034
+
3975
4035
  .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question,
3976
4036
  .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question {
3977
4037
  display: block;