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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,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,360 @@ $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)
213
+ );
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)
207
222
  );
208
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
+ border-radius: 50%;
253
+ }
254
+ // border-radius: 50%;
211
255
  }
212
- &[data-swatch-shape="square"],
213
- &[data-swatch-shape="none"] {
214
- border-radius: 0px;
256
+ &[data-swatch-shape="capsule"] {
257
+ & div {
258
+ // border-radius: 50%;
259
+ width: 100%;
260
+ height: 100%;
261
+ border-radius: inherit;
262
+ }
263
+ // border-radius: 50%;
215
264
  }
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
- )
265
+
266
+ &[data-selected="true"] {
267
+ border-color: var(
268
+ --_sf-sd-br-cr,
269
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
241
270
  );
242
- }
243
271
 
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
272
  background-color: var(
273
+ --_sf-sd-bd-cr,
274
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)
275
+ );
276
+ border-style: var(
277
+ --_sf-sd-br-se,
278
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
279
+ );
280
+ border-width: var(
281
+ --_sf-sd-br-wh,
282
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
283
+ );
284
+ box-shadow: var(
285
+ --_sf-sd-sw-ae,
286
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
287
+ )
288
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
289
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
290
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
291
+
292
+ &[data-background-shape-selected="circle"] {
293
+ border-radius: 50%;
294
+ }
295
+ &[data-background-shape-selected="square"] {
296
+ border-radius: 5px;
297
+ }
298
+ &[data-background-shape-selected="capsule"] {
299
+ border-radius: 80%;
300
+ // width: calc(
301
+ // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
302
+ // 8px
303
+ // );
304
+ }
305
+ &[data-swatch-shape-selected="circle"] {
306
+ & div {
307
+ border-radius: 50%;
308
+ }
309
+ }
310
+ &[data-swatch-shape-selected="capsule"] {
311
+ & div {
312
+ border-radius: 50%;
313
+ }
314
+ }
315
+ &[data-swatch-shape-selected="square"] {
316
+ & div {
317
+ border-radius: 5px;
318
+ }
319
+ }
320
+ }
321
+ &:hover {
322
+ --_sf-hr-bd-cr: var(
255
323
  --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
256
324
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
257
325
  );
258
- &[data-swatch-shape="circle"] {
259
- border-radius: 999px;
326
+ --_sf-hr-br-cr: var(
327
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
328
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr))
329
+ );
330
+ --_sf-hr-br-se: var(
331
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
332
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se))
333
+ );
334
+ --_sf-hr-br-wh: var(
335
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
336
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh))
337
+ );
338
+ --_sf-hr-br-bs: var(
339
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
340
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs))
341
+ );
342
+
343
+ // new
344
+ --_sf-hr-sw-ae: var(
345
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
346
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae))
347
+ );
348
+ --_sf-hr-sw-br: var(
349
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
350
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br))
351
+ );
352
+ --_sf-hr-sw-hr: var(
353
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
354
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr))
355
+ );
356
+ --_sf-hr-sw-cr: var(
357
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
358
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr))
359
+ );
360
+ }
361
+
362
+ &:hover {
363
+ &[data-background-shape-hover="circle"] {
364
+ border-radius: 50%;
260
365
  }
261
- &[data-swatch-shape="square"],
262
- &[data-swatch-shape="none"] {
263
- border-radius: 0px;
366
+ &[data-background-shape-hover="square"] {
367
+ border-radius: 5px;
264
368
  }
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
- );
369
+ &[data-background-shape-hover="capsule"] {
370
+ border-radius: 80%;
371
+ // width: calc(
372
+ // var(
373
+ // --_ctm-mob-lt-sh-im-se,
374
+ // var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))
375
+ // ) +
376
+ // 8px
377
+ // );
378
+ }
379
+ &[data-swatch-shape-hover="circle"] {
380
+ & div {
381
+ border-radius: 50%;
382
+ width: var(--_ctm-lt-sh-im-se);
383
+ }
384
+ // border-radius: 50%;
385
+ }
386
+ &[data-swatch-shape-hover="capsule"] {
387
+ & div {
388
+ border-radius: 50%;
389
+ }
390
+ }
391
+ &[data-swatch-shape-hover="square"] {
392
+ & div {
393
+ border-radius: 5px;
394
+ }
291
395
  }
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
396
  }
302
- &.selected_item {
303
- width: fit-content;
304
- background-color: var(
397
+
398
+ &[data-selected="true"] {
399
+ --_sf-sd-bd-cr: var(
305
400
  --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
306
401
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
307
402
  );
308
- border-radius: var(
403
+ --_sf-sd-br-cr: var(
404
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
405
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr))
406
+ );
407
+ --_sf-sd-br-se: var(
408
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
409
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se))
410
+ );
411
+ --_sf-sd-br-wh: var(
412
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
413
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh))
414
+ );
415
+ --_sf-sd-br-bs: var(
309
416
  --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
310
417
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
311
418
  );
312
419
 
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
- )
420
+ // new
421
+ --_sf-sd-sw-ae: var(
422
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
423
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae))
322
424
  );
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
- )
425
+ --_sf-sd-sw-br: var(
426
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
427
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
333
428
  );
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
- )
429
+ --_sf-sd-sw-sd: var(
430
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
431
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
432
+ );
433
+ --_sf-sd-sw-cr: var(
434
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
435
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr))
344
436
  );
345
437
 
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
438
  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
- )
439
+ --_sf-sd-br-cr,
440
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
441
+ );
442
+
443
+ background-color: var(
444
+ --_sf-sd-bd-cr,
445
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
403
446
  );
404
447
 
405
448
  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
- )
449
+ --_sf-sd-br-se,
450
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
414
451
  );
415
452
 
416
453
  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
- )
454
+ --_sf-sd-br-wh,
455
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
425
456
  );
426
-
427
457
  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))
458
+ --_sf-sd-br-rs,
459
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
430
460
  );
431
461
 
432
462
  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
- );
463
+ --_sf-sd-sw-ae,
464
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
465
+ )
466
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
467
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
468
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
463
469
 
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;
470
+ &[data-background-shape-selected="circle"] {
471
+ border-radius: 50%;
471
472
  }
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
- );
473
+ &[data-background-shape-selected="square"] {
474
+ border-radius: 5px;
556
475
  }
476
+ &[data-background-shape-selected="capsule"] {
477
+ --toggle-height: var(--_ctm-lt-sh-im-se);
478
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
557
479
 
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;
480
+ width: var(--toggle-width);
481
+ height: var(--toggle-height);
568
482
 
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
- );
483
+ border-radius: var(--toggle-height); /* Full pill shape */
484
+ box-sizing: border-box;
618
485
  }
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
- }
486
+ &[data-swatch-shape-selected="circle"] {
487
+ & div {
488
+ border-radius: 50%;
489
+ width: var(--_ctm-lt-sh-im-se);
490
+ }
491
+ }
492
+ &[data-swatch-shape-selected="capsule"] {
493
+ & div {
494
+ // border-radius: 50%;
495
+ width: 100%;
496
+ height: 100%;
497
+ border-radius: inherit;
652
498
  }
653
499
  }
654
- .product-select-image {
655
- width: 40px;
656
- height: 40px;
657
- object-fit: contain;
500
+ &[data-swatch-shape-selected="square"] {
501
+ & div {
502
+ border-radius: 5px;
503
+ }
658
504
  }
659
505
  }
506
+
507
+ &.disabled {
508
+ cursor: not-allowed;
509
+ opacity: 0.4;
510
+ &[data-swatch-type="Swatch Image"] {
511
+ position: relative;
512
+ overflow: hidden;
513
+ &::after {
514
+ content: "";
515
+ width: 172%;
516
+ height: 1px;
517
+ position: absolute;
518
+ background: #f00;
519
+ left: -14px;
520
+ transform: rotate(48deg);
521
+ /* -webkit-transform: rotate(48deg); */
522
+ -moz-transform: rotate(48deg);
523
+ top: 14px;
524
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
525
+ }
526
+ &::before {
527
+ content: "";
528
+ width: 164%;
529
+ height: 1px;
530
+ position: absolute;
531
+ background: #f00;
532
+ left: -14px;
533
+ transform: rotate(-48deg);
534
+ -webkit-transform: rotate(-48deg);
535
+ -moz-transform: rotate(-48deg);
536
+ top: 14px;
537
+ box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
538
+ }
539
+ }
540
+ }
541
+ .product-select-image {
542
+ width: 100%;
543
+ height: 100%;
544
+ object-fit: contain;
545
+ }
660
546
  }
661
547
  }
662
548
  }
@@ -786,175 +672,6 @@ $minWidth: 70px;
786
672
  );
787
673
  }
788
674
 
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
675
  .select__group__item {
959
676
  transition: color 0.3s ease;
960
677
  padding: 5px 12px;
@@ -963,209 +680,139 @@ $minWidth: 70px;
963
680
  font-size: 16px;
964
681
  font-weight: 600;
965
682
  cursor: pointer;
683
+
684
+ border-radius: var(
685
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
686
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
687
+ );
688
+
966
689
  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))
690
+ --_sf-hr-br-cr,
691
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
692
+ );
693
+
694
+ background-color: var(
695
+ --_sf-hr-bd-cr,
696
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
969
697
  );
970
698
  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))
699
+ --_sf-hr-br-se,
700
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
973
701
  );
974
702
  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))
703
+ --_sf-hr-br-wh,
704
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
977
705
  );
706
+
978
707
  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))
708
+ --_sf-hr-sw-ae,
709
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
981
710
  )
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))
985
- )
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
- );
711
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
712
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
713
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
714
+
715
+ // font is pending
716
+
717
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
998
718
 
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
- );
1020
719
  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))
720
+ --_sf-hr-ft-fy,
721
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
1023
722
  ),
1024
723
  sans-serif;
724
+
1025
725
  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))
726
+ --_sf-hr-ft-se,
727
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
1028
728
  );
729
+
1029
730
  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))
731
+ --_sf-hr-ft-wt,
732
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
1032
733
  );
734
+
1033
735
  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
- )
736
+ --_sf-hr-ft-se-ic,
737
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1039
738
  );
739
+
1040
740
  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))
741
+ --_sf-hr-tt-an,
742
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
1043
743
  );
744
+
1044
745
  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))
746
+ --_sf-hr-lr-sg,
747
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1047
748
  );
749
+
1048
750
  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))
751
+ --_sf-hr-le-ht,
752
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht)
1051
753
  );
1052
754
  text-decoration: var(
1053
755
  --_ctm-mob-dn-se-on-ve-se-dt-se-ue,
1054
756
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-ue, var(--_ctm-dn-se-on-ve-se-dt-se-ue))
1055
757
  );
1056
758
 
1057
- &: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
- )
1067
- );
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
- )
1077
- );
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
- )
1087
- );
759
+ text-decoration: var(
760
+ --_sf-hr-se-ue,
761
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-se-ue)
762
+ );
763
+
764
+ &[data-swatch-shape="circle"] {
765
+ border-radius: 999px;
766
+ }
767
+ &[data-swatch-shape="square"],
768
+ &[data-swatch-shape="none"] {
769
+ border-radius: 0;
770
+ }
771
+ &[data-swatch-shape="rounded"] {
1088
772
  border-radius: var(
1089
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
1090
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
1091
- );
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
- )
773
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
774
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
1122
775
  );
1123
- background-color: var(
776
+ }
777
+
778
+ &:hover {
779
+ --_sf-hr-bd-cr: var(
1124
780
  --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
1125
781
  var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
1126
782
  );
1127
- color: var(
1128
- --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
1129
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
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))
1130
786
  );
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(
1140
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
1141
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
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))
1142
790
  );
1143
- font-weight: var(
1144
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
1145
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
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))
1146
794
  );
1147
- font-style: var(
1148
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
1149
- var(
1150
- --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
1151
- var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
1152
- )
795
+ --_sf-hr-br-bs: var(
796
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
797
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
1153
798
  );
1154
- text-align: var(
1155
- --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
1156
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
799
+
800
+ // new
801
+ --_sf-hr-sw-ae: var(
802
+ --_ctm-mob-dn-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))
1157
804
  );
1158
- letter-spacing: var(
1159
- --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
1160
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
805
+ --_sf-hr-sw-br: var(
806
+ --_ctm-mob-dn-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))
1161
808
  );
1162
- line-height: var(
1163
- --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
1164
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
809
+ --_sf-hr-sw-hr: var(
810
+ --_ctm-mob-dn-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))
1165
812
  );
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))
813
+ --_sf-hr-sw-cr: var(
814
+ --_ctm-mob-dn-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))
1169
816
  );
1170
817
  }
1171
818
 
@@ -1174,123 +821,71 @@ $minWidth: 70px;
1174
821
  border-radius: 0;
1175
822
  border-bottom: 2px solid var(--_gray-200);
1176
823
  }
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
- )
824
+ &[data-selected="true"] {
825
+ --_sf-sd-bd-cr: var(
826
+ --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
827
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
1191
828
  );
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
- )
829
+ --_sf-sd-br-cr: var(
830
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
831
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
1201
832
  );
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
- )
833
+ --_sf-sd-br-se: var(
834
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
835
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
1211
836
  );
1212
- border-radius: var(
837
+ --_sf-sd-br-wh: var(
838
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
839
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
840
+ );
841
+ --_sf-sd-br-bs: var(
1213
842
  --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
1214
843
  var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
1215
844
  );
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
- )
845
+
846
+ // new
847
+ --_sf-sd-sw-ae: var(
848
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
849
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae))
1246
850
  );
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))
851
+ --_sf-sd-sw-br: var(
852
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
853
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br))
1250
854
  );
1251
- color: var(
1252
- --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
1253
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
855
+ --_sf-sd-sw-hr: var(
856
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
857
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr))
1254
858
  );
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(
1264
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
1265
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
859
+ --_sf-sd-sw-cr: var(
860
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
861
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
1266
862
  );
1267
- font-weight: var(
1268
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
1269
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
1270
- );
1271
- font-style: var(
1272
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
1273
- var(
1274
- --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
1275
- var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
1276
- )
1277
- );
1278
- text-align: var(
1279
- --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
1280
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
863
+
864
+ border-color: var(
865
+ --_sf-sd-br-cr,
866
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
1281
867
  );
1282
- letter-spacing: var(
1283
- --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
1284
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
868
+
869
+ background-color: var(
870
+ --_sf-sd-bd-cr,
871
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
1285
872
  );
1286
- line-height: var(
1287
- --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
1288
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
873
+ border-style: var(
874
+ --_sf-sd-br-se,
875
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
1289
876
  );
1290
- 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))
877
+ border-width: var(
878
+ --_sf-sd-br-wh,
879
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
1293
880
  );
881
+
882
+ box-shadow: var(
883
+ --_sf-sd-sw-ae,
884
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
885
+ )
886
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
887
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
888
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
1294
889
  }
1295
890
 
1296
891
  &.selected__child {
@@ -1341,9 +936,7 @@ $minWidth: 70px;
1341
936
  width: 100%;
1342
937
  display: flex;
1343
938
  top: calc(
1344
- calc(
1345
- var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1346
- ) /
939
+ calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px) /
1347
940
  2
1348
941
  );
1349
942
  }
@@ -1586,8 +1179,7 @@ $minWidth: 70px;
1586
1179
  top: calc(
1587
1180
  calc(
1588
1181
  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1589
- ) /
1590
- 2
1182
+ ) / 2
1591
1183
  );
1592
1184
  }
1593
1185
  }
@@ -1611,8 +1203,7 @@ $minWidth: 70px;
1611
1203
  --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1612
1204
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1613
1205
  )
1614
- ) /
1615
- 2
1206
+ ) / 2
1616
1207
  );
1617
1208
  }
1618
1209
  }
@@ -1920,8 +1511,7 @@ $minWidth: 70px;
1920
1511
  var(
1921
1512
  --_ctm-mob-lt-gd-os-dy-se-an-sg,
1922
1513
  var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1923
- ) /
1924
- 2
1514
+ ) / 2
1925
1515
  );
1926
1516
  }
1927
1517
  }
@@ -2321,8 +1911,7 @@ $minWidth: 70px;
2321
1911
  var(
2322
1912
  --_ctm-mob-dn-pn-as-aw-se,
2323
1913
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2324
- ) +
2325
- 8px
1914
+ ) + 8px
2326
1915
  )
2327
1916
  );
2328
1917
  }
@@ -2332,8 +1921,7 @@ $minWidth: 70px;
2332
1921
  var(
2333
1922
  --_ctm-mob-dn-pn-le-le-ht,
2334
1923
  var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2335
- ) +
2336
- 20px
1924
+ ) + 20px
2337
1925
  )
2338
1926
  );
2339
1927
  }
@@ -2343,8 +1931,7 @@ $minWidth: 70px;
2343
1931
  var(
2344
1932
  --_ctm-mob-dn-pn-ds-dt-se,
2345
1933
  var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2346
- ) +
2347
- 20px
1934
+ ) + 20px
2348
1935
  )
2349
1936
  );
2350
1937
  }
@@ -2456,15 +2043,13 @@ $minWidth: 70px;
2456
2043
  var(
2457
2044
  --_ctm-mob-dn-pn-as-aw-se,
2458
2045
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2459
- ) *
2460
- 0.5
2046
+ ) * 0.5
2461
2047
  );
2462
2048
  height: calc(
2463
2049
  var(
2464
2050
  --_ctm-mob-dn-pn-as-aw-se,
2465
2051
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2466
- ) *
2467
- 0.5
2052
+ ) * 0.5
2468
2053
  );
2469
2054
  path {
2470
2055
  stroke: var(