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

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 (38) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/builder.js.LICENSE.txt +1 -1
  3. package/dist/button copy.scss +2 -1
  4. package/dist/checkout.scss +141 -16
  5. package/dist/filter-results.scss +324 -0
  6. package/dist/filters.scss +1324 -31
  7. package/dist/functions.js +1 -1
  8. package/dist/icon-list.scss +11 -11
  9. package/dist/index.js +1 -1
  10. package/dist/layouter-pro-item.scss +6 -0
  11. package/dist/layouter-pro.scss +30 -2
  12. package/dist/menu-v2.scss +5 -2
  13. package/dist/past-orders.scss +770 -26
  14. package/dist/product-actions.scss +254 -393
  15. package/dist/product-basic-elements.scss +12 -12
  16. package/dist/product-options.scss +72 -46
  17. package/dist/quotes.scss +1 -0
  18. package/dist/repeater.scss +5 -2
  19. package/dist/text-temp-v2.scss +2 -2
  20. package/dist/types/builder/elements/filter-results/index.d.ts +27 -0
  21. package/dist/types/builder/elements/product-sizechart/index.d.ts +26 -0
  22. package/dist/types/builder/elements/user-elements/index.d.ts +30 -0
  23. package/dist/types/builder/enums/index.d.ts +5 -1
  24. package/dist/types/builder/index.d.ts +4 -1
  25. package/dist/types/builder/tools/element-edit/filterResults.d.ts +140 -0
  26. package/dist/types/builder/tools/element-edit/filters.d.ts +15 -8
  27. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  28. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +14 -1
  29. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +9 -2
  30. package/dist/types/builder/tools/element-edit/pastOrders.d.ts +61 -1
  31. package/dist/types/builder/tools/element-edit/productActions.d.ts +6 -1
  32. package/dist/types/builder/tools/element-edit/productSizeChart.d.ts +24 -0
  33. package/dist/types/builder/tools/element-edit/userElements.d.ts +555 -0
  34. package/dist/types/global/types.d.ts +2 -1
  35. package/dist/user-elements.scss +1375 -0
  36. package/dist/variant-picker.scss +127 -84
  37. package/dist/widget.scss +2 -0
  38. package/package.json +1 -1
package/dist/filters.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./functions.scss" as *;
3
4
 
4
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
5
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -22,8 +23,70 @@ $resizeActive: '[data-cms-element-resizer="true"]';
22
23
  width: 100%;
23
24
  }
24
25
  }
26
+
27
+ &[data-widget-border="true"] {
28
+ .filter_container {
29
+ border-color: var(
30
+ --_ctm-mob-dn-fs-wt-br-cr,
31
+ var(--_ctm-tab-dn-fs-wt-br-cr, var(--_ctm-dn-fs-wt-br-cr))
32
+ );
33
+ border-style: var(
34
+ --_ctm-mob-dn-fs-wt-br-se,
35
+ var(--_ctm-tab-dn-fs-wt-br-se, var(--_ctm-dn-fs-wt-br-se))
36
+ );
37
+ border-width: var(
38
+ --_ctm-mob-dn-fs-wt-br-wh,
39
+ var(--_ctm-tab-dn-fs-wt-br-wh, var(--_ctm-dn-fs-wt-br-wh))
40
+ );
41
+ }
42
+ }
43
+
44
+ &[data-widget-shadow="false"] {
45
+ --_show-shadow: none;
46
+ }
47
+
48
+ &[data-clear-all-text-shadow="false"] {
49
+ --_show-shadow-clear-all: none;
50
+ }
51
+
52
+ &[data-clear-all-text-border="true"] {
53
+ .filter_container .filter__inline .filter__Header {
54
+ border-color: var(
55
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-cr,
56
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-cr, var(--_ctm-dn-cr-al-tt-dt-se-br-cr))
57
+ );
58
+
59
+ border-style: var(
60
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-se,
61
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-se, var(--_ctm-dn-cr-al-tt-dt-se-br-se))
62
+ );
63
+
64
+ border-width: var(
65
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-wh,
66
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-wh, var(--_ctm-dn-cr-al-tt-dt-se-br-wh))
67
+ );
68
+ }
69
+ }
70
+
25
71
  .filter_container {
26
72
  //Filter Features Starts
73
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
74
+ background-color: var(
75
+ --_ctm-mob-dn-fs-wt-bd-cr,
76
+ var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr))
77
+ );
78
+ box-shadow: var(
79
+ --_show-shadow,
80
+ var(--_ctm-mob-dn-fs-wt-sw-ae, var(--_ctm-tab-dn-fs-wt-sw-ae, var(--_ctm-dn-fs-wt-sw-ae)))
81
+ var(--_ctm-mob-dn-fs-wt-sw-br, var(--_ctm-tab-dn-fs-wt-sw-br, var(--_ctm-dn-fs-wt-sw-br)))
82
+ var(--_ctm-mob-dn-fs-wt-sw-sd, var(--_ctm-tab-dn-fs-wt-sw-sd, var(--_ctm-dn-fs-wt-sw-sd)))
83
+ var(--_ctm-mob-dn-fs-wt-sw-cr, var(--_ctm-tab-dn-fs-wt-sw-cr, var(--_ctm-dn-fs-wt-sw-cr)))
84
+ );
85
+ border-radius: var(
86
+ --_ctm-mob-dn-fs-wt-br-rs,
87
+ var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
88
+ );
89
+ padding: var(--_ctm-mob-dn-fs-wt-pg, var(--_ctm-tab-dn-fs-wt-pg, var(--_ctm-dn-fs-wt-pg)));
27
90
  @mixin flex($justifyItems: flex-start, $alignItems: flex-start) {
28
91
  display: var(--_d-flex);
29
92
  justify-content: $justifyItems;
@@ -55,16 +118,466 @@ $resizeActive: '[data-cms-element-resizer="true"]';
55
118
  text-transform: uppercase;
56
119
  }
57
120
  h3 {
58
- font-size: 14px;
59
- text-transform: uppercase;
121
+ // font-size: 14px;
122
+ // text-transform: uppercase;
123
+
124
+ color: var(
125
+ --_ctm-mob-dn-fs-wt-cr,
126
+ var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
127
+ );
128
+ font-family: var(
129
+ --_sf-hr-ff,
130
+ var(
131
+ --_ctm-mob-dn-fs-wt-ft-fy,
132
+ var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
133
+ )
134
+ );
135
+ font-size: var(
136
+ --_ctm-mob-dn-fs-wt-ft-se,
137
+ var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
138
+ );
139
+ font-weight: var(
140
+ --_ctm-mob-dn-fs-wt-ft-wt,
141
+ var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
142
+ );
143
+ font-style: var(
144
+ --_ctm-mob-dn-fs-wt-ft-se-ic,
145
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
146
+ );
147
+ text-align: var(
148
+ --_ctm-mob-dn-fs-wt-tt-an,
149
+ var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
150
+ );
151
+ letter-spacing: var(
152
+ --_ctm-mob-dn-fs-wt-lr-sg,
153
+ var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
154
+ );
155
+ line-height: var(
156
+ --_ctm-mob-dn-fs-wt-le-ht,
157
+ var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
158
+ );
159
+ text-decoration: var(
160
+ --_ctm-mob-dn-fs-wt-ue,
161
+ var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
162
+ );
60
163
  }
164
+
61
165
  .reset__btn {
62
- font-size: 12px;
63
- text-transform: uppercase;
64
- font-weight: var(--_fw-500);
65
- color: var(--_primary-400);
66
- &:hover {
67
- color: var(--_primary-700);
166
+ // font-size: 12px;
167
+ // text-transform: uppercase;
168
+ // font-weight: var(--_fw-500);
169
+ // color: var(--_primary-400);
170
+ // &:hover {
171
+ // color: var(--_primary-700);
172
+ // }
173
+ background-color: var(
174
+ --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
175
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
176
+ );
177
+ border-radius: var(
178
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
179
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
180
+ );
181
+ padding: var(
182
+ --_ctm-mob-dn-cr-al-tt-dt-se-pg,
183
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
184
+ );
185
+ box-shadow: var(
186
+ --_show-shadow-clear-all,
187
+ var(
188
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
189
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
190
+ )
191
+ var(
192
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
193
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
194
+ )
195
+ var(
196
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
197
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
198
+ )
199
+ var(
200
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
201
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
202
+ )
203
+ );
204
+
205
+ color: var(
206
+ --_ctm-mob-dn-cr-al-tt-dt-se-cr,
207
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
208
+ );
209
+ font-family: var(
210
+ --_sf-hr-ff,
211
+ var(
212
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
213
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
214
+ )
215
+ );
216
+ font-size: var(
217
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
218
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
219
+ );
220
+ font-weight: var(
221
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
222
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
223
+ );
224
+ font-style: var(
225
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
226
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
227
+ );
228
+ text-align: var(
229
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
230
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
231
+ );
232
+ letter-spacing: var(
233
+ --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
234
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
235
+ );
236
+ line-height: var(
237
+ --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
238
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
239
+ );
240
+ text-decoration: var(
241
+ --_ctm-mob-dn-cr-al-tt-dt-se-ue,
242
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
243
+ );
244
+ }
245
+ }
246
+ p {
247
+ color: var(
248
+ --_ctm-mob-dn-fs-wt-cr-dc,
249
+ var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
250
+ );
251
+ font-family: var(
252
+ --_sf-hr-ff,
253
+ var(
254
+ --_ctm-mob-dn-fs-wt-ft-fy-dc,
255
+ var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
256
+ )
257
+ );
258
+ font-size: var(
259
+ --_ctm-mob-dn-fs-wt-ft-se-dc,
260
+ var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
261
+ );
262
+ font-weight: var(
263
+ --_ctm-mob-dn-fs-wt-ft-wt-dc,
264
+ var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
265
+ );
266
+ font-style: var(
267
+ --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
268
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
269
+ );
270
+ text-align: var(
271
+ --_ctm-mob-dn-fs-wt-tt-an-dc,
272
+ var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
273
+ );
274
+ letter-spacing: var(
275
+ --_ctm-mob-dn-fs-wt-lr-sg-dc,
276
+ var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
277
+ );
278
+ line-height: var(
279
+ --_ctm-mob-dn-fs-wt-le-ht-dc,
280
+ var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
281
+ );
282
+ text-decoration: var(
283
+ --_ctm-mob-dn-fs-wt-ue-dc,
284
+ var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
285
+ );
286
+ }
287
+
288
+ .selected__items {
289
+ display: flex;
290
+ flex-wrap: wrap;
291
+ gap: 10px;
292
+ align-items: center;
293
+ margin-top: 10px;
294
+ .selected__category {
295
+ display: flex;
296
+ align-items: center;
297
+ gap: 10px;
298
+ flex-wrap: wrap;
299
+ // .selected_item {
300
+ // display: flex;
301
+ // gap: 8px;
302
+ // border: 1px solid var(--_gray-200);
303
+ // font-size: 14px;
304
+ // border-radius: 30px;
305
+ // padding: 5px 10px;
306
+ // align-items: center;
307
+ // &:hover {
308
+ // border: 1px solid var(--_gray-300);
309
+ // background-color: var(--_gray-50);
310
+ // cursor: pointer;
311
+ // }
312
+ // }
313
+ .selected_item {
314
+ display: flex;
315
+ gap: 8px;
316
+ border: 1px solid var(--_gray-200);
317
+ border-radius: 30px;
318
+ padding: 6px 12px;
319
+ align-items: center;
320
+
321
+ background-color: var(
322
+ --_sf-hr-bd-cr,
323
+ var(
324
+ --_ctm-mob-dn-sd-im-dt-se-bd-cr,
325
+ var(--_ctm-tab-dn-sd-im-dt-se-bd-cr, var(--_ctm-dn-sd-im-dt-se-bd-cr))
326
+ )
327
+ );
328
+ border-radius: var(
329
+ --_sf-hr-br-br,
330
+ var(
331
+ --_ctm-mob-dn-sd-im-dt-se-br-rs,
332
+ var(--_ctm-tab-dn-sd-im-dt-se-br-rs, var(--_ctm-dn-sd-im-dt-se-br-rs))
333
+ )
334
+ );
335
+ padding: var(
336
+ --_sf-hr-sd-im-pg,
337
+ var(
338
+ --_ctm-mob-dn-sd-im-dt-se-pg,
339
+ var(--_ctm-tab-dn-sd-im-dt-se-pg, var(--_ctm-dn-sd-im-dt-se-pg))
340
+ )
341
+ );
342
+ box-shadow: var(
343
+ --_hover-show-shadow,
344
+ var(
345
+ --_sf-hr-bx-sw,
346
+ var(
347
+ --_show-shadow,
348
+ var(
349
+ --_ctm-mob-dn-sd-im-dt-se-sw-ae,
350
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-ae, var(--_ctm-dn-sd-im-dt-se-sw-ae))
351
+ )
352
+ var(
353
+ --_ctm-mob-dn-sd-im-dt-se-sw-br,
354
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-br, var(--_ctm-dn-sd-im-dt-se-sw-br))
355
+ )
356
+ var(
357
+ --_ctm-mob-dn-sd-im-dt-se-sw-sd,
358
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-sd, var(--_ctm-dn-sd-im-dt-se-sw-sd))
359
+ )
360
+ var(
361
+ --_ctm-mob-dn-sd-im-dt-se-sw-cr,
362
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-cr, var(--_ctm-dn-sd-im-dt-se-sw-cr))
363
+ )
364
+ )
365
+ )
366
+ );
367
+
368
+ color: var(
369
+ --_sf-hr-fc,
370
+ var(
371
+ --_ctm-mob-dn-sd-im-dt-se-cr,
372
+ var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
373
+ )
374
+ );
375
+ font-family:
376
+ var(
377
+ --_sf-hr-ff,
378
+ var(
379
+ --_ctm-mob-dn-sd-im-dt-se-ft-fy,
380
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
381
+ )
382
+ ),
383
+ sans-serif;
384
+ font-size: var(
385
+ --_sf-hr-fs,
386
+ var(
387
+ --_ctm-mob-dn-sd-im-dt-se-ft-se,
388
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
389
+ )
390
+ );
391
+ font-weight: var(
392
+ --_sf-hr-fw,
393
+ var(
394
+ --_ctm-mob-dn-sd-im-dt-se-ft-wt,
395
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
396
+ )
397
+ );
398
+ font-style: var(
399
+ --_sf-hr-ft,
400
+ var(
401
+ --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
402
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
403
+ )
404
+ );
405
+ text-align: var(
406
+ --_sf-hr-ta,
407
+ var(
408
+ --_ctm-mob-dn-sd-im-dt-se-tt-an,
409
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
410
+ )
411
+ );
412
+ letter-spacing: var(
413
+ --_sf-hr-ls,
414
+ var(
415
+ --_ctm-mob-dn-sd-im-dt-se-lr-sg,
416
+ var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
417
+ )
418
+ );
419
+ line-height: var(
420
+ --_sf-hr-lh,
421
+ var(
422
+ --_ctm-mob-dn-sd-im-dt-se-le-ht,
423
+ var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
424
+ )
425
+ );
426
+ text-decoration: var(
427
+ --_sf-hr-tt-dn,
428
+ var(
429
+ --_ctm-mob-dn-sd-im-dt-se-ue,
430
+ var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
431
+ )
432
+ );
433
+ &[data-show-selected-item-border="true"] {
434
+ border-color: var(
435
+ --_sf-hr-br-cr,
436
+ var(
437
+ --_ctm-mob-dn-sd-im-dt-se-br-cr,
438
+ var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
439
+ )
440
+ );
441
+ border-style: var(
442
+ --_sf-hr-br-st,
443
+ var(
444
+ --_ctm-mob-dn-sd-im-dt-se-br-se,
445
+ var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
446
+ )
447
+ );
448
+ border-width: var(
449
+ --_sf-hr-br-wt,
450
+ var(
451
+ --_ctm-mob-dn-sd-im-dt-se-br-wh,
452
+ var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
453
+ )
454
+ );
455
+ }
456
+ &:hover {
457
+ // border: 1px solid var(--_gray-300);
458
+ // background-color: var(--_gray-50);
459
+ // cursor: pointer;
460
+ --_sf-hr-bd-cr: var(
461
+ --_ctm-mob-dn-sd-im-hr-se-bd-cr,
462
+ var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
463
+ );
464
+ --_sf-hr-br-cr: var(
465
+ --_ctm-mob-dn-sd-im-hr-se-br-cr,
466
+ var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
467
+ );
468
+ --_sf-hr-br-st: var(
469
+ --_ctm-mob-dn-sd-im-hr-se-br-se,
470
+ var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
471
+ );
472
+ --_sf-hr-br-wt: var(
473
+ --_ctm-mob-dn-sd-im-hr-se-br-wh,
474
+ var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
475
+ );
476
+ --_sf-hr-br-br: var(
477
+ --_ctm-mob-dn-sd-im-hr-se-br-rs,
478
+ var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
479
+ );
480
+ --_sf-hr-sd-im-pg: var(
481
+ --_ctm-mob-dn-sd-im-hr-se-pg,
482
+ var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
483
+ );
484
+ --_sf-hr-bx-sw: var(
485
+ --_ctm-mob-dn-sd-im-hr-se-sw-ae,
486
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
487
+ )
488
+ var(
489
+ --_ctm-mob-dn-sd-im-hr-se-sw-br,
490
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
491
+ )
492
+ var(
493
+ --_ctm-mob-dn-sd-im-hr-se-sw-sd,
494
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
495
+ )
496
+ var(
497
+ --_ctm-mob-dn-sd-im-hr-se-sw-cr,
498
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
499
+ );
500
+
501
+ --_sf-hr-fc: var(
502
+ --_ctm-mob-dn-sd-im-hr-se-cr,
503
+ var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
504
+ );
505
+ --_sf-hr-ff: var(
506
+ --_ctm-mob-dn-sd-im-hr-se-ft-fy,
507
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
508
+ );
509
+ --_sf-hr-fs: var(
510
+ --_ctm-mob-dn-sd-im-hr-se-ft-se,
511
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
512
+ );
513
+ --_sf-hr-fw: var(
514
+ --_ctm-mob-dn-sd-im-hr-se-ft-wt,
515
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
516
+ );
517
+ --_sf-hr-ft: var(
518
+ --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
519
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
520
+ );
521
+ --_sf-hr-ta: var(
522
+ --_ctm-mob-dn-sd-im-hr-se-tt-an,
523
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
524
+ );
525
+ --_sf-hr-ls: var(
526
+ --_ctm-mob-dn-sd-im-hr-se-lr-sg,
527
+ var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
528
+ );
529
+ --_sf-hr-lh: var(
530
+ --_ctm-mob-dn-sd-im-hr-se-le-ht,
531
+ var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
532
+ );
533
+
534
+ --_sf-hr-ic-wt: var(
535
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
536
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
537
+ );
538
+ --_sf-hr-ic-ht: var(
539
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
540
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
541
+ );
542
+ --_sf-hr-ic-st: var(
543
+ --_ctm-mob-dn-sd-im-hr-se-in-c1,
544
+ var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
545
+ );
546
+ --_sf-hr-tt-dn: var(
547
+ --_ctm-mob-dn-sd-im-hr-se-ue,
548
+ var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
549
+ );
550
+
551
+ &[data-hover-show-shadow="false"] {
552
+ --_hover-show-shadow: none;
553
+ }
554
+ &[data-hover-show-icon="false"] {
555
+ --_hover-show-icon: none;
556
+ }
557
+ &[data-show-selected-item-hover-border="true"] {
558
+ border-color: var(
559
+ --_sf-hr-br-cr,
560
+ var(
561
+ --_ctm-mob-dn-sd-im-dt-se-br-cr,
562
+ var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
563
+ )
564
+ );
565
+ border-style: var(
566
+ --_sf-hr-br-st,
567
+ var(
568
+ --_ctm-mob-dn-sd-im-dt-se-br-se,
569
+ var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
570
+ )
571
+ );
572
+ border-width: var(
573
+ --_sf-hr-br-wt,
574
+ var(
575
+ --_ctm-mob-dn-sd-im-dt-se-br-wh,
576
+ var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
577
+ )
578
+ );
579
+ }
580
+ }
68
581
  }
69
582
  }
70
583
  }
@@ -76,9 +589,48 @@ $resizeActive: '[data-cms-element-resizer="true"]';
76
589
  font-weight: var(--_fw-600);
77
590
  }
78
591
  h3 {
79
- font-size: 12px;
80
- text-transform: uppercase;
81
- color: #333;
592
+ // font-size: 12px;
593
+ // text-transform: uppercase;
594
+ // color: #333;
595
+ color: var(
596
+ --_ctm-mob-dn-on-ls-cr,
597
+ var(--_ctm-tab-dn-on-ls-cr, var(--_ctm-dn-on-ls-cr))
598
+ );
599
+ font-family: var(
600
+ --_sf-hr-ff,
601
+ var(
602
+ --_ctm-mob-dn-on-ls-ft-fy,
603
+ var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy))
604
+ )
605
+ );
606
+ font-size: var(
607
+ --_ctm-mob-dn-on-ls-ft-se,
608
+ var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se))
609
+ );
610
+ font-weight: var(
611
+ --_ctm-mob-dn-on-ls-ft-wt,
612
+ var(--_ctm-tab-dn-on-ls-ft-wt, var(--_ctm-dn-on-ls-ft-wt))
613
+ );
614
+ font-style: var(
615
+ --_ctm-mob-dn-on-ls-ft-se-ic,
616
+ var(--_ctm-tab-dn-on-ls-ft-se-ic, var(--_ctm-dn-on-ls-ft-se-ic))
617
+ );
618
+ text-align: var(
619
+ --_ctm-mob-dn-on-ls-tt-an,
620
+ var(--_ctm-tab-dn-on-ls-tt-an, var(--_ctm-dn-on-ls-tt-an))
621
+ );
622
+ letter-spacing: var(
623
+ --_ctm-mob-dn-on-ls-lr-sg,
624
+ var(--_ctm-tab-dn-on-ls-lr-sg, var(--_ctm-dn-on-ls-lr-sg))
625
+ );
626
+ line-height: var(
627
+ --_ctm-mob-dn-on-ls-le-ht,
628
+ var(--_ctm-tab-dn-on-ls-le-ht, var(--_ctm-dn-on-ls-le-ht))
629
+ );
630
+ text-decoration: var(
631
+ --_ctm-mob-dn-on-ls-ue,
632
+ var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue))
633
+ );
82
634
  }
83
635
  .reset__btn {
84
636
  font-size: 12px;
@@ -145,6 +697,105 @@ $resizeActive: '[data-cms-element-resizer="true"]';
145
697
  color: var(--_primary-700);
146
698
  }
147
699
  }
700
+ .more__button {
701
+ // font-size: 12px;
702
+ // text-transform: uppercase;
703
+ // font-weight: var(--_fw-500);
704
+ // color: var(--_primary-400);
705
+ background-color: var(
706
+ --_ctm-mob-dn-me-bn-dt-se-bd-cr,
707
+ var(--_ctm-tab-dn-me-bn-dt-se-bd-cr, var(--_ctm-dn-me-bn-dt-se-bd-cr))
708
+ );
709
+ border-radius: var(
710
+ --_ctm-mob-dn-me-bn-dt-se-br-rs,
711
+ var(--_ctm-tab-dn-me-bn-dt-se-br-rs, var(--_ctm-dn-me-bn-dt-se-br-rs))
712
+ );
713
+ box-shadow: var(
714
+ --_show-shadow-clear-all,
715
+ var(
716
+ --_ctm-mob-dn-me-bn-dt-se-sw-ae,
717
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-ae, var(--_ctm-dn-me-bn-dt-se-sw-ae))
718
+ )
719
+ var(
720
+ --_ctm-mob-dn-me-bn-dt-se-sw-br,
721
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-br, var(--_ctm-dn-me-bn-dt-se-sw-br))
722
+ )
723
+ var(
724
+ --_ctm-mob-dn-me-bn-dt-se-sw-sd,
725
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-sd, var(--_ctm-dn-me-bn-dt-se-sw-sd))
726
+ )
727
+ var(
728
+ --_ctm-mob-dn-me-bn-dt-se-sw-cr,
729
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-cr, var(--_ctm-dn-me-bn-dt-se-sw-cr))
730
+ )
731
+ );
732
+
733
+ color: var(
734
+ --_ctm-mob-dn-me-bn-dt-se-cr,
735
+ var(--_ctm-tab-dn-me-bn-dt-se-cr, var(--_ctm-dn-me-bn-dt-se-cr))
736
+ );
737
+ font-family: var(
738
+ --_sf-hr-ff,
739
+ var(
740
+ --_ctm-mob-dn-me-bn-dt-se-ft-fy,
741
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy))
742
+ )
743
+ );
744
+ font-size: var(
745
+ --_ctm-mob-dn-me-bn-dt-se-ft-se,
746
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se))
747
+ );
748
+ font-weight: var(
749
+ --_ctm-mob-dn-me-bn-dt-se-ft-wt,
750
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-wt, var(--_ctm-dn-me-bn-dt-se-ft-wt))
751
+ );
752
+ font-style: var(
753
+ --_ctm-mob-dn-me-bn-dt-se-ft-se-ic,
754
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-dn-me-bn-dt-se-ft-se-ic))
755
+ );
756
+ text-align: var(
757
+ --_ctm-mob-dn-me-bn-dt-se-tt-an,
758
+ var(--_ctm-tab-dn-me-bn-dt-se-tt-an, var(--_ctm-dn-me-bn-dt-se-tt-an))
759
+ );
760
+ letter-spacing: var(
761
+ --_ctm-mob-dn-me-bn-dt-se-lr-sg,
762
+ var(--_ctm-tab-dn-me-bn-dt-se-lr-sg, var(--_ctm-dn-me-bn-dt-se-lr-sg))
763
+ );
764
+ line-height: var(
765
+ --_ctm-mob-dn-me-bn-dt-se-le-ht,
766
+ var(--_ctm-tab-dn-me-bn-dt-se-le-ht, var(--_ctm-dn-me-bn-dt-se-le-ht))
767
+ );
768
+ text-decoration: var(
769
+ --_ctm-mob-dn-me-bn-dt-se-ue,
770
+ var(--_ctm-tab-dn-me-bn-dt-se-ue, var(--_ctm-dn-me-bn-dt-se-ue))
771
+ );
772
+ &[data-show-more-button-border="true"] {
773
+ border-color: var(
774
+ --_sf-hr-br-cr,
775
+ var(
776
+ --_ctm-mob-dn-me-bn-dt-se-br-cr,
777
+ var(--_ctm-tab-dn-me-bn-dt-se-br-cr, var(--_ctm-dn-me-bn-dt-se-br-cr))
778
+ )
779
+ );
780
+ border-style: var(
781
+ --_sf-hr-br-st,
782
+ var(
783
+ --_ctm-mob-dn-me-bn-dt-se-br-se,
784
+ var(--_ctm-tab-dn-me-bn-dt-se-br-se, var(--_ctm-dn-me-bn-dt-se-br-se))
785
+ )
786
+ );
787
+ border-width: var(
788
+ --_sf-hr-br-wt,
789
+ var(
790
+ --_ctm-mob-dn-me-bn-dt-se-br-wh,
791
+ var(--_ctm-tab-dn-me-bn-dt-se-br-wh, var(--_ctm-dn-me-bn-dt-se-br-wh))
792
+ )
793
+ );
794
+ }
795
+ // &:hover {
796
+ // color: var(--_primary-700);
797
+ // }
798
+ }
148
799
  }
149
800
  }
150
801
  }
@@ -168,19 +819,172 @@ $resizeActive: '[data-cms-element-resizer="true"]';
168
819
  text-transform: uppercase;
169
820
  }
170
821
  h3 {
171
- font-size: 14px;
172
- text-transform: uppercase;
822
+ // font-size: 14px;
823
+ // text-transform: uppercase;
824
+
825
+ color: var(
826
+ --_ctm-mob-dn-fs-wt-cr,
827
+ var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
828
+ );
829
+ font-family: var(
830
+ --_sf-hr-ff,
831
+ var(
832
+ --_ctm-mob-dn-fs-wt-ft-fy,
833
+ var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
834
+ )
835
+ );
836
+ font-size: var(
837
+ --_ctm-mob-dn-fs-wt-ft-se,
838
+ var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
839
+ );
840
+ font-weight: var(
841
+ --_ctm-mob-dn-fs-wt-ft-wt,
842
+ var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
843
+ );
844
+ font-style: var(
845
+ --_ctm-mob-dn-fs-wt-ft-se-ic,
846
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
847
+ );
848
+ text-align: var(
849
+ --_ctm-mob-dn-fs-wt-tt-an,
850
+ var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
851
+ );
852
+ letter-spacing: var(
853
+ --_ctm-mob-dn-fs-wt-lr-sg,
854
+ var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
855
+ );
856
+ line-height: var(
857
+ --_ctm-mob-dn-fs-wt-le-ht,
858
+ var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
859
+ );
860
+ text-decoration: var(
861
+ --_ctm-mob-dn-fs-wt-ue,
862
+ var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
863
+ );
173
864
  }
865
+
174
866
  .reset__btn {
175
- font-size: 12px;
176
- text-transform: uppercase;
177
- font-weight: var(--_fw-500);
178
- color: var(--_primary-400);
179
- &:hover {
180
- color: var(--_primary-700);
181
- }
867
+ // font-size: 12px;
868
+ // text-transform: uppercase;
869
+ // font-weight: var(--_fw-500);
870
+ // color: var(--_primary-400);
871
+ background-color: var(
872
+ --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
873
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
874
+ );
875
+ border-radius: var(
876
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
877
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
878
+ );
879
+ padding: var(
880
+ --_ctm-mob-dn-cr-al-tt-dt-se-pg,
881
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
882
+ );
883
+ box-shadow: var(
884
+ --_show-shadow-clear-all,
885
+ var(
886
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
887
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
888
+ )
889
+ var(
890
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
891
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
892
+ )
893
+ var(
894
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
895
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
896
+ )
897
+ var(
898
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
899
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
900
+ )
901
+ );
902
+
903
+ color: var(
904
+ --_ctm-mob-dn-cr-al-tt-dt-se-cr,
905
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
906
+ );
907
+ font-family: var(
908
+ --_sf-hr-ff,
909
+ var(
910
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
911
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
912
+ )
913
+ );
914
+ font-size: var(
915
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
916
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
917
+ );
918
+ font-weight: var(
919
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
920
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
921
+ );
922
+ font-style: var(
923
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
924
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
925
+ );
926
+ text-align: var(
927
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
928
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
929
+ );
930
+ letter-spacing: var(
931
+ --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
932
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
933
+ );
934
+ line-height: var(
935
+ --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
936
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
937
+ );
938
+ text-decoration: var(
939
+ --_ctm-mob-dn-cr-al-tt-dt-se-ue,
940
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
941
+ );
942
+ // &:hover {
943
+ // color: var(--_primary-700);
944
+ // }
182
945
  }
183
946
  }
947
+ p {
948
+ color: var(
949
+ --_ctm-mob-dn-fs-wt-cr-dc,
950
+ var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
951
+ );
952
+ font-family: var(
953
+ --_sf-hr-ff,
954
+ var(
955
+ --_ctm-mob-dn-fs-wt-ft-fy-dc,
956
+ var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
957
+ )
958
+ );
959
+ font-size: var(
960
+ --_ctm-mob-dn-fs-wt-ft-se-dc,
961
+ var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
962
+ );
963
+ font-weight: var(
964
+ --_ctm-mob-dn-fs-wt-ft-wt-dc,
965
+ var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
966
+ );
967
+ font-style: var(
968
+ --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
969
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
970
+ );
971
+ text-align: var(
972
+ --_ctm-mob-dn-fs-wt-tt-an-dc,
973
+ var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
974
+ );
975
+ letter-spacing: var(
976
+ --_ctm-mob-dn-fs-wt-lr-sg-dc,
977
+ var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
978
+ );
979
+ line-height: var(
980
+ --_ctm-mob-dn-fs-wt-le-ht-dc,
981
+ var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
982
+ );
983
+ text-decoration: var(
984
+ --_ctm-mob-dn-fs-wt-ue-dc,
985
+ var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
986
+ );
987
+ }
184
988
  .flt__dropdowns {
185
989
  display: flex;
186
990
  // flex-direction: column;
@@ -226,10 +1030,173 @@ $resizeActive: '[data-cms-element-resizer="true"]';
226
1030
  border-radius: 30px;
227
1031
  padding: 6px 12px;
228
1032
  align-items: center;
1033
+
1034
+ color: var(
1035
+ --_sf-hr-fc,
1036
+ var(
1037
+ --_ctm-mob-dn-sd-im-dt-se-cr,
1038
+ var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
1039
+ )
1040
+ );
1041
+ font-family:
1042
+ var(
1043
+ --_sf-hr-ff,
1044
+ var(
1045
+ --_ctm-mob-dn-sd-im-dt-se-ft-fy,
1046
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
1047
+ )
1048
+ ),
1049
+ sans-serif;
1050
+ font-size: var(
1051
+ --_sf-hr-fs,
1052
+ var(
1053
+ --_ctm-mob-dn-sd-im-dt-se-ft-se,
1054
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
1055
+ )
1056
+ );
1057
+ font-weight: var(
1058
+ --_sf-hr-fw,
1059
+ var(
1060
+ --_ctm-mob-dn-sd-im-dt-se-ft-wt,
1061
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
1062
+ )
1063
+ );
1064
+ font-style: var(
1065
+ --_sf-hr-ft,
1066
+ var(
1067
+ --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
1068
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
1069
+ )
1070
+ );
1071
+ text-align: var(
1072
+ --_sf-hr-ta,
1073
+ var(
1074
+ --_ctm-mob-dn-sd-im-dt-se-tt-an,
1075
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
1076
+ )
1077
+ );
1078
+ letter-spacing: var(
1079
+ --_sf-hr-ls,
1080
+ var(
1081
+ --_ctm-mob-dn-sd-im-dt-se-lr-sg,
1082
+ var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
1083
+ )
1084
+ );
1085
+ line-height: var(
1086
+ --_sf-hr-lh,
1087
+ var(
1088
+ --_ctm-mob-dn-sd-im-dt-se-le-ht,
1089
+ var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
1090
+ )
1091
+ );
1092
+ text-decoration: var(
1093
+ --_sf-hr-tt-dn,
1094
+ var(
1095
+ --_ctm-mob-dn-sd-im-dt-se-ue,
1096
+ var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
1097
+ )
1098
+ );
229
1099
  &:hover {
230
- border: 1px solid var(--_gray-300);
231
- background-color: var(--_gray-50);
232
- cursor: pointer;
1100
+ // border: 1px solid var(--_gray-300);
1101
+ // background-color: var(--_gray-50);
1102
+ // cursor: pointer;
1103
+ --_sf-hr-bd-cr: var(
1104
+ --_ctm-mob-dn-sd-im-hr-se-bd-cr,
1105
+ var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
1106
+ );
1107
+ --_sf-hr-br-cr: var(
1108
+ --_ctm-mob-dn-sd-im-hr-se-br-cr,
1109
+ var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
1110
+ );
1111
+ --_sf-hr-br-st: var(
1112
+ --_ctm-mob-dn-sd-im-hr-se-br-se,
1113
+ var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
1114
+ );
1115
+ --_sf-hr-br-wt: var(
1116
+ --_ctm-mob-dn-sd-im-hr-se-br-wh,
1117
+ var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
1118
+ );
1119
+ --_sf-hr-br-br: var(
1120
+ --_ctm-mob-dn-sd-im-hr-se-br-rs,
1121
+ var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
1122
+ );
1123
+ --_sf-hr-sd-im-pg: var(
1124
+ --_ctm-mob-dn-sd-im-hr-se-pg,
1125
+ var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
1126
+ );
1127
+ --_sf-hr-bx-sw: var(
1128
+ --_ctm-mob-dn-sd-im-hr-se-sw-ae,
1129
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
1130
+ )
1131
+ var(
1132
+ --_ctm-mob-dn-sd-im-hr-se-sw-br,
1133
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
1134
+ )
1135
+ var(
1136
+ --_ctm-mob-dn-sd-im-hr-se-sw-sd,
1137
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
1138
+ )
1139
+ var(
1140
+ --_ctm-mob-dn-sd-im-hr-se-sw-cr,
1141
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
1142
+ );
1143
+
1144
+ --_sf-hr-fc: var(
1145
+ --_ctm-mob-dn-sd-im-hr-se-cr,
1146
+ var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
1147
+ );
1148
+ --_sf-hr-ff: var(
1149
+ --_ctm-mob-dn-sd-im-hr-se-ft-fy,
1150
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
1151
+ );
1152
+ --_sf-hr-fs: var(
1153
+ --_ctm-mob-dn-sd-im-hr-se-ft-se,
1154
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
1155
+ );
1156
+ --_sf-hr-fw: var(
1157
+ --_ctm-mob-dn-sd-im-hr-se-ft-wt,
1158
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
1159
+ );
1160
+ --_sf-hr-ft: var(
1161
+ --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
1162
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
1163
+ );
1164
+ --_sf-hr-ta: var(
1165
+ --_ctm-mob-dn-sd-im-hr-se-tt-an,
1166
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
1167
+ );
1168
+ --_sf-hr-ls: var(
1169
+ --_ctm-mob-dn-sd-im-hr-se-lr-sg,
1170
+ var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
1171
+ );
1172
+ --_sf-hr-lh: var(
1173
+ --_ctm-mob-dn-sd-im-hr-se-le-ht,
1174
+ var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
1175
+ );
1176
+
1177
+ --_sf-hr-ic-wt: var(
1178
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
1179
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1180
+ );
1181
+ --_sf-hr-ic-ht: var(
1182
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
1183
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1184
+ );
1185
+ --_sf-hr-ic-st: var(
1186
+ --_ctm-mob-dn-sd-im-hr-se-in-c1,
1187
+ var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
1188
+ );
1189
+ --_sf-hr-tt-dn: var(
1190
+ --_ctm-mob-dn-sd-im-hr-se-ue,
1191
+ var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
1192
+ );
1193
+
1194
+ &[data-hover-show-shadow="false"] {
1195
+ --_hover-show-shadow: none;
1196
+ }
1197
+ &[data-hover-show-icon="false"] {
1198
+ --_hover-show-icon: none;
1199
+ }
233
1200
  }
234
1201
  }
235
1202
  }
@@ -268,6 +1235,48 @@ $resizeActive: '[data-cms-element-resizer="true"]';
268
1235
  border: 1px solid var(--_gray-200);
269
1236
  border-radius: 50%;
270
1237
  }
1238
+
1239
+ .option__value {
1240
+ color: var(
1241
+ --_ctm-mob-dn-on-ls-cr-dc,
1242
+ var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
1243
+ );
1244
+ font-family: var(
1245
+ --_sf-hr-ff,
1246
+ var(
1247
+ --_ctm-mob-dn-on-ls-ft-fy-dc,
1248
+ var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
1249
+ )
1250
+ );
1251
+ font-size: var(
1252
+ --_ctm-mob-dn-on-ls-ft-se-dc,
1253
+ var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
1254
+ );
1255
+ font-weight: var(
1256
+ --_ctm-mob-dn-on-ls-ft-wt-dc,
1257
+ var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
1258
+ );
1259
+ font-style: var(
1260
+ --_ctm-mob-dn-on-ls-ft-se-ic-dc,
1261
+ var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
1262
+ );
1263
+ text-align: var(
1264
+ --_ctm-mob-dn-on-ls-tt-an-dc,
1265
+ var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
1266
+ );
1267
+ letter-spacing: var(
1268
+ --_ctm-mob-dn-on-ls-lr-sg-dc,
1269
+ var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
1270
+ );
1271
+ line-height: var(
1272
+ --_ctm-mob-dn-on-ls-le-ht-dc,
1273
+ var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
1274
+ );
1275
+ text-decoration: var(
1276
+ --_ctm-mob-dn-on-ls-ue-dc,
1277
+ var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
1278
+ );
1279
+ }
271
1280
  }
272
1281
 
273
1282
  .checkbox__radio input {
@@ -281,32 +1290,316 @@ $resizeActive: '[data-cms-element-resizer="true"]';
281
1290
  .checkmark {
282
1291
  height: 18px;
283
1292
  width: 18px;
284
- border: 1px solid var(--_gray-500);
285
- background-color: var(--_base-white);
1293
+ // border: 1px solid var(--_gray-500);
1294
+ // background-color: var(--_base-white);
286
1295
  display: flex;
287
1296
  justify-content: center;
288
1297
  align-items: center;
289
1298
 
1299
+ background-color: var(
1300
+ --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1301
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1302
+ );
1303
+ border-radius: var(
1304
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1305
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
1306
+ );
1307
+ &[data-show-default-unchecked-shadow="true"] {
1308
+ box-shadow: var(
1309
+ --_show-shadow-clear-all,
1310
+ var(
1311
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1312
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
1313
+ )
1314
+ var(
1315
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1316
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
1317
+ )
1318
+ var(
1319
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1320
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
1321
+ )
1322
+ var(
1323
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1324
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
1325
+ )
1326
+ );
1327
+ }
1328
+ &[data-show-default-unchecked-border="true"] {
1329
+ border-color: var(
1330
+ --_sf-hr-br-cr,
1331
+ var(
1332
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1333
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
1334
+ )
1335
+ );
1336
+ border-style: var(
1337
+ --_sf-hr-br-st,
1338
+ var(
1339
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1340
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
1341
+ )
1342
+ );
1343
+ border-width: var(
1344
+ --_sf-hr-br-wt,
1345
+ var(
1346
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1347
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
1348
+ )
1349
+ );
1350
+ }
1351
+ &:hover {
1352
+ &[data-show-hover-unchecked-border="true"] {
1353
+ border-color: var(
1354
+ --_sf-hr-br-cr,
1355
+ var(
1356
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
1357
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
1358
+ )
1359
+ );
1360
+ border-style: var(
1361
+ --_sf-hr-br-st,
1362
+ var(
1363
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
1364
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
1365
+ )
1366
+ );
1367
+ border-width: var(
1368
+ --_sf-hr-br-wt,
1369
+ var(
1370
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
1371
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
1372
+ )
1373
+ );
1374
+ }
1375
+ &[data-show-hover-unchecked-shadow="true"] {
1376
+ box-shadow: var(
1377
+ --_show-shadow-clear-all,
1378
+ var(
1379
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1380
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1381
+ )
1382
+ var(
1383
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1384
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1385
+ )
1386
+ var(
1387
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1388
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1389
+ )
1390
+ var(
1391
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1392
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1393
+ )
1394
+ );
1395
+ }
1396
+ background-color: var(
1397
+ --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
1398
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
1399
+ );
1400
+ border-radius: var(
1401
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
1402
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
1403
+ );
1404
+ box-shadow: var(
1405
+ --_show-shadow-clear-all,
1406
+ var(
1407
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1408
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1409
+ )
1410
+ var(
1411
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1412
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1413
+ )
1414
+ var(
1415
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1416
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1417
+ )
1418
+ var(
1419
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1420
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1421
+ )
1422
+ );
1423
+ }
1424
+
290
1425
  button {
291
1426
  display: none;
292
1427
  }
293
1428
  }
294
1429
 
295
1430
  .checkbox__radio input:checked ~ .checkmark {
296
- background-color: var(--_primary-400);
297
- border: 1px solid var(--_primary-400);
1431
+ background-color: var(
1432
+ --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
1433
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
1434
+ );
1435
+ border-radius: var(
1436
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-rs,
1437
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs))
1438
+ );
1439
+ &[data-show-default-checked-shadow="true"] {
1440
+ box-shadow: var(
1441
+ --_show-shadow-clear-all,
1442
+ var(
1443
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1444
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
1445
+ )
1446
+ var(
1447
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1448
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
1449
+ )
1450
+ var(
1451
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1452
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
1453
+ )
1454
+ var(
1455
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1456
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
1457
+ )
1458
+ );
1459
+ }
1460
+
1461
+ &[data-show-default-checked-border="true"] {
1462
+ border-color: var(
1463
+ --_sf-hr-br-cr,
1464
+ var(
1465
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1466
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
1467
+ )
1468
+ );
1469
+ border-style: var(
1470
+ --_sf-hr-br-st,
1471
+ var(
1472
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1473
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
1474
+ )
1475
+ );
1476
+ border-width: var(
1477
+ --_sf-hr-br-wt,
1478
+ var(
1479
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1480
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
1481
+ )
1482
+ );
1483
+ }
1484
+
1485
+ &:hover {
1486
+ background-color: var(
1487
+ --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
1488
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
1489
+ );
1490
+ border-radius: var(
1491
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-rs,
1492
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-dn-cx-cd-se-hr-se-br-rs))
1493
+ );
1494
+ &[data-show-hover-checked-shadow="true"] {
1495
+ box-shadow: var(
1496
+ --_show-shadow-clear-all,
1497
+ var(
1498
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1499
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
1500
+ )
1501
+ var(
1502
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1503
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
1504
+ )
1505
+ var(
1506
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1507
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
1508
+ )
1509
+ var(
1510
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1511
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
1512
+ )
1513
+ );
1514
+ }
1515
+
1516
+ &[data-show-hover-checked-border="true"] {
1517
+ border-color: var(
1518
+ --_sf-hr-br-cr,
1519
+ var(
1520
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1521
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
1522
+ )
1523
+ );
1524
+ border-style: var(
1525
+ --_sf-hr-br-st,
1526
+ var(
1527
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1528
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
1529
+ )
1530
+ );
1531
+ border-width: var(
1532
+ --_sf-hr-br-wt,
1533
+ var(
1534
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1535
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
1536
+ )
1537
+ );
1538
+ }
1539
+ button {
1540
+ display: flex;
1541
+ .default-icon {
1542
+ display: none;
1543
+ }
1544
+
1545
+ .hover-icon {
1546
+ display: block;
1547
+ }
1548
+ svg {
1549
+ // width: 13px;
1550
+ // height: 13px;
1551
+ width: var(
1552
+ --_ctm-mob-dn-cx-cd-se-hr-se-se,
1553
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1554
+ );
1555
+ height: var(
1556
+ --_ctm-mob-dn-cx-cd-se-hr-se-se,
1557
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1558
+ );
1559
+ path {
1560
+ // stroke: var(--_base-white);
1561
+ stroke: var(
1562
+ --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
1563
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
1564
+ );
1565
+ }
1566
+ }
1567
+ }
1568
+ }
1569
+
1570
+ // background-color: var(--_primary-400);
1571
+ // border: 1px solid var(--_primary-400);
1572
+ // border-radius: 50%;
298
1573
  display: flex;
299
1574
  justify-content: center;
300
1575
  align-items: center;
301
- border-radius: 50%;
302
1576
 
303
1577
  button {
304
1578
  display: flex;
1579
+ .default-icon {
1580
+ display: block;
1581
+ }
1582
+
1583
+ .hover-icon {
1584
+ display: none;
1585
+ }
305
1586
  svg {
306
- width: 13px;
307
- height: 13px;
1587
+ // width: 13px;
1588
+ // height: 13px;
1589
+ width: var(
1590
+ --_ctm-mob-dn-cx-cd-se-dt-se-se,
1591
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
1592
+ );
1593
+ height: var(
1594
+ --_ctm-mob-dn-cx-cd-se-dt-se-se,
1595
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
1596
+ );
308
1597
  path {
309
- stroke: var(--_base-white);
1598
+ // stroke: var(--_base-white);
1599
+ stroke: var(
1600
+ --_ctm-mob-dn-cx-cd-se-dt-se-in-c1,
1601
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1))
1602
+ );
310
1603
  }
311
1604
  }
312
1605
  }