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

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 (3) hide show
  1. package/dist/filters.scss +2418 -2418
  2. package/dist/section.scss +210 -209
  3. package/package.json +1 -1
package/dist/filters.scss CHANGED
@@ -1,2418 +1,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(--_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(--_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
+ }