@sc-360-v2/storefront-cms-library 0.4.50 → 0.4.52

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 (39) hide show
  1. package/dist/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/cart-details.scss +3207 -3207
  4. package/dist/cart.scss +271 -269
  5. package/dist/cartAttributes.scss +932 -935
  6. package/dist/checkout.scss +6496 -6460
  7. package/dist/dropdownTemplate.scss +4 -1
  8. package/dist/filters.scss +2450 -2418
  9. package/dist/functions.scss +91 -1
  10. package/dist/icon-list.scss +277 -268
  11. package/dist/language-selector.scss +702 -528
  12. package/dist/layouter.scss +307 -294
  13. package/dist/login.scss +1605 -1473
  14. package/dist/menu-v2.scss +752 -730
  15. package/dist/my-templates.scss +464 -463
  16. package/dist/myTemplates.scss +5 -5
  17. package/dist/order-status.scss +1877 -1856
  18. package/dist/product-image-allocation.scss +1365 -0
  19. package/dist/product-image.scss +2 -1
  20. package/dist/product-sizechart.scss +1826 -1826
  21. package/dist/profile.scss +23 -20
  22. package/dist/repeater-embla-controls.scss +6 -0
  23. package/dist/repeater.scss +920 -915
  24. package/dist/search.scss +361 -296
  25. package/dist/section.scss +210 -209
  26. package/dist/static-global.scss +5 -0
  27. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  28. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  29. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  30. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  31. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  33. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  34. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  35. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  37. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  38. package/dist/user-elements.scss +2555 -2471
  39. package/package.json +1 -1
package/dist/filters.scss CHANGED
@@ -1,2418 +1,2450 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="filters"] {
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% *
13
- var(
14
- --_ctm-mob-ele-nw-wh-vl,
15
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
- )
17
- )
18
- );
19
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
-
21
- & > div {
22
- &.wrapper {
23
- width: 100%;
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
-
71
- .filter_container {
72
- width: 100%;
73
- //Filter Features Starts
74
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
75
- background-color: var(
76
- --_ctm-mob-dn-fs-wt-bd-cr,
77
- var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr))
78
- );
79
- box-shadow: var(
80
- --_show-shadow,
81
- var(--_ctm-mob-dn-fs-wt-sw-ae, var(--_ctm-tab-dn-fs-wt-sw-ae, var(--_ctm-dn-fs-wt-sw-ae)))
82
- var(--_ctm-mob-dn-fs-wt-sw-br, var(--_ctm-tab-dn-fs-wt-sw-br, var(--_ctm-dn-fs-wt-sw-br)))
83
- var(--_ctm-mob-dn-fs-wt-sw-sd, var(--_ctm-tab-dn-fs-wt-sw-sd, var(--_ctm-dn-fs-wt-sw-sd)))
84
- var(--_ctm-mob-dn-fs-wt-sw-cr, var(--_ctm-tab-dn-fs-wt-sw-cr, var(--_ctm-dn-fs-wt-sw-cr)))
85
- );
86
- border-radius: var(
87
- --_ctm-mob-dn-fs-wt-br-rs,
88
- var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
89
- );
90
- @mixin flex($justifyItems: flex-start, $alignItems: center) {
91
- display: var(--_d-flex);
92
- justify-content: $justifyItems;
93
- align-items: $alignItems;
94
- }
95
-
96
- .product__filter {
97
- // width: 250px;
98
- width: 100%;
99
- // height: calc(100vh - 20px);
100
- padding: 10px;
101
- overflow-y: auto;
102
-
103
- .option__group {
104
- display: flex;
105
- flex-direction: column;
106
- padding-block: 12px;
107
- // padding-right: 10px;
108
- &.divider_filter {
109
- border-bottom: 1px solid var(--_gray-300);
110
- }
111
- &:last-child {
112
- border-bottom: none !important;
113
- }
114
- .filter__Header {
115
- display: flex;
116
- justify-content: space-between;
117
- align-items: center;
118
- gap: 12px;
119
-
120
- h2 {
121
- font-size: var(--_fs-14);
122
- font-weight: var(--_fw-600);
123
- text-transform: uppercase;
124
- }
125
- h3 {
126
- // font-size: 14px;
127
- // text-transform: uppercase;
128
-
129
- color: var(
130
- --_ctm-mob-dn-fs-wt-cr,
131
- var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
132
- );
133
- font-family: var(
134
- --_sf-hr-ff,
135
- var(
136
- --_ctm-mob-dn-fs-wt-ft-fy,
137
- var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
138
- )
139
- );
140
- font-size: var(
141
- --_ctm-mob-dn-fs-wt-ft-se,
142
- var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
143
- );
144
- font-weight: var(
145
- --_ctm-mob-dn-fs-wt-ft-wt,
146
- var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
147
- );
148
- font-style: var(
149
- --_ctm-mob-dn-fs-wt-ft-se-ic,
150
- var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
151
- );
152
- text-align: var(
153
- --_ctm-mob-dn-fs-wt-tt-an,
154
- var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
155
- );
156
- letter-spacing: var(
157
- --_ctm-mob-dn-fs-wt-lr-sg,
158
- var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
159
- );
160
- line-height: var(
161
- --_ctm-mob-dn-fs-wt-le-ht,
162
- var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
163
- );
164
- text-decoration: var(
165
- --_ctm-mob-dn-fs-wt-ue,
166
- var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
167
- );
168
- }
169
-
170
- .reset__btn {
171
- // font-size: 12px;
172
- // text-transform: uppercase;
173
- // font-weight: var(--_fw-500);
174
- // color: var(--_primary-400);
175
- // &:hover {
176
- // color: var(--_primary-700);
177
- // }
178
- background-color: var(
179
- --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
180
- var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
181
- );
182
- border-radius: var(
183
- --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
184
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
185
- );
186
- padding: var(
187
- --_ctm-mob-dn-cr-al-tt-dt-se-pg,
188
- var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
189
- );
190
- box-shadow: var(
191
- --_show-shadow-clear-all,
192
- var(
193
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
194
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
195
- )
196
- var(
197
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
198
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
199
- )
200
- var(
201
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
202
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
203
- )
204
- var(
205
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
206
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
207
- )
208
- );
209
-
210
- color: var(
211
- --_ctm-mob-dn-cr-al-tt-dt-se-cr,
212
- var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
213
- );
214
- font-family: var(
215
- --_sf-hr-ff,
216
- var(
217
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
218
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
219
- )
220
- );
221
- font-size: var(
222
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
223
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
224
- );
225
- font-weight: var(
226
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
227
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
228
- );
229
- font-style: var(
230
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
231
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
232
- );
233
- text-align: var(
234
- --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
235
- var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
236
- );
237
- letter-spacing: var(
238
- --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
239
- var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
240
- );
241
- line-height: var(
242
- --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
243
- var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
244
- );
245
- text-decoration: var(
246
- --_ctm-mob-dn-cr-al-tt-dt-se-ue,
247
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
248
- );
249
- }
250
- }
251
- p {
252
- color: var(
253
- --_ctm-mob-dn-fs-wt-cr-dc,
254
- var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
255
- );
256
- font-family: var(
257
- --_sf-hr-ff,
258
- var(
259
- --_ctm-mob-dn-fs-wt-ft-fy-dc,
260
- var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
261
- )
262
- );
263
- font-size: var(
264
- --_ctm-mob-dn-fs-wt-ft-se-dc,
265
- var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
266
- );
267
- font-weight: var(
268
- --_ctm-mob-dn-fs-wt-ft-wt-dc,
269
- var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
270
- );
271
- font-style: var(
272
- --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
273
- var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
274
- );
275
- text-align: var(
276
- --_ctm-mob-dn-fs-wt-tt-an-dc,
277
- var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
278
- );
279
- letter-spacing: var(
280
- --_ctm-mob-dn-fs-wt-lr-sg-dc,
281
- var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
282
- );
283
- line-height: var(
284
- --_ctm-mob-dn-fs-wt-le-ht-dc,
285
- var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
286
- );
287
- text-decoration: var(
288
- --_ctm-mob-dn-fs-wt-ue-dc,
289
- var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
290
- );
291
- }
292
-
293
- .selected__items {
294
- display: flex;
295
- flex-wrap: wrap;
296
- gap: 10px;
297
- align-items: center;
298
- margin-top: 10px;
299
- .selected__category {
300
- display: flex;
301
- align-items: center;
302
- gap: 10px;
303
- flex-wrap: wrap;
304
- // .selected_item {
305
- // display: flex;
306
- // gap: 8px;
307
- // border: 1px solid var(--_gray-200);
308
- // font-size: 14px;
309
- // border-radius: 30px;
310
- // padding: 5px 10px;
311
- // align-items: center;
312
- // &:hover {
313
- // border: 1px solid var(--_gray-300);
314
- // background-color: var(--_gray-50);
315
- // cursor: pointer;
316
- // }
317
- // }
318
- .selected_item {
319
- display: flex;
320
- gap: 6px;
321
- border: 1px solid var(--_thm-cs-be-se-3);
322
- border-radius: 30px;
323
- padding: 6px 12px;
324
- align-items: center;
325
-
326
- background-color: var(
327
- --_sf-hr-bd-cr,
328
- var(
329
- --_ctm-mob-dn-sd-im-dt-se-bd-cr,
330
- var(--_ctm-tab-dn-sd-im-dt-se-bd-cr, var(--_ctm-dn-sd-im-dt-se-bd-cr))
331
- )
332
- );
333
- border-radius: var(
334
- --_sf-hr-br-br,
335
- var(
336
- --_ctm-mob-dn-sd-im-dt-se-br-rs,
337
- var(--_ctm-tab-dn-sd-im-dt-se-br-rs, var(--_ctm-dn-sd-im-dt-se-br-rs))
338
- )
339
- );
340
- padding: var(
341
- --_sf-hr-sd-im-pg,
342
- var(
343
- --_ctm-mob-dn-sd-im-dt-se-pg,
344
- var(--_ctm-tab-dn-sd-im-dt-se-pg, var(--_ctm-dn-sd-im-dt-se-pg))
345
- )
346
- );
347
- box-shadow: var(
348
- --_hover-show-shadow,
349
- var(
350
- --_sf-hr-bx-sw,
351
- var(
352
- --_show-shadow,
353
- var(
354
- --_ctm-mob-dn-sd-im-dt-se-sw-ae,
355
- var(--_ctm-tab-dn-sd-im-dt-se-sw-ae, var(--_ctm-dn-sd-im-dt-se-sw-ae))
356
- )
357
- var(
358
- --_ctm-mob-dn-sd-im-dt-se-sw-br,
359
- var(--_ctm-tab-dn-sd-im-dt-se-sw-br, var(--_ctm-dn-sd-im-dt-se-sw-br))
360
- )
361
- var(
362
- --_ctm-mob-dn-sd-im-dt-se-sw-sd,
363
- var(--_ctm-tab-dn-sd-im-dt-se-sw-sd, var(--_ctm-dn-sd-im-dt-se-sw-sd))
364
- )
365
- var(
366
- --_ctm-mob-dn-sd-im-dt-se-sw-cr,
367
- var(--_ctm-tab-dn-sd-im-dt-se-sw-cr, var(--_ctm-dn-sd-im-dt-se-sw-cr))
368
- )
369
- )
370
- )
371
- );
372
-
373
- color: var(
374
- --_sf-hr-fc,
375
- var(
376
- --_ctm-mob-dn-sd-im-dt-se-cr,
377
- var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
378
- )
379
- );
380
- font-family: var(
381
- --_sf-hr-ff,
382
- var(
383
- --_ctm-mob-dn-sd-im-dt-se-ft-fy,
384
- var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
385
- )
386
- );
387
- font-size: var(
388
- --_sf-hr-fs,
389
- var(
390
- --_ctm-mob-dn-sd-im-dt-se-ft-se,
391
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
392
- )
393
- );
394
- font-weight: var(
395
- --_sf-hr-fw,
396
- var(
397
- --_ctm-mob-dn-sd-im-dt-se-ft-wt,
398
- var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
399
- )
400
- );
401
- font-style: var(
402
- --_sf-hr-ft,
403
- var(
404
- --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
405
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
406
- )
407
- );
408
- text-align: var(
409
- --_sf-hr-ta,
410
- var(
411
- --_ctm-mob-dn-sd-im-dt-se-tt-an,
412
- var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
413
- )
414
- );
415
- letter-spacing: var(
416
- --_sf-hr-ls,
417
- var(
418
- --_ctm-mob-dn-sd-im-dt-se-lr-sg,
419
- var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
420
- )
421
- );
422
- line-height: var(
423
- --_sf-hr-lh,
424
- var(
425
- --_ctm-mob-dn-sd-im-dt-se-le-ht,
426
- var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
427
- )
428
- );
429
- text-decoration: var(
430
- --_sf-hr-tt-dn,
431
- var(
432
- --_ctm-mob-dn-sd-im-dt-se-ue,
433
- var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
434
- )
435
- );
436
- &[data-show-selected-item-border="true"] {
437
- border-color: var(
438
- --_sf-hr-br-cr,
439
- var(
440
- --_ctm-mob-dn-sd-im-dt-se-br-cr,
441
- var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
442
- )
443
- );
444
- border-style: var(
445
- --_sf-hr-br-st,
446
- var(
447
- --_ctm-mob-dn-sd-im-dt-se-br-se,
448
- var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
449
- )
450
- );
451
- border-width: var(
452
- --_sf-hr-br-wh,
453
- var(
454
- --_ctm-mob-dn-sd-im-dt-se-br-wh,
455
- var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
456
- )
457
- );
458
- }
459
- &:hover {
460
- // border: 1px solid var(--_gray-300);
461
- // background-color: var(--_gray-50);
462
- // cursor: pointer;
463
- --_sf-hr-bd-cr: var(
464
- --_ctm-mob-dn-sd-im-hr-se-bd-cr,
465
- var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
466
- );
467
- --_sf-hr-br-cr: var(
468
- --_ctm-mob-dn-sd-im-hr-se-br-cr,
469
- var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
470
- );
471
- --_sf-hr-br-st: var(
472
- --_ctm-mob-dn-sd-im-hr-se-br-se,
473
- var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
474
- );
475
- --_sf-hr-br-wh: var(
476
- --_ctm-mob-dn-sd-im-hr-se-br-wh,
477
- var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
478
- );
479
- --_sf-hr-br-br: var(
480
- --_ctm-mob-dn-sd-im-hr-se-br-rs,
481
- var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
482
- );
483
- --_sf-hr-sd-im-pg: var(
484
- --_ctm-mob-dn-sd-im-hr-se-pg,
485
- var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
486
- );
487
- --_sf-hr-bx-sw: var(
488
- --_ctm-mob-dn-sd-im-hr-se-sw-ae,
489
- var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
490
- )
491
- var(
492
- --_ctm-mob-dn-sd-im-hr-se-sw-br,
493
- var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
494
- )
495
- var(
496
- --_ctm-mob-dn-sd-im-hr-se-sw-sd,
497
- var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
498
- )
499
- var(
500
- --_ctm-mob-dn-sd-im-hr-se-sw-cr,
501
- var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
502
- );
503
-
504
- --_sf-hr-fc: var(
505
- --_ctm-mob-dn-sd-im-hr-se-cr,
506
- var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
507
- );
508
- --_sf-hr-ff: var(
509
- --_ctm-mob-dn-sd-im-hr-se-ft-fy,
510
- var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
511
- );
512
- --_sf-hr-fs: var(
513
- --_ctm-mob-dn-sd-im-hr-se-ft-se,
514
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
515
- );
516
- --_sf-hr-fw: var(
517
- --_ctm-mob-dn-sd-im-hr-se-ft-wt,
518
- var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
519
- );
520
- --_sf-hr-ft: var(
521
- --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
522
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
523
- );
524
- --_sf-hr-ta: var(
525
- --_ctm-mob-dn-sd-im-hr-se-tt-an,
526
- var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
527
- );
528
- --_sf-hr-ls: var(
529
- --_ctm-mob-dn-sd-im-hr-se-lr-sg,
530
- var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
531
- );
532
- --_sf-hr-lh: var(
533
- --_ctm-mob-dn-sd-im-hr-se-le-ht,
534
- var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
535
- );
536
-
537
- --_sf-hr-ic-wt: var(
538
- --_ctm-mob-dn-sd-im-hr-se-in-se,
539
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
540
- );
541
- --_sf-hr-ic-ht: var(
542
- --_ctm-mob-dn-sd-im-hr-se-in-se,
543
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
544
- );
545
- --_sf-hr-ic-st: var(
546
- --_ctm-mob-dn-sd-im-hr-se-in-c1,
547
- var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
548
- );
549
- --_sf-hr-tt-dn: var(
550
- --_ctm-mob-dn-sd-im-hr-se-ue,
551
- var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
552
- );
553
-
554
- &[data-hover-show-shadow="false"] {
555
- --_hover-show-shadow: none;
556
- }
557
- &[data-hover-show-icon="false"] {
558
- --_hover-show-icon: none;
559
- }
560
- &[data-show-selected-item-hover-border="true"] {
561
- border-color: var(
562
- --_sf-hr-br-cr,
563
- var(
564
- --_ctm-mob-dn-sd-im-dt-se-br-cr,
565
- var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
566
- )
567
- );
568
- border-style: var(
569
- --_sf-hr-br-st,
570
- var(
571
- --_ctm-mob-dn-sd-im-dt-se-br-se,
572
- var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
573
- )
574
- );
575
- border-width: var(
576
- --_sf-hr-br-wh,
577
- var(
578
- --_ctm-mob-dn-sd-im-dt-se-br-wh,
579
- var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
580
- )
581
- );
582
- }
583
- }
584
- }
585
- }
586
- }
587
-
588
- .option__group__header {
589
- @include flex($justifyItems: space-between);
590
- h2 {
591
- font-size: var(--_fs-14);
592
- font-weight: var(--_fw-600);
593
- }
594
- h3 {
595
- // font-size: 12px;
596
- // text-transform: uppercase;
597
- // color: #333;
598
- color: var(
599
- --_ctm-mob-dn-on-ls-cr,
600
- var(--_ctm-tab-dn-on-ls-cr, var(--_ctm-dn-on-ls-cr))
601
- );
602
- font-family: var(
603
- --_sf-hr-ff,
604
- var(
605
- --_ctm-mob-dn-on-ls-ft-fy,
606
- var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy))
607
- )
608
- );
609
- font-size: var(
610
- --_ctm-mob-dn-on-ls-ft-se,
611
- var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se))
612
- );
613
- font-weight: var(
614
- --_ctm-mob-dn-on-ls-ft-wt,
615
- var(--_ctm-tab-dn-on-ls-ft-wt, var(--_ctm-dn-on-ls-ft-wt))
616
- );
617
- font-style: var(
618
- --_ctm-mob-dn-on-ls-ft-se-ic,
619
- var(--_ctm-tab-dn-on-ls-ft-se-ic, var(--_ctm-dn-on-ls-ft-se-ic))
620
- );
621
- text-align: var(
622
- --_ctm-mob-dn-on-ls-tt-an,
623
- var(--_ctm-tab-dn-on-ls-tt-an, var(--_ctm-dn-on-ls-tt-an))
624
- );
625
- letter-spacing: var(
626
- --_ctm-mob-dn-on-ls-lr-sg,
627
- var(--_ctm-tab-dn-on-ls-lr-sg, var(--_ctm-dn-on-ls-lr-sg))
628
- );
629
- line-height: var(
630
- --_ctm-mob-dn-on-ls-le-ht,
631
- var(--_ctm-tab-dn-on-ls-le-ht, var(--_ctm-dn-on-ls-le-ht))
632
- );
633
- text-decoration: var(
634
- --_ctm-mob-dn-on-ls-ue,
635
- var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue))
636
- );
637
- }
638
- .reset__btn {
639
- font-size: 12px;
640
- text-transform: uppercase;
641
- font-weight: var(--_fw-500);
642
- color: var(--_primary-400);
643
- }
644
-
645
- .option__btn__group {
646
- display: flex;
647
- align-items: center;
648
- gap: 12px;
649
- .search__btn {
650
- svg {
651
- width: 16px;
652
- height: 16px;
653
- }
654
- }
655
- .rotate_0 {
656
- display: flex;
657
- align-items: center;
658
- transform: rotate(0);
659
- transition: all 400ms ease-in-out;
660
- }
661
- .rotate_180 {
662
- display: flex;
663
- align-items: center;
664
- transform: rotate(180deg);
665
- transition: all 400ms ease-in-out;
666
- }
667
- }
668
- .filter__search {
669
- display: flex;
670
- align-items: center;
671
- // padding: 6px 10px;
672
- padding: var(
673
- --_sf-hr-sd-im-pg,
674
- var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)))
675
- );
676
- // border: 1px solid var(--_gray-300);
677
- border-color: var(
678
- --_sf-hr-br-cr,
679
- var(
680
- --_ctm-mob-dn-sh-br-br-cr,
681
- var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
682
- )
683
- );
684
- border-style: var(
685
- --_sf-hr-br-st,
686
- var(
687
- --_ctm-mob-dn-sh-br-br-se,
688
- var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
689
- )
690
- );
691
- border-width: var(
692
- --_sf-hr-br-wh,
693
- var(
694
- --_ctm-mob-dn-sh-br-br-wh,
695
- var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
696
- )
697
- );
698
- // border-radius: 6px;
699
- border-radius: prepareMediaVariable(--_ctm-dn-sh-br-br-rs);
700
- width: 100%;
701
-
702
- button {
703
- display: flex;
704
- svg {
705
- width: 18px;
706
- height: 18px;
707
- }
708
- }
709
- input[type="text"] {
710
- padding-left: 6px;
711
- }
712
- }
713
- }
714
-
715
- ul {
716
- margin-top: 10px;
717
- &:not(:last-child) {
718
- border-bottom: 1px solid var(--_gray-300);
719
- }
720
- li {
721
- display: flex;
722
- align-items: center;
723
- justify-content: space-between;
724
- padding-block: 6px;
725
- font-size: 14px;
726
-
727
- .filter-li-inner {
728
- display: flex;
729
- align-items: center;
730
- justify-content: space-between;
731
- width: 100%;
732
- gap: 8px;
733
- }
734
-
735
- .filter-indicator {
736
- width: 16px;
737
- height: 16px;
738
- flex-shrink: 0;
739
- }
740
-
741
- .filter-indicator img {
742
- width: 16px;
743
- height: 16px;
744
- border-radius: 50%;
745
- object-fit: cover;
746
- border: 1px solid var(--_thm-cs-be-se-3);
747
- }
748
-
749
- .color-circle {
750
- width: 16px;
751
- height: 16px;
752
- border-radius: 50%;
753
- border: 1px solid var(--_thm-cs-be-se-3);
754
- }
755
-
756
- a {
757
- // padding-block: 6px;
758
- padding-left: 10px;
759
- display: block;
760
- text-decoration: none;
761
- color: var(--_gray-700);
762
- font-size: var(--_fs-14);
763
- font-weight: var(--_fw-600);
764
- border-radius: var(--_br-6);
765
- width: 100%;
766
- &:hover {
767
- background-color: var(--_primary-25);
768
- color: var(--_primary-700);
769
- }
770
- }
771
- .more__button {
772
- // font-size: 12px;
773
- // text-transform: uppercase;
774
- // font-weight: var(--_fw-500);
775
- // color: var(--_primary-400);
776
- background-color: var(
777
- --_ctm-mob-dn-me-bn-dt-se-bd-cr,
778
- var(--_ctm-tab-dn-me-bn-dt-se-bd-cr, var(--_ctm-dn-me-bn-dt-se-bd-cr))
779
- );
780
- border-radius: var(
781
- --_ctm-mob-dn-me-bn-dt-se-br-rs,
782
- var(--_ctm-tab-dn-me-bn-dt-se-br-rs, var(--_ctm-dn-me-bn-dt-se-br-rs))
783
- );
784
- box-shadow: var(
785
- --_show-shadow-clear-all,
786
- var(
787
- --_ctm-mob-dn-me-bn-dt-se-sw-ae,
788
- var(--_ctm-tab-dn-me-bn-dt-se-sw-ae, var(--_ctm-dn-me-bn-dt-se-sw-ae))
789
- )
790
- var(
791
- --_ctm-mob-dn-me-bn-dt-se-sw-br,
792
- var(--_ctm-tab-dn-me-bn-dt-se-sw-br, var(--_ctm-dn-me-bn-dt-se-sw-br))
793
- )
794
- var(
795
- --_ctm-mob-dn-me-bn-dt-se-sw-sd,
796
- var(--_ctm-tab-dn-me-bn-dt-se-sw-sd, var(--_ctm-dn-me-bn-dt-se-sw-sd))
797
- )
798
- var(
799
- --_ctm-mob-dn-me-bn-dt-se-sw-cr,
800
- var(--_ctm-tab-dn-me-bn-dt-se-sw-cr, var(--_ctm-dn-me-bn-dt-se-sw-cr))
801
- )
802
- );
803
-
804
- color: var(
805
- --_ctm-mob-dn-me-bn-dt-se-cr,
806
- var(--_ctm-tab-dn-me-bn-dt-se-cr, var(--_ctm-dn-me-bn-dt-se-cr))
807
- );
808
- font-family: var(
809
- --_sf-hr-ff,
810
- var(
811
- --_ctm-mob-dn-me-bn-dt-se-ft-fy,
812
- var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy))
813
- )
814
- );
815
- font-size: var(
816
- --_ctm-mob-dn-me-bn-dt-se-ft-se,
817
- var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se))
818
- );
819
- font-weight: var(
820
- --_ctm-mob-dn-me-bn-dt-se-ft-wt,
821
- var(--_ctm-tab-dn-me-bn-dt-se-ft-wt, var(--_ctm-dn-me-bn-dt-se-ft-wt))
822
- );
823
- font-style: var(
824
- --_ctm-mob-dn-me-bn-dt-se-ft-se-ic,
825
- var(--_ctm-tab-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-dn-me-bn-dt-se-ft-se-ic))
826
- );
827
- text-align: var(
828
- --_ctm-mob-dn-me-bn-dt-se-tt-an,
829
- var(--_ctm-tab-dn-me-bn-dt-se-tt-an, var(--_ctm-dn-me-bn-dt-se-tt-an))
830
- );
831
- letter-spacing: var(
832
- --_ctm-mob-dn-me-bn-dt-se-lr-sg,
833
- var(--_ctm-tab-dn-me-bn-dt-se-lr-sg, var(--_ctm-dn-me-bn-dt-se-lr-sg))
834
- );
835
- line-height: var(
836
- --_ctm-mob-dn-me-bn-dt-se-le-ht,
837
- var(--_ctm-tab-dn-me-bn-dt-se-le-ht, var(--_ctm-dn-me-bn-dt-se-le-ht))
838
- );
839
- text-decoration: var(
840
- --_ctm-mob-dn-me-bn-dt-se-ue,
841
- var(--_ctm-tab-dn-me-bn-dt-se-ue, var(--_ctm-dn-me-bn-dt-se-ue))
842
- );
843
- &[data-show-more-button-border="true"] {
844
- border-color: var(
845
- --_sf-hr-br-cr,
846
- var(
847
- --_ctm-mob-dn-me-bn-dt-se-br-cr,
848
- var(--_ctm-tab-dn-me-bn-dt-se-br-cr, var(--_ctm-dn-me-bn-dt-se-br-cr))
849
- )
850
- );
851
- border-style: var(
852
- --_sf-hr-br-st,
853
- var(
854
- --_ctm-mob-dn-me-bn-dt-se-br-se,
855
- var(--_ctm-tab-dn-me-bn-dt-se-br-se, var(--_ctm-dn-me-bn-dt-se-br-se))
856
- )
857
- );
858
- border-width: var(
859
- --_sf-hr-br-wh,
860
- var(
861
- --_ctm-mob-dn-me-bn-dt-se-br-wh,
862
- var(--_ctm-tab-dn-me-bn-dt-se-br-wh, var(--_ctm-dn-me-bn-dt-se-br-wh))
863
- )
864
- );
865
- }
866
- // &:hover {
867
- // color: var(--_primary-700);
868
- // }
869
- }
870
- &:has(.no__results__found) {
871
- .no__results__found {
872
- padding: 12px;
873
- color: var(--_gray-600);
874
- display: flex;
875
- justify-content: center;
876
- background: var(--_gray-100);
877
- padding: 12px;
878
- border-radius: 4px;
879
- font-weight: 600;
880
- color: var(--_gray-600);
881
- }
882
- }
883
- }
884
- }
885
- }
886
- }
887
-
888
- .filter__inline {
889
- // margin: 30px;
890
- display: flex;
891
- flex-direction: column;
892
- // justify-content: space-between;
893
- // align-items: center;
894
- flex-wrap: wrap;
895
- gap: 20px;
896
- .filter__Header {
897
- display: flex;
898
- justify-content: flex-start;
899
- gap: 12px;
900
- h2 {
901
- font-size: var(--_fs-14);
902
- font-weight: var(--_fw-600);
903
- text-transform: uppercase;
904
- }
905
- h3 {
906
- // font-size: 14px;
907
- // text-transform: uppercase;
908
-
909
- color: var(
910
- --_ctm-mob-dn-fs-wt-cr,
911
- var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
912
- );
913
- font-family: var(
914
- --_sf-hr-ff,
915
- var(
916
- --_ctm-mob-dn-fs-wt-ft-fy,
917
- var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
918
- )
919
- );
920
- font-size: var(
921
- --_ctm-mob-dn-fs-wt-ft-se,
922
- var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
923
- );
924
- font-weight: var(
925
- --_ctm-mob-dn-fs-wt-ft-wt,
926
- var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
927
- );
928
- font-style: var(
929
- --_ctm-mob-dn-fs-wt-ft-se-ic,
930
- var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
931
- );
932
- text-align: var(
933
- --_ctm-mob-dn-fs-wt-tt-an,
934
- var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
935
- );
936
- letter-spacing: var(
937
- --_ctm-mob-dn-fs-wt-lr-sg,
938
- var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
939
- );
940
- line-height: var(
941
- --_ctm-mob-dn-fs-wt-le-ht,
942
- var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
943
- );
944
- text-decoration: var(
945
- --_ctm-mob-dn-fs-wt-ue,
946
- var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
947
- );
948
- }
949
-
950
- .reset__btn {
951
- // font-size: 12px;
952
- // text-transform: uppercase;
953
- // font-weight: var(--_fw-500);
954
- // color: var(--_primary-400);
955
- background-color: var(
956
- --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
957
- var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
958
- );
959
- border-radius: var(
960
- --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
961
- var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
962
- );
963
- padding: var(
964
- --_ctm-mob-dn-cr-al-tt-dt-se-pg,
965
- var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
966
- );
967
- box-shadow: var(
968
- --_show-shadow-clear-all,
969
- var(
970
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
971
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
972
- )
973
- var(
974
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
975
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
976
- )
977
- var(
978
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
979
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
980
- )
981
- var(
982
- --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
983
- var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
984
- )
985
- );
986
-
987
- color: var(
988
- --_ctm-mob-dn-cr-al-tt-dt-se-cr,
989
- var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
990
- );
991
- font-family: var(
992
- --_sf-hr-ff,
993
- var(
994
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
995
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
996
- )
997
- );
998
- font-size: var(
999
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
1000
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
1001
- );
1002
- font-weight: var(
1003
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
1004
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
1005
- );
1006
- font-style: var(
1007
- --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
1008
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
1009
- );
1010
- text-align: var(
1011
- --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
1012
- var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
1013
- );
1014
- letter-spacing: var(
1015
- --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
1016
- var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
1017
- );
1018
- line-height: var(
1019
- --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
1020
- var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
1021
- );
1022
- text-decoration: var(
1023
- --_ctm-mob-dn-cr-al-tt-dt-se-ue,
1024
- var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
1025
- );
1026
- // &:hover {
1027
- // color: var(--_primary-700);
1028
- // }
1029
- }
1030
- }
1031
- p {
1032
- color: var(
1033
- --_ctm-mob-dn-fs-wt-cr-dc,
1034
- var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
1035
- );
1036
- font-family: var(
1037
- --_sf-hr-ff,
1038
- var(
1039
- --_ctm-mob-dn-fs-wt-ft-fy-dc,
1040
- var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
1041
- )
1042
- );
1043
- font-size: var(
1044
- --_ctm-mob-dn-fs-wt-ft-se-dc,
1045
- var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
1046
- );
1047
- font-weight: var(
1048
- --_ctm-mob-dn-fs-wt-ft-wt-dc,
1049
- var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
1050
- );
1051
- font-style: var(
1052
- --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
1053
- var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
1054
- );
1055
- text-align: var(
1056
- --_ctm-mob-dn-fs-wt-tt-an-dc,
1057
- var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
1058
- );
1059
- letter-spacing: var(
1060
- --_ctm-mob-dn-fs-wt-lr-sg-dc,
1061
- var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
1062
- );
1063
- line-height: var(
1064
- --_ctm-mob-dn-fs-wt-le-ht-dc,
1065
- var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
1066
- );
1067
- text-decoration: var(
1068
- --_ctm-mob-dn-fs-wt-ue-dc,
1069
- var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
1070
- );
1071
- }
1072
- .flt__dropdowns {
1073
- display: flex;
1074
- // flex-direction: column;
1075
- // justify-content: space-between;
1076
- align-items: center;
1077
- flex-wrap: wrap;
1078
- gap: 20px;
1079
- .filter__option__dropdown {
1080
- display: flex;
1081
- gap: 20px;
1082
- cursor: pointer;
1083
- border: 1px solid var(--_base-white);
1084
- padding: 6px 12px;
1085
- border-radius: 6px;
1086
- width: fit-content;
1087
- &:hover {
1088
- border: 1px solid var(--_gray-200);
1089
- background-color: var(--_gray-50);
1090
- }
1091
- }
1092
- }
1093
-
1094
- .flt__options {
1095
- display: flex;
1096
- align-items: center;
1097
- flex-wrap: wrap;
1098
- gap: 20px;
1099
- }
1100
- .selected__items {
1101
- display: flex;
1102
- flex-wrap: wrap;
1103
- gap: 10px;
1104
- align-items: center;
1105
- .selected__category {
1106
- display: flex;
1107
- align-items: center;
1108
- gap: 10px;
1109
- flex-wrap: wrap;
1110
- .selected_item {
1111
- display: flex;
1112
- gap: 8px;
1113
- border: 1px solid var(--_thm-cs-be-se-3);
1114
- border-radius: 30px;
1115
- padding: 6px 12px;
1116
- align-items: center;
1117
-
1118
- color: var(
1119
- --_sf-hr-fc,
1120
- var(
1121
- --_ctm-mob-dn-sd-im-dt-se-cr,
1122
- var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
1123
- )
1124
- );
1125
- font-family: var(
1126
- --_sf-hr-ff,
1127
- var(
1128
- --_ctm-mob-dn-sd-im-dt-se-ft-fy,
1129
- var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
1130
- )
1131
- );
1132
- font-size: var(
1133
- --_sf-hr-fs,
1134
- var(
1135
- --_ctm-mob-dn-sd-im-dt-se-ft-se,
1136
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
1137
- )
1138
- );
1139
- font-weight: var(
1140
- --_sf-hr-fw,
1141
- var(
1142
- --_ctm-mob-dn-sd-im-dt-se-ft-wt,
1143
- var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
1144
- )
1145
- );
1146
- font-style: var(
1147
- --_sf-hr-ft,
1148
- var(
1149
- --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
1150
- var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
1151
- )
1152
- );
1153
- text-align: var(
1154
- --_sf-hr-ta,
1155
- var(
1156
- --_ctm-mob-dn-sd-im-dt-se-tt-an,
1157
- var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
1158
- )
1159
- );
1160
- letter-spacing: var(
1161
- --_sf-hr-ls,
1162
- var(
1163
- --_ctm-mob-dn-sd-im-dt-se-lr-sg,
1164
- var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
1165
- )
1166
- );
1167
- line-height: var(
1168
- --_sf-hr-lh,
1169
- var(
1170
- --_ctm-mob-dn-sd-im-dt-se-le-ht,
1171
- var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
1172
- )
1173
- );
1174
- text-decoration: var(
1175
- --_sf-hr-tt-dn,
1176
- var(
1177
- --_ctm-mob-dn-sd-im-dt-se-ue,
1178
- var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
1179
- )
1180
- );
1181
- &:hover {
1182
- // border: 1px solid var(--_gray-300);
1183
- // background-color: var(--_gray-50);
1184
- // cursor: pointer;
1185
- --_sf-hr-bd-cr: var(
1186
- --_ctm-mob-dn-sd-im-hr-se-bd-cr,
1187
- var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
1188
- );
1189
- --_sf-hr-br-cr: var(
1190
- --_ctm-mob-dn-sd-im-hr-se-br-cr,
1191
- var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
1192
- );
1193
- --_sf-hr-br-st: var(
1194
- --_ctm-mob-dn-sd-im-hr-se-br-se,
1195
- var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
1196
- );
1197
- --_sf-hr-br-wh: var(
1198
- --_ctm-mob-dn-sd-im-hr-se-br-wh,
1199
- var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
1200
- );
1201
- --_sf-hr-br-br: var(
1202
- --_ctm-mob-dn-sd-im-hr-se-br-rs,
1203
- var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
1204
- );
1205
- --_sf-hr-sd-im-pg: var(
1206
- --_ctm-mob-dn-sd-im-hr-se-pg,
1207
- var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
1208
- );
1209
- --_sf-hr-bx-sw: var(
1210
- --_ctm-mob-dn-sd-im-hr-se-sw-ae,
1211
- var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
1212
- )
1213
- var(
1214
- --_ctm-mob-dn-sd-im-hr-se-sw-br,
1215
- var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
1216
- )
1217
- var(
1218
- --_ctm-mob-dn-sd-im-hr-se-sw-sd,
1219
- var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
1220
- )
1221
- var(
1222
- --_ctm-mob-dn-sd-im-hr-se-sw-cr,
1223
- var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
1224
- );
1225
-
1226
- --_sf-hr-fc: var(
1227
- --_ctm-mob-dn-sd-im-hr-se-cr,
1228
- var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
1229
- );
1230
- --_sf-hr-ff: var(
1231
- --_ctm-mob-dn-sd-im-hr-se-ft-fy,
1232
- var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
1233
- );
1234
- --_sf-hr-fs: var(
1235
- --_ctm-mob-dn-sd-im-hr-se-ft-se,
1236
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
1237
- );
1238
- --_sf-hr-fw: var(
1239
- --_ctm-mob-dn-sd-im-hr-se-ft-wt,
1240
- var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
1241
- );
1242
- --_sf-hr-ft: var(
1243
- --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
1244
- var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
1245
- );
1246
- --_sf-hr-ta: var(
1247
- --_ctm-mob-dn-sd-im-hr-se-tt-an,
1248
- var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
1249
- );
1250
- --_sf-hr-ls: var(
1251
- --_ctm-mob-dn-sd-im-hr-se-lr-sg,
1252
- var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
1253
- );
1254
- --_sf-hr-lh: var(
1255
- --_ctm-mob-dn-sd-im-hr-se-le-ht,
1256
- var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
1257
- );
1258
-
1259
- --_sf-hr-ic-wt: var(
1260
- --_ctm-mob-dn-sd-im-hr-se-in-se,
1261
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1262
- );
1263
- --_sf-hr-ic-ht: var(
1264
- --_ctm-mob-dn-sd-im-hr-se-in-se,
1265
- var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1266
- );
1267
- --_sf-hr-ic-st: var(
1268
- --_ctm-mob-dn-sd-im-hr-se-in-c1,
1269
- var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
1270
- );
1271
- --_sf-hr-tt-dn: var(
1272
- --_ctm-mob-dn-sd-im-hr-se-ue,
1273
- var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
1274
- );
1275
-
1276
- &[data-hover-show-shadow="false"] {
1277
- --_hover-show-shadow: none;
1278
- }
1279
- &[data-hover-show-icon="false"] {
1280
- --_hover-show-icon: none;
1281
- }
1282
- }
1283
- }
1284
- }
1285
- }
1286
- }
1287
-
1288
- .clear__btn {
1289
- display: flex;
1290
- align-items: center;
1291
- svg {
1292
- width: 18px;
1293
- height: 18px;
1294
- &:hover {
1295
- path {
1296
- stroke: var(--_gray-900);
1297
- }
1298
- }
1299
- }
1300
- }
1301
- //Filter Features Ends
1302
-
1303
- // Input checkbox Starts
1304
- .checkbox__radio {
1305
- display: flex;
1306
- align-items: center;
1307
- gap: 8px;
1308
- position: relative;
1309
- // margin-bottom: 12px;
1310
- cursor: pointer;
1311
- font-size: 14px;
1312
- -webkit-user-select: none;
1313
- -moz-user-select: none;
1314
- -ms-user-select: none;
1315
- user-select: none;
1316
- .color-image {
1317
- width: 15px;
1318
- height: 15px;
1319
- border-radius: 50%;
1320
- border: 1px solid var(--_thm-cs-be-se-3);
1321
- object-fit: "cover";
1322
- display: "block";
1323
- }
1324
- .color {
1325
- width: 15px;
1326
- height: 15px;
1327
- border: 1px solid var(--_thm-cs-be-se-3);
1328
- border-radius: 50%;
1329
- }
1330
-
1331
- .option__value {
1332
- color: var(
1333
- --_ctm-mob-dn-on-ls-cr-dc,
1334
- var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
1335
- );
1336
- font-family: var(
1337
- --_sf-hr-ff,
1338
- var(
1339
- --_ctm-mob-dn-on-ls-ft-fy-dc,
1340
- var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
1341
- )
1342
- );
1343
- font-size: var(
1344
- --_ctm-mob-dn-on-ls-ft-se-dc,
1345
- var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
1346
- );
1347
- font-weight: var(
1348
- --_ctm-mob-dn-on-ls-ft-wt-dc,
1349
- var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
1350
- );
1351
- font-style: var(
1352
- --_ctm-mob-dn-on-ls-ft-se-ic-dc,
1353
- var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
1354
- );
1355
- text-align: var(
1356
- --_ctm-mob-dn-on-ls-tt-an-dc,
1357
- var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
1358
- );
1359
- letter-spacing: var(
1360
- --_ctm-mob-dn-on-ls-lr-sg-dc,
1361
- var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
1362
- );
1363
- line-height: var(
1364
- --_ctm-mob-dn-on-ls-le-ht-dc,
1365
- var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
1366
- );
1367
- text-decoration: var(
1368
- --_ctm-mob-dn-on-ls-ue-dc,
1369
- var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
1370
- );
1371
- }
1372
- }
1373
-
1374
- .checkbox__radio input {
1375
- position: absolute;
1376
- opacity: 0;
1377
- cursor: pointer;
1378
- height: 0;
1379
- width: 0;
1380
- }
1381
-
1382
- .checkmark {
1383
- height: 18px;
1384
- width: 18px;
1385
- // border: 1px solid var(--_gray-500);
1386
- // background-color: var(--_base-white);
1387
- display: flex;
1388
- justify-content: center;
1389
- align-items: center;
1390
-
1391
- background-color: var(
1392
- --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1393
- var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1394
- );
1395
- border-radius: var(
1396
- --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1397
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
1398
- );
1399
- &[data-show-default-unchecked-shadow="true"] {
1400
- box-shadow: var(
1401
- --_show-shadow-clear-all,
1402
- var(
1403
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1404
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
1405
- )
1406
- var(
1407
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1408
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
1409
- )
1410
- var(
1411
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1412
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
1413
- )
1414
- var(
1415
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1416
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
1417
- )
1418
- );
1419
- }
1420
- &[data-show-default-unchecked-border="true"] {
1421
- border-color: var(
1422
- --_sf-hr-br-cr,
1423
- var(
1424
- --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1425
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
1426
- )
1427
- );
1428
- border-style: var(
1429
- --_sf-hr-br-st,
1430
- var(
1431
- --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1432
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
1433
- )
1434
- );
1435
- border-width: var(
1436
- --_sf-hr-br-wh,
1437
- var(
1438
- --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1439
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
1440
- )
1441
- );
1442
- }
1443
- // &:hover {
1444
- // &[data-show-hover-unchecked-border="true"] {
1445
- // border-color: var(
1446
- // --_sf-hr-br-cr,
1447
- // var(
1448
- // --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
1449
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
1450
- // )
1451
- // );
1452
- // border-style: var(
1453
- // --_sf-hr-br-st,
1454
- // var(
1455
- // --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
1456
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
1457
- // )
1458
- // );
1459
- // border-width: var(
1460
- // --_sf-hr-br-wh,
1461
- // var(
1462
- // --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
1463
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
1464
- // )
1465
- // );
1466
- // }
1467
- // &[data-show-hover-unchecked-shadow="true"] {
1468
- // box-shadow: var(
1469
- // --_show-shadow-clear-all,
1470
- // var(
1471
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1472
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1473
- // )
1474
- // var(
1475
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1476
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1477
- // )
1478
- // var(
1479
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1480
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1481
- // )
1482
- // var(
1483
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1484
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1485
- // )
1486
- // );
1487
- // }
1488
- // background-color: var(
1489
- // --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
1490
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
1491
- // );
1492
- // border-radius: var(
1493
- // --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
1494
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
1495
- // );
1496
- // box-shadow: var(
1497
- // --_show-shadow-clear-all,
1498
- // var(
1499
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1500
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1501
- // )
1502
- // var(
1503
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1504
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1505
- // )
1506
- // var(
1507
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1508
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1509
- // )
1510
- // var(
1511
- // --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1512
- // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1513
- // )
1514
- // );
1515
- // }
1516
-
1517
- button {
1518
- display: none;
1519
- }
1520
- }
1521
-
1522
- .checkbox__radio input:checked ~ .checkmark {
1523
- background-color: var(
1524
- --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
1525
- var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
1526
- );
1527
- border-radius: var(
1528
- --_ctm-mob-dn-cx-cd-se-dt-se-br-rs,
1529
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs))
1530
- );
1531
- &[data-show-default-checked-shadow="true"] {
1532
- box-shadow: var(
1533
- --_show-shadow-clear-all,
1534
- var(
1535
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1536
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
1537
- )
1538
- var(
1539
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1540
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
1541
- )
1542
- var(
1543
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1544
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
1545
- )
1546
- var(
1547
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1548
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
1549
- )
1550
- );
1551
- }
1552
-
1553
- &[data-show-default-checked-border="true"] {
1554
- border-color: var(
1555
- --_sf-hr-br-cr,
1556
- var(
1557
- --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1558
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
1559
- )
1560
- );
1561
- border-style: var(
1562
- --_sf-hr-br-st,
1563
- var(
1564
- --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1565
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
1566
- )
1567
- );
1568
- border-width: var(
1569
- --_sf-hr-br-wh,
1570
- var(
1571
- --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1572
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
1573
- )
1574
- );
1575
- }
1576
-
1577
- &:hover {
1578
- background-color: var(
1579
- --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
1580
- var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
1581
- );
1582
- border-radius: var(
1583
- --_ctm-mob-dn-cx-cd-se-hr-se-br-rs,
1584
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-dn-cx-cd-se-hr-se-br-rs))
1585
- );
1586
- &[data-show-hover-checked-shadow="true"] {
1587
- box-shadow: var(
1588
- --_show-shadow-clear-all,
1589
- var(
1590
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1591
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
1592
- )
1593
- var(
1594
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1595
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
1596
- )
1597
- var(
1598
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1599
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
1600
- )
1601
- var(
1602
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1603
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
1604
- )
1605
- );
1606
- }
1607
-
1608
- &[data-show-hover-checked-border="true"] {
1609
- border-color: var(
1610
- --_sf-hr-br-cr,
1611
- var(
1612
- --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1613
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
1614
- )
1615
- );
1616
- border-style: var(
1617
- --_sf-hr-br-st,
1618
- var(
1619
- --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1620
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
1621
- )
1622
- );
1623
- border-width: var(
1624
- --_sf-hr-br-wh,
1625
- var(
1626
- --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1627
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
1628
- )
1629
- );
1630
- }
1631
- button {
1632
- display: flex;
1633
- .default-icon {
1634
- display: none;
1635
- }
1636
-
1637
- .hover-icon {
1638
- display: flex;
1639
- align-items: center;
1640
- justify-content: center;
1641
- }
1642
- svg {
1643
- // width: 13px;
1644
- // height: 13px;
1645
- width: var(
1646
- --_ctm-mob-dn-cx-cd-se-hr-se-se,
1647
- var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1648
- );
1649
- height: var(
1650
- --_ctm-mob-dn-cx-cd-se-hr-se-se,
1651
- var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1652
- );
1653
- path {
1654
- // stroke: var(--_base-white);
1655
- stroke: var(
1656
- --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
1657
- var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
1658
- );
1659
- }
1660
- }
1661
- }
1662
- }
1663
-
1664
- // background-color: var(--_primary-400);
1665
- // border: 1px solid var(--_primary-400);
1666
- // border-radius: 50%;
1667
- display: flex;
1668
- justify-content: center;
1669
- align-items: center;
1670
-
1671
- button {
1672
- display: flex;
1673
- .default-icon {
1674
- display: flex;
1675
- justify-content: center;
1676
- align-items: center;
1677
- }
1678
-
1679
- .hover-icon {
1680
- display: none;
1681
- }
1682
- svg {
1683
- // width: 13px;
1684
- // height: 13px;
1685
- width: var(
1686
- --_ctm-mob-dn-cx-cd-se-dt-se-se,
1687
- var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
1688
- );
1689
- height: var(
1690
- --_ctm-mob-dn-cx-cd-se-dt-se-se,
1691
- var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
1692
- );
1693
- path {
1694
- // stroke: var(--_base-white);
1695
- stroke: var(
1696
- --_ctm-mob-dn-cx-cd-se-dt-se-in-c1,
1697
- var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1))
1698
- );
1699
- }
1700
- }
1701
- }
1702
- }
1703
-
1704
- .checkmark:after {
1705
- content: "";
1706
- position: absolute;
1707
- display: none;
1708
- }
1709
-
1710
- .checkbox__radio input:checked ~ .checkmark:after {
1711
- display: block;
1712
- }
1713
-
1714
- .checkbox__radio .checkmark:after {
1715
- left: 7px;
1716
- top: 2px;
1717
- }
1718
-
1719
- // Input checkbox Ends
1720
-
1721
- // Input radio begins
1722
-
1723
- .filter__checkbox__radio {
1724
- display: flex;
1725
- align-items: center;
1726
- cursor: pointer;
1727
- position: relative;
1728
-
1729
- input {
1730
- position: absolute;
1731
- opacity: 0;
1732
- cursor: pointer;
1733
- height: 0;
1734
- width: 0;
1735
- }
1736
-
1737
- .filter__checkmark {
1738
- display: inline-block;
1739
- height: 18px;
1740
- width: 18px;
1741
- // border: 2px solid #ccc;
1742
- // background-color: #fff;
1743
- position: relative;
1744
- transition:
1745
- border-color 0.2s ease,
1746
- background-color 0.2s ease;
1747
- // background-color: var(
1748
- // --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1749
- // var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1750
- // );
1751
- border-radius: var(
1752
- --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1753
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
1754
- );
1755
- &[data-show-default-unchecked-shadow="true"] {
1756
- box-shadow: var(
1757
- --_show-shadow-clear-all,
1758
- var(
1759
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1760
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
1761
- )
1762
- var(
1763
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1764
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
1765
- )
1766
- var(
1767
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1768
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
1769
- )
1770
- var(
1771
- --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1772
- var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
1773
- )
1774
- );
1775
- }
1776
- &[data-show-default-unchecked-border="true"] {
1777
- border-color: var(
1778
- --_sf-hr-br-cr,
1779
- var(
1780
- --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1781
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
1782
- )
1783
- );
1784
- border-style: var(
1785
- --_sf-hr-br-st,
1786
- var(
1787
- --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1788
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
1789
- )
1790
- );
1791
- border-width: var(
1792
- --_sf-hr-br-wh,
1793
- var(
1794
- --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1795
- var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
1796
- )
1797
- );
1798
- }
1799
- &:hover {
1800
- &[data-show-hover-unchecked-border="true"] {
1801
- border-color: var(
1802
- --_sf-hr-br-cr,
1803
- var(
1804
- --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
1805
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
1806
- )
1807
- );
1808
- border-style: var(
1809
- --_sf-hr-br-st,
1810
- var(
1811
- --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
1812
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
1813
- )
1814
- );
1815
- border-width: var(
1816
- --_sf-hr-br-wh,
1817
- var(
1818
- --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
1819
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
1820
- )
1821
- );
1822
- }
1823
- &[data-show-hover-unchecked-shadow="true"] {
1824
- box-shadow: var(
1825
- --_show-shadow-clear-all,
1826
- var(
1827
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1828
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1829
- )
1830
- var(
1831
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1832
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1833
- )
1834
- var(
1835
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1836
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1837
- )
1838
- var(
1839
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1840
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1841
- )
1842
- );
1843
- }
1844
- background-color: var(
1845
- --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
1846
- var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
1847
- );
1848
- border-radius: var(
1849
- --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
1850
- var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
1851
- );
1852
- box-shadow: var(
1853
- --_show-shadow-clear-all,
1854
- var(
1855
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1856
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1857
- )
1858
- var(
1859
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1860
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1861
- )
1862
- var(
1863
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1864
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1865
- )
1866
- var(
1867
- --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1868
- var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1869
- )
1870
- );
1871
- }
1872
- }
1873
-
1874
- // Only style this way if the input is a radio
1875
- input[type="radio"] ~ .filter__checkmark {
1876
- border-radius: 50%;
1877
- }
1878
-
1879
- input[type="radio"]:checked ~ .filter__checkmark {
1880
- // border-color: #007bff;
1881
- &[data-show-default-checked-shadow="true"] {
1882
- box-shadow: var(
1883
- --_show-shadow-clear-all,
1884
- var(
1885
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1886
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
1887
- )
1888
- var(
1889
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1890
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
1891
- )
1892
- var(
1893
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1894
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
1895
- )
1896
- var(
1897
- --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1898
- var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
1899
- )
1900
- );
1901
- }
1902
-
1903
- &[data-show-default-checked-border="true"] {
1904
- border-color: var(
1905
- --_sf-hr-br-cr,
1906
- var(
1907
- --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1908
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
1909
- )
1910
- );
1911
- border-style: var(
1912
- --_sf-hr-br-st,
1913
- var(
1914
- --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1915
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
1916
- )
1917
- );
1918
- border-width: var(
1919
- --_sf-hr-br-wh,
1920
- var(
1921
- --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1922
- var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
1923
- )
1924
- );
1925
- }
1926
-
1927
- &:hover {
1928
- &[data-show-hover-checked-shadow="true"] {
1929
- box-shadow: var(
1930
- --_show-shadow-clear-all,
1931
- var(
1932
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1933
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
1934
- )
1935
- var(
1936
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1937
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
1938
- )
1939
- var(
1940
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1941
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
1942
- )
1943
- var(
1944
- --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1945
- var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
1946
- )
1947
- );
1948
- }
1949
-
1950
- &[data-show-hover-checked-border="true"] {
1951
- border-color: var(
1952
- --_sf-hr-br-cr,
1953
- var(
1954
- --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1955
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
1956
- )
1957
- );
1958
- border-style: var(
1959
- --_sf-hr-br-st,
1960
- var(
1961
- --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1962
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
1963
- )
1964
- );
1965
- border-width: var(
1966
- --_sf-hr-br-wh,
1967
- var(
1968
- --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1969
- var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
1970
- )
1971
- );
1972
- }
1973
- button {
1974
- display: flex;
1975
- .default-icon {
1976
- display: none;
1977
- }
1978
-
1979
- .hover-icon {
1980
- display: block;
1981
- }
1982
- svg {
1983
- // width: 13px;
1984
- // height: 13px;
1985
- width: var(
1986
- --_ctm-mob-dn-cx-cd-se-hr-se-se,
1987
- var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1988
- );
1989
- height: var(
1990
- --_ctm-mob-dn-cx-cd-se-hr-se-se,
1991
- var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1992
- );
1993
- path {
1994
- // stroke: var(--_base-white);
1995
- stroke: var(
1996
- --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
1997
- var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
1998
- );
1999
- }
2000
- }
2001
- }
2002
- }
2003
- }
2004
-
2005
- input[type="radio"]:checked ~ .filter__checkmark::after {
2006
- content: "";
2007
- position: absolute;
2008
- top: 50%;
2009
- left: 50%;
2010
- transform: translate(-50%, -50%);
2011
- height: 8px;
2012
- width: 8px;
2013
- border-radius: 50%;
2014
- // background-color: #007bff;
2015
- background-color: var(
2016
- --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2017
- var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2018
- );
2019
- &:hover {
2020
- background-color: var(
2021
- --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
2022
- var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
2023
- );
2024
- }
2025
- }
2026
-
2027
- // Optional for checkbox styling (square)
2028
- input[type="checkbox"] ~ .filter__checkmark {
2029
- border-radius: 4px;
2030
- }
2031
-
2032
- // input[type="checkbox"]:checked ~ .filter__checkmark {
2033
- // background-color: #007bff;
2034
- // border-color: #007bff;
2035
- // }
2036
-
2037
- // input[type="checkbox"]:checked ~ .filter__checkmark::after {
2038
- // content: "";
2039
- // position: absolute;
2040
- // left: 5px;
2041
- // top: 1px;
2042
- // width: 4px;
2043
- // height: 10px;
2044
- // border: solid #fff;
2045
- // border-width: 0 2px 2px 0;
2046
- // transform: rotate(45deg);
2047
- // }
2048
-
2049
- .filter__option__value {
2050
- margin-left: 8px;
2051
- color: var(
2052
- --_ctm-mob-dn-on-ls-cr-dc,
2053
- var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
2054
- );
2055
- font-family: var(
2056
- --_sf-hr-ff,
2057
- var(
2058
- --_ctm-mob-dn-on-ls-ft-fy-dc,
2059
- var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
2060
- )
2061
- );
2062
- font-size: var(
2063
- --_ctm-mob-dn-on-ls-ft-se-dc,
2064
- var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
2065
- );
2066
- font-weight: var(
2067
- --_ctm-mob-dn-on-ls-ft-wt-dc,
2068
- var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
2069
- );
2070
- font-style: var(
2071
- --_ctm-mob-dn-on-ls-ft-se-ic-dc,
2072
- var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
2073
- );
2074
- text-align: var(
2075
- --_ctm-mob-dn-on-ls-tt-an-dc,
2076
- var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
2077
- );
2078
- letter-spacing: var(
2079
- --_ctm-mob-dn-on-ls-lr-sg-dc,
2080
- var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
2081
- );
2082
- line-height: var(
2083
- --_ctm-mob-dn-on-ls-le-ht-dc,
2084
- var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
2085
- );
2086
- text-decoration: var(
2087
- --_ctm-mob-dn-on-ls-ue-dc,
2088
- var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
2089
- );
2090
- }
2091
- }
2092
-
2093
- // Multi Range Slider Starts
2094
- .double-slider-box {
2095
- border-radius: 10px;
2096
- // padding: 20px;
2097
- width: 100%;
2098
- max-width: 300px;
2099
- padding-inline: 4px;
2100
- // margin: auto;
2101
- }
2102
-
2103
- .range-slider {
2104
- position: relative;
2105
- width: 100%;
2106
- height: 5px;
2107
- margin: 16px 0 30px 0px;
2108
- // background-color: var(--_primary-400);
2109
- // background: linear-gradient(
2110
- // to right,
2111
- // var(
2112
- // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2113
- // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2114
- // )
2115
- // 0%,
2116
- // var(
2117
- // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2118
- // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2119
- // )
2120
- // var(--left),
2121
- // var(
2122
- // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2123
- // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2124
- // )
2125
- // var(--left),
2126
- // var(
2127
- // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2128
- // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2129
- // )
2130
- // var(--right),
2131
- // var(
2132
- // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2133
- // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2134
- // )
2135
- // var(--right),
2136
- // var(
2137
- // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2138
- // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
2139
- // )
2140
- // 100%
2141
- // );
2142
-
2143
- background: linear-gradient(
2144
- to right,
2145
- var(
2146
- --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2147
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2148
- )
2149
- 0%,
2150
- var(
2151
- --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2152
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2153
- )
2154
- var(--left),
2155
- var(
2156
- --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2157
- var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2158
- )
2159
- var(--left),
2160
- var(
2161
- --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2162
- var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2163
- )
2164
- var(--right),
2165
- var(
2166
- --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2167
- var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2168
- )
2169
- var(--right),
2170
- var(
2171
- --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2172
- var(
2173
- --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
2174
- var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc)
2175
- )
2176
- )
2177
- 100%
2178
- );
2179
- // background-color: var(
2180
- // --_sf-hr-bd-cr,
2181
- // #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)}
2182
- // );
2183
- // border-radius: 5px;
2184
- border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-rs));
2185
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr));
2186
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh));
2187
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se));
2188
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae))
2189
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br))
2190
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd))
2191
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
2192
- }
2193
-
2194
- .slider-track {
2195
- height: 100%;
2196
- position: absolute;
2197
- background-color: var(--_primary-400);
2198
- left: 0;
2199
- right: 100%;
2200
- border-radius: 5px;
2201
- }
2202
-
2203
- .range-slider input[type="range"] {
2204
- position: absolute;
2205
- width: 100%;
2206
- top: 1px;
2207
- transform: translateY(-50%);
2208
- background: none;
2209
- pointer-events: none;
2210
- appearance: none;
2211
- height: 5px;
2212
- }
2213
-
2214
- input[type="range"]::-webkit-slider-thumb {
2215
- height: 20px;
2216
- width: 20px;
2217
- // border-radius: 50%;
2218
- // border: 3px solid #fff;
2219
- border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-rs));
2220
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-cr));
2221
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-wh));
2222
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-se));
2223
- background: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-bd-cr));
2224
- pointer-events: auto;
2225
- appearance: none;
2226
- cursor: pointer;
2227
- // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
2228
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae))
2229
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br))
2230
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd))
2231
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
2232
- position: relative;
2233
- z-index: 2; /* Ensure thumbs appear above the track */
2234
- }
2235
-
2236
- input[type="range"]::-moz-range-thumb {
2237
- height: 25px;
2238
- width: 25px;
2239
- border-radius: 50%;
2240
- border: 3px solid #fff;
2241
- background: var(--_base-white);
2242
- pointer-events: auto;
2243
- cursor: pointer;
2244
- box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
2245
- position: relative;
2246
- z-index: 2;
2247
- }
2248
-
2249
- .input-box {
2250
- display: flex;
2251
- justify-content: space-between;
2252
- width: 100%;
2253
- }
2254
-
2255
- .min-box,
2256
- .max-box {
2257
- width: 50%;
2258
- }
2259
-
2260
- .min-box {
2261
- margin-right: 10px;
2262
- }
2263
- .max-box input {
2264
- float: right;
2265
- }
2266
- input[type="number"] {
2267
- width: 90px;
2268
- padding: 10px;
2269
- border: 1px solid var(--_thm-cs-be-se-3);
2270
- border-radius: 5px;
2271
- text-align: center;
2272
- }
2273
-
2274
- .min-tooltip,
2275
- .max-tooltip {
2276
- position: absolute;
2277
- top: -35px;
2278
- font-size: 12px;
2279
- color: #555;
2280
- // background-color: #fff;
2281
- border: 1px solid var(--_thm-cs-be-se-3);
2282
- border-radius: 5px;
2283
- white-space: nowrap;
2284
- padding-inline: 15px;
2285
- }
2286
-
2287
- .min-tooltip {
2288
- left: 42px;
2289
- top: 20px;
2290
- transform: translateX(-50%);
2291
- input {
2292
- padding-left: 0px !important;
2293
- text-align: left !important;
2294
- }
2295
- }
2296
-
2297
- .max-tooltip {
2298
- right: 45px;
2299
- top: 20px;
2300
- transform: translateX(50%);
2301
- input {
2302
- padding-left: 0px !important;
2303
- text-align: left !important;
2304
- }
2305
- }
2306
-
2307
- .price-range-container {
2308
- width: 100%;
2309
- margin: auto;
2310
- padding: 10px;
2311
- }
2312
-
2313
- .price-range-inputs {
2314
- display: flex;
2315
- align-items: center;
2316
- justify-content: space-between;
2317
- gap: 12px;
2318
- }
2319
-
2320
- .price-range-min,
2321
- .price-range-max {
2322
- flex: 1;
2323
- display: flex;
2324
- flex-direction: column;
2325
- align-items: flex-start;
2326
- }
2327
-
2328
- .price-range-label {
2329
- font-size: 12px;
2330
- font-weight: 500;
2331
- color: #333;
2332
- margin-bottom: 6px;
2333
- }
2334
-
2335
- .price-range-input-wrapper {
2336
- display: flex;
2337
- align-items: center;
2338
- width: 100%;
2339
- }
2340
-
2341
- .price-range-min span,
2342
- .price-range-max span {
2343
- margin-right: 8px;
2344
- font-size: 14px;
2345
- color: #333;
2346
- font-weight: 500;
2347
- }
2348
-
2349
- .price-range-separator {
2350
- font-size: 14px;
2351
- color: #333;
2352
- font-weight: 500;
2353
- }
2354
-
2355
- .price-range-min-input,
2356
- .price-range-max-input {
2357
- width: 100%;
2358
- padding: 8px;
2359
- border: 1px solid var(--_thm-cs-be-se-3);
2360
- border-radius: 4px;
2361
- text-align: center;
2362
- font-size: 14px;
2363
- color: #333;
2364
- background-color: #fff;
2365
- }
2366
-
2367
- .price-range-min-input:focus,
2368
- .price-range-max-input:focus {
2369
- outline: none;
2370
- border-color: #2563eb;
2371
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
2372
- }
2373
-
2374
- .price-range-min-input::placeholder,
2375
- .price-range-max-input::placeholder {
2376
- color: #9ca3af;
2377
- }
2378
-
2379
- /* Chrome, Safari, Edge, and Opera */
2380
- input[type="number"]::-webkit-inner-spin-button,
2381
- input[type="number"]::-webkit-outer-spin-button {
2382
- -webkit-appearance: none;
2383
- margin: 0;
2384
- }
2385
-
2386
- /* Firefox */
2387
- input[type="number"] {
2388
- -moz-appearance: textfield;
2389
- }
2390
-
2391
- // Multi Range Slider Ends
2392
- // Button Group Starts
2393
- .button_main {
2394
- border: 1px solid var(--_gray-600);
2395
- cursor: pointer;
2396
- .btn__group {
2397
- display: flex;
2398
- justify-content: center;
2399
- align-items: center;
2400
- gap: 8px;
2401
- color: #fff;
2402
- font-weight: 600;
2403
- font-size: 16px;
2404
- background-color: #000080;
2405
- padding: 10px 20px;
2406
- button {
2407
- svg {
2408
- path {
2409
- stroke: #fff;
2410
- }
2411
- }
2412
- }
2413
- }
2414
- }
2415
- // Button Group Ends
2416
- }
2417
- }
2418
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="filters"] {
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
20
+
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
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
+
71
+ .filter_container {
72
+ width: 100%;
73
+ //Filter Features Starts
74
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
75
+ background-color: var(
76
+ --_ctm-mob-dn-fs-wt-bd-cr,
77
+ var(--_ctm-tab-dn-fs-wt-bd-cr, var(--_ctm-dn-fs-wt-bd-cr))
78
+ );
79
+ box-shadow: var(
80
+ --_show-shadow,
81
+ var(--_ctm-mob-dn-fs-wt-sw-ae, var(--_ctm-tab-dn-fs-wt-sw-ae, var(--_ctm-dn-fs-wt-sw-ae)))
82
+ var(--_ctm-mob-dn-fs-wt-sw-br, var(--_ctm-tab-dn-fs-wt-sw-br, var(--_ctm-dn-fs-wt-sw-br)))
83
+ var(--_ctm-mob-dn-fs-wt-sw-sd, var(--_ctm-tab-dn-fs-wt-sw-sd, var(--_ctm-dn-fs-wt-sw-sd)))
84
+ var(--_ctm-mob-dn-fs-wt-sw-cr, var(--_ctm-tab-dn-fs-wt-sw-cr, var(--_ctm-dn-fs-wt-sw-cr)))
85
+ );
86
+ border-radius: var(
87
+ --_ctm-mob-dn-fs-wt-br-rs,
88
+ var(--_ctm-tab-dn-fs-wt-br-rs, var(--_ctm-dn-fs-wt-br-rs))
89
+ );
90
+ @mixin flex($justifyItems: flex-start, $alignItems: center) {
91
+ display: var(--_d-flex);
92
+ justify-content: $justifyItems;
93
+ align-items: $alignItems;
94
+ }
95
+
96
+ .product__filter {
97
+ // width: 250px;
98
+ width: 100%;
99
+ // height: calc(100vh - 20px);
100
+ // padding: 10px;
101
+ overflow-y: auto;
102
+
103
+ .option__group {
104
+ display: flex;
105
+ flex-direction: column;
106
+ padding-block: 12px;
107
+ // padding-right: 10px;
108
+ &.divider_filter {
109
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
110
+ }
111
+ &:last-child {
112
+ border-bottom: none !important;
113
+ }
114
+ .filter__Header {
115
+ display: flex;
116
+ justify-content: space-between;
117
+ align-items: center;
118
+ gap: 12px;
119
+
120
+ h2 {
121
+ font-size: var(--_fs-14);
122
+ font-weight: var(--_fw-600);
123
+ text-transform: uppercase;
124
+ }
125
+ h3 {
126
+ // font-size: 14px;
127
+ // text-transform: uppercase;
128
+
129
+ color: var(
130
+ --_ctm-mob-dn-fs-wt-cr,
131
+ var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
132
+ );
133
+ font-family: var(
134
+ --_sf-hr-ff,
135
+ var(
136
+ --_ctm-mob-dn-fs-wt-ft-fy,
137
+ var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
138
+ )
139
+ );
140
+ font-size: var(
141
+ --_ctm-mob-dn-fs-wt-ft-se,
142
+ var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
143
+ );
144
+ font-weight: var(
145
+ --_ctm-mob-dn-fs-wt-ft-wt,
146
+ var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
147
+ );
148
+ font-style: var(
149
+ --_ctm-mob-dn-fs-wt-ft-se-ic,
150
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
151
+ );
152
+ text-align: var(
153
+ --_ctm-mob-dn-fs-wt-tt-an,
154
+ var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
155
+ );
156
+ letter-spacing: var(
157
+ --_ctm-mob-dn-fs-wt-lr-sg,
158
+ var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
159
+ );
160
+ line-height: var(
161
+ --_ctm-mob-dn-fs-wt-le-ht,
162
+ var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
163
+ );
164
+ text-decoration: var(
165
+ --_ctm-mob-dn-fs-wt-ue,
166
+ var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
167
+ );
168
+ }
169
+
170
+ .reset__btn {
171
+ // font-size: 12px;
172
+ // text-transform: uppercase;
173
+ // font-weight: var(--_fw-500);
174
+ // color: var(--_primary-400);
175
+ // &:hover {
176
+ // color: var(--_primary-700);
177
+ // }
178
+ background-color: var(
179
+ --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
180
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
181
+ );
182
+ border-radius: var(
183
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
184
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
185
+ );
186
+ padding: var(
187
+ --_ctm-mob-dn-cr-al-tt-dt-se-pg,
188
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
189
+ );
190
+ box-shadow: var(
191
+ --_show-shadow-clear-all,
192
+ var(
193
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
194
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
195
+ )
196
+ var(
197
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
198
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
199
+ )
200
+ var(
201
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
202
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
203
+ )
204
+ var(
205
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
206
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
207
+ )
208
+ );
209
+
210
+ color: var(
211
+ --_ctm-mob-dn-cr-al-tt-dt-se-cr,
212
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
213
+ );
214
+ font-family: var(
215
+ --_sf-hr-ff,
216
+ var(
217
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
218
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
219
+ )
220
+ );
221
+ font-size: var(
222
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
223
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
224
+ );
225
+ font-weight: var(
226
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
227
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
228
+ );
229
+ font-style: var(
230
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
231
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
232
+ );
233
+ text-align: var(
234
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
235
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
236
+ );
237
+ letter-spacing: var(
238
+ --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
239
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
240
+ );
241
+ line-height: var(
242
+ --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
243
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
244
+ );
245
+ text-decoration: var(
246
+ --_ctm-mob-dn-cr-al-tt-dt-se-ue,
247
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
248
+ );
249
+ }
250
+ }
251
+ p {
252
+ color: var(
253
+ --_ctm-mob-dn-fs-wt-cr-dc,
254
+ var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
255
+ );
256
+ font-family: var(
257
+ --_sf-hr-ff,
258
+ var(
259
+ --_ctm-mob-dn-fs-wt-ft-fy-dc,
260
+ var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
261
+ )
262
+ );
263
+ font-size: var(
264
+ --_ctm-mob-dn-fs-wt-ft-se-dc,
265
+ var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
266
+ );
267
+ font-weight: var(
268
+ --_ctm-mob-dn-fs-wt-ft-wt-dc,
269
+ var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
270
+ );
271
+ font-style: var(
272
+ --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
273
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
274
+ );
275
+ text-align: var(
276
+ --_ctm-mob-dn-fs-wt-tt-an-dc,
277
+ var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
278
+ );
279
+ letter-spacing: var(
280
+ --_ctm-mob-dn-fs-wt-lr-sg-dc,
281
+ var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
282
+ );
283
+ line-height: var(
284
+ --_ctm-mob-dn-fs-wt-le-ht-dc,
285
+ var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
286
+ );
287
+ text-decoration: var(
288
+ --_ctm-mob-dn-fs-wt-ue-dc,
289
+ var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
290
+ );
291
+ }
292
+
293
+ .selected__items {
294
+ display: flex;
295
+ flex-wrap: wrap;
296
+ gap: 10px;
297
+ align-items: center;
298
+ // margin-top: 10px;
299
+ .selected__category {
300
+ display: flex;
301
+ align-items: center;
302
+ gap: 10px;
303
+ flex-wrap: wrap;
304
+ // .selected_item {
305
+ // display: flex;
306
+ // gap: 8px;
307
+ // border: 1px solid var(--_gray-200);
308
+ // font-size: 14px;
309
+ // border-radius: 30px;
310
+ // padding: 5px 10px;
311
+ // align-items: center;
312
+ // &:hover {
313
+ // border: 1px solid var(--_gray-300);
314
+ // background-color: var(--_gray-50);
315
+ // cursor: pointer;
316
+ // }
317
+ // }
318
+ .selected_item {
319
+ display: flex;
320
+ gap: 6px;
321
+ border: 1px solid var(--_thm-cs-be-se-3);
322
+ border-radius: 30px;
323
+ padding: 6px 12px;
324
+ align-items: center;
325
+ transition:
326
+ background-color 400ms,
327
+ border-color 400ms ease-in-out;
328
+ background-color: var(
329
+ --_sf-hr-bd-cr,
330
+ var(
331
+ --_ctm-mob-dn-sd-im-dt-se-bd-cr,
332
+ var(--_ctm-tab-dn-sd-im-dt-se-bd-cr, var(--_ctm-dn-sd-im-dt-se-bd-cr))
333
+ )
334
+ );
335
+ border-radius: var(
336
+ --_sf-hr-br-br,
337
+ var(
338
+ --_ctm-mob-dn-sd-im-dt-se-br-rs,
339
+ var(--_ctm-tab-dn-sd-im-dt-se-br-rs, var(--_ctm-dn-sd-im-dt-se-br-rs))
340
+ )
341
+ );
342
+ padding: var(
343
+ --_sf-hr-sd-im-pg,
344
+ var(
345
+ --_ctm-mob-dn-sd-im-dt-se-pg,
346
+ var(--_ctm-tab-dn-sd-im-dt-se-pg, var(--_ctm-dn-sd-im-dt-se-pg))
347
+ )
348
+ );
349
+ box-shadow: var(
350
+ --_hover-show-shadow,
351
+ var(
352
+ --_sf-hr-bx-sw,
353
+ var(
354
+ --_show-shadow,
355
+ var(
356
+ --_ctm-mob-dn-sd-im-dt-se-sw-ae,
357
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-ae, var(--_ctm-dn-sd-im-dt-se-sw-ae))
358
+ )
359
+ var(
360
+ --_ctm-mob-dn-sd-im-dt-se-sw-br,
361
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-br, var(--_ctm-dn-sd-im-dt-se-sw-br))
362
+ )
363
+ var(
364
+ --_ctm-mob-dn-sd-im-dt-se-sw-sd,
365
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-sd, var(--_ctm-dn-sd-im-dt-se-sw-sd))
366
+ )
367
+ var(
368
+ --_ctm-mob-dn-sd-im-dt-se-sw-cr,
369
+ var(--_ctm-tab-dn-sd-im-dt-se-sw-cr, var(--_ctm-dn-sd-im-dt-se-sw-cr))
370
+ )
371
+ )
372
+ )
373
+ );
374
+
375
+ color: var(
376
+ --_sf-hr-fc,
377
+ var(
378
+ --_ctm-mob-dn-sd-im-dt-se-cr,
379
+ var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
380
+ )
381
+ );
382
+ font-family: var(
383
+ --_sf-hr-ff,
384
+ var(
385
+ --_ctm-mob-dn-sd-im-dt-se-ft-fy,
386
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
387
+ )
388
+ );
389
+ font-size: var(
390
+ --_sf-hr-fs,
391
+ var(
392
+ --_ctm-mob-dn-sd-im-dt-se-ft-se,
393
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
394
+ )
395
+ );
396
+ font-weight: var(
397
+ --_sf-hr-fw,
398
+ var(
399
+ --_ctm-mob-dn-sd-im-dt-se-ft-wt,
400
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
401
+ )
402
+ );
403
+ font-style: var(
404
+ --_sf-hr-ft,
405
+ var(
406
+ --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
407
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
408
+ )
409
+ );
410
+ text-align: var(
411
+ --_sf-hr-ta,
412
+ var(
413
+ --_ctm-mob-dn-sd-im-dt-se-tt-an,
414
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
415
+ )
416
+ );
417
+ letter-spacing: var(
418
+ --_sf-hr-ls,
419
+ var(
420
+ --_ctm-mob-dn-sd-im-dt-se-lr-sg,
421
+ var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
422
+ )
423
+ );
424
+ line-height: var(
425
+ --_sf-hr-lh,
426
+ var(
427
+ --_ctm-mob-dn-sd-im-dt-se-le-ht,
428
+ var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
429
+ )
430
+ );
431
+ text-decoration: var(
432
+ --_sf-hr-tt-dn,
433
+ var(
434
+ --_ctm-mob-dn-sd-im-dt-se-ue,
435
+ var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
436
+ )
437
+ );
438
+ &[data-show-selected-item-border="true"] {
439
+ border-color: var(
440
+ --_sf-hr-br-cr,
441
+ var(
442
+ --_ctm-mob-dn-sd-im-dt-se-br-cr,
443
+ var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
444
+ )
445
+ );
446
+ border-style: var(
447
+ --_sf-hr-br-st,
448
+ var(
449
+ --_ctm-mob-dn-sd-im-dt-se-br-se,
450
+ var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
451
+ )
452
+ );
453
+ border-width: var(
454
+ --_sf-hr-br-wh,
455
+ var(
456
+ --_ctm-mob-dn-sd-im-dt-se-br-wh,
457
+ var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
458
+ )
459
+ );
460
+ }
461
+ &:hover {
462
+ // border: 1px solid var(--_gray-300);
463
+ // background-color: var(--_gray-50);
464
+ // cursor: pointer;
465
+ --_sf-hr-bd-cr: var(
466
+ --_ctm-mob-dn-sd-im-hr-se-bd-cr,
467
+ var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
468
+ );
469
+ --_sf-hr-br-cr: var(
470
+ --_ctm-mob-dn-sd-im-hr-se-br-cr,
471
+ var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
472
+ );
473
+ --_sf-hr-br-st: var(
474
+ --_ctm-mob-dn-sd-im-hr-se-br-se,
475
+ var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
476
+ );
477
+ --_sf-hr-br-wh: var(
478
+ --_ctm-mob-dn-sd-im-hr-se-br-wh,
479
+ var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
480
+ );
481
+ --_sf-hr-br-br: var(
482
+ --_ctm-mob-dn-sd-im-hr-se-br-rs,
483
+ var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
484
+ );
485
+ --_sf-hr-sd-im-pg: var(
486
+ --_ctm-mob-dn-sd-im-hr-se-pg,
487
+ var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
488
+ );
489
+ --_sf-hr-bx-sw: var(
490
+ --_ctm-mob-dn-sd-im-hr-se-sw-ae,
491
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
492
+ )
493
+ var(
494
+ --_ctm-mob-dn-sd-im-hr-se-sw-br,
495
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
496
+ )
497
+ var(
498
+ --_ctm-mob-dn-sd-im-hr-se-sw-sd,
499
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
500
+ )
501
+ var(
502
+ --_ctm-mob-dn-sd-im-hr-se-sw-cr,
503
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
504
+ );
505
+
506
+ --_sf-hr-fc: var(
507
+ --_ctm-mob-dn-sd-im-hr-se-cr,
508
+ var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
509
+ );
510
+ --_sf-hr-ff: var(
511
+ --_ctm-mob-dn-sd-im-hr-se-ft-fy,
512
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
513
+ );
514
+ --_sf-hr-fs: var(
515
+ --_ctm-mob-dn-sd-im-hr-se-ft-se,
516
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
517
+ );
518
+ --_sf-hr-fw: var(
519
+ --_ctm-mob-dn-sd-im-hr-se-ft-wt,
520
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
521
+ );
522
+ --_sf-hr-ft: var(
523
+ --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
524
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
525
+ );
526
+ --_sf-hr-ta: var(
527
+ --_ctm-mob-dn-sd-im-hr-se-tt-an,
528
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
529
+ );
530
+ --_sf-hr-ls: var(
531
+ --_ctm-mob-dn-sd-im-hr-se-lr-sg,
532
+ var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
533
+ );
534
+ --_sf-hr-lh: var(
535
+ --_ctm-mob-dn-sd-im-hr-se-le-ht,
536
+ var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
537
+ );
538
+
539
+ --_sf-hr-ic-wt: var(
540
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
541
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
542
+ );
543
+ --_sf-hr-ic-ht: var(
544
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
545
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
546
+ );
547
+ --_sf-hr-ic-st: var(
548
+ --_ctm-mob-dn-sd-im-hr-se-in-c1,
549
+ var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
550
+ );
551
+ --_sf-hr-tt-dn: var(
552
+ --_ctm-mob-dn-sd-im-hr-se-ue,
553
+ var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
554
+ );
555
+
556
+ &[data-hover-show-shadow="false"] {
557
+ --_hover-show-shadow: none;
558
+ }
559
+ &[data-hover-show-icon="false"] {
560
+ --_hover-show-icon: none;
561
+ }
562
+ &[data-show-selected-item-hover-border="true"] {
563
+ border-color: var(
564
+ --_sf-hr-br-cr,
565
+ var(
566
+ --_ctm-mob-dn-sd-im-dt-se-br-cr,
567
+ var(--_ctm-tab-dn-sd-im-dt-se-br-cr, var(--_ctm-dn-sd-im-dt-se-br-cr))
568
+ )
569
+ );
570
+ border-style: var(
571
+ --_sf-hr-br-st,
572
+ var(
573
+ --_ctm-mob-dn-sd-im-dt-se-br-se,
574
+ var(--_ctm-tab-dn-sd-im-dt-se-br-se, var(--_ctm-dn-sd-im-dt-se-br-se))
575
+ )
576
+ );
577
+ border-width: var(
578
+ --_sf-hr-br-wh,
579
+ var(
580
+ --_ctm-mob-dn-sd-im-dt-se-br-wh,
581
+ var(--_ctm-tab-dn-sd-im-dt-se-br-wh, var(--_ctm-dn-sd-im-dt-se-br-wh))
582
+ )
583
+ );
584
+ }
585
+ }
586
+ }
587
+ }
588
+ }
589
+
590
+ .option__group__header {
591
+ @include flex($justifyItems: space-between);
592
+ gap: 8px;
593
+ h2 {
594
+ font-size: var(--_fs-14);
595
+ font-weight: var(--_fw-600);
596
+ }
597
+ h3 {
598
+ // font-size: 12px;
599
+ // text-transform: uppercase;
600
+ // color: #333;
601
+ color: var(
602
+ --_ctm-mob-dn-on-ls-cr,
603
+ var(--_ctm-tab-dn-on-ls-cr, var(--_ctm-dn-on-ls-cr))
604
+ );
605
+ font-family: var(
606
+ --_sf-hr-ff,
607
+ var(
608
+ --_ctm-mob-dn-on-ls-ft-fy,
609
+ var(--_ctm-tab-dn-on-ls-ft-fy, var(--_ctm-dn-on-ls-ft-fy))
610
+ )
611
+ );
612
+ font-size: var(
613
+ --_ctm-mob-dn-on-ls-ft-se,
614
+ var(--_ctm-tab-dn-on-ls-ft-se, var(--_ctm-dn-on-ls-ft-se))
615
+ );
616
+ font-weight: var(
617
+ --_ctm-mob-dn-on-ls-ft-wt,
618
+ var(--_ctm-tab-dn-on-ls-ft-wt, var(--_ctm-dn-on-ls-ft-wt))
619
+ );
620
+ font-style: var(
621
+ --_ctm-mob-dn-on-ls-ft-se-ic,
622
+ var(--_ctm-tab-dn-on-ls-ft-se-ic, var(--_ctm-dn-on-ls-ft-se-ic))
623
+ );
624
+ text-align: var(
625
+ --_ctm-mob-dn-on-ls-tt-an,
626
+ var(--_ctm-tab-dn-on-ls-tt-an, var(--_ctm-dn-on-ls-tt-an))
627
+ );
628
+ letter-spacing: var(
629
+ --_ctm-mob-dn-on-ls-lr-sg,
630
+ var(--_ctm-tab-dn-on-ls-lr-sg, var(--_ctm-dn-on-ls-lr-sg))
631
+ );
632
+ line-height: var(
633
+ --_ctm-mob-dn-on-ls-le-ht,
634
+ var(--_ctm-tab-dn-on-ls-le-ht, var(--_ctm-dn-on-ls-le-ht))
635
+ );
636
+ text-decoration: var(
637
+ --_ctm-mob-dn-on-ls-ue,
638
+ var(--_ctm-tab-dn-on-ls-ue, var(--_ctm-dn-on-ls-ue))
639
+ );
640
+ display: -webkit-box;
641
+ -webkit-line-clamp: 1;
642
+ -webkit-box-orient: vertical;
643
+ overflow: hidden;
644
+ }
645
+ .reset__btn {
646
+ font-size: 12px;
647
+ text-transform: uppercase;
648
+ font-weight: var(--_fw-500);
649
+ color: var(--_primary-400);
650
+ }
651
+
652
+ .option__btn__group {
653
+ display: flex;
654
+ align-items: center;
655
+ gap: 12px;
656
+ .search__btn {
657
+ svg {
658
+ width: 16px;
659
+ height: 16px;
660
+ }
661
+ }
662
+ .rotate_0 {
663
+ display: flex;
664
+ align-items: center;
665
+ transform: rotate(0);
666
+ transition: all 400ms ease-in-out;
667
+ }
668
+ .rotate_180 {
669
+ display: flex;
670
+ align-items: center;
671
+ transform: rotate(180deg);
672
+ transition: all 400ms ease-in-out;
673
+ }
674
+ }
675
+ .filter__search {
676
+ display: flex;
677
+ align-items: center;
678
+ // padding: 6px 10px;
679
+ padding: var(
680
+ --_sf-hr-sd-im-pg,
681
+ var(--_ctm-mob-dn-sh-br-pg, var(--_ctm-tab-dn-sh-br-pg, var(--_ctm-dn-sh-br-pg)))
682
+ );
683
+ // border: 1px solid var(--_gray-300);
684
+ border-color: var(
685
+ --_sf-hr-br-cr,
686
+ var(
687
+ --_ctm-mob-dn-sh-br-br-cr,
688
+ var(--_ctm-tab-dn-sh-br-br-cr, var(--_ctm-dn-sh-br-br-cr))
689
+ )
690
+ );
691
+ border-style: var(
692
+ --_sf-hr-br-st,
693
+ var(
694
+ --_ctm-mob-dn-sh-br-br-se,
695
+ var(--_ctm-tab-dn-sh-br-br-se, var(--_ctm-dn-sh-br-br-se))
696
+ )
697
+ );
698
+ border-width: var(
699
+ --_sf-hr-br-wh,
700
+ var(
701
+ --_ctm-mob-dn-sh-br-br-wh,
702
+ var(--_ctm-tab-dn-sh-br-br-wh, var(--_ctm-dn-sh-br-br-wh))
703
+ )
704
+ );
705
+ // border-radius: 6px;
706
+ border-radius: prepareMediaVariable(--_ctm-dn-sh-br-br-rs);
707
+ width: 100%;
708
+
709
+ button {
710
+ display: flex;
711
+ svg {
712
+ width: 18px;
713
+ height: 18px;
714
+ }
715
+ }
716
+ input[type="text"] {
717
+ padding-left: 6px;
718
+ }
719
+ }
720
+ }
721
+
722
+ ul {
723
+ margin-top: 10px;
724
+ transition: all 400ms ease-in-out;
725
+ &.show__panel {
726
+ animation: slideUp 0.4s ease-in-out;
727
+ }
728
+
729
+ &.hide__panel {
730
+ animation: slideDown 0.4s ease-in-out;
731
+ pointer-events: none;
732
+ }
733
+ &:not(:last-child) {
734
+ border-bottom: 1px solid var(--_gray-300);
735
+ }
736
+ li {
737
+ display: flex;
738
+ align-items: center;
739
+ justify-content: space-between;
740
+ padding-block: 6px;
741
+ font-size: 14px;
742
+
743
+ .filter-li-inner {
744
+ display: flex;
745
+ align-items: center;
746
+ justify-content: space-between;
747
+ width: 100%;
748
+ gap: 8px;
749
+ }
750
+
751
+ .filter-indicator {
752
+ width: 16px;
753
+ height: 16px;
754
+ flex-shrink: 0;
755
+ }
756
+
757
+ .filter-indicator img {
758
+ width: 16px;
759
+ height: 16px;
760
+ border-radius: 50%;
761
+ object-fit: cover;
762
+ border: 1px solid var(--_thm-cs-be-se-3);
763
+ }
764
+
765
+ .color-circle {
766
+ width: 16px;
767
+ height: 16px;
768
+ border-radius: 50%;
769
+ border: 1px solid var(--_thm-cs-be-se-3);
770
+ }
771
+
772
+ a {
773
+ // padding-block: 6px;
774
+ padding-left: 10px;
775
+ display: block;
776
+ text-decoration: none;
777
+ color: var(--_gray-700);
778
+ font-size: var(--_fs-14);
779
+ font-weight: var(--_fw-600);
780
+ border-radius: var(--_br-6);
781
+ width: 100%;
782
+ &:hover {
783
+ background-color: var(--_primary-25);
784
+ color: var(--_primary-700);
785
+ }
786
+ }
787
+ .more__button {
788
+ // font-size: 12px;
789
+ // text-transform: uppercase;
790
+ // font-weight: var(--_fw-500);
791
+ // color: var(--_primary-400);
792
+ background-color: var(
793
+ --_ctm-mob-dn-me-bn-dt-se-bd-cr,
794
+ var(--_ctm-tab-dn-me-bn-dt-se-bd-cr, var(--_ctm-dn-me-bn-dt-se-bd-cr))
795
+ );
796
+ border-radius: var(
797
+ --_ctm-mob-dn-me-bn-dt-se-br-rs,
798
+ var(--_ctm-tab-dn-me-bn-dt-se-br-rs, var(--_ctm-dn-me-bn-dt-se-br-rs))
799
+ );
800
+ box-shadow: var(
801
+ --_show-shadow-clear-all,
802
+ var(
803
+ --_ctm-mob-dn-me-bn-dt-se-sw-ae,
804
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-ae, var(--_ctm-dn-me-bn-dt-se-sw-ae))
805
+ )
806
+ var(
807
+ --_ctm-mob-dn-me-bn-dt-se-sw-br,
808
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-br, var(--_ctm-dn-me-bn-dt-se-sw-br))
809
+ )
810
+ var(
811
+ --_ctm-mob-dn-me-bn-dt-se-sw-sd,
812
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-sd, var(--_ctm-dn-me-bn-dt-se-sw-sd))
813
+ )
814
+ var(
815
+ --_ctm-mob-dn-me-bn-dt-se-sw-cr,
816
+ var(--_ctm-tab-dn-me-bn-dt-se-sw-cr, var(--_ctm-dn-me-bn-dt-se-sw-cr))
817
+ )
818
+ );
819
+
820
+ color: var(
821
+ --_ctm-mob-dn-me-bn-dt-se-cr,
822
+ var(--_ctm-tab-dn-me-bn-dt-se-cr, var(--_ctm-dn-me-bn-dt-se-cr))
823
+ );
824
+ font-family: var(
825
+ --_sf-hr-ff,
826
+ var(
827
+ --_ctm-mob-dn-me-bn-dt-se-ft-fy,
828
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-fy, var(--_ctm-dn-me-bn-dt-se-ft-fy))
829
+ )
830
+ );
831
+ font-size: var(
832
+ --_ctm-mob-dn-me-bn-dt-se-ft-se,
833
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-se, var(--_ctm-dn-me-bn-dt-se-ft-se))
834
+ );
835
+ font-weight: var(
836
+ --_ctm-mob-dn-me-bn-dt-se-ft-wt,
837
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-wt, var(--_ctm-dn-me-bn-dt-se-ft-wt))
838
+ );
839
+ font-style: var(
840
+ --_ctm-mob-dn-me-bn-dt-se-ft-se-ic,
841
+ var(--_ctm-tab-dn-me-bn-dt-se-ft-se-ic, var(--_ctm-dn-me-bn-dt-se-ft-se-ic))
842
+ );
843
+ text-align: var(
844
+ --_ctm-mob-dn-me-bn-dt-se-tt-an,
845
+ var(--_ctm-tab-dn-me-bn-dt-se-tt-an, var(--_ctm-dn-me-bn-dt-se-tt-an))
846
+ );
847
+ letter-spacing: var(
848
+ --_ctm-mob-dn-me-bn-dt-se-lr-sg,
849
+ var(--_ctm-tab-dn-me-bn-dt-se-lr-sg, var(--_ctm-dn-me-bn-dt-se-lr-sg))
850
+ );
851
+ line-height: var(
852
+ --_ctm-mob-dn-me-bn-dt-se-le-ht,
853
+ var(--_ctm-tab-dn-me-bn-dt-se-le-ht, var(--_ctm-dn-me-bn-dt-se-le-ht))
854
+ );
855
+ text-decoration: var(
856
+ --_ctm-mob-dn-me-bn-dt-se-ue,
857
+ var(--_ctm-tab-dn-me-bn-dt-se-ue, var(--_ctm-dn-me-bn-dt-se-ue))
858
+ );
859
+ &[data-show-more-button-border="true"] {
860
+ border-color: var(
861
+ --_sf-hr-br-cr,
862
+ var(
863
+ --_ctm-mob-dn-me-bn-dt-se-br-cr,
864
+ var(--_ctm-tab-dn-me-bn-dt-se-br-cr, var(--_ctm-dn-me-bn-dt-se-br-cr))
865
+ )
866
+ );
867
+ border-style: var(
868
+ --_sf-hr-br-st,
869
+ var(
870
+ --_ctm-mob-dn-me-bn-dt-se-br-se,
871
+ var(--_ctm-tab-dn-me-bn-dt-se-br-se, var(--_ctm-dn-me-bn-dt-se-br-se))
872
+ )
873
+ );
874
+ border-width: var(
875
+ --_sf-hr-br-wh,
876
+ var(
877
+ --_ctm-mob-dn-me-bn-dt-se-br-wh,
878
+ var(--_ctm-tab-dn-me-bn-dt-se-br-wh, var(--_ctm-dn-me-bn-dt-se-br-wh))
879
+ )
880
+ );
881
+ }
882
+ // &:hover {
883
+ // color: var(--_primary-700);
884
+ // }
885
+ }
886
+ &:has(.no__results__found) {
887
+ .no__results__found {
888
+ padding: 12px;
889
+ color: var(--_gray-600);
890
+ display: flex;
891
+ justify-content: center;
892
+ background: var(--_gray-100);
893
+ padding: 12px;
894
+ border-radius: 4px;
895
+ font-weight: 600;
896
+ color: var(--_gray-600);
897
+ }
898
+ }
899
+ }
900
+ }
901
+ }
902
+ }
903
+
904
+ .filter__inline {
905
+ // margin: 30px;
906
+ display: flex;
907
+ flex-direction: column;
908
+ // justify-content: space-between;
909
+ // align-items: center;
910
+ flex-wrap: wrap;
911
+ gap: 20px;
912
+ .filter__Header {
913
+ display: flex;
914
+ justify-content: flex-start;
915
+ gap: 12px;
916
+ h2 {
917
+ font-size: var(--_fs-14);
918
+ font-weight: var(--_fw-600);
919
+ text-transform: uppercase;
920
+ }
921
+ h3 {
922
+ // font-size: 14px;
923
+ // text-transform: uppercase;
924
+
925
+ color: var(
926
+ --_ctm-mob-dn-fs-wt-cr,
927
+ var(--_ctm-tab-dn-fs-wt-cr, var(--_ctm-dn-fs-wt-cr))
928
+ );
929
+ font-family: var(
930
+ --_sf-hr-ff,
931
+ var(
932
+ --_ctm-mob-dn-fs-wt-ft-fy,
933
+ var(--_ctm-tab-dn-fs-wt-ft-fy, var(--_ctm-dn-fs-wt-ft-fy))
934
+ )
935
+ );
936
+ font-size: var(
937
+ --_ctm-mob-dn-fs-wt-ft-se,
938
+ var(--_ctm-tab-dn-fs-wt-ft-se, var(--_ctm-dn-fs-wt-ft-se))
939
+ );
940
+ font-weight: var(
941
+ --_ctm-mob-dn-fs-wt-ft-wt,
942
+ var(--_ctm-tab-dn-fs-wt-ft-wt, var(--_ctm-dn-fs-wt-ft-wt))
943
+ );
944
+ font-style: var(
945
+ --_ctm-mob-dn-fs-wt-ft-se-ic,
946
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic, var(--_ctm-dn-fs-wt-ft-se-ic))
947
+ );
948
+ text-align: var(
949
+ --_ctm-mob-dn-fs-wt-tt-an,
950
+ var(--_ctm-tab-dn-fs-wt-tt-an, var(--_ctm-dn-fs-wt-tt-an))
951
+ );
952
+ letter-spacing: var(
953
+ --_ctm-mob-dn-fs-wt-lr-sg,
954
+ var(--_ctm-tab-dn-fs-wt-lr-sg, var(--_ctm-dn-fs-wt-lr-sg))
955
+ );
956
+ line-height: var(
957
+ --_ctm-mob-dn-fs-wt-le-ht,
958
+ var(--_ctm-tab-dn-fs-wt-le-ht, var(--_ctm-dn-fs-wt-le-ht))
959
+ );
960
+ text-decoration: var(
961
+ --_ctm-mob-dn-fs-wt-ue,
962
+ var(--_ctm-tab-dn-fs-wt-ue, var(--_ctm-dn-fs-wt-ue))
963
+ );
964
+ }
965
+
966
+ .reset__btn {
967
+ // font-size: 12px;
968
+ // text-transform: uppercase;
969
+ // font-weight: var(--_fw-500);
970
+ // color: var(--_primary-400);
971
+ background-color: var(
972
+ --_ctm-mob-dn-cr-al-tt-dt-se-bd-cr,
973
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-bd-cr, var(--_ctm-dn-cr-al-tt-dt-se-bd-cr))
974
+ );
975
+ border-radius: var(
976
+ --_ctm-mob-dn-cr-al-tt-dt-se-br-rs,
977
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-br-rs, var(--_ctm-dn-cr-al-tt-dt-se-br-rs))
978
+ );
979
+ padding: var(
980
+ --_ctm-mob-dn-cr-al-tt-dt-se-pg,
981
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-pg, var(--_ctm-dn-cr-al-tt-dt-se-pg))
982
+ );
983
+ box-shadow: var(
984
+ --_show-shadow-clear-all,
985
+ var(
986
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-ae,
987
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-ae, var(--_ctm-dn-cr-al-tt-dt-se-sw-ae))
988
+ )
989
+ var(
990
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-br,
991
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-br, var(--_ctm-dn-cr-al-tt-dt-se-sw-br))
992
+ )
993
+ var(
994
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-sd,
995
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-sd, var(--_ctm-dn-cr-al-tt-dt-se-sw-sd))
996
+ )
997
+ var(
998
+ --_ctm-mob-dn-cr-al-tt-dt-se-sw-cr,
999
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-sw-cr, var(--_ctm-dn-cr-al-tt-dt-se-sw-cr))
1000
+ )
1001
+ );
1002
+
1003
+ color: var(
1004
+ --_ctm-mob-dn-cr-al-tt-dt-se-cr,
1005
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-cr, var(--_ctm-dn-cr-al-tt-dt-se-cr))
1006
+ );
1007
+ font-family: var(
1008
+ --_sf-hr-ff,
1009
+ var(
1010
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-fy,
1011
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-fy, var(--_ctm-dn-cr-al-tt-dt-se-ft-fy))
1012
+ )
1013
+ );
1014
+ font-size: var(
1015
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se,
1016
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se, var(--_ctm-dn-cr-al-tt-dt-se-ft-se))
1017
+ );
1018
+ font-weight: var(
1019
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-wt,
1020
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-wt, var(--_ctm-dn-cr-al-tt-dt-se-ft-wt))
1021
+ );
1022
+ font-style: var(
1023
+ --_ctm-mob-dn-cr-al-tt-dt-se-ft-se-ic,
1024
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ft-se-ic, var(--_ctm-dn-cr-al-tt-dt-se-ft-se-ic))
1025
+ );
1026
+ text-align: var(
1027
+ --_ctm-mob-dn-cr-al-tt-dt-se-tt-an,
1028
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-tt-an, var(--_ctm-dn-cr-al-tt-dt-se-tt-an))
1029
+ );
1030
+ letter-spacing: var(
1031
+ --_ctm-mob-dn-cr-al-tt-dt-se-lr-sg,
1032
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-lr-sg, var(--_ctm-dn-cr-al-tt-dt-se-lr-sg))
1033
+ );
1034
+ line-height: var(
1035
+ --_ctm-mob-dn-cr-al-tt-dt-se-le-ht,
1036
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-le-ht, var(--_ctm-dn-cr-al-tt-dt-se-le-ht))
1037
+ );
1038
+ text-decoration: var(
1039
+ --_ctm-mob-dn-cr-al-tt-dt-se-ue,
1040
+ var(--_ctm-tab-dn-cr-al-tt-dt-se-ue, var(--_ctm-dn-cr-al-tt-dt-se-ue))
1041
+ );
1042
+ // &:hover {
1043
+ // color: var(--_primary-700);
1044
+ // }
1045
+ }
1046
+ }
1047
+ p {
1048
+ color: var(
1049
+ --_ctm-mob-dn-fs-wt-cr-dc,
1050
+ var(--_ctm-tab-dn-fs-wt-cr-dc, var(--_ctm-dn-fs-wt-cr-dc))
1051
+ );
1052
+ font-family: var(
1053
+ --_sf-hr-ff,
1054
+ var(
1055
+ --_ctm-mob-dn-fs-wt-ft-fy-dc,
1056
+ var(--_ctm-tab-dn-fs-wt-ft-fy-dc, var(--_ctm-dn-fs-wt-ft-fy-dc))
1057
+ )
1058
+ );
1059
+ font-size: var(
1060
+ --_ctm-mob-dn-fs-wt-ft-se-dc,
1061
+ var(--_ctm-tab-dn-fs-wt-ft-se-dc, var(--_ctm-dn-fs-wt-ft-se-dc))
1062
+ );
1063
+ font-weight: var(
1064
+ --_ctm-mob-dn-fs-wt-ft-wt-dc,
1065
+ var(--_ctm-tab-dn-fs-wt-ft-wt-dc, var(--_ctm-dn-fs-wt-ft-wt-dc))
1066
+ );
1067
+ font-style: var(
1068
+ --_ctm-mob-dn-fs-wt-ft-se-ic-dc,
1069
+ var(--_ctm-tab-dn-fs-wt-ft-se-ic-dc, var(--_ctm-dn-fs-wt-ft-se-ic-dc))
1070
+ );
1071
+ text-align: var(
1072
+ --_ctm-mob-dn-fs-wt-tt-an-dc,
1073
+ var(--_ctm-tab-dn-fs-wt-tt-an-dc, var(--_ctm-dn-fs-wt-tt-an-dc))
1074
+ );
1075
+ letter-spacing: var(
1076
+ --_ctm-mob-dn-fs-wt-lr-sg-dc,
1077
+ var(--_ctm-tab-dn-fs-wt-lr-sg-dc, var(--_ctm-dn-fs-wt-lr-sg-dc))
1078
+ );
1079
+ line-height: var(
1080
+ --_ctm-mob-dn-fs-wt-le-ht-dc,
1081
+ var(--_ctm-tab-dn-fs-wt-le-ht-dc, var(--_ctm-dn-fs-wt-le-ht-dc))
1082
+ );
1083
+ text-decoration: var(
1084
+ --_ctm-mob-dn-fs-wt-ue-dc,
1085
+ var(--_ctm-tab-dn-fs-wt-ue-dc, var(--_ctm-dn-fs-wt-ue-dc))
1086
+ );
1087
+ }
1088
+ .flt__dropdowns {
1089
+ display: flex;
1090
+ // flex-direction: column;
1091
+ // justify-content: space-between;
1092
+ align-items: center;
1093
+ flex-wrap: wrap;
1094
+ gap: 20px;
1095
+ .filter__option__dropdown {
1096
+ display: flex;
1097
+ gap: 20px;
1098
+ cursor: pointer;
1099
+ border: 1px solid var(--_base-white);
1100
+ padding: 6px 12px;
1101
+ border-radius: 6px;
1102
+ width: fit-content;
1103
+ &:hover {
1104
+ border: 1px solid var(--_gray-200);
1105
+ background-color: var(--_gray-50);
1106
+ }
1107
+ }
1108
+ }
1109
+
1110
+ .flt__options {
1111
+ display: flex;
1112
+ align-items: center;
1113
+ flex-wrap: wrap;
1114
+ gap: 20px;
1115
+ }
1116
+ .selected__items {
1117
+ display: flex;
1118
+ flex-wrap: wrap;
1119
+ gap: 10px;
1120
+ align-items: center;
1121
+ .selected__category {
1122
+ display: flex;
1123
+ align-items: center;
1124
+ gap: 10px;
1125
+ flex-wrap: wrap;
1126
+ .selected_item {
1127
+ display: flex;
1128
+ gap: 8px;
1129
+ border: 1px solid var(--_thm-cs-be-se-3);
1130
+ border-radius: 30px;
1131
+ padding: 6px 12px;
1132
+ align-items: center;
1133
+
1134
+ color: var(
1135
+ --_sf-hr-fc,
1136
+ var(
1137
+ --_ctm-mob-dn-sd-im-dt-se-cr,
1138
+ var(--_ctm-tab-dn-sd-im-dt-se-cr, var(--_ctm-dn-sd-im-dt-se-cr))
1139
+ )
1140
+ );
1141
+ font-family: var(
1142
+ --_sf-hr-ff,
1143
+ var(
1144
+ --_ctm-mob-dn-sd-im-dt-se-ft-fy,
1145
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-fy, var(--_ctm-dn-sd-im-dt-se-ft-fy))
1146
+ )
1147
+ );
1148
+ font-size: var(
1149
+ --_sf-hr-fs,
1150
+ var(
1151
+ --_ctm-mob-dn-sd-im-dt-se-ft-se,
1152
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se, var(--_ctm-dn-sd-im-dt-se-ft-se))
1153
+ )
1154
+ );
1155
+ font-weight: var(
1156
+ --_sf-hr-fw,
1157
+ var(
1158
+ --_ctm-mob-dn-sd-im-dt-se-ft-wt,
1159
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-wt, var(--_ctm-dn-sd-im-dt-se-ft-wt))
1160
+ )
1161
+ );
1162
+ font-style: var(
1163
+ --_sf-hr-ft,
1164
+ var(
1165
+ --_ctm-mob-dn-sd-im-dt-se-ft-se-ic,
1166
+ var(--_ctm-tab-dn-sd-im-dt-se-ft-se-ic, var(--_ctm-dn-sd-im-dt-se-ft-se-ic))
1167
+ )
1168
+ );
1169
+ text-align: var(
1170
+ --_sf-hr-ta,
1171
+ var(
1172
+ --_ctm-mob-dn-sd-im-dt-se-tt-an,
1173
+ var(--_ctm-tab-dn-sd-im-dt-se-tt-an, var(--_ctm-dn-sd-im-dt-se-tt-an))
1174
+ )
1175
+ );
1176
+ letter-spacing: var(
1177
+ --_sf-hr-ls,
1178
+ var(
1179
+ --_ctm-mob-dn-sd-im-dt-se-lr-sg,
1180
+ var(--_ctm-tab-dn-sd-im-dt-se-lr-sg, var(--_ctm-dn-sd-im-dt-se-lr-sg))
1181
+ )
1182
+ );
1183
+ line-height: var(
1184
+ --_sf-hr-lh,
1185
+ var(
1186
+ --_ctm-mob-dn-sd-im-dt-se-le-ht,
1187
+ var(--_ctm-tab-dn-sd-im-dt-se-le-ht, var(--_ctm-dn-sd-im-dt-se-le-ht))
1188
+ )
1189
+ );
1190
+ text-decoration: var(
1191
+ --_sf-hr-tt-dn,
1192
+ var(
1193
+ --_ctm-mob-dn-sd-im-dt-se-ue,
1194
+ var(--_ctm-tab-dn-sd-im-dt-se-ue, var(--_ctm-dn-sd-im-dt-se-ue))
1195
+ )
1196
+ );
1197
+ &:hover {
1198
+ // border: 1px solid var(--_gray-300);
1199
+ // background-color: var(--_gray-50);
1200
+ // cursor: pointer;
1201
+ --_sf-hr-bd-cr: var(
1202
+ --_ctm-mob-dn-sd-im-hr-se-bd-cr,
1203
+ var(--_ctm-tab-dn-sd-im-hr-se-bd-cr, var(--_ctm-dn-sd-im-hr-se-bd-cr))
1204
+ );
1205
+ --_sf-hr-br-cr: var(
1206
+ --_ctm-mob-dn-sd-im-hr-se-br-cr,
1207
+ var(--_ctm-tab-dn-sd-im-hr-se-br-cr, var(--_ctm-dn-sd-im-hr-se-br-cr))
1208
+ );
1209
+ --_sf-hr-br-st: var(
1210
+ --_ctm-mob-dn-sd-im-hr-se-br-se,
1211
+ var(--_ctm-tab-dn-sd-im-hr-se-br-se, var(--_ctm-dn-sd-im-hr-se-br-se))
1212
+ );
1213
+ --_sf-hr-br-wh: var(
1214
+ --_ctm-mob-dn-sd-im-hr-se-br-wh,
1215
+ var(--_ctm-tab-dn-sd-im-hr-se-br-wh, var(--_ctm-dn-sd-im-hr-se-br-wh))
1216
+ );
1217
+ --_sf-hr-br-br: var(
1218
+ --_ctm-mob-dn-sd-im-hr-se-br-rs,
1219
+ var(--_ctm-tab-dn-sd-im-hr-se-br-rs, var(--_ctm-dn-sd-im-hr-se-br-rs))
1220
+ );
1221
+ --_sf-hr-sd-im-pg: var(
1222
+ --_ctm-mob-dn-sd-im-hr-se-pg,
1223
+ var(--_ctm-tab-dn-sd-im-hr-se-pg, var(--_ctm-dn-sd-im-hr-se-pg))
1224
+ );
1225
+ --_sf-hr-bx-sw: var(
1226
+ --_ctm-mob-dn-sd-im-hr-se-sw-ae,
1227
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-ae, var(--_ctm-dn-sd-im-hr-se-sw-ae))
1228
+ )
1229
+ var(
1230
+ --_ctm-mob-dn-sd-im-hr-se-sw-br,
1231
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-br, var(--_ctm-dn-sd-im-hr-se-sw-br))
1232
+ )
1233
+ var(
1234
+ --_ctm-mob-dn-sd-im-hr-se-sw-sd,
1235
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-sd, var(--_ctm-dn-sd-im-hr-se-sw-sd))
1236
+ )
1237
+ var(
1238
+ --_ctm-mob-dn-sd-im-hr-se-sw-cr,
1239
+ var(--_ctm-tab-dn-sd-im-hr-se-sw-cr, var(--_ctm-dn-sd-im-hr-se-sw-cr))
1240
+ );
1241
+
1242
+ --_sf-hr-fc: var(
1243
+ --_ctm-mob-dn-sd-im-hr-se-cr,
1244
+ var(--_ctm-tab-dn-sd-im-hr-se-cr, var(--_ctm-dn-sd-im-hr-se-cr))
1245
+ );
1246
+ --_sf-hr-ff: var(
1247
+ --_ctm-mob-dn-sd-im-hr-se-ft-fy,
1248
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-fy, var(--_ctm-dn-sd-im-hr-se-ft-fy))
1249
+ );
1250
+ --_sf-hr-fs: var(
1251
+ --_ctm-mob-dn-sd-im-hr-se-ft-se,
1252
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se, var(--_ctm-dn-sd-im-hr-se-ft-se))
1253
+ );
1254
+ --_sf-hr-fw: var(
1255
+ --_ctm-mob-dn-sd-im-hr-se-ft-wt,
1256
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-wt, var(--_ctm-dn-sd-im-hr-se-ft-wt))
1257
+ );
1258
+ --_sf-hr-ft: var(
1259
+ --_ctm-mob-dn-sd-im-hr-se-ft-se-ic,
1260
+ var(--_ctm-tab-dn-sd-im-hr-se-ft-se-ic, var(--_ctm-dn-sd-im-hr-se-ft-se-ic))
1261
+ );
1262
+ --_sf-hr-ta: var(
1263
+ --_ctm-mob-dn-sd-im-hr-se-tt-an,
1264
+ var(--_ctm-tab-dn-sd-im-hr-se-tt-an, var(--_ctm-dn-sd-im-hr-se-tt-an))
1265
+ );
1266
+ --_sf-hr-ls: var(
1267
+ --_ctm-mob-dn-sd-im-hr-se-lr-sg,
1268
+ var(--_ctm-tab-dn-sd-im-hr-se-lr-sg, var(--_ctm-dn-sd-im-hr-se-lr-sg))
1269
+ );
1270
+ --_sf-hr-lh: var(
1271
+ --_ctm-mob-dn-sd-im-hr-se-le-ht,
1272
+ var(--_ctm-tab-dn-sd-im-hr-se-le-ht, var(--_ctm-dn-sd-im-hr-se-le-ht))
1273
+ );
1274
+
1275
+ --_sf-hr-ic-wt: var(
1276
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
1277
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1278
+ );
1279
+ --_sf-hr-ic-ht: var(
1280
+ --_ctm-mob-dn-sd-im-hr-se-in-se,
1281
+ var(--_ctm-tab-dn-sd-im-hr-se-in-se, var(--_ctm-dn-sd-im-hr-se-in-se))
1282
+ );
1283
+ --_sf-hr-ic-st: var(
1284
+ --_ctm-mob-dn-sd-im-hr-se-in-c1,
1285
+ var(--_ctm-tab-dn-sd-im-hr-se-in-c1, var(--_ctm-dn-sd-im-hr-se-in-c1))
1286
+ );
1287
+ --_sf-hr-tt-dn: var(
1288
+ --_ctm-mob-dn-sd-im-hr-se-ue,
1289
+ var(--_ctm-tab-dn-sd-im-hr-se-ue, var(--_ctm-dn-sd-im-hr-se-ue))
1290
+ );
1291
+
1292
+ &[data-hover-show-shadow="false"] {
1293
+ --_hover-show-shadow: none;
1294
+ }
1295
+ &[data-hover-show-icon="false"] {
1296
+ --_hover-show-icon: none;
1297
+ }
1298
+ }
1299
+ }
1300
+ }
1301
+ }
1302
+ }
1303
+
1304
+ .clear__btn {
1305
+ display: flex;
1306
+ align-items: center;
1307
+ svg {
1308
+ width: 18px;
1309
+ height: 18px;
1310
+ &:hover {
1311
+ path {
1312
+ stroke: var(--_gray-900);
1313
+ }
1314
+ }
1315
+ }
1316
+ }
1317
+ //Filter Features Ends
1318
+
1319
+ // Input checkbox Starts
1320
+ .checkbox__radio {
1321
+ display: flex;
1322
+ align-items: center;
1323
+ gap: 8px;
1324
+ position: relative;
1325
+ // margin-bottom: 12px;
1326
+ cursor: pointer;
1327
+ font-size: 14px;
1328
+ -webkit-user-select: none;
1329
+ -moz-user-select: none;
1330
+ -ms-user-select: none;
1331
+ user-select: none;
1332
+ .color-image {
1333
+ width: 15px;
1334
+ height: 15px;
1335
+ border-radius: 50%;
1336
+ border: 1px solid var(--_thm-cs-be-se-3);
1337
+ object-fit: "cover";
1338
+ display: "block";
1339
+ }
1340
+ .color {
1341
+ width: 15px;
1342
+ height: 15px;
1343
+ border: 1px solid var(--_thm-cs-be-se-3);
1344
+ border-radius: 50%;
1345
+ }
1346
+
1347
+ .option__value {
1348
+ color: var(
1349
+ --_ctm-mob-dn-on-ls-cr-dc,
1350
+ var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
1351
+ );
1352
+ font-family: var(
1353
+ --_sf-hr-ff,
1354
+ var(
1355
+ --_ctm-mob-dn-on-ls-ft-fy-dc,
1356
+ var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
1357
+ )
1358
+ );
1359
+ font-size: var(
1360
+ --_ctm-mob-dn-on-ls-ft-se-dc,
1361
+ var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
1362
+ );
1363
+ font-weight: var(
1364
+ --_ctm-mob-dn-on-ls-ft-wt-dc,
1365
+ var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
1366
+ );
1367
+ font-style: var(
1368
+ --_ctm-mob-dn-on-ls-ft-se-ic-dc,
1369
+ var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
1370
+ );
1371
+ text-align: var(
1372
+ --_ctm-mob-dn-on-ls-tt-an-dc,
1373
+ var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
1374
+ );
1375
+ letter-spacing: var(
1376
+ --_ctm-mob-dn-on-ls-lr-sg-dc,
1377
+ var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
1378
+ );
1379
+ line-height: var(
1380
+ --_ctm-mob-dn-on-ls-le-ht-dc,
1381
+ var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
1382
+ );
1383
+ text-decoration: var(
1384
+ --_ctm-mob-dn-on-ls-ue-dc,
1385
+ var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
1386
+ );
1387
+ }
1388
+ }
1389
+
1390
+ .checkbox__radio input {
1391
+ position: absolute;
1392
+ opacity: 0;
1393
+ cursor: pointer;
1394
+ height: 0;
1395
+ width: 0;
1396
+ }
1397
+
1398
+ .checkmark {
1399
+ height: 18px;
1400
+ width: 18px;
1401
+ // border: 1px solid var(--_gray-500);
1402
+ // background-color: var(--_base-white);
1403
+ display: flex;
1404
+ justify-content: center;
1405
+ align-items: center;
1406
+
1407
+ background-color: var(
1408
+ --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1409
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1410
+ );
1411
+ border-radius: var(
1412
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1413
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
1414
+ );
1415
+ transition: background-color 400ms ease-in-out;
1416
+ &[data-show-default-unchecked-shadow="true"] {
1417
+ box-shadow: var(
1418
+ --_show-shadow-clear-all,
1419
+ var(
1420
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1421
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
1422
+ )
1423
+ var(
1424
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1425
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
1426
+ )
1427
+ var(
1428
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1429
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
1430
+ )
1431
+ var(
1432
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1433
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
1434
+ )
1435
+ );
1436
+ }
1437
+ &[data-show-default-unchecked-border="true"] {
1438
+ border-color: var(
1439
+ --_sf-hr-br-cr,
1440
+ var(
1441
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1442
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
1443
+ )
1444
+ );
1445
+ border-style: var(
1446
+ --_sf-hr-br-st,
1447
+ var(
1448
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1449
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
1450
+ )
1451
+ );
1452
+ border-width: var(
1453
+ --_sf-hr-br-wh,
1454
+ var(
1455
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1456
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
1457
+ )
1458
+ );
1459
+ }
1460
+ // &:hover {
1461
+ // &[data-show-hover-unchecked-border="true"] {
1462
+ // border-color: var(
1463
+ // --_sf-hr-br-cr,
1464
+ // var(
1465
+ // --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
1466
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
1467
+ // )
1468
+ // );
1469
+ // border-style: var(
1470
+ // --_sf-hr-br-st,
1471
+ // var(
1472
+ // --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
1473
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
1474
+ // )
1475
+ // );
1476
+ // border-width: var(
1477
+ // --_sf-hr-br-wh,
1478
+ // var(
1479
+ // --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
1480
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
1481
+ // )
1482
+ // );
1483
+ // }
1484
+ // &[data-show-hover-unchecked-shadow="true"] {
1485
+ // box-shadow: var(
1486
+ // --_show-shadow-clear-all,
1487
+ // var(
1488
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1489
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1490
+ // )
1491
+ // var(
1492
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1493
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1494
+ // )
1495
+ // var(
1496
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1497
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1498
+ // )
1499
+ // var(
1500
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1501
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1502
+ // )
1503
+ // );
1504
+ // }
1505
+ // background-color: var(
1506
+ // --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
1507
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
1508
+ // );
1509
+ // border-radius: var(
1510
+ // --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
1511
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
1512
+ // );
1513
+ // box-shadow: var(
1514
+ // --_show-shadow-clear-all,
1515
+ // var(
1516
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1517
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1518
+ // )
1519
+ // var(
1520
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1521
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1522
+ // )
1523
+ // var(
1524
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1525
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1526
+ // )
1527
+ // var(
1528
+ // --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1529
+ // var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1530
+ // )
1531
+ // );
1532
+ // }
1533
+
1534
+ button {
1535
+ display: none;
1536
+ }
1537
+ }
1538
+
1539
+ .checkbox__radio input:checked ~ .checkmark {
1540
+ background-color: var(
1541
+ --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
1542
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
1543
+ );
1544
+ border-radius: var(
1545
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-rs,
1546
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-rs, var(--_ctm-dn-cx-cd-se-dt-se-br-rs))
1547
+ );
1548
+ transition: background-color 400ms ease-in-out;
1549
+ &[data-show-default-checked-shadow="true"] {
1550
+ box-shadow: var(
1551
+ --_show-shadow-clear-all,
1552
+ var(
1553
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1554
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
1555
+ )
1556
+ var(
1557
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1558
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
1559
+ )
1560
+ var(
1561
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1562
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
1563
+ )
1564
+ var(
1565
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1566
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
1567
+ )
1568
+ );
1569
+ }
1570
+
1571
+ &[data-show-default-checked-border="true"] {
1572
+ border-color: var(
1573
+ --_sf-hr-br-cr,
1574
+ var(
1575
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1576
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
1577
+ )
1578
+ );
1579
+ border-style: var(
1580
+ --_sf-hr-br-st,
1581
+ var(
1582
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1583
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
1584
+ )
1585
+ );
1586
+ border-width: var(
1587
+ --_sf-hr-br-wh,
1588
+ var(
1589
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1590
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
1591
+ )
1592
+ );
1593
+ }
1594
+
1595
+ &:hover {
1596
+ background-color: var(
1597
+ --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
1598
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
1599
+ );
1600
+ border-radius: var(
1601
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-rs,
1602
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-rs, var(--_ctm-dn-cx-cd-se-hr-se-br-rs))
1603
+ );
1604
+ &[data-show-hover-checked-shadow="true"] {
1605
+ box-shadow: var(
1606
+ --_show-shadow-clear-all,
1607
+ var(
1608
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1609
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
1610
+ )
1611
+ var(
1612
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1613
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
1614
+ )
1615
+ var(
1616
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1617
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
1618
+ )
1619
+ var(
1620
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1621
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
1622
+ )
1623
+ );
1624
+ }
1625
+
1626
+ &[data-show-hover-checked-border="true"] {
1627
+ border-color: var(
1628
+ --_sf-hr-br-cr,
1629
+ var(
1630
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1631
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
1632
+ )
1633
+ );
1634
+ border-style: var(
1635
+ --_sf-hr-br-st,
1636
+ var(
1637
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1638
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
1639
+ )
1640
+ );
1641
+ border-width: var(
1642
+ --_sf-hr-br-wh,
1643
+ var(
1644
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1645
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
1646
+ )
1647
+ );
1648
+ }
1649
+ button {
1650
+ display: flex;
1651
+ .default-icon {
1652
+ display: none;
1653
+ }
1654
+
1655
+ .hover-icon {
1656
+ display: flex;
1657
+ align-items: center;
1658
+ justify-content: center;
1659
+ }
1660
+ svg {
1661
+ // width: 13px;
1662
+ // height: 13px;
1663
+ width: var(
1664
+ --_ctm-mob-dn-cx-cd-se-hr-se-se,
1665
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1666
+ );
1667
+ height: var(
1668
+ --_ctm-mob-dn-cx-cd-se-hr-se-se,
1669
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
1670
+ );
1671
+ path {
1672
+ // stroke: var(--_base-white);
1673
+ stroke: var(
1674
+ --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
1675
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
1676
+ );
1677
+ }
1678
+ }
1679
+ }
1680
+ }
1681
+
1682
+ // background-color: var(--_primary-400);
1683
+ // border: 1px solid var(--_primary-400);
1684
+ // border-radius: 50%;
1685
+ display: flex;
1686
+ justify-content: center;
1687
+ align-items: center;
1688
+
1689
+ button {
1690
+ display: flex;
1691
+ .default-icon {
1692
+ display: flex;
1693
+ justify-content: center;
1694
+ align-items: center;
1695
+ }
1696
+
1697
+ .hover-icon {
1698
+ display: none;
1699
+ }
1700
+ svg {
1701
+ // width: 13px;
1702
+ // height: 13px;
1703
+ width: var(
1704
+ --_ctm-mob-dn-cx-cd-se-dt-se-se,
1705
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
1706
+ );
1707
+ height: var(
1708
+ --_ctm-mob-dn-cx-cd-se-dt-se-se,
1709
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-se, var(--_ctm-dn-cx-cd-se-dt-se-se))
1710
+ );
1711
+ path {
1712
+ // stroke: var(--_base-white);
1713
+ stroke: var(
1714
+ --_ctm-mob-dn-cx-cd-se-dt-se-in-c1,
1715
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-in-c1, var(--_ctm-dn-cx-cd-se-dt-se-in-c1))
1716
+ );
1717
+ }
1718
+ }
1719
+ }
1720
+ }
1721
+
1722
+ .checkmark:after {
1723
+ content: "";
1724
+ position: absolute;
1725
+ display: none;
1726
+ }
1727
+
1728
+ .checkbox__radio input:checked ~ .checkmark:after {
1729
+ display: block;
1730
+ }
1731
+
1732
+ .checkbox__radio .checkmark:after {
1733
+ left: 7px;
1734
+ top: 2px;
1735
+ }
1736
+
1737
+ // Input checkbox Ends
1738
+
1739
+ // Input radio begins
1740
+
1741
+ .filter__checkbox__radio {
1742
+ display: flex;
1743
+ align-items: center;
1744
+ cursor: pointer;
1745
+ position: relative;
1746
+
1747
+ input {
1748
+ position: absolute;
1749
+ opacity: 0;
1750
+ cursor: pointer;
1751
+ height: 0;
1752
+ width: 0;
1753
+ }
1754
+
1755
+ .filter__checkmark {
1756
+ display: inline-block;
1757
+ height: 18px;
1758
+ width: 18px;
1759
+ // border: 2px solid #ccc;
1760
+ // background-color: #fff;
1761
+ position: relative;
1762
+ transition:
1763
+ border-color 0.2s ease,
1764
+ background-color 0.2s ease;
1765
+ // background-color: var(
1766
+ // --_ctm-mob-dn-cx-ud-se-dt-se-bd-cr,
1767
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-bd-cr, var(--_ctm-dn-cx-ud-se-dt-se-bd-cr))
1768
+ // );
1769
+ border-radius: var(
1770
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-rs,
1771
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-rs, var(--_ctm-dn-cx-ud-se-dt-se-br-rs))
1772
+ );
1773
+ &[data-show-default-unchecked-shadow="true"] {
1774
+ box-shadow: var(
1775
+ --_show-shadow-clear-all,
1776
+ var(
1777
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-ae,
1778
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-ae, var(--_ctm-dn-cx-ud-se-dt-se-sw-ae))
1779
+ )
1780
+ var(
1781
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-br,
1782
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-br, var(--_ctm-dn-cx-ud-se-dt-se-sw-br))
1783
+ )
1784
+ var(
1785
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-sd,
1786
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-sd, var(--_ctm-dn-cx-ud-se-dt-se-sw-sd))
1787
+ )
1788
+ var(
1789
+ --_ctm-mob-dn-cx-ud-se-dt-se-sw-cr,
1790
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-sw-cr, var(--_ctm-dn-cx-ud-se-dt-se-sw-cr))
1791
+ )
1792
+ );
1793
+ }
1794
+ &[data-show-default-unchecked-border="true"] {
1795
+ border-color: var(
1796
+ --_sf-hr-br-cr,
1797
+ var(
1798
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
1799
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
1800
+ )
1801
+ );
1802
+ border-style: var(
1803
+ --_sf-hr-br-st,
1804
+ var(
1805
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-se,
1806
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-se, var(--_ctm-dn-cx-ud-se-dt-se-br-se))
1807
+ )
1808
+ );
1809
+ border-width: var(
1810
+ --_sf-hr-br-wh,
1811
+ var(
1812
+ --_ctm-mob-dn-cx-ud-se-dt-se-br-wh,
1813
+ var(--_ctm-tab-dn-cx-ud-se-dt-se-br-wh, var(--_ctm-dn-cx-ud-se-dt-se-br-wh))
1814
+ )
1815
+ );
1816
+ }
1817
+ &:hover {
1818
+ &[data-show-hover-unchecked-border="true"] {
1819
+ border-color: var(
1820
+ --_sf-hr-br-cr,
1821
+ var(
1822
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-cr,
1823
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-cr, var(--_ctm-dn-cx-ud-se-hr-se-br-cr))
1824
+ )
1825
+ );
1826
+ border-style: var(
1827
+ --_sf-hr-br-st,
1828
+ var(
1829
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-se,
1830
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-se, var(--_ctm-dn-cx-ud-se-hr-se-br-se))
1831
+ )
1832
+ );
1833
+ border-width: var(
1834
+ --_sf-hr-br-wh,
1835
+ var(
1836
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-wh,
1837
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-wh, var(--_ctm-dn-cx-ud-se-hr-se-br-wh))
1838
+ )
1839
+ );
1840
+ }
1841
+ &[data-show-hover-unchecked-shadow="true"] {
1842
+ box-shadow: var(
1843
+ --_show-shadow-clear-all,
1844
+ var(
1845
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1846
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1847
+ )
1848
+ var(
1849
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1850
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1851
+ )
1852
+ var(
1853
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1854
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1855
+ )
1856
+ var(
1857
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1858
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1859
+ )
1860
+ );
1861
+ }
1862
+ background-color: var(
1863
+ --_ctm-mob-dn-cx-ud-se-hr-se-bd-cr,
1864
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-bd-cr, var(--_ctm-dn-cx-ud-se-hr-se-bd-cr))
1865
+ );
1866
+ border-radius: var(
1867
+ --_ctm-mob-dn-cx-ud-se-hr-se-br-rs,
1868
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-br-rs, var(--_ctm-dn-cx-ud-se-hr-se-br-rs))
1869
+ );
1870
+ box-shadow: var(
1871
+ --_show-shadow-clear-all,
1872
+ var(
1873
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-ae,
1874
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-ae, var(--_ctm-dn-cx-ud-se-hr-se-sw-ae))
1875
+ )
1876
+ var(
1877
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-br,
1878
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-br, var(--_ctm-dn-cx-ud-se-hr-se-sw-br))
1879
+ )
1880
+ var(
1881
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-sd,
1882
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-sd, var(--_ctm-dn-cx-ud-se-hr-se-sw-sd))
1883
+ )
1884
+ var(
1885
+ --_ctm-mob-dn-cx-ud-se-hr-se-sw-cr,
1886
+ var(--_ctm-tab-dn-cx-ud-se-hr-se-sw-cr, var(--_ctm-dn-cx-ud-se-hr-se-sw-cr))
1887
+ )
1888
+ );
1889
+ }
1890
+ }
1891
+
1892
+ // Only style this way if the input is a radio
1893
+ input[type="radio"] ~ .filter__checkmark {
1894
+ border-radius: 50%;
1895
+ }
1896
+
1897
+ input[type="radio"]:checked ~ .filter__checkmark {
1898
+ // border-color: #007bff;
1899
+ &[data-show-default-checked-shadow="true"] {
1900
+ box-shadow: var(
1901
+ --_show-shadow-clear-all,
1902
+ var(
1903
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-ae,
1904
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-ae, var(--_ctm-dn-cx-cd-se-dt-se-sw-ae))
1905
+ )
1906
+ var(
1907
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-br,
1908
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-br, var(--_ctm-dn-cx-cd-se-dt-se-sw-br))
1909
+ )
1910
+ var(
1911
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-sd,
1912
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-sd, var(--_ctm-dn-cx-cd-se-dt-se-sw-sd))
1913
+ )
1914
+ var(
1915
+ --_ctm-mob-dn-cx-cd-se-dt-se-sw-cr,
1916
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-sw-cr, var(--_ctm-dn-cx-cd-se-dt-se-sw-cr))
1917
+ )
1918
+ );
1919
+ }
1920
+
1921
+ &[data-show-default-checked-border="true"] {
1922
+ border-color: var(
1923
+ --_sf-hr-br-cr,
1924
+ var(
1925
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-cr,
1926
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-cr, var(--_ctm-dn-cx-cd-se-dt-se-br-cr))
1927
+ )
1928
+ );
1929
+ border-style: var(
1930
+ --_sf-hr-br-st,
1931
+ var(
1932
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-se,
1933
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-se, var(--_ctm-dn-cx-cd-se-dt-se-br-se))
1934
+ )
1935
+ );
1936
+ border-width: var(
1937
+ --_sf-hr-br-wh,
1938
+ var(
1939
+ --_ctm-mob-dn-cx-cd-se-dt-se-br-wh,
1940
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-br-wh, var(--_ctm-dn-cx-cd-se-dt-se-br-wh))
1941
+ )
1942
+ );
1943
+ }
1944
+
1945
+ &:hover {
1946
+ &[data-show-hover-checked-shadow="true"] {
1947
+ box-shadow: var(
1948
+ --_show-shadow-clear-all,
1949
+ var(
1950
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-ae,
1951
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-ae, var(--_ctm-dn-cx-cd-se-hr-se-sw-ae))
1952
+ )
1953
+ var(
1954
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-br,
1955
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-br, var(--_ctm-dn-cx-cd-se-hr-se-sw-br))
1956
+ )
1957
+ var(
1958
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-sd,
1959
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-sd, var(--_ctm-dn-cx-cd-se-hr-se-sw-sd))
1960
+ )
1961
+ var(
1962
+ --_ctm-mob-dn-cx-cd-se-hr-se-sw-cr,
1963
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-sw-cr, var(--_ctm-dn-cx-cd-se-hr-se-sw-cr))
1964
+ )
1965
+ );
1966
+ }
1967
+
1968
+ &[data-show-hover-checked-border="true"] {
1969
+ border-color: var(
1970
+ --_sf-hr-br-cr,
1971
+ var(
1972
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-cr,
1973
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-cr, var(--_ctm-dn-cx-cd-se-hr-se-br-cr))
1974
+ )
1975
+ );
1976
+ border-style: var(
1977
+ --_sf-hr-br-st,
1978
+ var(
1979
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-se,
1980
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-se, var(--_ctm-dn-cx-cd-se-hr-se-br-se))
1981
+ )
1982
+ );
1983
+ border-width: var(
1984
+ --_sf-hr-br-wh,
1985
+ var(
1986
+ --_ctm-mob-dn-cx-cd-se-hr-se-br-wh,
1987
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-br-wh, var(--_ctm-dn-cx-cd-se-hr-se-br-wh))
1988
+ )
1989
+ );
1990
+ }
1991
+ button {
1992
+ display: flex;
1993
+ .default-icon {
1994
+ display: none;
1995
+ }
1996
+
1997
+ .hover-icon {
1998
+ display: block;
1999
+ }
2000
+ svg {
2001
+ // width: 13px;
2002
+ // height: 13px;
2003
+ width: var(
2004
+ --_ctm-mob-dn-cx-cd-se-hr-se-se,
2005
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
2006
+ );
2007
+ height: var(
2008
+ --_ctm-mob-dn-cx-cd-se-hr-se-se,
2009
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-se, var(--_ctm-dn-cx-cd-se-hr-se-se))
2010
+ );
2011
+ path {
2012
+ // stroke: var(--_base-white);
2013
+ stroke: var(
2014
+ --_ctm-mob-dn-cx-cd-se-hr-se-in-c1,
2015
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-in-c1, var(--_ctm-dn-cx-cd-se-hr-se-in-c1))
2016
+ );
2017
+ }
2018
+ }
2019
+ }
2020
+ }
2021
+ }
2022
+
2023
+ input[type="radio"]:checked ~ .filter__checkmark::after {
2024
+ content: "";
2025
+ position: absolute;
2026
+ top: 50%;
2027
+ left: 50%;
2028
+ transform: translate(-50%, -50%);
2029
+ height: 8px;
2030
+ width: 8px;
2031
+ border-radius: 50%;
2032
+ // background-color: #007bff;
2033
+ background-color: var(
2034
+ --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2035
+ var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2036
+ );
2037
+ &:hover {
2038
+ background-color: var(
2039
+ --_ctm-mob-dn-cx-cd-se-hr-se-bd-cr,
2040
+ var(--_ctm-tab-dn-cx-cd-se-hr-se-bd-cr, var(--_ctm-dn-cx-cd-se-hr-se-bd-cr))
2041
+ );
2042
+ }
2043
+ }
2044
+
2045
+ // Optional for checkbox styling (square)
2046
+ input[type="checkbox"] ~ .filter__checkmark {
2047
+ border-radius: 4px;
2048
+ }
2049
+
2050
+ // input[type="checkbox"]:checked ~ .filter__checkmark {
2051
+ // background-color: #007bff;
2052
+ // border-color: #007bff;
2053
+ // }
2054
+
2055
+ // input[type="checkbox"]:checked ~ .filter__checkmark::after {
2056
+ // content: "";
2057
+ // position: absolute;
2058
+ // left: 5px;
2059
+ // top: 1px;
2060
+ // width: 4px;
2061
+ // height: 10px;
2062
+ // border: solid #fff;
2063
+ // border-width: 0 2px 2px 0;
2064
+ // transform: rotate(45deg);
2065
+ // }
2066
+
2067
+ .filter__option__value {
2068
+ margin-left: 8px;
2069
+ color: var(
2070
+ --_ctm-mob-dn-on-ls-cr-dc,
2071
+ var(--_ctm-tab-dn-on-ls-cr-dc, var(--_ctm-dn-on-ls-cr-dc))
2072
+ );
2073
+ font-family: var(
2074
+ --_sf-hr-ff,
2075
+ var(
2076
+ --_ctm-mob-dn-on-ls-ft-fy-dc,
2077
+ var(--_ctm-tab-dn-on-ls-ft-fy-dc, var(--_ctm-dn-on-ls-ft-fy-dc))
2078
+ )
2079
+ );
2080
+ font-size: var(
2081
+ --_ctm-mob-dn-on-ls-ft-se-dc,
2082
+ var(--_ctm-tab-dn-on-ls-ft-se-dc, var(--_ctm-dn-on-ls-ft-se-dc))
2083
+ );
2084
+ font-weight: var(
2085
+ --_ctm-mob-dn-on-ls-ft-wt-dc,
2086
+ var(--_ctm-tab-dn-on-ls-ft-wt-dc, var(--_ctm-dn-on-ls-ft-wt-dc))
2087
+ );
2088
+ font-style: var(
2089
+ --_ctm-mob-dn-on-ls-ft-se-ic-dc,
2090
+ var(--_ctm-tab-dn-on-ls-ft-se-ic-dc, var(--_ctm-dn-on-ls-ft-se-ic-dc))
2091
+ );
2092
+ text-align: var(
2093
+ --_ctm-mob-dn-on-ls-tt-an-dc,
2094
+ var(--_ctm-tab-dn-on-ls-tt-an-dc, var(--_ctm-dn-on-ls-tt-an-dc))
2095
+ );
2096
+ letter-spacing: var(
2097
+ --_ctm-mob-dn-on-ls-lr-sg-dc,
2098
+ var(--_ctm-tab-dn-on-ls-lr-sg-dc, var(--_ctm-dn-on-ls-lr-sg-dc))
2099
+ );
2100
+ line-height: var(
2101
+ --_ctm-mob-dn-on-ls-le-ht-dc,
2102
+ var(--_ctm-tab-dn-on-ls-le-ht-dc, var(--_ctm-dn-on-ls-le-ht-dc))
2103
+ );
2104
+ text-decoration: var(
2105
+ --_ctm-mob-dn-on-ls-ue-dc,
2106
+ var(--_ctm-tab-dn-on-ls-ue-dc, var(--_ctm-dn-on-ls-ue-dc))
2107
+ );
2108
+ }
2109
+ }
2110
+
2111
+ // Multi Range Slider Starts
2112
+ .double-slider-box {
2113
+ border-radius: 10px;
2114
+ // padding: 20px;
2115
+ width: 100%;
2116
+ max-width: 300px;
2117
+ padding-inline: 4px;
2118
+ // margin: auto;
2119
+ }
2120
+
2121
+ .range-slider {
2122
+ position: relative;
2123
+ width: 100%;
2124
+ height: 5px;
2125
+ margin: 16px 0 30px 0px;
2126
+ // background-color: var(--_primary-400);
2127
+ // background: linear-gradient(
2128
+ // to right,
2129
+ // var(
2130
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2131
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2132
+ // )
2133
+ // 0%,
2134
+ // var(
2135
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2136
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2137
+ // )
2138
+ // var(--left),
2139
+ // var(
2140
+ // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2141
+ // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2142
+ // )
2143
+ // var(--left),
2144
+ // var(
2145
+ // --_ctm-mob-dn-cx-cd-se-dt-se-bd-cr,
2146
+ // var(--_ctm-tab-dn-cx-cd-se-dt-se-bd-cr, var(--_ctm-dn-cx-cd-se-dt-se-bd-cr))
2147
+ // )
2148
+ // var(--right),
2149
+ // var(
2150
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2151
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr))
2152
+ // )
2153
+ // var(--right),
2154
+ // var(
2155
+ // --_ctm-mob-dn-cx-ud-se-dt-se-br-cr,
2156
+ // var(--_ctm-tab-dn-cx-ud-se-dt-se-br-cr, var(--_ctm-dn-cx-ud-se-dt-se-br-cr, #ccc))
2157
+ // )
2158
+ // 100%
2159
+ // );
2160
+
2161
+ background: linear-gradient(
2162
+ to right,
2163
+ var(
2164
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2165
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2166
+ )
2167
+ 0%,
2168
+ var(
2169
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2170
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2171
+ )
2172
+ var(--left),
2173
+ var(
2174
+ --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2175
+ var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2176
+ )
2177
+ var(--left),
2178
+ var(
2179
+ --_ctm-mob-dn-pe-re-sr-tk-sd-se-bd-cr,
2180
+ var(--_ctm-tab-dn-pe-re-sr-tk-sd-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-sd-se-bd-cr))
2181
+ )
2182
+ var(--right),
2183
+ var(
2184
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2185
+ var(--_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr, var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr))
2186
+ )
2187
+ var(--right),
2188
+ var(
2189
+ --_ctm-mob-dn-pe-re-sr-tk-dt-se-bd-cr,
2190
+ var(
2191
+ --_ctm-tab-dn-pe-re-sr-tk-dt-se-bd-cr,
2192
+ var(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr, #ccc)
2193
+ )
2194
+ )
2195
+ 100%
2196
+ );
2197
+ // background-color: var(
2198
+ // --_sf-hr-bd-cr,
2199
+ // #{prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-bd-cr)}
2200
+ // );
2201
+ // border-radius: 5px;
2202
+ border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-rs));
2203
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-cr));
2204
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-wh));
2205
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-br-se));
2206
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-ae))
2207
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-br))
2208
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-sd))
2209
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tk-dt-se-sw-cr));
2210
+ }
2211
+
2212
+ .slider-track {
2213
+ height: 100%;
2214
+ position: absolute;
2215
+ background-color: var(--_primary-400);
2216
+ left: 0;
2217
+ right: 100%;
2218
+ border-radius: 5px;
2219
+ }
2220
+
2221
+ .range-slider input[type="range"] {
2222
+ position: absolute;
2223
+ width: 100%;
2224
+ top: 1px;
2225
+ transform: translateY(-50%);
2226
+ background: none;
2227
+ pointer-events: none;
2228
+ appearance: none;
2229
+ height: 5px;
2230
+ }
2231
+
2232
+ input[type="range"]::-webkit-slider-thumb {
2233
+ height: 20px;
2234
+ width: 20px;
2235
+ // border-radius: 50%;
2236
+ // border: 3px solid #fff;
2237
+ border-radius: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-rs));
2238
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-cr));
2239
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-wh));
2240
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-br-se));
2241
+ background: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-bd-cr));
2242
+ pointer-events: auto;
2243
+ appearance: none;
2244
+ cursor: pointer;
2245
+ // box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
2246
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-ae))
2247
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-br))
2248
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-sd))
2249
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-pe-re-sr-tb-dt-se-sw-cr));
2250
+ position: relative;
2251
+ z-index: 2; /* Ensure thumbs appear above the track */
2252
+ transition:
2253
+ background-color 400ms,
2254
+ border-color 400ms ease-in-out;
2255
+ &:hover {
2256
+ border: 1px solid var(--_thm-cs-be-se-1);
2257
+ }
2258
+ }
2259
+
2260
+ input[type="range"]::-moz-range-thumb {
2261
+ height: 25px;
2262
+ width: 25px;
2263
+ border-radius: 50%;
2264
+ border: 3px solid #fff;
2265
+ background: var(--_base-white);
2266
+ pointer-events: auto;
2267
+ cursor: pointer;
2268
+ box-shadow: 0 0.125rem 0.5625rem -0.125rem rgba(0, 0, 0, 0.5);
2269
+ position: relative;
2270
+ z-index: 2;
2271
+ }
2272
+
2273
+ .input-box {
2274
+ display: flex;
2275
+ justify-content: space-between;
2276
+ width: 100%;
2277
+ }
2278
+
2279
+ .min-box,
2280
+ .max-box {
2281
+ width: 50%;
2282
+ }
2283
+
2284
+ .min-box {
2285
+ margin-right: 10px;
2286
+ }
2287
+ .max-box input {
2288
+ float: right;
2289
+ }
2290
+ input[type="number"] {
2291
+ width: 90px;
2292
+ padding: 10px;
2293
+ border: 1px solid var(--_thm-cs-be-se-3);
2294
+ border-radius: 5px;
2295
+ text-align: center;
2296
+ }
2297
+
2298
+ .min-tooltip,
2299
+ .max-tooltip {
2300
+ position: absolute;
2301
+ top: -35px;
2302
+ font-size: 12px;
2303
+ color: var(--_thm-cs-be-se-1);
2304
+ // background-color: #fff;
2305
+ border: 1px solid var(--_thm-cs-be-se-3);
2306
+ border-radius: 5px;
2307
+ white-space: nowrap;
2308
+ padding-inline: 15px;
2309
+ span {
2310
+ margin-right: 4px;
2311
+ svg {
2312
+ path {
2313
+ stroke: var(--_thm-cs-be-se-1);
2314
+ }
2315
+ }
2316
+ }
2317
+ }
2318
+
2319
+ .min-tooltip {
2320
+ left: 42px;
2321
+ top: 20px;
2322
+ transform: translateX(-50%);
2323
+ input {
2324
+ padding-left: 0px !important;
2325
+ text-align: left !important;
2326
+ }
2327
+ }
2328
+
2329
+ .max-tooltip {
2330
+ right: 45px;
2331
+ top: 20px;
2332
+ transform: translateX(50%);
2333
+ input {
2334
+ padding-left: 0px !important;
2335
+ text-align: left !important;
2336
+ }
2337
+ }
2338
+
2339
+ .price-range-container {
2340
+ width: 100%;
2341
+ margin: auto;
2342
+ padding: 10px;
2343
+ }
2344
+
2345
+ .price-range-inputs {
2346
+ display: flex;
2347
+ align-items: center;
2348
+ justify-content: space-between;
2349
+ gap: 12px;
2350
+ }
2351
+
2352
+ .price-range-min,
2353
+ .price-range-max {
2354
+ flex: 1;
2355
+ display: flex;
2356
+ flex-direction: column;
2357
+ align-items: flex-start;
2358
+ }
2359
+
2360
+ .price-range-label {
2361
+ font-size: 12px;
2362
+ font-weight: 500;
2363
+ color: #333;
2364
+ margin-bottom: 6px;
2365
+ }
2366
+
2367
+ .price-range-input-wrapper {
2368
+ display: flex;
2369
+ align-items: center;
2370
+ width: 100%;
2371
+ }
2372
+
2373
+ .price-range-min span,
2374
+ .price-range-max span {
2375
+ margin-right: 8px;
2376
+ font-size: 14px;
2377
+ color: #333;
2378
+ font-weight: 500;
2379
+ }
2380
+
2381
+ .price-range-separator {
2382
+ font-size: 14px;
2383
+ color: #333;
2384
+ font-weight: 500;
2385
+ }
2386
+
2387
+ .price-range-min-input,
2388
+ .price-range-max-input {
2389
+ width: 100%;
2390
+ padding: 8px;
2391
+ border: 1px solid var(--_thm-cs-be-se-3);
2392
+ border-radius: 4px;
2393
+ text-align: center;
2394
+ font-size: 14px;
2395
+ color: #333;
2396
+ background-color: #fff;
2397
+ }
2398
+
2399
+ .price-range-min-input:focus,
2400
+ .price-range-max-input:focus {
2401
+ outline: none;
2402
+ border-color: #2563eb;
2403
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
2404
+ }
2405
+
2406
+ .price-range-min-input::placeholder,
2407
+ .price-range-max-input::placeholder {
2408
+ color: #9ca3af;
2409
+ }
2410
+
2411
+ /* Chrome, Safari, Edge, and Opera */
2412
+ input[type="number"]::-webkit-inner-spin-button,
2413
+ input[type="number"]::-webkit-outer-spin-button {
2414
+ -webkit-appearance: none;
2415
+ margin: 0;
2416
+ }
2417
+
2418
+ /* Firefox */
2419
+ input[type="number"] {
2420
+ -moz-appearance: textfield;
2421
+ }
2422
+
2423
+ // Multi Range Slider Ends
2424
+ // Button Group Starts
2425
+ .button_main {
2426
+ border: 1px solid var(--_gray-600);
2427
+ cursor: pointer;
2428
+ .btn__group {
2429
+ display: flex;
2430
+ justify-content: center;
2431
+ align-items: center;
2432
+ gap: 8px;
2433
+ color: #fff;
2434
+ font-weight: 600;
2435
+ font-size: 16px;
2436
+ background-color: #000080;
2437
+ padding: 10px 20px;
2438
+ button {
2439
+ svg {
2440
+ path {
2441
+ stroke: #fff;
2442
+ }
2443
+ }
2444
+ }
2445
+ }
2446
+ }
2447
+ // Button Group Ends
2448
+ }
2449
+ }
2450
+ }