@sc-360-v2/storefront-cms-library 0.3.2 → 0.3.4

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 (26) hide show
  1. package/dist/breadcrumbs.scss +6 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +45 -20
  4. package/dist/button copy.scss +275 -0
  5. package/dist/button.scss +73 -196
  6. package/dist/checkout.scss +1 -2
  7. package/dist/dropdownTemplate.scss +11 -0
  8. package/dist/icon-library.scss +13 -21
  9. package/dist/layouter-pro-item.scss +38 -0
  10. package/dist/layouter-pro.scss +50 -0
  11. package/dist/menu-v2.scss +6 -1
  12. package/dist/product-actions copy.scss +2783 -0
  13. package/dist/product-actions.scss +1912 -2640
  14. package/dist/product-options.scss +335 -228
  15. package/dist/stack.scss +2 -2
  16. package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
  17. package/dist/types/builder/tools/element-edit/filters.d.ts +2 -2
  18. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +5 -11
  19. package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -2
  20. package/dist/types/builder/tools/element-edit/productOptions.d.ts +2 -1
  21. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +2 -0
  22. package/dist/types/global/types.d.ts +1 -0
  23. package/dist/uom-selector.scss +2 -0
  24. package/dist/variant-picker.scss +556 -849
  25. package/dist/widget.scss +2 -0
  26. package/package.json +1 -1
package/dist/variant-picker.scss CHANGED
@@ -1,25 +1,15 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- // @use "./functions.scss";
3
+ @use "./functions.scss" as *;
4
4
 
5
5
  $minWidth: 70px;
6
6
 
7
7
  [data-div-type="element"] {
8
8
  &[data-element-type="variantPicker"] {
9
9
  --_ctm-mob-var-lt-mn-cn-wh: 70px;
10
- // width: var(--_lt-wh);
11
- // height: var(--_lt-ht);
12
- // margin: var(--_lt-mn);
13
- // padding: var(--_lt-pg);
14
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
15
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
10
+
16
11
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
17
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
18
- // height: ;
19
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
20
- // --_aspect-ratio: calc(
21
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
22
- // );
12
+
23
13
  min-width: #{$minWidth} !important;
24
14
 
25
15
  & > .wrapper {
@@ -99,10 +89,10 @@ $minWidth: 70px;
99
89
  --_ctm-mob-lt-on-te-ve-sg,
100
90
  var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
101
91
  );
102
- padding: var(
103
- --_ctm-mob-lt-sh-te-dy-se-im-pg,
104
- var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
105
- );
92
+ // padding: var(
93
+ // --_ctm-mob-lt-sh-te-dy-se-im-pg,
94
+ // var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
95
+ // );
106
96
 
107
97
  .select__group {
108
98
  display: flex;
@@ -199,464 +189,369 @@ $minWidth: 70px;
199
189
  );
200
190
  }
201
191
 
202
- .item {
203
- // padding: var(--_ctm-lt-sh-te-dy-se-im-pg);
192
+ .select__group__item {
193
+ transition: width 0.3s ease;
194
+
195
+ --_ctm-lt-sh-im-se: 30px;
196
+ height: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
197
+ width: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
198
+ padding: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-pg);
199
+
200
+ border-color: var(
201
+ --_sf-hr-br-cr,
202
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
203
+ );
204
+
204
205
  background-color: var(
205
- --_ctm-mob-dn-sh-on-ve-se-dt-se-bd-cr,
206
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
206
+ --_sf-hr-bd-cr,
207
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
208
+ );
209
+
210
+ border-style: var(
211
+ --_sf-hr-br-se,
212
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
207
213
  );
208
214
 
215
+ border-width: var(
216
+ --_sf-hr-br-wh,
217
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
218
+ );
219
+ border-radius: var(
220
+ --_sf-hr-br-rs,
221
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
222
+ );
223
+
224
+ box-shadow: var(
225
+ --_sf-hr-sw-ae,
226
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
227
+ )
228
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
229
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
230
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
231
+
232
+ cursor: pointer;
233
+ overflow: hidden;
234
+ &[data-background-shape="circle"] {
235
+ border-radius: 50%;
236
+ }
237
+ &[data-background-shape="square"] {
238
+ border-radius: 5px;
239
+ }
240
+ &[data-background-shape="capsule"] {
241
+ --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
242
+ --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
243
+
244
+ width: var(--toggle-width);
245
+ height: var(--toggle-height);
246
+
247
+ border-radius: var(--toggle-height); /* Full pill shape */
248
+ box-sizing: border-box;
249
+ }
209
250
  &[data-swatch-shape="circle"] {
210
- border-radius: 999px;
251
+ & div,
252
+ .product-select-image {
253
+ border-radius: 50%;
254
+ }
255
+ // border-radius: 50%;
211
256
  }
212
- &[data-swatch-shape="square"],
213
- &[data-swatch-shape="none"] {
214
- border-radius: 0px;
257
+ &[data-swatch-shape="capsule"] {
258
+ & div,
259
+ .product-select-image {
260
+ // border-radius: 50%;
261
+ width: 100%;
262
+ height: 100%;
263
+ border-radius: inherit;
264
+ }
265
+ // border-radius: 50%;
215
266
  }
216
- &[data-swatch-shape="rounded"] {
217
- border-radius: var(
218
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
219
- var(
220
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
221
- var(
222
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
223
- var(
224
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
225
- var(
226
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
227
- var(
228
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
229
- var(
230
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
231
- var(
232
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
233
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
234
- )
235
- )
236
- )
237
- )
238
- )
239
- )
240
- )
267
+
268
+ &[data-selected="true"] {
269
+ border-color: var(
270
+ --_sf-sd-br-cr,
271
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
241
272
  );
242
- }
243
273
 
244
- // height: 30px;
245
- // width: 30px;
246
- // &[data-swatch-shape="Circle"] {
247
- // border-radius: 50%;
248
- // }
249
- // &[data-swatch-shape="None"] {
250
- // height: 0;
251
- // width: 0;
252
- // }
253
- &:hover {
254
274
  background-color: var(
275
+ --_sf-sd-bd-cr,
276
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)
277
+ );
278
+ border-style: var(
279
+ --_sf-sd-br-se,
280
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
281
+ );
282
+ border-width: var(
283
+ --_sf-sd-br-wh,
284
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
285
+ );
286
+ box-shadow: var(
287
+ --_sf-sd-sw-ae,
288
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
289
+ )
290
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
291
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
292
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
293
+
294
+ &[data-background-shape-selected="circle"] {
295
+ border-radius: 50%;
296
+ }
297
+ &[data-background-shape-selected="square"] {
298
+ border-radius: 5px;
299
+ }
300
+ &[data-background-shape-selected="capsule"] {
301
+ border-radius: 80%;
302
+ // width: calc(
303
+ // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
304
+ // 8px
305
+ // );
306
+ }
307
+ &[data-swatch-shape-selected="circle"] {
308
+ & div,
309
+ .product-select-image {
310
+ border-radius: 50%;
311
+ }
312
+ }
313
+ &[data-swatch-shape-selected="capsule"] {
314
+ & div,
315
+ .product-select-image {
316
+ border-radius: 50%;
317
+ }
318
+ }
319
+ &[data-swatch-shape-selected="square"] {
320
+ & div,
321
+ .product-select-image {
322
+ border-radius: 5px;
323
+ }
324
+ }
325
+ }
326
+ &:hover {
327
+ --_sf-hr-bd-cr: var(
255
328
  --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
256
329
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
257
330
  );
258
- &[data-swatch-shape="circle"] {
259
- border-radius: 999px;
331
+ --_sf-hr-br-cr: var(
332
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
333
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr))
334
+ );
335
+ --_sf-hr-br-se: var(
336
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
337
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se))
338
+ );
339
+ --_sf-hr-br-wh: var(
340
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
341
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh))
342
+ );
343
+ --_sf-hr-br-bs: var(
344
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
345
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs))
346
+ );
347
+
348
+ // new
349
+ --_sf-hr-sw-ae: var(
350
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
351
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae))
352
+ );
353
+ --_sf-hr-sw-br: var(
354
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
355
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br))
356
+ );
357
+ --_sf-hr-sw-hr: var(
358
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
359
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr))
360
+ );
361
+ --_sf-hr-sw-cr: var(
362
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
363
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr))
364
+ );
365
+ }
366
+
367
+ &:hover {
368
+ &[data-background-shape-hover="circle"] {
369
+ border-radius: 50%;
260
370
  }
261
- &[data-swatch-shape="square"],
262
- &[data-swatch-shape="none"] {
263
- border-radius: 0px;
371
+ &[data-background-shape-hover="square"] {
372
+ border-radius: 5px;
264
373
  }
265
- &[data-swatch-shape="rounded"] {
266
- border-radius: var(
267
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
268
- var(
269
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
270
- var(
271
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
272
- var(
273
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
274
- var(
275
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
276
- var(
277
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
278
- var(
279
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
280
- var(
281
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
282
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
283
- )
284
- )
285
- )
286
- )
287
- )
288
- )
289
- )
290
- );
374
+ &[data-background-shape-hover="capsule"] {
375
+ border-radius: 80%;
376
+ // width: calc(
377
+ // var(
378
+ // --_ctm-mob-lt-sh-im-se,
379
+ // var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))
380
+ // ) +
381
+ // 8px
382
+ // );
383
+ }
384
+ &[data-swatch-shape-hover="circle"] {
385
+ & div,
386
+ .product-select-image {
387
+ border-radius: 50%;
388
+ }
389
+ // border-radius: 50%;
390
+ }
391
+ &[data-swatch-shape-hover="capsule"] {
392
+ & div,
393
+ .product-select-image {
394
+ border-radius: 50%;
395
+ }
396
+ }
397
+ &[data-swatch-shape-hover="square"] {
398
+ & div,
399
+ .product-select-image {
400
+ border-radius: 5px;
401
+ }
291
402
  }
292
- // height: 30px;
293
- // width: 30px;
294
- // &[data-swatch-shape="Circle"] {
295
- // border-radius: 50%;
296
- // }
297
- // &[data-swatch-shape="None"] {
298
- // height: 0;
299
- // width: 0;
300
- // }
301
403
  }
302
- &.selected_item {
303
- width: fit-content;
304
- background-color: var(
404
+
405
+ &[data-selected="true"] {
406
+ --_sf-sd-bd-cr: var(
305
407
  --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
306
408
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
307
409
  );
308
- border-radius: var(
410
+ --_sf-sd-br-cr: var(
411
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
412
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr))
413
+ );
414
+ --_sf-sd-br-se: var(
415
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
416
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se))
417
+ );
418
+ --_sf-sd-br-wh: var(
419
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
420
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh))
421
+ );
422
+ --_sf-sd-br-bs: var(
309
423
  --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
310
424
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
311
425
  );
312
426
 
313
- border-color: var(
314
- --_show-border-im-se,
315
- var(
316
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
317
- var(
318
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
319
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
320
- )
321
- )
427
+ // new
428
+ --_sf-sd-sw-ae: var(
429
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
430
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae))
322
431
  );
323
-
324
- border-style: var(
325
- --_show-border-im-se,
326
- var(
327
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
328
- var(
329
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
330
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
331
- )
332
- )
432
+ --_sf-sd-sw-br: var(
433
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
434
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
333
435
  );
334
-
335
- border-width: var(
336
- --_show-border-im-se,
337
- var(
338
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
339
- var(
340
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
341
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
342
- )
343
- )
436
+ --_sf-sd-sw-sd: var(
437
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
438
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
439
+ );
440
+ --_sf-sd-sw-cr: var(
441
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
442
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr))
344
443
  );
345
444
 
346
- &[data-swatch-shape="circle"] {
347
- border-radius: 999px;
348
- }
349
- &[data-swatch-shape="square"],
350
- &[data-swatch-shape="none"] {
351
- border-radius: 0px;
352
- }
353
- &[data-swatch-shape="rounded"] {
354
- border-radius: var(
355
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
356
- var(
357
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
358
- var(
359
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
360
- var(
361
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
362
- var(
363
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
364
- var(
365
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
366
- var(
367
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
368
- var(
369
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
370
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
371
- )
372
- )
373
- )
374
- )
375
- )
376
- )
377
- )
378
- );
379
- }
380
- // height: 30px;
381
- // width: 30px;
382
- // &[data-swatch-shape="Circle"] {
383
- // border-radius: 50%;
384
- // }
385
- // &[data-swatch-shape="None"] {
386
- // height: 0;
387
- // width: 0;
388
- // }
389
- }
390
- .select__group__item {
391
- transition: width 0.3s ease;
392
- width: 30px;
393
- height: 30px;
394
445
  border-color: var(
395
- --_show-border-im-se,
396
- var(
397
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-cr,
398
- var(
399
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-cr,
400
- var(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
401
- )
402
- )
446
+ --_sf-sd-br-cr,
447
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
448
+ );
449
+
450
+ background-color: var(
451
+ --_sf-sd-bd-cr,
452
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
403
453
  );
404
454
 
405
455
  border-style: var(
406
- --_show-border-im-se,
407
- var(
408
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-se,
409
- var(
410
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-se,
411
- var(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
412
- )
413
- )
456
+ --_sf-sd-br-se,
457
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
414
458
  );
415
459
 
416
460
  border-width: var(
417
- --_show-border-im-se,
418
- var(
419
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-wh,
420
- var(
421
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-wh,
422
- var(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
423
- )
424
- )
461
+ --_sf-sd-br-wh,
462
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
425
463
  );
426
-
427
464
  border-radius: var(
428
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
429
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs, var(--_ctm-dn-sh-on-ve-se-dt-se-br-rs))
465
+ --_sf-sd-br-rs,
466
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
430
467
  );
431
468
 
432
469
  box-shadow: var(
433
- --_show-shadow-im-se,
434
- var(
435
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-ae,
436
- var(
437
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-ae,
438
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
439
- )
440
- )
441
- var(
442
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-br,
443
- var(
444
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-br,
445
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)
446
- )
447
- )
448
- var(
449
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-sd,
450
- var(
451
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-sd,
452
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)
453
- )
454
- )
455
- var(
456
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-cr,
457
- var(
458
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-cr,
459
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr)
460
- )
461
- )
462
- );
470
+ --_sf-sd-sw-ae,
471
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
472
+ )
473
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
474
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
475
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
463
476
 
464
- cursor: pointer;
465
- overflow: hidden;
466
- &[data-swatch-shape="circle"] {
467
- border-radius: 999px;
468
- }
469
- &[data-swatch-shape="square"] {
470
- border-radius: 0px;
477
+ &[data-background-shape-selected="circle"] {
478
+ border-radius: 50%;
471
479
  }
472
- &[data-swatch-shape="rounded"] {
473
- border-radius: var(
474
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
475
- var(
476
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
477
- var(
478
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
479
- var(
480
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
481
- var(
482
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
483
- var(
484
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
485
- var(
486
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
487
- var(
488
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
489
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
490
- )
491
- )
492
- )
493
- )
494
- )
495
- )
496
- )
497
- );
498
- }
499
- &:hover {
500
- border-color: var(
501
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
502
- var(
503
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr,
504
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr)
505
- )
506
- );
507
- border-style: var(
508
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
509
- var(
510
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-se,
511
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-se)
512
- )
513
- );
514
- border-width: var(
515
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
516
- var(
517
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh,
518
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh)
519
- )
520
- );
521
- border-radius: var(
522
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
523
- var(
524
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
525
- var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs)
526
- )
527
- );
528
- box-shadow: var(
529
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-ae,
530
- var(
531
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae,
532
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae)
533
- )
534
- )
535
- var(
536
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-br,
537
- var(
538
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br,
539
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br)
540
- )
541
- )
542
- var(
543
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-sd,
544
- var(
545
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-sd,
546
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-sd)
547
- )
548
- )
549
- var(
550
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-cr,
551
- var(
552
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr,
553
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr)
554
- )
555
- );
480
+ &[data-background-shape-selected="square"] {
481
+ border-radius: 5px;
556
482
  }
483
+ &[data-background-shape-selected="capsule"] {
484
+ --toggle-height: var(--_ctm-lt-sh-im-se);
485
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
557
486
 
558
- &.selected {
559
- width: 45px;
560
- border-radius: var(
561
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
562
- var(
563
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
564
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
565
- )
566
- );
567
- border: 3px solid #fff;
487
+ width: var(--toggle-width);
488
+ height: var(--toggle-height);
568
489
 
569
- border-color: var(
570
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
571
- var(
572
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
573
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
574
- )
575
- );
576
- border-style: var(
577
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
578
- var(
579
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
580
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
581
- )
582
- );
583
- border-width: var(
584
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
585
- var(
586
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
587
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
588
- )
589
- );
590
- box-shadow: var(
591
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-ae,
592
- var(
593
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae,
594
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
595
- )
596
- )
597
- var(
598
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-br,
599
- var(
600
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br,
601
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)
602
- )
603
- )
604
- var(
605
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-sd,
606
- var(
607
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd,
608
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)
609
- )
610
- )
611
- var(
612
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-cr,
613
- var(
614
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr,
615
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr)
616
- )
617
- );
490
+ border-radius: var(--toggle-height); /* Full pill shape */
491
+ box-sizing: border-box;
618
492
  }
619
-
620
- &.disabled {
621
- cursor: not-allowed;
622
- opacity: 0.4;
623
- &[data-swatch-type="Swatch Image"] {
624
- position: relative;
625
- overflow: hidden;
626
- &::after {
627
- content: "";
628
- width: 172%;
629
- height: 1px;
630
- position: absolute;
631
- background: #f00;
632
- left: -14px;
633
- transform: rotate(48deg);
634
- /* -webkit-transform: rotate(48deg); */
635
- -moz-transform: rotate(48deg);
636
- top: 14px;
637
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
638
- }
639
- &::before {
640
- content: "";
641
- width: 164%;
642
- height: 1px;
643
- position: absolute;
644
- background: #f00;
645
- left: -14px;
646
- transform: rotate(-48deg);
647
- -webkit-transform: rotate(-48deg);
648
- -moz-transform: rotate(-48deg);
649
- top: 14px;
650
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
651
- }
493
+ &[data-swatch-shape-selected="circle"] {
494
+ & div,
495
+ .product-select-image {
496
+ border-radius: 50%;
652
497
  }
653
498
  }
654
- .product-select-image {
655
- width: 40px;
656
- height: 40px;
657
- object-fit: contain;
499
+ &[data-swatch-shape-selected="capsule"] {
500
+ & div,
501
+ .product-select-image {
502
+ // border-radius: 50%;
503
+ width: 100%;
504
+ height: 100%;
505
+ border-radius: inherit;
506
+ }
507
+ }
508
+ &[data-swatch-shape-selected="square"] {
509
+ & div,
510
+ .product-select-image {
511
+ border-radius: 5px;
512
+ }
658
513
  }
659
514
  }
515
+
516
+ &.disabled {
517
+ cursor: not-allowed;
518
+ opacity: 0.4;
519
+ &[data-swatch-type="Swatch Image"] {
520
+ position: relative;
521
+ overflow: hidden;
522
+ &::after {
523
+ content: "";
524
+ width: 172%;
525
+ height: 1px;
526
+ position: absolute;
527
+ background: #f00;
528
+ left: -14px;
529
+ transform: rotate(48deg);
530
+ /* -webkit-transform: rotate(48deg); */
531
+ -moz-transform: rotate(48deg);
532
+ top: 14px;
533
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
534
+ }
535
+ &::before {
536
+ content: "";
537
+ width: 164%;
538
+ height: 1px;
539
+ position: absolute;
540
+ background: #f00;
541
+ left: -14px;
542
+ transform: rotate(-48deg);
543
+ -webkit-transform: rotate(-48deg);
544
+ -moz-transform: rotate(-48deg);
545
+ top: 14px;
546
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
547
+ }
548
+ }
549
+ }
550
+ .product-select-image {
551
+ width: 100%;
552
+ height: 100%;
553
+ object-fit: contain;
554
+ }
660
555
  }
661
556
  }
662
557
  }
@@ -671,10 +566,10 @@ $minWidth: 70px;
671
566
  var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
672
567
  );
673
568
 
674
- padding: var(
675
- --_ctm-mob-lt-se-st-dy-se-im-pg,
676
- var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
677
- );
569
+ // padding: var(
570
+ // --_ctm-mob-lt-se-st-dy-se-im-pg,
571
+ // var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
572
+ // );
678
573
 
679
574
  .select__group {
680
575
  display: flex;
@@ -786,386 +681,181 @@ $minWidth: 70px;
786
681
  );
787
682
  }
788
683
 
789
- .item {
790
- background-color: var(
791
- --_ctm-mob-dn-sh-on-ve-se-dt-se-bd-cr,
792
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
793
- );
794
-
795
- &[data-swatch-shape="circle"] {
796
- border-radius: 999px;
797
- }
798
- &[data-swatch-shape="square"],
799
- &[data-swatch-shape="none"] {
800
- border-radius: 0px;
801
- }
802
- &[data-swatch-shape="rounded"] {
803
- border-radius: var(
804
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
805
- var(
806
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
807
- var(
808
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
809
- var(
810
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
811
- var(
812
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
813
- var(
814
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
815
- var(
816
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
817
- var(
818
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
819
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
820
- )
821
- )
822
- )
823
- )
824
- )
825
- )
826
- )
827
- );
828
- }
829
- &:hover {
830
- background-color: var(
831
- --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
832
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
833
- );
834
- &[data-swatch-shape="circle"] {
835
- border-radius: 999px;
836
- }
837
- &[data-swatch-shape="square"],
838
- &[data-swatch-shape="none"] {
839
- border-radius: 0px;
840
- }
841
- &[data-swatch-shape="rounded"] {
842
- border-radius: var(
843
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
844
- var(
845
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
846
- var(
847
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
848
- var(
849
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
850
- var(
851
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
852
- var(
853
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
854
- var(
855
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
856
- var(
857
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
858
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
859
- )
860
- )
861
- )
862
- )
863
- )
864
- )
865
- )
866
- );
867
- }
868
- // height: 30px;
869
- // width: 30px;
870
- // &[data-swatch-shape="Circle"] {
871
- // border-radius: 50%;
872
- // }
873
- // &[data-swatch-shape="None"] {
874
- // height: 0;
875
- // width: 0;
876
- // }
877
- }
878
- &.selected_item {
879
- width: fit-content;
880
- background-color: var(
881
- --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
882
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
883
- );
884
- border-radius: var(
885
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
886
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
887
- );
888
-
889
- border-color: var(
890
- --_show-border-im-se,
891
- var(
892
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
893
- var(
894
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
895
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
896
- )
897
- )
898
- );
899
-
900
- border-style: var(
901
- --_show-border-im-se,
902
- var(
903
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
904
- var(
905
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
906
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
907
- )
908
- )
909
- );
910
-
911
- border-width: var(
912
- --_show-border-im-se,
913
- var(
914
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
915
- var(
916
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
917
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
918
- )
919
- )
920
- );
921
-
922
- &[data-swatch-shape="circle"] {
923
- border-radius: 999px;
924
- }
925
- &[data-swatch-shape="square"],
926
- &[data-swatch-shape="none"] {
927
- border-radius: 0px;
928
- }
929
- &[data-swatch-shape="rounded"] {
930
- border-radius: var(
931
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
932
- var(
933
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
934
- var(
935
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
936
- var(
937
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
938
- var(
939
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
940
- var(
941
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
942
- var(
943
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
944
- var(
945
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
946
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
947
- )
948
- )
949
- )
950
- )
951
- )
952
- )
953
- )
954
- );
955
- }
956
- }
957
- }
958
684
  .select__group__item {
959
685
  transition: color 0.3s ease;
960
- padding: 5px 12px;
961
- border-radius: 6px;
962
- border: 1px solid var(--_gray-200);
963
- font-size: 16px;
964
- font-weight: 600;
686
+ // border-radius: 6px;
687
+ // border: 1px solid var(--_gray-200);
965
688
  cursor: pointer;
689
+ display: flex;
690
+ align-items: center;
691
+ justify-content: center;
692
+
693
+ // height: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
694
+ // width: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
695
+ padding: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-pg);
696
+ min-width: 20px;
697
+ min-height: 20px;
698
+ box-sizing: content-box;
699
+ border-radius: var(
700
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
701
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
702
+ );
703
+
966
704
  border-color: var(
967
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-cr,
968
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-cr, var(--_ctm-dn-se-on-ve-se-dt-se-br-cr))
705
+ --_sf-hr-br-cr,
706
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
707
+ );
708
+
709
+ background-color: var(
710
+ --_sf-hr-bd-cr,
711
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
969
712
  );
970
713
  border-style: var(
971
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-se,
972
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-se, var(--_ctm-dn-se-on-ve-se-dt-se-br-se))
714
+ --_sf-hr-br-se,
715
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
973
716
  );
974
717
  border-width: var(
975
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-wh,
976
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-wh, var(--_ctm-dn-se-on-ve-se-dt-se-br-wh))
718
+ --_sf-hr-br-wh,
719
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
977
720
  );
721
+
978
722
  box-shadow: var(
979
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-ae,
980
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-ae, var(--_ctm-dn-se-on-ve-se-dt-se-sw-ae))
981
- )
982
- var(
983
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-br,
984
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-br, var(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
723
+ --_sf-hr-sw-ae,
724
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
985
725
  )
986
- var(
987
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-sd,
988
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-sd, var(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
989
- )
990
- var(
991
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-cr,
992
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-cr, var(--_ctm-dn-se-on-ve-se-dt-se-sw-cr))
993
- );
994
- border-radius: var(
995
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
996
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
997
- );
726
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
727
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
728
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
998
729
 
999
- &[data-swatch-shape="circle"] {
1000
- border-radius: 999px;
1001
- }
1002
- &[data-swatch-shape="square"],
1003
- &[data-swatch-shape="none"] {
1004
- border-radius: 0;
1005
- }
1006
- &[data-swatch-shape="rounded"] {
1007
- border-radius: var(
1008
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
1009
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
1010
- );
1011
- }
1012
- background-color: var(
1013
- --_ctm-mob-dn-se-on-ve-se-dt-se-bd-cr,
1014
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-se-on-ve-se-dt-se-bd-cr))
1015
- );
1016
- color: var(
1017
- --_ctm-mob-dn-se-on-ve-se-dt-se-cr,
1018
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-cr, var(--_ctm-dn-se-on-ve-se-dt-se-cr))
1019
- );
730
+ // font is pending
731
+
732
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
1020
733
  font-family: var(
1021
- --_ctm-mob-dn-se-on-ve-se-dt-se-ft-fy,
1022
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-ft-fy, var(--_ctm-dn-se-on-ve-se-dt-se-ft-fy))
734
+ --_sf-hr-ft-fy,
735
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
1023
736
  ),
1024
737
  sans-serif;
1025
738
  font-size: var(
1026
- --_ctm-mob-dn-se-on-ve-se-dt-se-ft-se,
1027
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-ft-se, var(--_ctm-dn-se-on-ve-se-dt-se-ft-se))
739
+ --_sf-hr-ft-se,
740
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
1028
741
  );
1029
742
  font-weight: var(
1030
- --_ctm-mob-dn-se-on-ve-se-dt-se-ft-wt,
1031
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-ft-wt, var(--_ctm-dn-se-on-ve-se-dt-se-ft-wt))
743
+ --_sf-hr-ft-wt,
744
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
1032
745
  );
1033
746
  font-style: var(
1034
- --_ctm-mob-dn-se-on-ve-se-dt-se-ft-se-ic,
1035
- var(
1036
- --_ctm-tab-dn-se-on-ve-se-dt-se-ft-se-ic,
1037
- var(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1038
- )
747
+ --_sf-hr-ft-se-ic,
748
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1039
749
  );
1040
750
  text-align: var(
1041
- --_ctm-mob-dn-se-on-ve-se-dt-se-tt-an,
1042
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-tt-an, var(--_ctm-dn-se-on-ve-se-dt-se-tt-an))
751
+ --_sf-hr-tt-an,
752
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
1043
753
  );
1044
754
  letter-spacing: var(
1045
- --_ctm-mob-dn-se-on-ve-se-dt-se-lr-sg,
1046
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-lr-sg, var(--_ctm-dn-se-on-ve-se-dt-se-lr-sg))
755
+ --_sf-hr-lr-sg,
756
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1047
757
  );
1048
758
  line-height: var(
1049
- --_ctm-mob-dn-se-on-ve-se-dt-se-le-ht,
1050
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-le-ht, var(--_ctm-dn-se-on-ve-se-dt-se-le-ht))
759
+ --_sf-hr-le-ht,
760
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
1051
761
  );
1052
762
  text-decoration: var(
1053
- --_ctm-mob-dn-se-on-ve-se-dt-se-ue,
1054
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-ue, var(--_ctm-dn-se-on-ve-se-dt-se-ue))
763
+ --_sf-hr-ue,
764
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
1055
765
  );
1056
766
 
767
+ &[data-background-shape="circle"] {
768
+ border-radius: 50%;
769
+ }
770
+ &[data-background-shape="square"] {
771
+ border-radius: 5px;
772
+ }
773
+ &[data-background-shape="capsule"] {
774
+ border-radius: 30px; /* Full pill shape */
775
+ box-sizing: border-box;
776
+ }
777
+
1057
778
  &:hover {
1058
- border-color: var(
1059
- --_show-border-im-se,
1060
- var(
1061
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
1062
- var(
1063
- --_ctm-tab-dn-se-on-ve-se-hr-se-br-cr,
1064
- var(--_ctm-dn-se-on-ve-se-hr-se-br-cr)
1065
- )
1066
- )
779
+ --_sf-hr-bd-cr: var(
780
+ --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
781
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
1067
782
  );
1068
- border-style: var(
1069
- --_show-border-im-se,
1070
- var(
1071
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
1072
- var(
1073
- --_ctm-tab-dn-se-on-ve-se-hr-se-br-se,
1074
- var(--_ctm-dn-se-on-ve-se-hr-se-br-se)
1075
- )
1076
- )
783
+ --_sf-hr-br-cr: var(
784
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
785
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr))
1077
786
  );
1078
- border-width: var(
1079
- --_show-border-im-se,
1080
- var(
1081
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
1082
- var(
1083
- --_ctm-tab-dn-se-on-ve-se-hr-se-br-wh,
1084
- var(--_ctm-dn-se-on-ve-se-hr-se-br-wh)
1085
- )
1086
- )
787
+ --_sf-hr-br-se: var(
788
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
789
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se))
1087
790
  );
1088
- border-radius: var(
791
+ --_sf-hr-br-wh: var(
792
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
793
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh))
794
+ );
795
+ --_sf-hr-br-bs: var(
1089
796
  --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
1090
797
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
1091
798
  );
1092
- box-shadow: var(
1093
- --_show-shadow-im-se,
1094
- var(
1095
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
1096
- var(
1097
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae,
1098
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae)
1099
- )
1100
- )
1101
- var(
1102
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
1103
- var(
1104
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-br,
1105
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-br)
1106
- )
1107
- )
1108
- var(
1109
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-sd,
1110
- var(
1111
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-sd,
1112
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-sd)
1113
- )
1114
- )
1115
- var(
1116
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
1117
- var(
1118
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr,
1119
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr)
1120
- )
1121
- )
799
+
800
+ // new
801
+ --_sf-hr-sw-ae: var(
802
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
803
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae))
1122
804
  );
1123
- background-color: var(
1124
- --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
1125
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
805
+ --_sf-hr-sw-br: var(
806
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
807
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br))
808
+ );
809
+ --_sf-hr-sw-hr: var(
810
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
811
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr))
1126
812
  );
1127
- color: var(
813
+ --_sf-hr-sw-cr: var(
814
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
815
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr))
816
+ );
817
+
818
+ // for font
819
+
820
+ --_sf-hr-cr: var(
1128
821
  --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
1129
822
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
1130
823
  );
1131
- font-family: var(
1132
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
1133
- var(
1134
- --_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy,
1135
- var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy)
1136
- )
1137
- ),
1138
- sans-serif;
1139
- font-size: var(
824
+ --_sf-hr-ft-fy: var(
825
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
826
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
827
+ );
828
+ --_sf-hr-ft-se: var(
1140
829
  --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
1141
830
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
1142
831
  );
1143
- font-weight: var(
832
+ --_sf-hr-ft-wt: var(
1144
833
  --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
1145
834
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
1146
835
  );
1147
- font-style: var(
836
+ --_sf-hr-ft-se-ic: var(
1148
837
  --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
1149
838
  var(
1150
839
  --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
1151
840
  var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
1152
841
  )
1153
842
  );
1154
- text-align: var(
843
+ --_sf-hr-tt-an: var(
1155
844
  --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
1156
845
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
1157
846
  );
1158
- letter-spacing: var(
847
+ --_sf-hr-lr-sg: var(
1159
848
  --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
1160
849
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
1161
850
  );
1162
- line-height: var(
851
+ --_sf-hr-le-ht: var(
1163
852
  --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
1164
853
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
1165
854
  );
1166
- text-decoration: var(
1167
- --_ctm-mob-dn-se-on-ve-se-hr-se-ue,
1168
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ue, var(--_ctm-dn-se-on-ve-se-hr-se-ue))
855
+
856
+ --_sf-hr-ue: var(
857
+ --_ctm-mob-dn-on-ve-se-hr-se-ue,
858
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
1169
859
  );
1170
860
  }
1171
861
 
@@ -1174,122 +864,149 @@ $minWidth: 70px;
1174
864
  border-radius: 0;
1175
865
  border-bottom: 2px solid var(--_gray-200);
1176
866
  }
1177
- &.selected {
1178
- border: 1px solid var(--_primary-200);
1179
- background-color: var(--_primary-25);
1180
- color: var(--_primary-400);
1181
-
1182
- border-color: var(
1183
- --_show-border-im-se,
1184
- var(
1185
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
1186
- var(
1187
- --_ctm-tab-dn-se-on-ve-se-sd-se-br-cr,
1188
- var(--_ctm-dn-se-on-ve-se-sd-se-br-cr)
1189
- )
1190
- )
867
+ &[data-selected="true"] {
868
+ --_sf-sd-bd-cr: var(
869
+ --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
870
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
1191
871
  );
1192
- border-style: var(
1193
- --_show-border-im-se,
1194
- var(
1195
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
1196
- var(
1197
- --_ctm-tab-dn-se-on-ve-se-sd-se-br-se,
1198
- var(--_ctm-dn-se-on-ve-se-sd-se-br-se)
1199
- )
1200
- )
872
+ --_sf-sd-br-cr: var(
873
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
874
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
1201
875
  );
1202
- border-width: var(
1203
- --_show-border-im-se,
1204
- var(
1205
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
1206
- var(
1207
- --_ctm-tab-dn-se-on-ve-se-sd-se-br-wh,
1208
- var(--_ctm-dn-se-on-ve-se-sd-se-br-wh)
1209
- )
1210
- )
876
+ --_sf-sd-br-se: var(
877
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
878
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
1211
879
  );
1212
- border-radius: var(
880
+ --_sf-sd-br-wh: var(
881
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
882
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
883
+ );
884
+ --_sf-sd-br-bs: var(
1213
885
  --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
1214
886
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
1215
887
  );
1216
- box-shadow: var(
1217
- --_show-shadow-im-se,
1218
- var(
1219
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-ae,
1220
- var(
1221
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae,
1222
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae)
1223
- )
1224
- )
1225
- var(
1226
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-br,
1227
- var(
1228
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-br,
1229
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-br)
1230
- )
1231
- )
1232
- var(
1233
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-sd,
1234
- var(
1235
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-sd,
1236
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-sd)
1237
- )
1238
- )
1239
- var(
1240
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-cr,
1241
- var(
1242
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr,
1243
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr)
1244
- )
1245
- )
888
+
889
+ // new
890
+ --_sf-sd-sw-ae: var(
891
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
892
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae))
1246
893
  );
1247
- background-color: var(
1248
- --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
1249
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
894
+ --_sf-sd-sw-br: var(
895
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
896
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br))
897
+ );
898
+ --_sf-sd-sw-hr: var(
899
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
900
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr))
901
+ );
902
+ --_sf-sd-sw-cr: var(
903
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
904
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
1250
905
  );
1251
- color: var(
906
+
907
+ // for font
908
+
909
+ --_sf-sd-cr: var(
1252
910
  --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
1253
911
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
1254
912
  );
1255
- font-family: var(
1256
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
1257
- var(
1258
- --_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy,
1259
- var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy)
1260
- )
1261
- ),
1262
- sans-serif;
1263
- font-size: var(
913
+ --_sf-sd-ft-fy: var(
914
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
915
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
916
+ );
917
+ --_sf-sd-ft-se: var(
1264
918
  --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
1265
919
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
1266
920
  );
1267
- font-weight: var(
921
+ --_sf-sd-ft-wt: var(
1268
922
  --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
1269
923
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
1270
924
  );
1271
- font-style: var(
925
+ --_sf-sd-ft-se-ic: var(
1272
926
  --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
1273
927
  var(
1274
928
  --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
1275
929
  var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
1276
930
  )
1277
931
  );
1278
- text-align: var(
932
+ --_sf-sd-tt-an: var(
1279
933
  --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
1280
934
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
1281
935
  );
1282
- letter-spacing: var(
936
+ --_sf-sd-lr-sg: var(
1283
937
  --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
1284
938
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
1285
939
  );
1286
- line-height: var(
940
+ --_sf-sd-le-ht: var(
1287
941
  --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
1288
942
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
1289
943
  );
944
+
945
+ --_sf-sd-ue: var(
946
+ --_ctm-mob-dn-on-ve-se-sd-se-ue,
947
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
948
+ );
949
+
950
+ border-color: var(
951
+ --_sf-sd-br-cr,
952
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
953
+ );
954
+
955
+ background-color: var(
956
+ --_sf-sd-bd-cr,
957
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
958
+ );
959
+ border-style: var(
960
+ --_sf-sd-br-se,
961
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
962
+ );
963
+ border-width: var(
964
+ --_sf-sd-br-wh,
965
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
966
+ );
967
+
968
+ box-shadow: var(
969
+ --_sf-sd-sw-ae,
970
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
971
+ )
972
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
973
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
974
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
975
+ // font is pending
976
+
977
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
978
+ font-family: var(
979
+ --_sf-sd-ft-fy,
980
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
981
+ ),
982
+ sans-serif;
983
+ font-size: var(
984
+ --_sf-sd-ft-se,
985
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
986
+ );
987
+ font-weight: var(
988
+ --_sf-sd-ft-wt,
989
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
990
+ );
991
+ font-style: var(
992
+ --_sf-sd-ft-se-ic,
993
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
994
+ );
995
+ text-align: var(
996
+ --_sf-sd-tt-an,
997
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
998
+ );
999
+ letter-spacing: var(
1000
+ --_sf-sd-lr-sg,
1001
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1002
+ );
1003
+ line-height: var(
1004
+ --_sf-sd-le-ht,
1005
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
1006
+ );
1290
1007
  text-decoration: var(
1291
- --_ctm-mob-dn-se-on-ve-se-sd-se-ue,
1292
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ue, var(--_ctm-dn-se-on-ve-se-sd-se-ue))
1008
+ --_sf-sd-ue,
1009
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
1293
1010
  );
1294
1011
  }
1295
1012
 
@@ -1341,9 +1058,7 @@ $minWidth: 70px;
1341
1058
  width: 100%;
1342
1059
  display: flex;
1343
1060
  top: calc(
1344
- calc(
1345
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1346
- ) /
1061
+ calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px) /
1347
1062
  2
1348
1063
  );
1349
1064
  }
@@ -1586,8 +1301,7 @@ $minWidth: 70px;
1586
1301
  top: calc(
1587
1302
  calc(
1588
1303
  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1589
- ) /
1590
- 2
1304
+ ) / 2
1591
1305
  );
1592
1306
  }
1593
1307
  }
@@ -1611,8 +1325,7 @@ $minWidth: 70px;
1611
1325
  --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1612
1326
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1613
1327
  )
1614
- ) /
1615
- 2
1328
+ ) / 2
1616
1329
  );
1617
1330
  }
1618
1331
  }
@@ -1920,8 +1633,7 @@ $minWidth: 70px;
1920
1633
  var(
1921
1634
  --_ctm-mob-lt-gd-os-dy-se-an-sg,
1922
1635
  var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1923
- ) /
1924
- 2
1636
+ ) / 2
1925
1637
  );
1926
1638
  }
1927
1639
  }
@@ -2321,8 +2033,7 @@ $minWidth: 70px;
2321
2033
  var(
2322
2034
  --_ctm-mob-dn-pn-as-aw-se,
2323
2035
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2324
- ) +
2325
- 8px
2036
+ ) + 8px
2326
2037
  )
2327
2038
  );
2328
2039
  }
@@ -2332,8 +2043,7 @@ $minWidth: 70px;
2332
2043
  var(
2333
2044
  --_ctm-mob-dn-pn-le-le-ht,
2334
2045
  var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2335
- ) +
2336
- 20px
2046
+ ) + 20px
2337
2047
  )
2338
2048
  );
2339
2049
  }
@@ -2343,8 +2053,7 @@ $minWidth: 70px;
2343
2053
  var(
2344
2054
  --_ctm-mob-dn-pn-ds-dt-se,
2345
2055
  var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2346
- ) +
2347
- 20px
2056
+ ) + 20px
2348
2057
  )
2349
2058
  );
2350
2059
  }
@@ -2456,15 +2165,13 @@ $minWidth: 70px;
2456
2165
  var(
2457
2166
  --_ctm-mob-dn-pn-as-aw-se,
2458
2167
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2459
- ) *
2460
- 0.5
2168
+ ) * 0.5
2461
2169
  );
2462
2170
  height: calc(
2463
2171
  var(
2464
2172
  --_ctm-mob-dn-pn-as-aw-se,
2465
2173
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2466
- ) *
2467
- 0.5
2174
+ ) * 0.5
2468
2175
  );
2469
2176
  path {
2470
2177
  stroke: var(