@sc-360-v2/storefront-cms-library 0.3.12 → 0.3.14

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 (27) hide show
  1. package/dist/allocationDetails.scss +7 -1
  2. package/dist/badge.scss +382 -0
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker copy.scss +1123 -0
  5. package/dist/bulk-variant-picker.scss +2629 -647
  6. package/dist/cart-summary.scss +11 -4
  7. package/dist/contact-us.scss +7 -1
  8. package/dist/filters.scss +42 -0
  9. package/dist/hotspot.scss +7 -1
  10. package/dist/icons.js +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/layouter-pro.scss +3 -1
  13. package/dist/product-image.scss +23 -13
  14. package/dist/submit-quote.scss +250 -0
  15. package/dist/table.scss +8 -2
  16. package/dist/types/builder/elements/badge/index.d.ts +26 -0
  17. package/dist/types/builder/enums/index.d.ts +3 -1
  18. package/dist/types/builder/index.d.ts +2 -1
  19. package/dist/types/builder/tools/element-edit/badge.d.ts +47 -0
  20. package/dist/types/builder/tools/element-edit/bulkVariantPicker copy.d.ts +119 -0
  21. package/dist/types/builder/tools/element-edit/bulkVariantPicker.d.ts +54 -17
  22. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  23. package/dist/types/builder/tools/element-edit/variantPicker.d.ts +1 -1
  24. package/dist/types/global/types.d.ts +1 -1
  25. package/dist/uom-selector.scss +0 -1
  26. package/dist/widget.scss +2 -0
  27. package/package.json +1 -1
package/dist/bulk-variant-picker.scss CHANGED
@@ -1,22 +1,16 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- // @use "./functions.scss";
3
+ @use "./functions.scss" as *;
4
+
5
+ $minWidth: 70px;
6
+
4
7
  [data-div-type="element"] {
5
8
  &[data-element-type="bulkVariantPicker"] {
6
9
  --_ctm-mob-var-lt-mn-cn-wh: 70px;
7
- // width: var(--_lt-wh);
8
- // height: var(--_lt-ht);
9
- // margin: var(--_lt-mn);
10
- // padding: var(--_lt-pg);
11
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
10
+
13
11
  margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
- // height: ;
16
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
- // --_aspect-ratio: calc(
18
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
- // );
12
+
13
+ min-width: #{$minWidth} !important;
20
14
 
21
15
  & > .wrapper {
22
16
  width: 100%;
@@ -26,623 +20,1266 @@
26
20
  --_show-shadow: none;
27
21
  }
28
22
  .text-element {
29
- background: #6d96e4;
30
- padding: 10px;
23
+ color: #333;
24
+ font-family: Lato;
25
+ font-size: 12px;
26
+ font-style: normal;
27
+ font-weight: 400;
28
+ line-height: 18px;
29
+ margin-bottom: 6px;
30
+ }
31
+ .option__title {
32
+ margin-bottom: 4px;
33
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
34
+ font-family:
35
+ var(--_ctm-mob-dn-on-te-ft-fy, var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))),
36
+ sans-serif;
37
+ font-size: var(
38
+ --_ctm-mob-dn-on-te-ft-se,
39
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
40
+ );
41
+ font-weight: var(
42
+ --_ctm-mob-dn-on-te-ft-wt,
43
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
44
+ );
45
+ font-style: var(
46
+ --_ctm-mob-dn-on-te-ft-se-ic,
47
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
48
+ );
49
+ text-align: var(
50
+ --_ctm-mob-dn-on-te-tt-an,
51
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
52
+ );
53
+ letter-spacing: var(
54
+ --_ctm-mob-dn-on-te-lr-sg,
55
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
56
+ );
57
+ line-height: var(
58
+ --_ctm-mob-dn-on-te-le-ht,
59
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
60
+ );
61
+ text-decoration: var(
62
+ --_ctm-mob-dn-on-te-ue,
63
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
64
+ );
65
+ }
66
+
67
+ .is__combination_avail {
68
+ color: red;
69
+ font-size: 14px;
31
70
  font-weight: 600;
32
- color: rgba(75, 69, 70, 1);
33
71
  }
34
- .bulk_variant__container {
72
+ .variant__container {
35
73
  display: flex;
36
74
  flex-direction: column;
37
75
  gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
38
76
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
39
- // Select Colors
40
- .select__colors {
41
- font-size: 16px;
42
- color: var(--_gray-500);
43
- display: flex;
44
- flex-direction: column;
45
- gap: var(
46
- --_ctm-mob-lt-on-te-ve-sg,
47
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
48
- );
49
- .title {
50
- margin-bottom: 4px;
51
- }
52
- .select__group {
77
+ white-space: nowrap;
78
+
79
+ .standard_wrapper {
80
+ // Select Colors
81
+ .select__colors {
82
+ font-size: 16px;
83
+ color: var(--_gray-500);
53
84
  display: flex;
54
- flex-wrap: wrap;
55
- flex-direction: row;
56
- gap: var(--_ctm-lt-sh-te-dy-se-im-sg);
57
- &[data-swatch-dispaly="Vertically"] {
58
- flex-direction: column;
59
- }
60
- .item {
61
- padding: var(
62
- --_ctm-mob-lt-sh-te-dy-se-im-pg,
63
- var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
64
- );
65
- background-color: var(
66
- --_ctm-mob-dn-sh-on-ve-se-dt-se-bd-cr,
67
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
85
+ flex-direction: column;
86
+ gap: var(
87
+ --_ctm-mob-lt-on-te-ve-sg,
88
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
89
+ );
90
+ // padding: var(
91
+ // --_ctm-mob-lt-sh-te-dy-se-im-pg,
92
+ // var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
93
+ // );
94
+
95
+ .select__group {
96
+ display: flex;
97
+ flex-direction: row;
98
+ gap: var(
99
+ --_ctm-mob-lt-sh-te-dy-se-im-sg,
100
+ var(--_ctm-tab-lt-sh-te-dy-se-im-sg, var(--_ctm-lt-sh-te-dy-se-im-sg))
68
101
  );
69
- // height: 30px;
70
- // width: 30px;
71
- // &[data-dt-se-bd-se="Circle"] {
72
- // border-radius: 50%;
73
- // }
74
- // &[data-dt-se-bd-se="None"] {
75
- // height: 0;
76
- // width: 0;
77
- // }
78
- &:hover {
79
- background-color: var(
80
- --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
81
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
82
- );
83
- // height: 30px;
84
- // width: 30px;
85
- // &[data-dt-se-bd-se="Circle"] {
86
- // border-radius: 50%;
87
- // }
88
- // &[data-dt-se-bd-se="None"] {
89
- // height: 0;
90
- // width: 0;
91
- // }
102
+
103
+ &[data-swatch-dispaly="Vertically"] {
104
+ flex-direction: column;
105
+ }
106
+ &[data-swatch-overflow="Scroll"] {
107
+ flex-wrap: nowrap;
108
+ overflow-x: auto;
92
109
  }
93
- &.selected_item {
110
+ &[data-swatch-overflow="Wrap"] {
111
+ flex-wrap: wrap;
112
+ }
113
+
114
+ .show_more_button {
94
115
  background-color: var(
95
- --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
96
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
116
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
117
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
118
+ );
119
+ font-family:
120
+ var(
121
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
122
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
123
+ ),
124
+ sans-serif;
125
+ border-color: var(
126
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
127
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
128
+ );
129
+ border-radius: var(
130
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
131
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
132
+ );
133
+ border-style: var(
134
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
135
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
136
+ );
137
+ border-width: var(
138
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
139
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
140
+ );
141
+ font-size: var(
142
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
143
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
144
+ );
145
+ font-style: var(
146
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
147
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
148
+ );
149
+ font-weight: var(
150
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
151
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
152
+ );
153
+ line-height: var(
154
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
155
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
156
+ );
157
+ letter-spacing: var(
158
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
159
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
160
+ );
161
+ box-shadow: var(
162
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
163
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
164
+ )
165
+ var(
166
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
167
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
168
+ )
169
+ var(
170
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
171
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
172
+ )
173
+ var(
174
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
175
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
176
+ );
177
+ text-align: var(
178
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
179
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
180
+ );
181
+ color: var(
182
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
183
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
184
+ );
185
+ text-decoration: var(
186
+ --_ctm-mob-dn-sw-me-is-bn-ue,
187
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
97
188
  );
98
- // height: 30px;
99
- // width: 30px;
100
- // &[data-dt-se-bd-se="Circle"] {
101
- // border-radius: 50%;
102
- // }
103
- // &[data-dt-se-bd-se="None"] {
104
- // height: 0;
105
- // width: 0;
106
- // }
107
189
  }
190
+
108
191
  .select__group__item {
109
192
  transition: width 0.3s ease;
110
- width: 30px;
111
- height: 30px;
193
+
194
+ --_ctm-lt-sh-im-se: 30px;
195
+ height: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
196
+ width: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-se);
197
+ padding: prepareMediaVariable(--_ctm-lt-sh-te-dy-se-im-pg);
198
+
112
199
  border-color: var(
113
- --_show-border-im-se,
114
- var(
115
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-cr,
116
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-br-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-br-cr))
117
- )
200
+ --_sf-hr-br-cr,
201
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
202
+ );
203
+
204
+ background-color: var(
205
+ --_sf-hr-bd-cr,
206
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
118
207
  );
119
208
 
120
209
  border-style: var(
121
- --_show-border-im-se,
122
- var(
123
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-se,
124
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-br-se, var(--_ctm-dn-sh-on-ve-se-dt-se-br-se))
125
- )
210
+ --_sf-hr-br-se,
211
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
126
212
  );
127
213
 
128
214
  border-width: var(
129
- --_show-border-im-se,
130
- var(
131
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-wh,
132
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-br-wh, var(--_ctm-dn-sh-on-ve-se-dt-se-br-wh))
133
- )
215
+ --_sf-hr-br-wh,
216
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
134
217
  );
135
-
136
218
  border-radius: var(
137
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
138
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs, var(--_ctm-dn-sh-on-ve-se-dt-se-br-rs))
219
+ --_sf-hr-br-rs,
220
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
139
221
  );
140
222
 
141
223
  box-shadow: var(
142
- --_show-shadow-im-se,
143
- var(
144
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-ae,
145
- var(
146
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-ae,
147
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
148
- )
149
- )
150
- var(
151
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-br,
152
- var(
153
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-br,
154
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-br)
155
- )
156
- )
157
- var(
158
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-sd,
159
- var(
160
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-sd,
161
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd)
162
- )
163
- )
164
- var(
165
- --_ctm-mob-dn-sh-on-ve-se-dt-se-sw-cr,
166
- var(
167
- --_ctm-tab-dn-sh-on-ve-se-dt-se-sw-cr,
168
- var(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr)
169
- )
170
- )
171
- );
224
+ --_sf-hr-sw-ae,
225
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
226
+ )
227
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
228
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
229
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
230
+
172
231
  cursor: pointer;
173
232
  overflow: hidden;
174
- &:hover {
233
+ .product-select-image {
234
+ object-fit: cover;
235
+ width: 100%;
236
+ height: 100%;
237
+ }
238
+ &[data-background-shape="circle"] {
239
+ border-radius: 50%;
240
+ }
241
+ &[data-background-shape="square"] {
242
+ border-radius: 5px;
243
+ }
244
+ &[data-background-shape="capsule"] {
245
+ --toggle-height: var(--_ctm-lt-sh-te-dy-se-im-se);
246
+ --toggle-width: calc(var(--_ctm-lt-sh-te-dy-se-im-se) * 1.5);
247
+
248
+ width: var(--toggle-width);
249
+ height: var(--toggle-height);
250
+
251
+ border-radius: var(--toggle-height); /* Full pill shape */
252
+ box-sizing: border-box;
253
+ }
254
+ &[data-swatch-shape="circle"] {
255
+ & div,
256
+ .product-select-image {
257
+ border-radius: 50%;
258
+ }
259
+ // border-radius: 50%;
260
+ }
261
+ &[data-swatch-shape="capsule"] {
262
+ & div,
263
+ .product-select-image {
264
+ // border-radius: 50%;
265
+ width: 100%;
266
+ height: 100%;
267
+ border-radius: inherit;
268
+ }
269
+ // border-radius: 50%;
270
+ }
271
+
272
+ &[data-selected="true"] {
175
273
  border-color: var(
274
+ --_sf-sd-br-cr,
275
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
276
+ );
277
+
278
+ background-color: var(
279
+ --_sf-sd-bd-cr,
280
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr)
281
+ );
282
+ border-style: var(
283
+ --_sf-sd-br-se,
284
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
285
+ );
286
+ border-width: var(
287
+ --_sf-sd-br-wh,
288
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
289
+ );
290
+ box-shadow: var(
291
+ --_sf-sd-sw-ae,
292
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
293
+ )
294
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
295
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
296
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr));
297
+
298
+ &[data-background-shape-selected="circle"] {
299
+ border-radius: 50%;
300
+ }
301
+ &[data-background-shape-selected="square"] {
302
+ border-radius: 5px;
303
+ }
304
+ &[data-background-shape-selected="capsule"] {
305
+ border-radius: 80%;
306
+ // width: calc(
307
+ // var(--_ctm-mob-lt-sh-im-se, var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))) +
308
+ // 8px
309
+ // );
310
+ }
311
+ &[data-swatch-shape-selected="circle"] {
312
+ & div,
313
+ .product-select-image {
314
+ border-radius: 50%;
315
+ }
316
+ }
317
+ &[data-swatch-shape-selected="capsule"] {
318
+ & div,
319
+ .product-select-image {
320
+ border-radius: 50%;
321
+ }
322
+ }
323
+ &[data-swatch-shape-selected="square"] {
324
+ & div,
325
+ .product-select-image {
326
+ border-radius: 5px;
327
+ }
328
+ }
329
+ }
330
+ &:hover {
331
+ --_sf-hr-bd-cr: var(
332
+ --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
333
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
334
+ );
335
+ --_sf-hr-br-cr: var(
176
336
  --_ctm-mob-dn-sh-on-ve-se-hr-se-br-cr,
177
337
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-br-cr))
178
338
  );
179
- border-style: var(
339
+ --_sf-hr-br-se: var(
180
340
  --_ctm-mob-dn-sh-on-ve-se-hr-se-br-se,
181
341
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-se, var(--_ctm-dn-sh-on-ve-se-hr-se-br-se))
182
342
  );
183
- border-width: var(
343
+ --_sf-hr-br-wh: var(
184
344
  --_ctm-mob-dn-sh-on-ve-se-hr-se-br-wh,
185
345
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-wh, var(--_ctm-dn-sh-on-ve-se-hr-se-br-wh))
186
346
  );
187
- border-radius: var(
347
+ --_sf-hr-br-bs: var(
188
348
  --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
189
349
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs, var(--_ctm-dn-sh-on-ve-se-hr-se-br-rs))
190
350
  );
191
- box-shadow: var(
192
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-ae,
193
- var(
194
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae,
195
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae)
196
- )
197
- )
198
- var(
199
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-br,
200
- var(
201
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br,
202
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br)
203
- )
204
- )
205
- var(
206
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-sd,
207
- var(
208
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-sd,
209
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-sd)
210
- )
211
- )
212
- var(
213
- --_ctm-mob-dn-sh-on-ve-se-hr-se-sw-cr,
214
- var(
215
- --_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr,
216
- var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr)
217
- )
218
- );
219
- }
220
- &.selected {
221
- width: 45px;
222
- border-radius: 20px;
223
- outline: 1px solid var(--_gray-300);
224
- border: 3px solid #fff;
225
- border-radius: var(
226
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
227
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
351
+
352
+ // new
353
+ --_sf-hr-sw-ae: var(
354
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
355
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-ae))
356
+ );
357
+ --_sf-hr-sw-br: var(
358
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-br,
359
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-br, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-br))
228
360
  );
229
- border: 3px solid #fff;
361
+ --_sf-hr-sw-hr: var(
362
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
363
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-hr))
364
+ );
365
+ --_sf-hr-sw-cr: var(
366
+ --_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
367
+ var(--_ctm-tab-dn-sh-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-sw-cr))
368
+ );
369
+ }
230
370
 
231
- border-color: var(
371
+ &:hover {
372
+ &[data-background-shape-hover="circle"] {
373
+ border-radius: 50%;
374
+ }
375
+ &[data-background-shape-hover="square"] {
376
+ border-radius: 5px;
377
+ }
378
+ &[data-background-shape-hover="capsule"] {
379
+ border-radius: 80%;
380
+ // width: calc(
381
+ // var(
382
+ // --_ctm-mob-lt-sh-im-se,
383
+ // var(--_ctm-tab-lt-sh-im-se, var(--_ctm-lt-sh-im-se))
384
+ // ) +
385
+ // 8px
386
+ // );
387
+ }
388
+ &[data-swatch-shape-hover="circle"] {
389
+ & div,
390
+ .product-select-image {
391
+ border-radius: 50%;
392
+ }
393
+ // border-radius: 50%;
394
+ }
395
+ &[data-swatch-shape-hover="capsule"] {
396
+ & div,
397
+ .product-select-image {
398
+ border-radius: 50%;
399
+ }
400
+ }
401
+ &[data-swatch-shape-hover="square"] {
402
+ & div,
403
+ .product-select-image {
404
+ border-radius: 5px;
405
+ }
406
+ }
407
+ }
408
+
409
+ &[data-selected="true"] {
410
+ --_sf-sd-bd-cr: var(
411
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
412
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
413
+ );
414
+ --_sf-sd-br-cr: var(
232
415
  --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
233
416
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr))
234
417
  );
235
- border-style: var(
418
+ --_sf-sd-br-se: var(
236
419
  --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
237
420
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-se, var(--_ctm-dn-sh-on-ve-se-sd-se-br-se))
238
421
  );
239
- border-width: var(
422
+ --_sf-sd-br-wh: var(
240
423
  --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
241
424
  var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh, var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh))
242
425
  );
426
+ --_sf-sd-br-bs: var(
427
+ --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
428
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
429
+ );
430
+
431
+ // new
432
+ --_sf-sd-sw-ae: var(
433
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
434
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae))
435
+ );
436
+ --_sf-sd-sw-br: var(
437
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
438
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br))
439
+ );
440
+ --_sf-sd-sw-sd: var(
441
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-sd,
442
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd))
443
+ );
444
+ --_sf-sd-sw-cr: var(
445
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
446
+ var(--_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr))
447
+ );
448
+
449
+ border-color: var(
450
+ --_sf-sd-br-cr,
451
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-cr)
452
+ );
453
+
454
+ background-color: var(
455
+ --_sf-sd-bd-cr,
456
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr)
457
+ );
458
+
459
+ border-style: var(
460
+ --_sf-sd-br-se,
461
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-se)
462
+ );
463
+
464
+ border-width: var(
465
+ --_sf-sd-br-wh,
466
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-wh)
467
+ );
468
+ border-radius: var(
469
+ --_sf-sd-br-rs,
470
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-br-rs)
471
+ );
472
+
243
473
  box-shadow: var(
244
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-ae,
245
- var(
246
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-ae,
247
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-ae)
248
- )
249
- )
250
- var(
251
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-br,
252
- var(
253
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-br,
254
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-br)
255
- )
474
+ --_sf-sd-sw-ae,
475
+ prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-ae)
256
476
  )
257
- var(
258
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-sd,
259
- var(
260
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-sd,
261
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-sd)
262
- )
263
- )
264
- var(
265
- --_ctm-mob-dn-sh-on-ve-se-sd-se-sw-cr,
266
- var(
267
- --_ctm-tab-dn-sh-on-ve-se-sd-se-sw-cr,
268
- var(--_ctm-dn-sh-on-ve-se-sd-se-sw-cr)
269
- )
270
- );
477
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-br))
478
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-sd))
479
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-sh-on-ve-se-dt-se-sw-cr));
480
+
481
+ &[data-background-shape-selected="circle"] {
482
+ border-radius: 50%;
483
+ }
484
+ &[data-background-shape-selected="square"] {
485
+ border-radius: 5px;
486
+ }
487
+ &[data-background-shape-selected="capsule"] {
488
+ --toggle-height: var(--_ctm-lt-sh-im-se);
489
+ --toggle-width: calc(var(--_ctm-lt-sh-im-se) * 1.5);
490
+
491
+ width: var(--toggle-width);
492
+ height: var(--toggle-height);
493
+
494
+ border-radius: var(--toggle-height); /* Full pill shape */
495
+ box-sizing: border-box;
496
+ }
497
+ &[data-swatch-shape-selected="circle"] {
498
+ & div,
499
+ .product-select-image {
500
+ border-radius: 50%;
501
+ }
502
+ }
503
+ &[data-swatch-shape-selected="capsule"] {
504
+ & div,
505
+ .product-select-image {
506
+ // border-radius: 50%;
507
+ width: 100%;
508
+ height: 100%;
509
+ border-radius: inherit;
510
+ }
511
+ }
512
+ &[data-swatch-shape-selected="square"] {
513
+ & div,
514
+ .product-select-image {
515
+ border-radius: 5px;
516
+ }
517
+ }
271
518
  }
519
+
520
+ // &.disabled {
521
+ // cursor: not-allowed;
522
+ // opacity: 0.4;
523
+ // &[data-swatch-type="Swatch Image"] {
524
+ // position: relative;
525
+ // overflow: hidden;
526
+ // &::after {
527
+ // content: "";
528
+ // width: 172%;
529
+ // height: 1px;
530
+ // position: absolute;
531
+ // background: #f00;
532
+ // left: -14px;
533
+ // transform: rotate(48deg);
534
+ // /* -webkit-transform: rotate(48deg); */
535
+ // -moz-transform: rotate(48deg);
536
+ // top: 14px;
537
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
538
+ // }
539
+ // &::before {
540
+ // content: "";
541
+ // width: 164%;
542
+ // height: 1px;
543
+ // position: absolute;
544
+ // background: #f00;
545
+ // left: -14px;
546
+ // transform: rotate(-48deg);
547
+ // -webkit-transform: rotate(-48deg);
548
+ // -moz-transform: rotate(-48deg);
549
+ // top: 14px;
550
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
551
+ // }
552
+ // }
553
+ // }
554
+
555
+ position: relative;
556
+
272
557
  &.disabled {
558
+ color: #aaa;
559
+ background-color: #f9f9f9;
560
+ border-color: #ddd;
273
561
  cursor: not-allowed;
274
- opacity: 0.4;
275
- position: relative;
276
- &::after {
277
- content: "X";
278
- position: absolute;
279
- top: -5px;
280
- left: 50%;
281
- transform: translateX(-50%);
282
- font-size: 30px;
283
- color: #f55d42;
284
- }
562
+ opacity: 0.3;
563
+ overflow: hidden;
285
564
  }
286
- }
287
- }
288
- }
289
- }
290
- // Select Fit and Size
291
- .select__fit {
292
- font-size: 16px;
293
- color: var(--_gray-500);
294
- display: flex;
295
- flex-direction: column;
296
- gap: var(
297
- --_ctm-mob-lt-on-te-ve-sg,
298
- var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
299
- );
300
565
 
301
- padding: var(
302
- --_ctm-mob-lt-se-st-dy-se-im-pg,
303
- var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
304
- );
305
- .title {
306
- margin-bottom: 4px;
566
+ .cross-line {
567
+ position: absolute;
568
+ inset: 0;
569
+ background-color: #cccccc;
570
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
571
+ pointer-events: none;
572
+ }
573
+ .product-select-image {
574
+ width: 100%;
575
+ height: 100%;
576
+ object-fit: contain;
577
+ }
578
+ }
579
+ }
307
580
  }
308
- .select__group {
581
+ // Select Fit and Size
582
+ .select__fit {
583
+ font-size: 16px;
584
+ color: var(--_gray-500);
309
585
  display: flex;
310
- gap: 8px;
311
- flex-wrap: wrap;
312
- margin-bottom: 10px;
313
- flex-direction: row;
586
+ flex-direction: column;
314
587
  gap: var(
315
- --_ctm-mob-lt-se-st-dy-se-im-sg,
316
- var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg))
588
+ --_ctm-mob-lt-on-te-ve-sg,
589
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
317
590
  );
318
- &[data-single-dispaly="Vertically"] {
319
- flex-direction: column;
320
- }
321
- &[data-single-dispaly="Grid"] {
322
- display: grid;
323
- grid-template-columns: repeat(
324
- var(
325
- --_ctm-mob-lt-se-st-dy-se-is-pr-rw,
326
- var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))
327
- ),
328
- minmax(auto, 1fr)
329
- );
330
- }
331
- .select__group__item {
332
- transition: color 0.3s ease;
333
- padding: 8px 12px;
334
- border-radius: 6px;
335
- border: 1px solid var(--_gray-200);
336
- font-size: 16px;
337
- font-weight: 600;
338
- cursor: pointer;
339
- border-color: var(
340
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-cr,
341
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-cr, var(--_ctm-dn-se-on-ve-se-dt-se-br-cr))
342
- );
343
- border-style: var(
344
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-se,
345
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-se, var(--_ctm-dn-se-on-ve-se-dt-se-br-se))
346
- );
347
- border-width: var(
348
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-wh,
349
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-wh, var(--_ctm-dn-se-on-ve-se-dt-se-br-wh))
350
- );
351
- box-shadow: var(
352
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-ae,
353
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-ae, var(--_ctm-dn-se-on-ve-se-dt-se-sw-ae))
354
- )
355
- var(
356
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-br,
357
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-br, var(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
358
- )
359
- var(
360
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-sd,
361
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-sd, var(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
362
- )
363
- var(
364
- --_ctm-mob-dn-se-on-ve-se-dt-se-sw-cr,
365
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-sw-cr, var(--_ctm-dn-se-on-ve-se-dt-se-sw-cr))
366
- );
367
- border-radius: var(
368
- --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
369
- var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
591
+
592
+ // padding: var(
593
+ // --_ctm-mob-lt-se-st-dy-se-im-pg,
594
+ // var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
595
+ // );
596
+
597
+ .select__group {
598
+ display: flex;
599
+ gap: 8px;
600
+ flex-wrap: wrap;
601
+ margin-bottom: 10px;
602
+ flex-direction: row;
603
+ gap: var(
604
+ --_ctm-mob-lt-se-st-dy-se-im-sg,
605
+ var(--_ctm-tab-lt-se-st-dy-se-im-sg, var(--_ctm-lt-se-st-dy-se-im-sg))
370
606
  );
371
- &:hover {
372
- border-color: var(
373
- --_show-border-im-se,
374
- var(
375
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
376
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr))
377
- )
378
- );
379
- border-style: var(
380
- --_show-border-im-se,
381
- var(
382
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
383
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se))
384
- )
607
+
608
+ &[data-single-dispaly="Vertically"] {
609
+ flex-direction: column;
610
+ }
611
+ &[data-single-overflow="Scroll"] {
612
+ overflow-x: auto;
613
+ overflow-y: hidden;
614
+ flex-wrap: nowrap;
615
+ }
616
+ &[data-swatch-overflow="Scroll"] {
617
+ overflow-x: auto;
618
+ flex-wrap: nowrap;
619
+ overflow-y: hidden;
620
+ }
621
+ .show_more_button {
622
+ background-color: var(
623
+ --_ctm-mob-dn-sw-me-is-bn-bd-cr,
624
+ var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
385
625
  );
386
- border-width: var(
387
- --_show-border-im-se,
626
+ font-family:
388
627
  var(
389
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
390
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh))
391
- )
628
+ --_ctm-mob-dn-sw-me-is-bn-ft-fy,
629
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
630
+ ),
631
+ sans-serif;
632
+ border-color: var(
633
+ --_ctm-mob-dn-sw-me-is-bn-br-cr,
634
+ var(--_ctm-tab-dn-sw-me-is-bn-br-cr, var(--_ctm-dn-sw-me-is-bn-br-cr))
392
635
  );
393
636
  border-radius: var(
394
- --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
395
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
396
- );
397
- box-shadow: var(
398
- --_show-shadow-im-se,
399
- var(
400
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
401
- var(
402
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae,
403
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae)
404
- )
405
- )
406
- var(
407
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
408
- var(
409
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-br,
410
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-br)
411
- )
412
- )
413
- var(
414
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-sd,
415
- var(
416
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-sd,
417
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-sd)
418
- )
419
- )
420
- var(
421
- --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
422
- var(
423
- --_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr,
424
- var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr)
425
- )
426
- )
637
+ --_ctm-mob-dn-sw-me-is-bn-br-rs,
638
+ var(--_ctm-tab-dn-sw-me-is-bn-br-rs, var(--_ctm-dn-sw-me-is-bn-br-rs))
427
639
  );
428
- background-color: var(
429
- --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
430
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
640
+ border-style: var(
641
+ --_ctm-mob-dn-sw-me-is-bn-br-se,
642
+ var(--_ctm-tab-dn-sw-me-is-bn-br-se, var(--_ctm-dn-sw-me-is-bn-br-se))
431
643
  );
432
- color: var(
433
- --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
434
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
644
+ border-width: var(
645
+ --_ctm-mob-dn-sw-me-is-bn-br-wh,
646
+ var(--_ctm-tab-dn-sw-me-is-bn-br-wh, var(--_ctm-dn-sw-me-is-bn-br-wh))
435
647
  );
436
- font-family: var(
437
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
438
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
439
- ),
440
- sans-serif;
441
648
  font-size: var(
442
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
443
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
444
- );
445
- font-weight: var(
446
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
447
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
649
+ --_ctm-mob-dn-sw-me-is-bn-ft-se,
650
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se, var(--_ctm-dn-sw-me-is-bn-ft-se))
448
651
  );
449
652
  font-style: var(
450
- --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
451
- var(
452
- --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
453
- var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
454
- )
455
- );
456
- text-align: var(
457
- --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
458
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
653
+ --_ctm-mob-dn-sw-me-is-bn-ft-se-ic,
654
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-se-ic, var(--_ctm-dn-sw-me-is-bn-ft-se-ic))
459
655
  );
460
- letter-spacing: var(
461
- --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
462
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
656
+ font-weight: var(
657
+ --_ctm-mob-dn-sw-me-is-bn-ft-wt,
658
+ var(--_ctm-tab-dn-sw-me-is-bn-ft-wt, var(--_ctm-dn-sw-me-is-bn-ft-wt))
463
659
  );
464
660
  line-height: var(
465
- --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
466
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
661
+ --_ctm-mob-dn-sw-me-is-bn-le-ht,
662
+ var(--_ctm-tab-dn-sw-me-is-bn-le-ht, var(--_ctm-dn-sw-me-is-bn-le-ht))
467
663
  );
468
- text-decoration: var(
469
- --_ctm-mob-dn-se-on-ve-se-hr-se-ue,
470
- var(--_ctm-tab-dn-se-on-ve-se-hr-se-ue, var(--_ctm-dn-se-on-ve-se-hr-se-ue))
664
+ letter-spacing: var(
665
+ --_ctm-mob-dn-sw-me-is-bn-lr-sg,
666
+ var(--_ctm-tab-dn-sw-me-is-bn-lr-sg, var(--_ctm-dn-sw-me-is-bn-lr-sg))
471
667
  );
472
- }
473
- &.child {
474
- border: 0;
475
- border-radius: 0;
476
- border-bottom: 2px solid var(--_gray-200);
477
- }
478
- &.selected {
479
- border: 1px solid var(--_primary-200);
480
- background-color: var(--_primary-25);
481
- color: var(--_primary-400);
482
- border-color: var(
483
- --_show-border-im-se,
668
+ box-shadow: var(
669
+ --_ctm-mob-dn-sw-me-is-bn-sw-ae,
670
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-ae, var(--_ctm-dn-sw-me-is-bn-sw-ae))
671
+ )
484
672
  var(
485
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
486
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
673
+ --_ctm-mob-dn-sw-me-is-bn-sw-br,
674
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-br, var(--_ctm-dn-sw-me-is-bn-sw-br))
487
675
  )
488
- );
489
- border-style: var(
490
- --_show-border-im-se,
491
676
  var(
492
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
493
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
677
+ --_ctm-mob-dn-sw-me-is-bn-sw-sd,
678
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-sd, var(--_ctm-dn-sw-me-is-bn-sw-sd))
494
679
  )
680
+ var(
681
+ --_ctm-mob-dn-sw-me-is-bn-sw-cr,
682
+ var(--_ctm-tab-dn-sw-me-is-bn-sw-cr, var(--_ctm-dn-sw-me-is-bn-sw-cr))
683
+ );
684
+ text-align: var(
685
+ --_ctm-mob-dn-sw-me-is-bn-tt-an,
686
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-an, var(--_ctm-dn-sw-me-is-bn-tt-an))
495
687
  );
496
- border-width: var(
497
- --_show-border-im-se,
688
+ color: var(
689
+ --_ctm-mob-dn-sw-me-is-bn-tt-cr,
690
+ var(--_ctm-tab-dn-sw-me-is-bn-tt-cr, var(--_ctm-dn-sw-me-is-bn-tt-cr))
691
+ );
692
+ text-decoration: var(
693
+ --_ctm-mob-dn-sw-me-is-bn-ue,
694
+ var(--_ctm-tab-dn-sw-me-is-bn-ue, var(--_ctm-dn-sw-me-is-bn-ue))
695
+ );
696
+ }
697
+ &[data-single-dispaly="Grid"] {
698
+ display: grid;
699
+ grid-template-columns: repeat(
498
700
  var(
499
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
500
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
501
- )
701
+ --_ctm-mob-lt-se-st-dy-se-is-pr-rw,
702
+ var(--_ctm-tab-lt-se-st-dy-se-is-pr-rw, var(--_ctm-lt-se-st-dy-se-is-pr-rw))
703
+ ),
704
+ minmax(auto, 1fr)
502
705
  );
706
+ }
707
+
708
+ .select__group__item {
709
+ transition: color 0.3s ease;
710
+ // border-radius: 6px;
711
+ // border: 1px solid var(--_gray-200);
712
+ cursor: pointer;
713
+ display: flex;
714
+ align-items: center;
715
+ justify-content: center;
716
+
717
+ // height: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
718
+ // width: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
719
+ padding: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-pg);
720
+ min-width: 20px;
721
+ min-height: 20px;
722
+ box-sizing: content-box;
503
723
  border-radius: var(
504
- --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
505
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
724
+ --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
725
+ var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
506
726
  );
507
- box-shadow: var(
508
- --_show-shadow-im-se,
509
- var(
510
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-ae,
511
- var(
512
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae,
513
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae)
514
- )
515
- )
516
- var(
517
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-br,
518
- var(
519
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-br,
520
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-br)
521
- )
522
- )
523
- var(
524
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-sd,
525
- var(
526
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-sd,
527
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-sd)
528
- )
529
- )
530
- var(
531
- --_ctm-mob-dn-se-on-ve-se-sd-se-sw-cr,
532
- var(
533
- --_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr,
534
- var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr)
535
- )
536
- )
727
+
728
+ border-color: var(
729
+ --_sf-hr-br-cr,
730
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
537
731
  );
732
+
538
733
  background-color: var(
539
- --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
540
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
734
+ --_sf-hr-bd-cr,
735
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
541
736
  );
542
- color: var(
543
- --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
544
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
737
+ border-style: var(
738
+ --_sf-hr-br-se,
739
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
545
740
  );
546
- font-family: var(
547
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
548
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
549
- ),
741
+ border-width: var(
742
+ --_sf-hr-br-wh,
743
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
744
+ );
745
+
746
+ box-shadow: var(
747
+ --_sf-hr-sw-ae,
748
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
749
+ )
750
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
751
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
752
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
753
+
754
+ // font is pending
755
+
756
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
757
+ font-family:
758
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
550
759
  sans-serif;
551
760
  font-size: var(
552
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
553
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
761
+ --_sf-hr-ft-se,
762
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
554
763
  );
555
764
  font-weight: var(
556
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
557
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
765
+ --_sf-hr-ft-wt,
766
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
558
767
  );
559
768
  font-style: var(
560
- --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
561
- var(
562
- --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
563
- var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
564
- )
769
+ --_sf-hr-ft-se-ic,
770
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
565
771
  );
566
772
  text-align: var(
567
- --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
568
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
773
+ --_sf-hr-tt-an,
774
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
569
775
  );
570
776
  letter-spacing: var(
571
- --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
572
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
777
+ --_sf-hr-lr-sg,
778
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
573
779
  );
574
780
  line-height: var(
575
- --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
576
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
781
+ --_sf-hr-le-ht,
782
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
577
783
  );
578
784
  text-decoration: var(
579
- --_ctm-mob-dn-se-on-ve-se-sd-se-ue,
580
- var(--_ctm-tab-dn-se-on-ve-se-sd-se-ue, var(--_ctm-dn-se-on-ve-se-sd-se-ue))
785
+ --_sf-hr-ue,
786
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
581
787
  );
582
- }
583
- &.selected__child {
584
- border: 0px;
585
- border-bottom: 2px solid var(--_primary-400);
586
- }
587
- &.disabled {
588
- cursor: not-allowed;
589
- opacity: 0.4;
590
- position: relative;
591
- &::after {
592
- content: "X";
593
- position: absolute;
594
- top: -5px;
595
- left: 50%;
596
- transform: translateX(-50%);
597
- font-size: 30px;
598
- color: #f55d42;
788
+
789
+ &[data-background-shape="circle"] {
790
+ border-radius: 50%;
791
+ }
792
+ &[data-background-shape="square"] {
793
+ border-radius: 5px;
794
+ }
795
+ &[data-background-shape="capsule"] {
796
+ border-radius: 40px; /* Full pill shape */
797
+ box-sizing: border-box;
599
798
  }
600
- }
601
- }
602
- }
603
- }
604
- //Dropdown
605
- .est__dropdown__main {
606
- position: relative;
607
- width: 100%;
608
- margin-top: 10px;
609
799
 
610
- label {
611
- font-size: 14px;
612
- color: var(--_gray-700);
613
- margin-bottom: 8px;
614
- display: block;
615
- }
800
+ &:hover {
801
+ --_sf-hr-bd-cr: var(
802
+ --_ctm-mob-dn-se-on-ve-se-hr-se-bd-cr,
803
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-se-on-ve-se-hr-se-bd-cr))
804
+ );
805
+ --_sf-hr-br-cr: var(
806
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-cr,
807
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-cr, var(--_ctm-dn-se-on-ve-se-hr-se-br-cr))
808
+ );
809
+ --_sf-hr-br-se: var(
810
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-se,
811
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-se, var(--_ctm-dn-se-on-ve-se-hr-se-br-se))
812
+ );
813
+ --_sf-hr-br-wh: var(
814
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-wh,
815
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-wh, var(--_ctm-dn-se-on-ve-se-hr-se-br-wh))
816
+ );
817
+ --_sf-hr-br-bs: var(
818
+ --_ctm-mob-dn-se-on-ve-se-hr-se-br-rs,
819
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-br-rs, var(--_ctm-dn-se-on-ve-se-hr-se-br-rs))
820
+ );
616
821
 
617
- .est__dropdown {
618
- cursor: pointer;
619
- position: relative;
620
- color: var(--_gray-700);
822
+ // new
823
+ --_sf-hr-sw-ae: var(
824
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
825
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae))
826
+ );
827
+ --_sf-hr-sw-br: var(
828
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
829
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br))
830
+ );
831
+ --_sf-hr-sw-hr: var(
832
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
833
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr))
834
+ );
835
+ --_sf-hr-sw-cr: var(
836
+ --_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
837
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr))
838
+ );
621
839
 
622
- border-radius: 6px;
623
- background-color: #fff;
624
- display: flex;
625
- justify-content: space-between;
626
- align-items: center;
627
- width: 100%;
628
- .value__selected {
629
- width: 100%;
630
- }
840
+ // for font
631
841
 
632
- &.open .list {
633
- display: flex;
634
- }
842
+ --_sf-hr-cr: var(
843
+ --_ctm-mob-dn-se-on-ve-se-hr-se-cr,
844
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
845
+ );
846
+ --_sf-hr-ft-fy: var(
847
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
848
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
849
+ );
850
+ --_sf-hr-ft-se: var(
851
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
852
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
853
+ );
854
+ --_sf-hr-ft-wt: var(
855
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
856
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
857
+ );
858
+ --_sf-hr-ft-se-ic: var(
859
+ --_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
860
+ var(
861
+ --_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
862
+ var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
863
+ )
864
+ );
865
+ --_sf-hr-tt-an: var(
866
+ --_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
867
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
868
+ );
869
+ --_sf-hr-lr-sg: var(
870
+ --_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
871
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
872
+ );
873
+ --_sf-hr-le-ht: var(
874
+ --_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
875
+ var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
876
+ );
635
877
 
636
- .list {
637
- display: none;
638
- flex-direction: column;
639
- border: 1px solid var(--_gray-200);
640
- border-radius: 6px;
641
- position: absolute;
642
- top: 100%;
643
- left: 0;
644
- width: 100%;
645
- background-color: #fff;
878
+ --_sf-hr-ue: var(
879
+ --_ctm-mob-dn-on-ve-se-hr-se-ue,
880
+ var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
881
+ );
882
+ }
883
+
884
+ &.child {
885
+ border: 0;
886
+ border-radius: 0;
887
+ border-bottom: 2px solid var(--_gray-200);
888
+ }
889
+ &[data-selected="true"] {
890
+ --_sf-sd-bd-cr: var(
891
+ --_ctm-mob-dn-se-on-ve-se-sd-se-bd-cr,
892
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-se-on-ve-se-sd-se-bd-cr))
893
+ );
894
+ --_sf-sd-br-cr: var(
895
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-cr,
896
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-cr, var(--_ctm-dn-se-on-ve-se-sd-se-br-cr))
897
+ );
898
+ --_sf-sd-br-se: var(
899
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-se,
900
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-se, var(--_ctm-dn-se-on-ve-se-sd-se-br-se))
901
+ );
902
+ --_sf-sd-br-wh: var(
903
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-wh,
904
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-wh, var(--_ctm-dn-se-on-ve-se-sd-se-br-wh))
905
+ );
906
+ --_sf-sd-br-bs: var(
907
+ --_ctm-mob-dn-se-on-ve-se-sd-se-br-rs,
908
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-br-rs, var(--_ctm-dn-se-on-ve-se-sd-se-br-rs))
909
+ );
910
+
911
+ // new
912
+ --_sf-sd-sw-ae: var(
913
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-ae,
914
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-ae, var(--_ctm-dn-se-on-ve-se-sd-se-sw-ae))
915
+ );
916
+ --_sf-sd-sw-br: var(
917
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-br,
918
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-br, var(--_ctm-dn-se-on-ve-se-sd-se-sw-br))
919
+ );
920
+ --_sf-sd-sw-hr: var(
921
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-hr,
922
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-hr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-hr))
923
+ );
924
+ --_sf-sd-sw-cr: var(
925
+ --_ctm-mob-dn-on-ve-se-sd-se-sw-cr,
926
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
927
+ );
928
+
929
+ // for font
930
+
931
+ --_sf-sd-cr: var(
932
+ --_ctm-mob-dn-se-on-ve-se-sd-se-cr,
933
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
934
+ );
935
+ --_sf-sd-ft-fy: var(
936
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
937
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
938
+ );
939
+ --_sf-sd-ft-se: var(
940
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
941
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
942
+ );
943
+ --_sf-sd-ft-wt: var(
944
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
945
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
946
+ );
947
+ --_sf-sd-ft-se-ic: var(
948
+ --_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
949
+ var(
950
+ --_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
951
+ var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
952
+ )
953
+ );
954
+ --_sf-sd-tt-an: var(
955
+ --_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
956
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
957
+ );
958
+ --_sf-sd-lr-sg: var(
959
+ --_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
960
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
961
+ );
962
+ --_sf-sd-le-ht: var(
963
+ --_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
964
+ var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
965
+ );
966
+
967
+ --_sf-sd-ue: var(
968
+ --_ctm-mob-dn-on-ve-se-sd-se-ue,
969
+ var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
970
+ );
971
+
972
+ border-color: var(
973
+ --_sf-sd-br-cr,
974
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
975
+ );
976
+
977
+ background-color: var(
978
+ --_sf-sd-bd-cr,
979
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-bd-cr)
980
+ );
981
+ border-style: var(
982
+ --_sf-sd-br-se,
983
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-se)
984
+ );
985
+ border-width: var(
986
+ --_sf-sd-br-wh,
987
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-wh)
988
+ );
989
+
990
+ box-shadow: var(
991
+ --_sf-sd-sw-ae,
992
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-ae)
993
+ )
994
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
995
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
996
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
997
+ // font is pending
998
+
999
+ color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
1000
+ font-family:
1001
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
1002
+ sans-serif;
1003
+ font-size: var(
1004
+ --_sf-sd-ft-se,
1005
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
1006
+ );
1007
+ font-weight: var(
1008
+ --_sf-sd-ft-wt,
1009
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
1010
+ );
1011
+ font-style: var(
1012
+ --_sf-sd-ft-se-ic,
1013
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
1014
+ );
1015
+ text-align: var(
1016
+ --_sf-sd-tt-an,
1017
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
1018
+ );
1019
+ letter-spacing: var(
1020
+ --_sf-sd-lr-sg,
1021
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
1022
+ );
1023
+ line-height: var(
1024
+ --_sf-sd-le-ht,
1025
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
1026
+ );
1027
+ text-decoration: var(
1028
+ --_sf-sd-ue,
1029
+ prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
1030
+ );
1031
+ }
1032
+
1033
+ &.selected__child {
1034
+ border: 0px;
1035
+ border-bottom: 2px solid var(--_primary-400);
1036
+ }
1037
+ // &.disabled {
1038
+ // cursor: not-allowed;
1039
+ // opacity: 0.4;
1040
+ // position: relative;
1041
+ // overflow: hidden;
1042
+ // &::after {
1043
+ // content: "";
1044
+ // width: 172%;
1045
+ // height: 1px;
1046
+ // position: absolute;
1047
+ // background: #f00;
1048
+ // left: -14px;
1049
+ // transform: rotate(48deg);
1050
+ // /* -webkit-transform: rotate(48deg); */
1051
+ // -moz-transform: rotate(48deg);
1052
+ // top: 14px;
1053
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1054
+ // }
1055
+ // &::before {
1056
+ // content: "";
1057
+ // width: 164%;
1058
+ // height: 1px;
1059
+ // position: absolute;
1060
+ // background: #f00;
1061
+ // left: -14px;
1062
+ // transform: rotate(-48deg);
1063
+ // -webkit-transform: rotate(-48deg);
1064
+ // -moz-transform: rotate(-48deg);
1065
+ // top: 14px;
1066
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1067
+ // }
1068
+ // }
1069
+ position: relative;
1070
+
1071
+ &.disabled {
1072
+ color: #aaa;
1073
+ background-color: #f9f9f9;
1074
+ border-color: #ddd;
1075
+ cursor: not-allowed;
1076
+ overflow: hidden;
1077
+ }
1078
+
1079
+ .cross-line {
1080
+ position: absolute;
1081
+ inset: 0;
1082
+ background-color: #cccccc;
1083
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1084
+ pointer-events: none;
1085
+ }
1086
+ }
1087
+ }
1088
+ }
1089
+ &[data-show-divider="true"] {
1090
+ &:not(:last-child)::after {
1091
+ content: "";
1092
+ position: relative;
1093
+ background-color: #000;
1094
+ height: 1px;
1095
+ width: 100%;
1096
+ display: flex;
1097
+ top: calc(
1098
+ calc(
1099
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1100
+ ) /
1101
+ 2
1102
+ );
1103
+ }
1104
+ }
1105
+
1106
+ .title {
1107
+ margin-bottom: 4px;
1108
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1109
+ font-family:
1110
+ var(
1111
+ --_ctm-mob-dn-on-te-ft-fy,
1112
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1113
+ ),
1114
+ sans-serif;
1115
+ font-size: var(
1116
+ --_ctm-mob-dn-on-te-ft-se,
1117
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1118
+ );
1119
+ font-weight: var(
1120
+ --_ctm-mob-dn-on-te-ft-wt,
1121
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1122
+ );
1123
+ font-style: var(
1124
+ --_ctm-mob-dn-on-te-ft-se-ic,
1125
+ var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
1126
+ );
1127
+ text-align: var(
1128
+ --_ctm-mob-dn-on-te-tt-an,
1129
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1130
+ );
1131
+ letter-spacing: var(
1132
+ --_ctm-mob-dn-on-te-lr-sg,
1133
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1134
+ );
1135
+ line-height: var(
1136
+ --_ctm-mob-dn-on-te-le-ht,
1137
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1138
+ );
1139
+ text-decoration: var(
1140
+ --_ctm-mob-dn-on-te-ue,
1141
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1142
+ );
1143
+ }
1144
+ }
1145
+ //Dropdown
1146
+ .est__dropdown__main {
1147
+ position: relative;
1148
+ width: 100%;
1149
+ display: flex;
1150
+ flex-direction: column;
1151
+ gap: var(
1152
+ --_ctm-mob-lt-on-te-ve-sg,
1153
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-dn-lt-on-te-ve-sg))
1154
+ );
1155
+
1156
+ padding: var(
1157
+ --_ctm-mob-lt-dn-dy-se-dn-os-pg,
1158
+ var(--_ctm-tab-lt-dn-dy-se-dn-os-pg, var(--_ctm-dn-lt-dn-dy-se-dn-os-pg))
1159
+ );
1160
+
1161
+ margin-top: 10px;
1162
+
1163
+ label {
1164
+ font-size: var(
1165
+ --_ctm-mob-dn-on-te-ft-se,
1166
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1167
+ );
1168
+ font-family: var(
1169
+ --_ctm-mob-dn-on-te-ft-fy,
1170
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1171
+ );
1172
+ color: var(
1173
+ --_ctm-mob-dn-on-te-cr,
1174
+ var(--_ctm-tab-dn-on-te-cr, var(--_gray-700, var(--_ctm-dn-on-te-cr)))
1175
+ );
1176
+ font-weight: var(
1177
+ --_ctm-mob-dn-on-te-ft-wt,
1178
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1179
+ );
1180
+ text-decoration: var(
1181
+ --_ctm-mob-dn-on-te-ue,
1182
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1183
+ );
1184
+ letter-spacing: var(
1185
+ --_ctm-mob-dn-on-te-lr-sg,
1186
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1187
+ );
1188
+ text-align: var(
1189
+ --_ctm-mob-dn-on-te-tt-an,
1190
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1191
+ );
1192
+ line-height: var(
1193
+ --_ctm-mob-dn-on-te-le-ht,
1194
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1195
+ );
1196
+ display: block;
1197
+ }
1198
+
1199
+ .est__dropdown {
1200
+ cursor: pointer;
1201
+ position: relative;
1202
+ color: var(--_gray-700);
1203
+
1204
+ border-radius: 6px;
1205
+ background-color: #fff;
1206
+ display: flex;
1207
+ justify-content: space-between;
1208
+ align-items: center;
1209
+ width: 100%;
1210
+ .value__selected {
1211
+ width: 100%;
1212
+ }
1213
+
1214
+ &.open .list {
1215
+ display: none;
1216
+ margin-top: var(
1217
+ --_ctm-mob-lt-dn-dy-se-on-ad-lt-sg,
1218
+ var(--_ctm-tab-lt-dn-dy-se-on-ad-lt-sg, var(--_ctm-lt-dn-dy-se-on-ad-lt-sg))
1219
+ );
1220
+ gap: var(
1221
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1222
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1223
+ );
1224
+ background-color: var(
1225
+ --_ctm-mob-dn-dn-se-bd-cr,
1226
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1227
+ );
1228
+ }
1229
+
1230
+ .list {
1231
+ display: flex !important;
1232
+ flex-direction: column;
1233
+ gap: var(
1234
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1235
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-dn-dy-se-dn-lt-im-sg))
1236
+ );
1237
+ border: var(
1238
+ --_ctm-mob-dn-dn-se-br-wh,
1239
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
1240
+ )
1241
+ var(
1242
+ --_ctm-mob-dn-dn-se-br-se,
1243
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
1244
+ )
1245
+ var(
1246
+ --_gray-200,
1247
+ var(
1248
+ --_ctm-mob-dn-dn-se-br-cr,
1249
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
1250
+ )
1251
+ );
1252
+ border-radius: var(
1253
+ --_ctm-mob-dn-dn-se-br-rs,
1254
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
1255
+ );
1256
+ box-shadow: var(
1257
+ --_show-shadow-dn-se,
1258
+ var(
1259
+ --_ctm-mob-dn-dn-se-sw-ae,
1260
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
1261
+ )
1262
+ var(
1263
+ --_ctm-mob-dn-dn-se-sw-br,
1264
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
1265
+ )
1266
+ var(
1267
+ --_ctm-mob-dn-dn-se-sw-sd,
1268
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
1269
+ )
1270
+ var(
1271
+ --_ctm-mob-dn-dn-se-sw-cr,
1272
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
1273
+ )
1274
+ );
1275
+ position: absolute;
1276
+ top: 100%;
1277
+ left: 0;
1278
+ width: 100%;
1279
+ background-color: var(
1280
+ --_ctm-mob-dn-dn-se-bd-cr,
1281
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
1282
+ );
646
1283
  border-radius: 4px;
647
1284
  z-index: var(--_higher-zIndex);
648
1285
  max-height: 200px;
@@ -654,13 +1291,17 @@
654
1291
  }
655
1292
 
656
1293
  .list__option {
657
- padding: 12px;
1294
+ padding: var(
1295
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-pg,
1296
+ var(--_ctm-tab-lt-dn-dy-se-dn-lt-im-pg, var(--_ctm-lt-dn-dy-se-dn-lt-im-pg))
1297
+ );
658
1298
  cursor: pointer;
659
1299
 
660
1300
  &:hover {
661
1301
  background-color: var(--_primary-25);
662
1302
  color: var(--_primary-400);
663
1303
  }
1304
+
664
1305
  &.disabled {
665
1306
  cursor: not-allowed;
666
1307
  opacity: 0.4;
@@ -669,6 +1310,7 @@
669
1310
  }
670
1311
  }
671
1312
  }
1313
+
672
1314
  // variant dropdown selection
673
1315
  .var__drop__selection {
674
1316
  display: flex;
@@ -680,9 +1322,59 @@
680
1322
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg, var(--_ctm-lt-im-sg))
681
1323
  )
682
1324
  );
1325
+
683
1326
  flex-direction: row;
684
1327
  &[data-dropdown-style="Vertical List"] {
685
1328
  flex-direction: column;
1329
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1330
+ }
1331
+ .dropdown_wrapper {
1332
+ position: relative;
1333
+ &[data-show-divider="true"] {
1334
+ &:not(:last-child)::after {
1335
+ content: "";
1336
+ position: relative;
1337
+ background-color: #000;
1338
+ height: 1px;
1339
+ width: 100%;
1340
+ display: flex;
1341
+ top: calc(
1342
+ calc(
1343
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1344
+ ) /
1345
+ 2
1346
+ );
1347
+ }
1348
+ }
1349
+
1350
+ &[data-show-item-divider="true"] {
1351
+ .est__dropdown__main {
1352
+ .est__dropdown {
1353
+ .list {
1354
+ :not(:last-child).list__option {
1355
+ &::after {
1356
+ content: "";
1357
+ position: relative;
1358
+ background-color: #000;
1359
+ height: 1px;
1360
+ width: 100%;
1361
+ display: flex;
1362
+ top: calc(
1363
+ var(
1364
+ --_ctm-mob-lt-dn-dy-se-dn-lt-im-sg,
1365
+ var(
1366
+ --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1367
+ var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1368
+ )
1369
+ ) /
1370
+ 2
1371
+ );
1372
+ }
1373
+ }
1374
+ }
1375
+ }
1376
+ }
1377
+ }
686
1378
  }
687
1379
  & > div {
688
1380
  width: 100%;
@@ -690,6 +1382,9 @@
690
1382
  }
691
1383
  // Quantity Fields
692
1384
  .field__group {
1385
+ // display: flex;
1386
+ // flex-wrap: wrap;
1387
+ // gap: 8px;
693
1388
  display: grid;
694
1389
  grid-template-columns: repeat(
695
1390
  auto-fit,
@@ -701,7 +1396,10 @@
701
1396
  var(--_ctm-mob-var-lt-mn-cn-wh)
702
1397
  )
703
1398
  );
704
- gap: 8px;
1399
+ gap: var(
1400
+ --_ctm-mob-lt-gd-os-dy-se-tb-rw-sg,
1401
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-rw-sg, var(--_ctm-lt-gd-os-dy-se-tb-rw-sg))
1402
+ );
705
1403
  .field__group__item {
706
1404
  font-size: 16px;
707
1405
  display: flex;
@@ -711,6 +1409,7 @@
711
1409
  gap: 8px;
712
1410
  input[type="number"] {
713
1411
  // width: 70px !important;
1412
+ width: 100%;
714
1413
  border: 1px solid var(--_gray-300);
715
1414
  padding-inline: 10px;
716
1415
  border-radius: 4px;
@@ -731,7 +1430,15 @@
731
1430
  .quantiy__details {
732
1431
  display: flex;
733
1432
  flex-direction: column;
734
- gap: 20px;
1433
+ gap: var(
1434
+ --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1435
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1436
+ );
1437
+ padding: var(
1438
+ --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1439
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1440
+ );
1441
+
735
1442
  .title {
736
1443
  display: flex;
737
1444
  justify-content: space-between;
@@ -749,6 +1456,16 @@
749
1456
  flex-direction: column;
750
1457
  gap: 12px;
751
1458
  .fit__desc {
1459
+ display: flex;
1460
+ flex-direction: column;
1461
+ gap: var(
1462
+ --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1463
+ var(
1464
+ --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1465
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1466
+ )
1467
+ );
1468
+
752
1469
  font-size: 16px;
753
1470
  color: var(--_gray-900);
754
1471
  .each__price {
@@ -760,154 +1477,354 @@
760
1477
  .grouped_items {
761
1478
  display: flex;
762
1479
  flex-direction: column;
763
- gap: var(
764
- --_ctm-mob-lt-gd-os-dy-se-gp-sg,
765
- var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
766
- );
767
- padding: var(
768
- --_ctm-mob-lt-gd-os-dy-se-gp-pg,
769
- var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
770
- );
771
- }
772
- // tabs
773
- .tabs__container {
774
- display: flex;
775
- position: relative;
776
- .tab {
777
- flex: 1;
778
- padding-block: 20px;
779
- font-weight: 600;
780
- text-align: center;
781
- cursor: pointer;
782
- position: relative;
783
- &.tab__active {
784
- font-weight: bold;
785
- }
786
- }
787
- .tab__active-indicator {
788
- position: absolute;
789
- bottom: 0;
790
- left: 0;
791
- height: 2px;
792
- background-color: #000;
793
- transition:
794
- left 0.3s ease,
795
- width 0.3s ease;
796
- }
797
- }
1480
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
798
1481
 
799
- // accordion tabs
800
- .tab__accordion {
801
- display: flex;
802
- flex-direction: column;
803
- .tab__container {
804
- .tab {
1482
+ .tab__accordion {
1483
+ display: flex;
1484
+ flex-direction: column;
1485
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
1486
+
1487
+ .tab__container {
805
1488
  display: flex;
806
- padding-inline: 2px;
807
- position: relative;
808
- cursor: pointer;
809
- flex-direction: row;
810
- &[data-expand-icon="Left"] {
811
- flex-direction: row-reverse;
812
- justify-content: flex-end;
1489
+ flex-direction: column;
1490
+
1491
+ .tab {
1492
+ &:first-child {
1493
+ margin-bottom: var(
1494
+ --_ctm-mob-lt-on-te-ve-sg,
1495
+ var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
1496
+ );
1497
+ }
813
1498
  }
814
- &[data-item-dividers="true"] {
815
- &::after {
816
- content: "";
817
- position: absolute;
818
- bottom: 0;
819
- height: 2px;
820
- width: 100%;
821
- border-bottom: 1px solid var(--_gray-200);
1499
+
1500
+ .tab__content {
1501
+ display: flex;
1502
+ flex-direction: column;
1503
+ padding: var(
1504
+ --_ctm-mob-lt-gd-os-dy-se-gp-pg,
1505
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-pg, var(--_ctm-lt-gd-os-dy-se-gp-pg))
1506
+ );
1507
+
1508
+ .field__group {
1509
+ gap: var(
1510
+ --_ctm-mob-lt-gd-os-dy-se-gp-sg,
1511
+ var(--_ctm-tab-lt-gd-os-dy-se-gp-sg, var(--_ctm-lt-gd-os-dy-se-gp-sg))
1512
+ );
1513
+
1514
+ .field__group__item {
1515
+ gap: var(
1516
+ --_ctm-mob-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1517
+ var(
1518
+ --_ctm-tab-lt-gd-os-dy-se-gp-hr-ad-on-sg,
1519
+ var(--_ctm-lt-gd-os-dy-se-gp-hr-ad-on-sg)
1520
+ )
1521
+ );
1522
+ }
822
1523
  }
823
1524
  }
824
- span {
825
- padding-block: 12px;
826
- display: inline-block;
1525
+ }
1526
+ }
1527
+
1528
+ &[data-show-divider="true"] {
1529
+ & > div {
1530
+ &:not(:last-child)::after {
1531
+ content: "";
1532
+ position: relative;
1533
+ background-color: #000;
1534
+ height: 1px;
1535
+ width: 100%;
1536
+ display: flex;
1537
+ top: calc(
1538
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1539
+ );
827
1540
  }
828
- .active {
829
- border-bottom: 2px solid var(--_primary-400);
1541
+ }
1542
+
1543
+ .tab__accordion {
1544
+ &:not(:last-child)::after {
1545
+ content: "";
1546
+ position: relative;
1547
+ background-color: #000;
1548
+ height: 1px;
1549
+ width: 100%;
1550
+ display: flex;
1551
+ top: calc(
1552
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1553
+ );
830
1554
  }
831
- &.inactive {
832
- height: 0px;
1555
+ }
1556
+ }
1557
+ }
1558
+ // tabs
1559
+ .tabs__container {
1560
+ display: flex;
1561
+ position: relative;
1562
+ .tab {
1563
+ flex: 1;
1564
+ padding-block: 20px;
1565
+ font-weight: 600;
1566
+ text-align: center;
1567
+ cursor: pointer;
1568
+ position: relative;
1569
+ &.tab__active {
1570
+ font-weight: bold;
1571
+ }
1572
+ }
1573
+ .tab__active-indicator {
1574
+ position: absolute;
1575
+ bottom: 0;
1576
+ left: 0;
1577
+ height: 2px;
1578
+ background-color: #000;
1579
+ transition:
1580
+ left 0.3s ease,
1581
+ width 0.3s ease;
1582
+ }
1583
+ }
1584
+
1585
+ // accordion tabs
1586
+ .tab__accordion_wrapper {
1587
+ .tab__accordion {
1588
+ display: flex;
1589
+ flex-direction: column;
1590
+ padding: var(
1591
+ --_ctm-mob-lt-gd-os-dy-se-cr-pg,
1592
+ var(--_ctm-tab-lt-gd-os-dy-se-cr-pg, var(--_ctm-lt-gd-os-dy-se-cr-pg))
1593
+ );
1594
+
1595
+ .tab__container {
1596
+ display: flex;
1597
+ flex-direction: column;
1598
+ gap: var(
1599
+ --_ctm-mob-lt-gd-os-dy-se-an-sg,
1600
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1601
+ );
1602
+
1603
+ .tab_acc_wrapper {
1604
+ display: flex;
1605
+ flex-direction: column;
1606
+ gap: var(
1607
+ --_ctm-mob-lt-gd-os-dy-se-an-ad-cr-sg,
1608
+ var(--_ctm-tab-lt-gd-os-dy-se-an-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-an-ad-cr-sg))
1609
+ );
1610
+
1611
+ padding: var(
1612
+ --_ctm-mob-lt-gd-os-dy-se-an-vl-pg,
1613
+ var(--_ctm-tab-lt-gd-os-dy-se-an-vl-pg, var(--_ctm-lt-gd-os-dy-se-an-vl-pg))
1614
+ )
1615
+ var(
1616
+ --_ctm-mob-lt-gd-os-dy-se-an-hl-pg,
1617
+ var(--_ctm-tab-lt-gd-os-dy-se-an-hl-pg, var(--_ctm-lt-gd-os-dy-se-an-hl-pg))
1618
+ );
1619
+
1620
+ .tab {
1621
+ display: flex;
1622
+ padding-inline: 2px;
1623
+ position: relative;
1624
+ cursor: pointer;
1625
+ flex-direction: row;
1626
+ &[data-expand-icon="Left"] {
1627
+ flex-direction: row-reverse;
1628
+ justify-content: flex-end;
1629
+ }
1630
+ &[data-item-dividers="true"] {
1631
+ &::after {
1632
+ content: "";
1633
+ position: absolute;
1634
+ bottom: 0;
1635
+ height: 2px;
1636
+ width: 100%;
1637
+ border-bottom: 1px solid var(--_gray-200);
1638
+ }
1639
+ }
1640
+ span {
1641
+ padding-block: 12px;
1642
+ display: inline-block;
1643
+ }
1644
+ .active {
1645
+ border-bottom: 2px solid var(--_primary-400);
1646
+ }
1647
+ &.inactive {
1648
+ height: 0px;
1649
+ }
1650
+ }
1651
+ .tab__content {
1652
+ &.d-none {
1653
+ display: none;
1654
+ }
1655
+ &.d-block {
1656
+ display: block;
1657
+ }
1658
+ }
833
1659
  }
834
1660
  }
835
- .tab__content {
836
- padding-block: 20px;
837
- &.d-none {
838
- display: none;
1661
+ }
1662
+
1663
+ &[data-show-dividers="true"] {
1664
+ .tab__accordion {
1665
+ .tab__container {
1666
+ .tab_acc_wrapper {
1667
+ &:not(:last-child)::after {
1668
+ content: "";
1669
+ position: relative;
1670
+ background-color: #000;
1671
+ height: 1px;
1672
+ width: 100%;
1673
+ display: flex;
1674
+ top: calc(
1675
+ var(
1676
+ --_ctm-mob-lt-gd-os-dy-se-an-sg,
1677
+ var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1678
+ ) /
1679
+ 2
1680
+ );
1681
+ }
1682
+ }
839
1683
  }
840
- &.d-block {
841
- display: block;
1684
+ }
1685
+ }
1686
+
1687
+ &[data-icon-position="Left"] {
1688
+ .tab__accordion {
1689
+ .tab__container {
1690
+ .tab_acc_wrapper {
1691
+ .tab {
1692
+ flex-direction: row-reverse;
1693
+ align-self: flex-start;
1694
+ }
1695
+ }
842
1696
  }
843
1697
  }
844
1698
  }
845
1699
  }
1700
+
846
1701
  // table
847
- .table__class {
848
- display: flex;
849
- align-items: center;
850
- border: 1px solid var(--_gray-200);
851
- border-radius: 8px;
852
- .y-axis-caption {
853
- writing-mode: vertical-rl; /* Rotate text for vertical display */
854
- transform: rotate(180deg); /* Flip the text */
855
- }
856
- .custom__table {
1702
+
1703
+ .table_container,
1704
+ .tab__content {
1705
+ .table__class {
857
1706
  border: 1px solid var(--_gray-200);
858
- width: 100%;
859
- table-layout: fixed;
860
- // height: 300px;
861
-
862
- border-collapse: collapse;
863
- thead {
864
- th {
865
- text-align: center;
866
- padding: 12px 20px;
867
- background-color: var(--_gray-50);
868
- font-weight: 600;
869
- color: var(--_gray-600);
870
- border-right: 1px solid var(--_gray-200);
871
- height: var(
872
- --_ctm-mob-lt-mx-dy-se-hr-ht,
873
- var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht))
874
- );
1707
+ border-radius: 8px;
1708
+ .custom__table {
1709
+ border: 1px solid var(--_gray-200);
1710
+ width: 100%;
1711
+ table-layout: fixed;
1712
+ // height: 300px;
875
1713
 
876
- word-break: break-word;
1714
+ border-collapse: collapse;
1715
+ &[data-header-divider="true"] {
1716
+ thead tr th {
1717
+ border-bottom: 1px solid var(--_gray-200);
1718
+ }
877
1719
  }
878
- }
879
- tbody {
880
- tr {
881
- border-bottom: 1px solid var(--_gray-200);
882
- td {
883
- text-align: center;
884
- padding: 12px 20px;
1720
+ &[data-row-divider="true"] {
1721
+ tbody tr td {
1722
+ border-bottom: 1px solid var(--_gray-200);
1723
+ }
1724
+ }
1725
+ &[data-column-divider="true"] {
1726
+ tbody tr td,
1727
+ thead tr th {
885
1728
  border-right: 1px solid var(--_gray-200);
886
- .disocunted__price {
887
- color: var(--_gray-900);
888
- }
889
- .qty__input {
890
- border: 1px solid var(--_gray-200);
891
- padding-inline: 10px;
892
- display: flex;
893
- justify-content: center;
894
- align-items: center;
895
- border-radius: 6px;
896
- height: 40px;
897
- &:focus-within {
898
- border: 1px solid var(--_primary-200);
899
- box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1729
+ }
1730
+
1731
+ tbody tr td:last-child,
1732
+ thead tr th:last-child {
1733
+ border-right: none;
1734
+ }
1735
+ }
1736
+ &[data-alternative-row-colors="true"] {
1737
+ tbody tr:nth-child(odd) {
1738
+ background-color: var(--_gray-300);
1739
+ width: 100%;
1740
+ }
1741
+ }
1742
+ thead {
1743
+ height: var(
1744
+ --_ctm-mob-lt-te-dy-se-hr-ht,
1745
+ var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1746
+ );
1747
+ th {
1748
+ height: var(
1749
+ --_ctm-mob-lt-te-dy-se-hr-ht,
1750
+ var(--_ctm-tab-lt-te-dy-se-hr-ht, var(--_ctm-lt-te-dy-se-hr-ht))
1751
+ );
1752
+ text-align: var(
1753
+ --_ctm-mob-lt-te-dy-se-ct-at,
1754
+ var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1755
+ );
1756
+ padding: var(
1757
+ --_ctm-mob-lt-te-dy-se-hr-cl-pg,
1758
+ var(--_ctm-tab-lt-te-dy-se-hr-cl-pg, var(--_ctm-lt-te-dy-se-hr-cl-pg))
1759
+ );
1760
+ background-color: var(--_gray-50);
1761
+ font-weight: 600;
1762
+ color: var(--_gray-600);
1763
+ word-break: break-word;
1764
+ }
1765
+ }
1766
+
1767
+ tbody {
1768
+ tr {
1769
+ border-bottom: 1px solid var(--_gray-200);
1770
+ height: var(
1771
+ --_ctm-mob-lt-te-dy-se-rw-ht,
1772
+ var(--_ctm-tab-lt-te-dy-se-rw-ht, var(--_ctm-lt-te-dy-se-rw-ht))
1773
+ );
1774
+ td {
1775
+ text-align: var(
1776
+ --_ctm-mob-lt-te-dy-se-ct-at,
1777
+ var(--_ctm-tab-lt-te-dy-se-ct-at, var(--_ctm-lt-te-dy-se-ct-at))
1778
+ );
1779
+ padding: var(
1780
+ --_ctm-mob-lt-te-dy-se-rw-cl-pg,
1781
+ var(--_ctm-tab-lt-te-dy-se-rw-cl-pg, var(--_ctm-lt-te-dy-se-rw-cl-pg))
1782
+ );
1783
+ .disocunted__price {
1784
+ color: var(--_gray-900);
900
1785
  }
901
- &:disabled {
902
- cursor: not-allowed;
903
- opacity: 0.4;
1786
+ .actual__price {
1787
+ color: var(--_gray-500);
1788
+ }
1789
+ .qty__input {
1790
+ border: 1px solid var(--_gray-200);
1791
+ padding-inline: 10px;
1792
+ text-align: center;
1793
+ border-radius: 6px;
1794
+ height: 40px;
1795
+ }
1796
+ input[type="number"] {
1797
+ &:focus-within {
1798
+ border: 1px solid var(--_primary-200);
1799
+ box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
1800
+ }
1801
+ &:disabled {
1802
+ cursor: not-allowed;
1803
+ opacity: 0.4;
1804
+ }
904
1805
  }
905
1806
  }
906
1807
  }
907
1808
  }
908
1809
  }
909
1810
  }
1811
+ &[data-show-divider="true"] {
1812
+ & > div {
1813
+ &:not(:last-child)::after {
1814
+ content: "";
1815
+ position: relative;
1816
+ background-color: #000;
1817
+ height: 1px;
1818
+ width: 100%;
1819
+ display: flex;
1820
+ top: calc(
1821
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) / 2
1822
+ );
1823
+ }
1824
+ }
1825
+ }
910
1826
  }
1827
+
911
1828
  // horizontal tabs
912
1829
  .tabs__main {
913
1830
  &.tabs__vertical {
@@ -921,6 +1838,11 @@
921
1838
  &.tabs__hr {
922
1839
  .tabs {
923
1840
  flex-direction: column;
1841
+ gap: var(
1842
+ --_ctm-mob-lt-gd-os-dy-se-tb-ad-cr-sg,
1843
+ var(--_ctm-tab-lt-gd-os-dy-se-tb-ad-cr-sg, var(--_ctm-lt-gd-os-dy-se-tb-ad-cr-sg))
1844
+ );
1845
+
924
1846
  .tabs__container {
925
1847
  width: 100%;
926
1848
  }
@@ -939,7 +1861,7 @@
939
1861
  --_ctm-mob-lt-gd-os-dy-se-tb-sg,
940
1862
  var(--_ctm-tab-lt-gd-os-dy-se-tb-sg, var(--_ctm-lt-gd-os-dy-se-tb-sg))
941
1863
  );
942
- background-color: var(--_gray-100);
1864
+
943
1865
  .tab {
944
1866
  display: flex;
945
1867
  justify-content: var(--_tab-aliginment);
@@ -1003,6 +1925,7 @@
1003
1925
  --_ctm-mob-lt-dn-tb-im-se-dt-se-br-rs,
1004
1926
  var(--_ctm-tab-lt-dn-tb-im-se-dt-se-br-rs)
1005
1927
  );
1928
+
1006
1929
  &:hover {
1007
1930
  background-color: var(
1008
1931
  --_ctm-mob-lt-dn-tb-im-se-hr-se-bd-cr,
@@ -1053,6 +1976,7 @@
1053
1976
  )
1054
1977
  );
1055
1978
  }
1979
+
1056
1980
  &.active {
1057
1981
  background-color: var(
1058
1982
  --_ctm-mob-lt-dn-tb-im-se-sd-se-bd-cr,
@@ -1103,11 +2027,6 @@
1103
2027
  )
1104
2028
  );
1105
2029
  }
1106
- // span {
1107
- // &.active {
1108
- // // border-bottom: 2px solid var(--_primary-400);
1109
- // }
1110
- // }
1111
2030
  }
1112
2031
  }
1113
2032
  .tab__content {
@@ -1118,6 +2037,1069 @@
1118
2037
  }
1119
2038
  }
1120
2039
  }
2040
+
2041
+ // embla
2042
+
2043
+ .embla {
2044
+ width: 100%;
2045
+ height: 100%;
2046
+ position: relative;
2047
+ display: flex;
2048
+ flex-direction: column;
2049
+
2050
+ // overflow: hidden;
2051
+
2052
+ .embla__viewport {
2053
+ width: 100%;
2054
+ height: 100%;
2055
+ position: relative;
2056
+ display: flex;
2057
+ flex-direction: column;
2058
+
2059
+ overflow: hidden;
2060
+
2061
+ .embla__container {
2062
+ width: 100%;
2063
+ height: 100%;
2064
+ display: flex;
2065
+ grid-template-rows: 100%;
2066
+ // grid-template-columns: 100%;
2067
+ // grid-template-columns: repeat(
2068
+ // var(--_ctm-lt-is-pr-se),
2069
+ // calc(100% / var(--_ctm-lt-is-pr-se))
2070
+ // );
2071
+ // grid-auto-flow: column;
2072
+ gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
2073
+
2074
+ &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2075
+ height: calc(
2076
+ 100% - calc(
2077
+ var(
2078
+ --_ctm-mob-dn-pn-as-aw-se,
2079
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2080
+ ) +
2081
+ 8px
2082
+ )
2083
+ );
2084
+ }
2085
+ &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2086
+ height: calc(
2087
+ 100% - calc(
2088
+ var(
2089
+ --_ctm-mob-dn-pn-le-le-ht,
2090
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2091
+ ) +
2092
+ 20px
2093
+ )
2094
+ );
2095
+ }
2096
+ &[data-control-type="Bottom"][data-slider-control="Dots"] {
2097
+ height: calc(
2098
+ 100% - calc(
2099
+ var(
2100
+ --_ctm-mob-dn-pn-ds-dt-se,
2101
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2102
+ ) +
2103
+ 20px
2104
+ )
2105
+ );
2106
+ }
2107
+
2108
+ .embla__slide {
2109
+ // width: 100%;
2110
+ height: 100%;
2111
+ }
2112
+ }
2113
+ }
2114
+
2115
+ .arrow-navigation {
2116
+ display: flex;
2117
+ position: absolute;
2118
+ top: 50%;
2119
+ left: 50%;
2120
+ width: 100%;
2121
+ justify-content: space-between;
2122
+ transform: translate(-50%, -50%);
2123
+ // padding-left: 20px;
2124
+ &[data-control-type="Side"] {
2125
+ .left-button,
2126
+ .right-button {
2127
+ background-color: transparent;
2128
+ }
2129
+ }
2130
+ &[data-background-shape="Round"] {
2131
+ .left-button,
2132
+ .right-button {
2133
+ background-color: #f2f5f5;
2134
+ box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2135
+ }
2136
+ }
2137
+ &[data-control-type="Bottom-Overflow"] {
2138
+ transform: translateX(-50%);
2139
+ width: 100%;
2140
+ justify-content: center;
2141
+ gap: 12px;
2142
+ top: unset;
2143
+ bottom: 6px;
2144
+ }
2145
+ &[data-control-type="Bottom"] {
2146
+ transform: unset;
2147
+ position: static;
2148
+ width: 100%;
2149
+ justify-content: center;
2150
+ gap: 12px;
2151
+ margin-top: 10px;
2152
+ }
2153
+ .left-button {
2154
+ padding: 10px;
2155
+ border-radius: 50%;
2156
+ border: none;
2157
+ width: var(
2158
+ --_ctm-mob-dn-pn-as-aw-se,
2159
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2160
+ );
2161
+ height: var(
2162
+ --_ctm-mob-dn-pn-as-aw-se,
2163
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2164
+ );
2165
+
2166
+ display: flex;
2167
+ align-items: center;
2168
+ justify-content: center;
2169
+ cursor: pointer;
2170
+ outline: none;
2171
+ margin-left: 12px;
2172
+ &:disabled {
2173
+ & svg {
2174
+ path {
2175
+ stroke: rgb(192, 192, 192);
2176
+ }
2177
+ }
2178
+ }
2179
+ }
2180
+ .right-button {
2181
+ border-radius: 50%;
2182
+ border: none;
2183
+ width: var(
2184
+ --_ctm-mob-dn-pn-as-aw-se,
2185
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2186
+ );
2187
+ height: var(
2188
+ --_ctm-mob-dn-pn-as-aw-se,
2189
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2190
+ );
2191
+
2192
+ display: flex;
2193
+ align-items: center;
2194
+ justify-content: center;
2195
+ cursor: pointer;
2196
+ outline: none;
2197
+ margin-right: 12px;
2198
+ padding: 10px;
2199
+
2200
+ &:disabled {
2201
+ & svg {
2202
+ path {
2203
+ stroke: rgb(192, 192, 192);
2204
+ }
2205
+ }
2206
+ }
2207
+ }
2208
+ .icon {
2209
+ display: flex;
2210
+ svg {
2211
+ width: calc(
2212
+ var(
2213
+ --_ctm-mob-dn-pn-as-aw-se,
2214
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2215
+ ) *
2216
+ 0.5
2217
+ );
2218
+ height: calc(
2219
+ var(
2220
+ --_ctm-mob-dn-pn-as-aw-se,
2221
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2222
+ ) *
2223
+ 0.5
2224
+ );
2225
+ path {
2226
+ stroke: var(
2227
+ --_ctm-mob-dn-pn-as-aw-cr,
2228
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
2229
+ );
2230
+ }
2231
+ }
2232
+ }
2233
+ }
2234
+
2235
+ &[data-thumbnail-placement="top"] {
2236
+ flex-direction: column-reverse;
2237
+ }
2238
+ &[data-thumbnail-placement="bottom"] {
2239
+ flex-direction: column;
2240
+ }
2241
+ &[data-thumbnail-placement="left"] {
2242
+ flex-direction: row-reverse;
2243
+
2244
+ .embla__thumbs {
2245
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2246
+
2247
+ height: 100%;
2248
+
2249
+ & .embla__thumbs__container {
2250
+ flex-direction: column;
2251
+ height: 100%;
2252
+ }
2253
+ }
2254
+ }
2255
+ &[data-thumbnail-placement="right"] {
2256
+ flex-direction: row;
2257
+ .embla__thumbs {
2258
+ width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2259
+
2260
+ height: 100%;
2261
+
2262
+ & .embla__thumbs__container {
2263
+ flex-direction: column;
2264
+ height: 100%;
2265
+ }
2266
+ }
2267
+ }
2268
+ &[data-control-type="Side"] {
2269
+ display: flex;
2270
+ align-self: center;
2271
+ flex-direction: row;
2272
+ .left-button:disabled,
2273
+ .right-button:disabled {
2274
+ display: none;
2275
+ }
2276
+ }
2277
+ .embla__dots {
2278
+ display: flex;
2279
+ flex-wrap: wrap;
2280
+ justify-content: center;
2281
+ align-items: center;
2282
+ margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2283
+ gap: 6px;
2284
+ margin-top: 16px;
2285
+
2286
+ &[data-control-type="Bottom-Overflow"] {
2287
+ position: absolute;
2288
+ bottom: 10px;
2289
+ left: 50%;
2290
+ transform: translateX(-50%);
2291
+ width: 75%;
2292
+ }
2293
+ .embla__dot {
2294
+ -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2295
+ -webkit-appearance: none;
2296
+ appearance: none;
2297
+ background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
2298
+ touch-action: manipulation;
2299
+ display: inline-flex;
2300
+ text-decoration: none;
2301
+ cursor: pointer;
2302
+ border: 0;
2303
+ padding: 0;
2304
+ margin: 0;
2305
+ // width: 0.6rem;
2306
+ // height: 0.6rem;
2307
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2308
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2309
+ display: flex;
2310
+ align-items: center;
2311
+ justify-content: center;
2312
+ border-radius: 50%;
2313
+ }
2314
+ .embla__dot:after {
2315
+ // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2316
+ width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2317
+ height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2318
+ border-radius: 50%;
2319
+ display: flex;
2320
+ align-items: center;
2321
+ content: "";
2322
+ }
2323
+ .embla__dot--selected:after {
2324
+ box-shadow: inset 0 0 0 1px var(--text-body);
2325
+ background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2326
+ }
2327
+ &[data-slider-control="Pagination Line"] {
2328
+ .embla__dot {
2329
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2330
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2331
+ background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
2332
+
2333
+ border-radius: 6px;
2334
+ }
2335
+ .embla__dot--selected:after {
2336
+ box-shadow: inset 0 0 0 1px var(--text-body);
2337
+ border-radius: 6px;
2338
+ width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2339
+ height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2340
+ // background-color: #fff;
2341
+ background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
2342
+ }
2343
+ }
2344
+ }
2345
+
2346
+ .embla__thumbs {
2347
+ width: 100%;
2348
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2349
+
2350
+ position: relative;
2351
+ display: grid;
2352
+ grid-template-columns: 1fr;
2353
+ overflow: hidden;
2354
+ // margin: 10px;
2355
+ padding: 10px;
2356
+
2357
+ .embla__thumbs__viewport {
2358
+ width: 100%;
2359
+ height: 100%;
2360
+ position: relative;
2361
+ display: flex;
2362
+ flex-direction: column;
2363
+
2364
+ overflow: hidden;
2365
+ }
2366
+ .embla__thumbs__container {
2367
+ display: flex;
2368
+ flex-direction: row;
2369
+ margin-left: calc(var(--thumbs-slide-spacing) * -1);
2370
+ gap: var(--_ctm-lt-tl-sg);
2371
+ width: 100%;
2372
+ // justify-content: center;
2373
+ // height: 200px;
2374
+
2375
+ .embla__thumbs__slide {
2376
+ min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2377
+ max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2378
+ height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2379
+ & img {
2380
+ width: 100%;
2381
+ height: 100%;
2382
+ }
2383
+ }
2384
+ }
2385
+ }
2386
+ }
2387
+
2388
+ .table__wrapper__parent {
2389
+ &[data-widget-shadow="false"] {
2390
+ .table__wrapper {
2391
+ --_show-shadow: none;
2392
+ }
2393
+ }
2394
+ &[data-widget-border="true"] {
2395
+ .table__wrapper {
2396
+ // border-color: var(
2397
+ // --_ctm-mob-dn-te-wt-br-cr,
2398
+ // var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
2399
+ // );
2400
+ // border-style: var(
2401
+ // --_ctm-mob-dn-te-wt-br-se,
2402
+ // var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
2403
+ // );
2404
+ // border-width: var(
2405
+ // --_ctm-mob-dn-te-wt-br-wh,
2406
+ // var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
2407
+ // );
2408
+ }
2409
+ }
2410
+ &[data-table-shadow="false"] {
2411
+ .table__container {
2412
+ --_show-table-shadow: none;
2413
+ }
2414
+ }
2415
+ &[data-table-border="true"] {
2416
+ .table__container {
2417
+ border-color: var(
2418
+ --_ctm-mob-dn-te-br-cr,
2419
+ var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
2420
+ );
2421
+ border-style: var(
2422
+ --_ctm-mob-dn-te-br-se,
2423
+ var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
2424
+ );
2425
+ border-width: var(
2426
+ --_ctm-mob-dn-te-br-wh,
2427
+ var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
2428
+ );
2429
+ }
2430
+ }
2431
+ &[data-loadmore-button-shadow="true"] {
2432
+ .load__more {
2433
+ box-shadow: var(
2434
+ --_ctm-mob-dn-ld-me-bn-sw-ae,
2435
+ var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
2436
+ )
2437
+ var(
2438
+ --_ctm-mob-dn-ld-me-bn-sw-br,
2439
+ var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
2440
+ )
2441
+ var(
2442
+ --_ctm-mob-ld-me-bn-sw-sd,
2443
+ var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
2444
+ )
2445
+ var(
2446
+ --_ctm-mob-dn-ld-me-bn-sw-cr,
2447
+ var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
2448
+ );
2449
+ }
2450
+ }
2451
+ &[data-loadmore-button-border="true"] {
2452
+ .load__more {
2453
+ border-color: var(
2454
+ --_sf-hr-br-cr,
2455
+ var(
2456
+ --_ctm-mob-dn-ld-me-bn-br-cr,
2457
+ var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
2458
+ )
2459
+ );
2460
+ border-style: var(
2461
+ --_sf-hr-br-st,
2462
+ var(
2463
+ --_ctm-mob-dn-ld-me-bn-br-se,
2464
+ var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
2465
+ )
2466
+ );
2467
+ border-width: var(
2468
+ --_sf-hr-br-wt,
2469
+ var(
2470
+ --_ctm-mob-dn-ld-me-bn-br-wh,
2471
+ var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
2472
+ )
2473
+ );
2474
+ }
2475
+ }
2476
+ &[data-header-divider="true"] {
2477
+ thead tr th {
2478
+ border-bottom: 1px solid
2479
+ var(
2480
+ --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
2481
+ var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
2482
+ );
2483
+ }
2484
+ }
2485
+ &[data-row-divider="true"] {
2486
+ tbody tr td {
2487
+ border-bottom: 1px solid
2488
+ var(
2489
+ --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
2490
+ var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
2491
+ );
2492
+ }
2493
+ }
2494
+ &[data-column-divider="true"] {
2495
+ tbody tr td,
2496
+ thead tr th {
2497
+ border-right: 1px solid
2498
+ var(
2499
+ --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
2500
+ var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
2501
+ );
2502
+ }
2503
+
2504
+ tbody tr td:last-child,
2505
+ thead tr th:last-child {
2506
+ border-right: none;
2507
+ }
2508
+ }
2509
+ &[data-show-more-rows="onScroll"] {
2510
+ .table__container {
2511
+ overflow-y: auto;
2512
+
2513
+ &::-webkit-scrollbar {
2514
+ width: var(
2515
+ --_ctm-mob-dn-sl-br-sl-br-wh,
2516
+ var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
2517
+ );
2518
+ }
2519
+
2520
+ &::-webkit-scrollbar-track {
2521
+ background-color: var(--_base-white);
2522
+ }
2523
+
2524
+ &::-webkit-scrollbar-thumb {
2525
+ background-color: var(
2526
+ --_ctm-mob-dn-sl-br-sl-br-cr,
2527
+ var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
2528
+ );
2529
+ }
2530
+
2531
+ // // Scrollbar thumb when hovered
2532
+ // &::-webkit-scrollbar-thumb:hover {
2533
+ // background-color: #555; // Darker color when hovering over the thumb
2534
+ // }
2535
+
2536
+ // // For Firefox, using scrollbar-width and scrollbar-color
2537
+ // scrollbar-width: thin; // Thin scrollbar
2538
+ // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
2539
+ }
2540
+ }
2541
+
2542
+ &[data-alternative-row-colors="true"] {
2543
+ tbody .tbody__row__divider:nth-child(odd) {
2544
+ background-color: #f76b6b;
2545
+ }
2546
+ }
2547
+
2548
+ .table__wrapper {
2549
+ padding: var(
2550
+ --_ctm-mob-lt-pg,
2551
+ var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg)))
2552
+ );
2553
+
2554
+ // background-color: var(
2555
+ // --_ctm-mob-dn-te-wt-bd-cr,
2556
+ // var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
2557
+ // );
2558
+
2559
+ // border-radius: var(
2560
+ // --_ctm-mob-dn-te-wt-br-rs,
2561
+ // var(--_ctm-tab-dn-te-wt-br-rs, var(--_ctm-dn-te-wt-br-rs, var(--_tst-dn-te-wt-br-rs)))
2562
+ // );
2563
+
2564
+ // box-shadow: var(
2565
+ // --_show-shadow,
2566
+ // var(--_ctm-mob-dn-te-wt-sw-ae, var(--_ctm-tab-dn-te-wt-sw-ae, var(--_ctm-dn-te-wt-sw-ae)))
2567
+ // var(
2568
+ // --_ctm-mob-dn-te-wt-sw-br,
2569
+ // var(--_ctm-tab-dn-te-wt-sw-br, var(--_ctm-dn-te-wt-sw-br))
2570
+ // )
2571
+ // var(
2572
+ // --_ctm-mob-dn-te-wt-sw-sd,
2573
+ // var(--_ctm-tab-dn-te-wt-sw-sd, var(--_ctm-dn-te-wt-sw-sd))
2574
+ // )
2575
+ // var(
2576
+ // --_ctm-mob-dn-te-wt-sw-cr,
2577
+ // var(--_ctm-tab-dn-te-wt-sw-cr, var(--_ctm-dn-te-wt-sw-cr))
2578
+ // )
2579
+ // );
2580
+
2581
+ width: 100%;
2582
+
2583
+ .table__container {
2584
+ background-color: var(
2585
+ --_ctm-mob-dn-te-bd-cr,
2586
+ var(--_ctm-tab-dn-te-bd-cr, var(--_ctm-dn-te-bd-cr))
2587
+ );
2588
+
2589
+ border-radius: var(
2590
+ --_ctm-mob-dn-te-br-rs,
2591
+ var(--_ctm-tab-dn-te-br-rs, var(--_ctm-dn-te-br-rs))
2592
+ );
2593
+
2594
+ box-shadow: var(
2595
+ --_show-table-shadow,
2596
+ var(--_ctm-mob-dn-te-sw-ae, var(--_ctm-tab-dn-te-sw-ae, var(--_ctm-dn-te-sw-ae)))
2597
+ var(--_ctm-mob-dn-te-sw-br, var(--_ctm-tab-dn-te-sw-br, var(--_ctm-dn-te-sw-br)))
2598
+ var(--_ctm-mob-dn-te-sw-sd, var(--_ctm-tab-dn-te-sw-sd, var(--_ctm-dn-te-sw-sd)))
2599
+ var(--_ctm-mob-dn-te-sw-cr, var(--_ctm-tab-dn-te-sw-cr, var(--_ctm-dn-te-sw-cr)))
2600
+ );
2601
+ }
2602
+
2603
+ h3 {
2604
+ text-align: center;
2605
+ width: 100%;
2606
+ margin-bottom: 10px;
2607
+ }
2608
+ table {
2609
+ border-collapse: collapse;
2610
+ // border: none;
2611
+ width: 100%;
2612
+ // height: 100%;
2613
+ text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));
2614
+
2615
+ th,
2616
+ td {
2617
+ border: none;
2618
+ }
2619
+ thead {
2620
+ background-color: var(
2621
+ --_ctm-mob-dn-te-hr-bd-cr,
2622
+ var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
2623
+ );
2624
+
2625
+ .thead__row__divider {
2626
+ height: var(
2627
+ --_ctm-mob-lt-mx-dy-se-hr-ht,
2628
+ var(--_ctm-tab-lt-mx-dy-se-hr-ht, var(--_ctm-lt-mx-dy-se-hr-ht))
2629
+ );
2630
+
2631
+ .th__col__divider {
2632
+ padding: var(
2633
+ --_ctm-mob-lt-mx-dy-se-hr-cl-pg,
2634
+ var(--_ctm-tab-lt-mx-dy-se-hr-cl-pg, var(--_ctm-lt-mx-dy-se-hr-cl-pg))
2635
+ );
2636
+
2637
+ color: var(
2638
+ --_ctm-mob-dn-hr-tt-cr,
2639
+ var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr))
2640
+ );
2641
+
2642
+ font-family:
2643
+ var(
2644
+ --_ctm-mob-dn-hr-tt-ft-fy,
2645
+ var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
2646
+ ),
2647
+ sans-serif;
2648
+
2649
+ font-size: var(
2650
+ --_ctm-mob-dn-hr-tt-ft-se,
2651
+ var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
2652
+ );
2653
+
2654
+ font-weight: var(
2655
+ --_ctm-mob-dn-hr-tt-ft-wt,
2656
+ var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
2657
+ );
2658
+
2659
+ text-decoration: var(
2660
+ --_ctm-mob-dn-hr-tt-ue,
2661
+ var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
2662
+ );
2663
+
2664
+ font-style: var(
2665
+ --_ctm-mob-dn-hr-tt-ft-se-ic,
2666
+ var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
2667
+ );
2668
+
2669
+ text-align: var(
2670
+ --_ctm-mob-dn-hr-tt-tt-an,
2671
+ var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
2672
+ );
2673
+
2674
+ letter-spacing: var(
2675
+ --_ctm-mob-dn-hr-tt-lr-sg,
2676
+ var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
2677
+ );
2678
+
2679
+ line-height: var(
2680
+ --_ctm-mob-dn-hr-tt-le-ht,
2681
+ var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
2682
+ );
2683
+ }
2684
+ }
2685
+ }
2686
+ tbody {
2687
+ .tbody__row__divider {
2688
+ background-color: var(
2689
+ --_ctm-mob-dn-te-rw-bd-cr,
2690
+ var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
2691
+ );
2692
+
2693
+ height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
2694
+
2695
+ .td__col__divider {
2696
+ padding: var(
2697
+ --_ctm-mob-lt-mx-dy-se-rw-cl-pg,
2698
+ var(--_ctm-tab-lt-mx-dy-se-rw-cl-pg, var(--_ctm-lt-mx-dy-se-rw-cl-pg))
2699
+ );
2700
+
2701
+ color: var(
2702
+ --_sf-hr-fc,
2703
+ var(
2704
+ --_ctm-mob-dn-rw-tt-cr,
2705
+ var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr))
2706
+ )
2707
+ );
2708
+
2709
+ font-family:
2710
+ var(
2711
+ --_sf-hr-ff,
2712
+ var(
2713
+ --_ctm-mob-dn-rw-tt-ft-fy,
2714
+ var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
2715
+ )
2716
+ ),
2717
+ sans-serif;
2718
+
2719
+ font-size: var(
2720
+ --_sf-hr-fs,
2721
+ var(
2722
+ --_ctm-mob-dn-rw-tt-ft-se,
2723
+ var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
2724
+ )
2725
+ );
2726
+
2727
+ text-decoration: var(
2728
+ --_ctm-mob-dn-rw-tt-ue,
2729
+ var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
2730
+ );
2731
+
2732
+ font-weight: var(
2733
+ --_sf-hr-fw,
2734
+ var(
2735
+ --_ctm-mob-dn-rw-tt-ft-wt,
2736
+ var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
2737
+ )
2738
+ );
2739
+
2740
+ font-style: var(
2741
+ --_sf-hr-ft,
2742
+ var(
2743
+ --_ctm-mob-dn-rw-tt-ft-se-ic,
2744
+ var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
2745
+ )
2746
+ );
2747
+
2748
+ text-align: var(
2749
+ --_sf-hr-ta,
2750
+ var(
2751
+ --_ctm-mob-dn-rw-tt-tt-an,
2752
+ var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
2753
+ )
2754
+ );
2755
+
2756
+ letter-spacing: var(
2757
+ --_sf-hr-ls,
2758
+ var(
2759
+ --_ctm-mob-dn-rw-tt-lr-sg,
2760
+ var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
2761
+ )
2762
+ );
2763
+
2764
+ line-height: var(
2765
+ --_sf-hr-lh,
2766
+ var(
2767
+ --_ctm-mob-dn-rw-tt-le-ht,
2768
+ var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
2769
+ )
2770
+ );
2771
+ }
2772
+ }
2773
+ }
2774
+ }
2775
+
2776
+ .pagination {
2777
+ display: var(--_d-flex);
2778
+ align-items: var(--_align-center);
2779
+ justify-content: var(
2780
+ --_ctm-mob-lt-pn-at,
2781
+ var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at))
2782
+ );
2783
+ margin-top: 10px;
2784
+ background-color: var(
2785
+ --_sf-bd-cr,
2786
+ var(
2787
+ --_ctm-mob-dn-pn-dt-se-bd-cr,
2788
+ var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
2789
+ )
2790
+ );
2791
+ &.pagination__center {
2792
+ justify-content: var(justify-center);
2793
+ }
2794
+
2795
+ button {
2796
+ svg {
2797
+ width: var(--_width-18);
2798
+ height: var(--_height-18);
2799
+ path {
2800
+ stroke: var(--_gray-500);
2801
+ // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
2802
+ }
2803
+ }
2804
+ }
2805
+ span {
2806
+ float: left;
2807
+ padding: var(--_pd-8) var(--_pd-16);
2808
+ text-decoration: none;
2809
+ span {
2810
+ // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
2811
+ // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
2812
+ // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),
2813
+ // sans-serif;
2814
+ // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
2815
+ // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
2816
+ // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
2817
+ // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
2818
+ // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
2819
+ }
2820
+ &.active:hover {
2821
+ &hover {
2822
+ --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
2823
+ --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
2824
+ --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
2825
+ --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
2826
+ --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
2827
+ --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
2828
+ --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
2829
+ --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
2830
+ }
2831
+ }
2832
+ &.active {
2833
+ color: var(
2834
+ --_sf-hr-fc,
2835
+ var(
2836
+ --_ctm-mob-dn-pn-dt-se-cr,
2837
+ var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr))
2838
+ )
2839
+ );
2840
+
2841
+ font-family:
2842
+ var(
2843
+ --_sf-hr-ff,
2844
+ var(
2845
+ --_ctm-mob-dn-pn-dt-se-ft-fy,
2846
+ var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
2847
+ )
2848
+ ),
2849
+ sans-serif;
2850
+
2851
+ font-size: var(
2852
+ --_sf-hr-fs,
2853
+ var(
2854
+ --_ctm-mob-dn-pn-dt-se-ft-se,
2855
+ var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
2856
+ )
2857
+ );
2858
+
2859
+ text-decoration: var(
2860
+ --_sf-hr-td,
2861
+ var(
2862
+ --_ctm-mob-dn-pn-dt-se-ue,
2863
+ var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue))
2864
+ )
2865
+ );
2866
+
2867
+ font-weight: var(
2868
+ --_sf-hr-fw,
2869
+ var(
2870
+ --_ctm-mob-dn-pn-dt-se-ft-wt,
2871
+ var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
2872
+ )
2873
+ );
2874
+
2875
+ font-style: var(
2876
+ --_sf-hr-ft,
2877
+ var(
2878
+ --_ctm-mob-dn-pn-dt-se-ft-se-ic,
2879
+ var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
2880
+ )
2881
+ );
2882
+
2883
+ text-align: var(
2884
+ --_sf-hr-ta,
2885
+ var(
2886
+ --_ctm-mob-dn-pn-dt-se-tt-an,
2887
+ var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
2888
+ )
2889
+ );
2890
+
2891
+ letter-spacing: var(
2892
+ --_sf-hr-ls,
2893
+ var(
2894
+ --_ctm-mob-dn-pn-dt-se-lr-sg,
2895
+ var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
2896
+ )
2897
+ );
2898
+
2899
+ line-height: var(
2900
+ --_sf-hr-lh,
2901
+ var(
2902
+ --_ctm-mob-dn-pn-dt-se-le-ht,
2903
+ var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
2904
+ )
2905
+ );
2906
+ }
2907
+ }
2908
+ .pagination__arrows {
2909
+ color: var(
2910
+ --_sf-hr-fc,
2911
+ var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
2912
+ );
2913
+
2914
+ font-size: var(
2915
+ --_sf-hr-fs,
2916
+ var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
2917
+ );
2918
+ }
2919
+ }
2920
+
2921
+ .load__more {
2922
+ margin: 10px;
2923
+ background-color: var(
2924
+ --_sf-hr-bd-cr,
2925
+ var(
2926
+ --_ctm-mob-dn-ld-me-bn-bd-cr,
2927
+ var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
2928
+ )
2929
+ );
2930
+ border-radius: var(
2931
+ --_sf-hr-br-br,
2932
+ var(
2933
+ --_ctm-mob-dn-ld-me-bn-br-rs,
2934
+ var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
2935
+ )
2936
+ );
2937
+
2938
+ h3 {
2939
+ color: var(
2940
+ --_sf-hr-fc,
2941
+ var(
2942
+ --_ctm-mob-dn-ld-me-bn-cr,
2943
+ var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
2944
+ )
2945
+ );
2946
+ font-family:
2947
+ var(
2948
+ --_sf-hr-ff,
2949
+ var(
2950
+ --_ctm-mob-dn-ld-me-bn-ft-fy,
2951
+ var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
2952
+ )
2953
+ ),
2954
+ sans-serif;
2955
+ font-size: var(
2956
+ --_sf-hr-fs,
2957
+ var(
2958
+ --_ctm-mob-dn-ld-me-bn-ft-se,
2959
+ var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
2960
+ )
2961
+ );
2962
+
2963
+ text-decoration: var(
2964
+ --_ctm-mob-dn-ld-me-bn-ue,
2965
+ var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
2966
+ );
2967
+
2968
+ font-weight: var(
2969
+ --_sf-hr-fw,
2970
+ var(
2971
+ --_ctm-mob-dn-ld-me-bn-ft-wt,
2972
+ var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
2973
+ )
2974
+ );
2975
+
2976
+ font-style: var(
2977
+ --_sf-hr-ft,
2978
+ var(
2979
+ --_ctm-mob-dn-ld-me-bn-ft-se-ic,
2980
+ var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
2981
+ )
2982
+ );
2983
+
2984
+ text-align: var(
2985
+ --_sf-hr-ta,
2986
+ var(
2987
+ --_ctm-mob-dn-ld-me-bn-tt-an,
2988
+ var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
2989
+ )
2990
+ );
2991
+
2992
+ letter-spacing: var(
2993
+ --_sf-hr-ls,
2994
+ var(
2995
+ --_ctm-mob-dn-ld-me-bn-lr-sg,
2996
+ var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
2997
+ )
2998
+ );
2999
+
3000
+ line-height: var(
3001
+ --_sf-hr-lh,
3002
+ var(
3003
+ --_ctm-mob-dn-ld-me-bn-le-ht,
3004
+ var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
3005
+ )
3006
+ );
3007
+ }
3008
+ // background-color: var(--_primary-400);
3009
+ // border: 1px solid var(--_primary-400);
3010
+ // border-radius: var(--_br-6);
3011
+ // padding: var(--_pd-8) var(--_pd-12);
3012
+ // color: var(---base-whiet);
3013
+ // display: inline-block;
3014
+ // color: var(--_base-white);
3015
+ // margin: 0 auto;
3016
+ // width: 150px;
3017
+ // text-align: center;
3018
+ // margin-top: 20px;
3019
+ }
3020
+ }
3021
+ }
3022
+
3023
+ .input {
3024
+ // width: 100%;
3025
+ width: 80px;
3026
+ height: 40px;
3027
+
3028
+ background-color: var(
3029
+ --_ctm-mob-dn-it-bd-cr,
3030
+ var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
3031
+ );
3032
+ box-shadow: var(
3033
+ --_ctm-mob-dn-it-sw-ae,
3034
+ var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))
3035
+ )
3036
+ var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br)))
3037
+ var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd)))
3038
+ var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
3039
+ border-radius: var(
3040
+ --_ctm-mob-dn-it-br-rs,
3041
+ var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs))
3042
+ );
3043
+
3044
+ border-color: var(
3045
+ --_ctm-mob-dn-it-br-cr,
3046
+ var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr))
3047
+ );
3048
+ border-style: var(
3049
+ --_ctm-mob-dn-it-br-se,
3050
+ var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se))
3051
+ );
3052
+ border-width: var(
3053
+ --_ctm-mob-dn-it-br-wh,
3054
+ var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh))
3055
+ );
3056
+
3057
+ padding: prepareMediaVariable(--_ctm-dn-it-pg);
3058
+ // flex-grow: 1;
3059
+ outline: none;
3060
+
3061
+ &::placeholder {
3062
+ color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
3063
+ font-family:
3064
+ var(
3065
+ --_ctm-mob-dn-pr-tt-ft-fy,
3066
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
3067
+ ),
3068
+ sans-serif;
3069
+ font-size: var(
3070
+ --_ctm-mob-dn-pr-tt-ft-se,
3071
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
3072
+ );
3073
+ font-weight: var(
3074
+ --_ctm-mob-dn-pr-tt-ft-wt,
3075
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
3076
+ );
3077
+ font-style: var(
3078
+ --_ctm-mob-dn-pr-tt-ft-se-ic,
3079
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
3080
+ );
3081
+ text-align: var(
3082
+ --_ctm-mob-dn-pr-tt-tt-an,
3083
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
3084
+ );
3085
+ letter-spacing: var(
3086
+ --_ctm-mob-dn-pr-tt-lr-sg,
3087
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
3088
+ );
3089
+ line-height: var(
3090
+ --_ctm-mob-dn-pr-tt-le-ht,
3091
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
3092
+ );
3093
+ text-decoration: var(
3094
+ --_ctm-mob-dn-pr-tt-ue,
3095
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
3096
+ );
3097
+ }
3098
+
3099
+ &:disabled {
3100
+ border: 1px solid red;
3101
+ }
3102
+ }
1121
3103
  }
1122
3104
  }
1123
3105
  }