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

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 (40) hide show
  1. package/dist/allocationDetails.scss +2253 -2247
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +2 -0
  4. package/dist/cart-details.scss +3207 -3207
  5. package/dist/cart.scss +271 -269
  6. package/dist/cartAttributes.scss +932 -935
  7. package/dist/checkout.scss +6496 -6460
  8. package/dist/dropdownTemplate.scss +4 -1
  9. package/dist/filters.scss +36 -4
  10. package/dist/functions.scss +91 -1
  11. package/dist/icon-list.scss +277 -268
  12. package/dist/language-selector.scss +702 -528
  13. package/dist/layouter.scss +307 -294
  14. package/dist/login.scss +1605 -1473
  15. package/dist/menu-v2.scss +752 -730
  16. package/dist/my-templates.scss +464 -463
  17. package/dist/myTemplates.scss +5 -5
  18. package/dist/order-status.scss +1877 -1856
  19. package/dist/product-image-allocation.scss +1365 -0
  20. package/dist/product-image-bundles.scss +1 -0
  21. package/dist/product-image.scss +6 -2
  22. package/dist/product-sizechart.scss +1826 -1826
  23. package/dist/profile.scss +23 -20
  24. package/dist/repeater-embla-controls.scss +6 -0
  25. package/dist/repeater.scss +920 -915
  26. package/dist/search.scss +361 -296
  27. package/dist/static-global.scss +5 -0
  28. package/dist/types/builder/tools/element-edit/bundle.d.ts +13 -2
  29. package/dist/types/builder/tools/element-edit/cart.d.ts +1 -0
  30. package/dist/types/builder/tools/element-edit/common.d.ts +5 -0
  31. package/dist/types/builder/tools/element-edit/icon-list.d.ts +17 -0
  32. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -0
  33. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  34. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +39 -0
  35. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -0
  36. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +2 -1
  37. package/dist/types/builder/tools/element-edit/search.d.ts +28 -0
  38. package/dist/types/builder/tools/element-edit/userElements.d.ts +48 -88
  39. package/dist/user-elements.scss +2555 -2471
  40. package/package.json +1 -1
package/dist/cartAttributes.scss CHANGED
@@ -1,935 +1,932 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- [data-div-type="element"] {
6
- &[data-element-type="cartAttributes"] {
7
- // width: var(
8
- // --_ctm-mob-ele-nw-wh-st-mx,
9
- // var(
10
- // --_ctm-tab-ele-nw-wh-st-mx,
11
- // var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
12
- // )
13
- // );
14
-
15
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
-
17
- height: max-content;
18
- min-width: 240px;
19
-
20
- // aspect-ratio: var(
21
- // --_ctm-mob-aspect-ratio,
22
- // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
23
- // );
24
-
25
- & > .wrapper {
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- min-width: 100%;
30
- max-width: 100%;
31
- height: auto;
32
- }
33
-
34
- .cart__section {
35
- display: flex;
36
- align-items: center;
37
- cursor: pointer;
38
- gap: 8px;
39
- }
40
- .cart-attribute-container {
41
- width: 100%;
42
- display: flex;
43
- flex-direction: column;
44
- background-color: var(
45
- --_ctm-mob-dn-as-wt-bd-cr,
46
- var(--_ctm-tab-dn-as-wt-bd-cr, var(--_ctm-dn-as-wt-bd-cr))
47
- );
48
- padding: var(--_ctm-mob-dn-as-wt-pg, var(--_ctm-tab-dn-as-wt-pg, var(--_ctm-dn-as-wt-pg)));
49
- border-color: var(
50
- --_ctm-mob-dn-as-wt-br-cr,
51
- var(--_ctm-tab-dn-as-wt-br-cr, var(--_ctm-dn-as-wt-br-cr))
52
- );
53
- border-style: var(
54
- --_ctm-mob-dn-as-wt-br-se,
55
- var(--_ctm-tab-dn-as-wt-br-se, var(--_ctm-dn-as-wt-br-se))
56
- );
57
- border-width: var(
58
- --_ctm-mob-dn-as-wt-br-wh,
59
- var(--_ctm-tab-dn-as-wt-br-wh, var(--_ctm-dn-as-wt-br-wh))
60
- );
61
- border-radius: var(
62
- --_ctm-mob-dn-as-wt-br-rs,
63
- var(--_ctm-tab-dn-as-wt-br-rs, var(--_ctm-dn-as-wt-br-rs))
64
- );
65
- box-shadow: var(
66
- --_ctm-mob-dn-as-wt-sw-ae,
67
- var(--_ctm-tab-dn-as-wt-sw-ae, var(--_ctm-dn-as-wt-sw-ae))
68
- )
69
- var(
70
- --_ctm-mob-dn--as-wt-sw-br,
71
- var(--_ctm-tab-dn--as-wt-sw-br, var(--_ctm-dn--as-wt-sw-br))
72
- )
73
- var(--_ctm-mob-dn-as-wt-sw-sd, var(--_ctm-tab-dn-as-wt-sw-sd, var(--_ctm-dn-as-wt-sw-sd)))
74
- var(--_ctm-mob-dn-as-wt-sw-cr, var(--_ctm-tab-dn-as-wt-sw-cr, var(--_ctm-dn-as-wt-sw-cr)));
75
- }
76
- .cart-attribute-header {
77
- display: flex;
78
- justify-content: space-between;
79
- align-items: center;
80
- background-color: var(
81
- --_ctm-mob-dn-as-hr-bd-cr,
82
- var(--_ctm-tab-dn-as-hr-bd-cr, var(--_ctm-dn-as-hr-bd-cr))
83
- );
84
- padding: var(--_ctm-mob-dn-as-hr-pg, var(--_ctm-tab-dn-as-hr-pg, var(--_ctm-dn-as-hr-pg)));
85
- border-color: var(
86
- --_ctm-mob-dn-as-hr-br-cr,
87
- var(--_ctm-tab-dn-as-hr-br-cr, var(--_ctm-dn-as-hr-br-cr))
88
- );
89
- border-style: var(
90
- --_ctm-mob-dn-as-hr-br-se,
91
- var(--_ctm-tab-dn-as-hr-br-se, var(--_ctm-dn-as-hr-br-se))
92
- );
93
- border-width: var(
94
- --_ctm-mob-dn-as-hr-br-wh,
95
- var(--_ctm-tab-dn-as-hr-br-wh, var(--_ctm-dn-as-hr-br-wh))
96
- );
97
- border-radius: var(
98
- --_ctm-mob-dn-as-hr-br-rs,
99
- var(--_ctm-tab-dn-as-hr-br-rs, var(--_ctm-dn-as-hr-br-rs))
100
- );
101
- .cart_attribute_title {
102
- font-family: var(
103
- --_ctm-mob-dn-as-hr-ft-fy,
104
- var(--_ctm-tab-dn-as-hr-ft-fy, var(--_ctm-dn-as-hr-ft-fy))
105
- );
106
- color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
107
- font-weight: var(
108
- --_ctm-mob-dn-as-hr-ft-wt,
109
- var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
110
- );
111
- font-size: var(
112
- --_ctm-mob-dn-as-hr-ft-se,
113
- var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
114
- );
115
- text-decoration: var(
116
- --_ctm-mob-dn-as-hr-ue,
117
- var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
118
- );
119
- letter-spacing: var(
120
- --_ctm-mob-dn-as-hr-lr-sg,
121
- var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
122
- );
123
- line-height: var(
124
- --_ctm-mob-dn-as-hr-le-ht,
125
- var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
126
- );
127
- font-style: var(
128
- --_ctm-mob-dn-as-hr-ft-se-ic,
129
- var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
130
- );
131
- text-align: var(
132
- --_ctm-mob-dn-as-hr-tt-an,
133
- var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
134
- );
135
- }
136
- .icon svg {
137
- path {
138
- stroke: var(
139
- --_ctm-mob-dn-an-as-im-in-c1,
140
- var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
141
- );
142
- }
143
- width: var(
144
- --_ctm-mob-dn-an-as-im-in-se,
145
- var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
146
- );
147
- height: var(
148
- --_ctm-mob-dn-an-as-im-in-se,
149
- var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
150
- );
151
- }
152
-
153
- .iconDesc svg {
154
- path {
155
- stroke: var(
156
- --_ctm-mob-dn-an-as-im-in-c1-dc,
157
- var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
158
- );
159
- }
160
- width: var(
161
- --_ctm-mob-dn-an-as-im-in-se-dc,
162
- var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
163
- );
164
- height: var(
165
- --_ctm-mob-dn-an-as-im-in-se-dc,
166
- var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
167
- );
168
- }
169
- }
170
- .attributes-section-body {
171
- width: 100%;
172
- display: flex;
173
- flex-wrap: wrap;
174
- overflow-y: auto;
175
- background-color: var(
176
- --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
177
- var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
178
- );
179
- padding: var(
180
- --_ctm-mob-dn-as-cr-ae-is-wr-pg,
181
- var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
182
- );
183
- gap: var(
184
- --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
185
- var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp))
186
- );
187
- border-color: var(
188
- --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
189
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
190
- );
191
- border-style: var(
192
- --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
193
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
194
- );
195
- border-width: var(
196
- --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
197
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
198
- );
199
- border-radius: var(
200
- --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
201
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
202
- );
203
- .attriTitle {
204
- // font-weight: 600;
205
- // font-size: 14px;
206
- // line-height: 20px;
207
- // color: #101828;
208
- // padding-bottom: 6px;
209
- font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
210
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
211
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
212
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
213
- text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
214
- letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
215
- line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
216
- font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
217
- text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
218
- padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
219
- }
220
- .attriDes {
221
- // font-weight: 400;
222
- // font-size: 14px;
223
- // line-height: 20px;
224
- font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
225
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
226
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
227
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
228
- text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
229
- letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
230
- line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
231
- font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
232
- text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
233
- padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
234
- }
235
- .attribute {
236
- width: 100%;
237
- display: flex;
238
- flex-direction: column;
239
- padding: var(
240
- --_ctm-mob-dn-as-cr-as-fs-pg,
241
- var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg))
242
- );
243
- gap: var(
244
- --_ctm-mob-dn-as-cr-as-fs-im-gp,
245
- var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp))
246
- );
247
- .label {
248
- display: block;
249
- padding: var(
250
- --_ctm-mob-dn-as-cr-as-ls-pg,
251
- var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
252
- );
253
- font-family: var(
254
- --_ctm-mob-dn-as-cr-as-ls-ft-fy,
255
- var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
256
- );
257
- color: var(
258
- --_ctm-mob-dn-as-cr-as-ls-cr,
259
- var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
260
- );
261
- font-weight: var(
262
- --_ctm-mob-dn-as-cr-as-ls-ft-wt,
263
- var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
264
- );
265
- font-size: var(
266
- --_ctm-mob-dn-as-cr-as-ls-ft-se,
267
- var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
268
- );
269
- text-decoration: var(
270
- --_ctm-mob-dn-as-cr-as-ls-ue,
271
- var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
272
- );
273
- letter-spacing: var(
274
- --_ctm-mob-dn-as-cr-as-ls-lr-sg,
275
- var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
276
- );
277
- line-height: var(
278
- --_ctm-mob-dn-as-cr-as-ls-le-ht,
279
- var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
280
- );
281
- font-style: var(
282
- --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
283
- var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
284
- );
285
- text-align: var(
286
- --_ctm-mob-dn-as-cr-as-ls-tt-an,
287
- var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
288
- );
289
- &.required::after {
290
- content: " *";
291
- color: var(--_error-500);
292
- }
293
- }
294
- .attribute_field {
295
- width: 100% !important;
296
- input {
297
- background-color: var(
298
- --_ctm-mob-dn-as-cr-as-is-bd-cr,
299
- var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
300
- );
301
- padding: var(
302
- --_ctm-mob-dn-as-cr-as-is-pg,
303
- var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
304
- );
305
- gap: var(
306
- --_ctm-mob-dn-as-cr-as-is-im-gp,
307
- var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp))
308
- );
309
- border-color: var(
310
- --_ctm-mob-dn-as-cr-as-is-br-cr,
311
- var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
312
- );
313
- border-style: var(
314
- --_ctm-mob-dn-as-cr-as-is-br-se,
315
- var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
316
- );
317
- border-width: var(
318
- --_ctm-mob-dn-as-cr-as-is-br-wh,
319
- var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
320
- );
321
- border-radius: var(
322
- --_ctm-mob-dn-as-cr-as-is-br-rs,
323
- var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
324
- );
325
- &::placeholder {
326
- font-family: var(
327
- --_ctm-mob-dn-as-cr-as-is-ft-fy,
328
- var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
329
- );
330
- color: var(
331
- --_ctm-mob-dn-as-cr-as-is-cr,
332
- var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
333
- );
334
- font-weight: var(
335
- --_ctm-mob-dn-as-cr-as-is-ft-wt,
336
- var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
337
- );
338
- font-size: var(
339
- --_ctm-mob-dn-as-cr-as-is-ft-se,
340
- var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
341
- );
342
- text-decoration: var(
343
- --_ctm-mob-dn-as-cr-as-is-ue,
344
- var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
345
- );
346
- letter-spacing: var(
347
- --_ctm-mob-dn-as-cr-as-is-lr-sg,
348
- var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
349
- );
350
- line-height: var(
351
- --_ctm-mob-dn-as-cr-as-is-le-ht,
352
- var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
353
- );
354
- font-style: var(
355
- --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
356
- var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
357
- );
358
- text-align: var(
359
- --_ctm-mob-dn-as-cr-as-is-tt-an,
360
- var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
361
- );
362
- }
363
- }
364
- .attribute_form_field {
365
- font-family: var(
366
- --_ctm-mob-dn-as-cr-as-is-ft-fy,
367
- var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
368
- );
369
- color: var(
370
- --_ctm-mob-dn-as-cr-as-is-cr,
371
- var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
372
- );
373
- font-weight: var(
374
- --_ctm-mob-dn-as-cr-as-is-ft-wt,
375
- var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
376
- );
377
- font-size: var(
378
- --_ctm-mob-dn-as-cr-as-is-ft-se,
379
- var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
380
- );
381
- text-decoration: var(
382
- --_ctm-mob-dn-as-cr-as-is-ue,
383
- var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
384
- );
385
- letter-spacing: var(
386
- --_ctm-mob-dn-as-cr-as-is-lr-sg,
387
- var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
388
- );
389
- line-height: var(
390
- --_ctm-mob-dn-as-cr-as-is-le-ht,
391
- var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
392
- );
393
- font-style: var(
394
- --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
395
- var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
396
- );
397
- text-align: var(
398
- --_ctm-mob-dn-as-cr-as-is-tt-an,
399
- var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
400
- );
401
- transition:
402
- background-color 0.2s,
403
- color 0.2s,
404
- border-color 0.2s,
405
- box-shadow 0.2s;
406
- &:focus {
407
- box-shadow:
408
- 0px 1px 2px rgba(16, 24, 40, 0.05),
409
- 0px 0px 0px 2px var(--primary-100);
410
- border: 1px solid var(--primary-300);
411
- }
412
- }
413
- .dropdown-input-section {
414
- height: auto !important;
415
- background-color: var(
416
- --_ctm-mob-dn-as-cr-as-is-bd-cr,
417
- var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
418
- );
419
- padding: var(
420
- --_ctm-mob-dn-as-cr-as-is-pg,
421
- var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
422
- );
423
- border-color: var(
424
- --_ctm-mob-dn-as-cr-as-is-br-cr,
425
- var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
426
- );
427
- border-style: var(
428
- --_ctm-mob-dn-as-cr-as-is-br-se,
429
- var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
430
- );
431
- border-width: var(
432
- --_ctm-mob-dn-as-cr-as-is-br-wh,
433
- var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
434
- );
435
- border-radius: var(
436
- --_ctm-mob-dn-as-cr-as-is-br-rs,
437
- var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
438
- );
439
- font-family: var(
440
- --_ctm-mob-dn-as-cr-as-dn-ft-fy,
441
- var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
442
- );
443
- color: var(
444
- --_ctm-mob-dn-as-cr-as-dn-cr,
445
- var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
446
- );
447
- font-weight: var(
448
- --_ctm-mob-dn-as-cr-as-dn-ft-wt,
449
- var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
450
- );
451
- font-size: var(
452
- --_ctm-mob-dn-as-cr-as-dn-ft-se,
453
- var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
454
- );
455
- text-decoration: var(
456
- --_ctm-mob-dn-as-cr-as-dn-ue,
457
- var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
458
- );
459
- letter-spacing: var(
460
- --_ctm-mob-dn-as-cr-as-dn-lr-sg,
461
- var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
462
- );
463
- line-height: var(
464
- --_ctm-mob-dn-as-cr-as-dn-le-ht,
465
- var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
466
- );
467
- font-style: var(
468
- --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
469
- var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
470
- );
471
- text-align: var(
472
- --_ctm-mob-dn-as-cr-as-dn-tt-an,
473
- var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
474
- );
475
- .selected-display {
476
- .selected-item {
477
- display: flex;
478
- align-items: center;
479
- .color-swatch {
480
- position: relative;
481
- // top: 1px;
482
- }
483
- .svg_icon svg {
484
- width: 16px;
485
- height: 16px;
486
- }
487
- }
488
- }
489
- }
490
- &:focus {
491
- border-color: var(--_primary-400);
492
- outline: 2px solid var(--_primary-200);
493
- }
494
- &.error {
495
- border-color: #dc2626;
496
- background-color: #fef2f2;
497
- }
498
- .react-datepicker-wrapper {
499
- width: 100%;
500
- .react-datepicker__close-icon::after {
501
- background-color: transparent;
502
- font-size: 25px;
503
- color: var(--_gray-500);
504
- }
505
- }
506
- .custom-upload {
507
- display: flex;
508
- flex-direction: column;
509
- align-items: center;
510
- align-self: stretch;
511
-
512
- background-color: var(
513
- --_ctm-mob-dn-as-cr-us-bd-cr,
514
- var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr))
515
- );
516
- padding: var(
517
- --_ctm-mob-dn-as-cr-us-pg,
518
- var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg))
519
- );
520
- gap: var(
521
- --_ctm-mob-dn-as-cr-us-im-gp,
522
- var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp))
523
- );
524
- border-color: var(
525
- --_ctm-mob-dn-as-cr-us-br-cr,
526
- var(--_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr))
527
- );
528
- border-style: var(
529
- --_ctm-mob-dn-as-cr-us-br-se,
530
- var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se))
531
- );
532
- border-width: var(
533
- --_ctm-mob-dn-as-cr-us-br-wh,
534
- var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh))
535
- );
536
- border-radius: var(
537
- --_ctm-mob-dn-as-cr-us-br-rs,
538
- var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs))
539
- );
540
- .file_upload_text {
541
- text-align: center;
542
- display: flex;
543
- flex-direction: column;
544
- gap: 6px;
545
- p {
546
- strong {
547
- font-family: var(
548
- --_ctm-mob-dn-as-cr-us-ft-fy,
549
- var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
550
- );
551
- // color: var(
552
- // --_ctm-mob-dn-as-cr-us-cr,
553
- // var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
554
- // );
555
- color: var(--_thm-cs-tt-ls-as);
556
- font-weight: var(
557
- --_ctm-mob-dn-as-cr-us-ft-wt,
558
- var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
559
- );
560
- font-size: var(
561
- --_ctm-mob-dn-as-cr-us-ft-se,
562
- var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
563
- );
564
- text-decoration: var(
565
- --_ctm-mob-dn-as-cr-us-ue,
566
- var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
567
- );
568
- letter-spacing: var(
569
- --_ctm-mob-dn-as-cr-us-lr-sg,
570
- var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
571
- );
572
- line-height: var(
573
- --_ctm-mob-dn-as-cr-us-le-ht,
574
- var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
575
- );
576
- font-style: var(
577
- --_ctm-mob-dn-as-cr-us-ft-se-ic,
578
- var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
579
- );
580
- text-align: var(
581
- --_ctm-mob-dn-as-cr-us-tt-an,
582
- var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
583
- );
584
- }
585
- }
586
- span {
587
- font-family: var(
588
- --_ctm-mob-dn-as-cr-us-ft-fy-dc,
589
- var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
590
- );
591
- color: var(
592
- --_ctm-mob-dn-as-cr-us-cr-dc,
593
- var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
594
- );
595
- font-weight: var(
596
- --_ctm-mob-dn-as-cr-us-ft-wt-dc,
597
- var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
598
- );
599
- font-size: var(
600
- --_ctm-mob-dn-as-cr-us-ft-se-dc,
601
- var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
602
- );
603
- text-decoration: var(
604
- --_ctm-mob-dn-as-cr-us-ue-dc,
605
- var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
606
- );
607
- letter-spacing: var(
608
- --_ctm-mob-dn-as-cr-us-lr-sg-dc,
609
- var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
610
- );
611
- line-height: var(
612
- --_ctm-mob-dn-as-cr-us-le-ht-dc,
613
- var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
614
- );
615
- font-style: var(
616
- --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
617
- var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
618
- );
619
- text-align: var(
620
- --_ctm-mob-dn-as-cr-us-tt-an-dc,
621
- var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
622
- );
623
- }
624
- }
625
- .uploadicon {
626
- // padding: 10px;
627
- // background: #f2f4f7;
628
- display: inline-block;
629
- // border-radius: 50%;
630
- // color: var(--_gray-600);
631
- }
632
- }
633
- }
634
- }
635
- .error-text {
636
- font-size: 12px;
637
- color: var(--_error-500);
638
- }
639
- .text_area_attribute {
640
- width: 100%;
641
- .input_textarea_a {
642
- width: 100%;
643
- }
644
- }
645
- .cart_item_attr_disabled {
646
- pointer-events: none;
647
-
648
- opacity: 0.5;
649
- cursor: auto;
650
- }
651
- }
652
- }
653
- }
654
-
655
- // toggle styles
656
- .input_toggle_switch_container {
657
- display: flex;
658
- background-color: var(
659
- --_ctm-mob-dn-as-cr-as-bs-bd-cr,
660
- var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
661
- );
662
- border-color: var(
663
- --_ctm-mob-dn-as-cr-as-bs-br-cr,
664
- var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
665
- );
666
- border-style: var(
667
- --_ctm-mob-dn-as-cr-as-bs-br-se,
668
- var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
669
- );
670
- border-width: var(
671
- --_ctm-mob-dn-as-cr-as-bs-br-wh,
672
- var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
673
- );
674
- border-radius: var(
675
- --_ctm-mob-dn-as-cr-as-bs-br-rs,
676
- var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
677
- );
678
- padding: var(
679
- --_ctm-mob-dn-as-cr-as-bs-pg,
680
- var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
681
- );
682
- gap: var(
683
- --_ctm-mob-dn-as-cr-as-bs-im-gp,
684
- var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
685
- );
686
- .input_toggle_switch {
687
- position: relative;
688
- display: inline-block;
689
- width: 50px;
690
- height: 28px;
691
-
692
- input[type="checkbox"] {
693
- opacity: 0;
694
- width: 0;
695
- height: 0;
696
-
697
- &:checked + .slider {
698
- background-color: #4caf50;
699
-
700
- &::before {
701
- transform: translateX(22px);
702
- }
703
- }
704
- }
705
-
706
- .slider {
707
- position: absolute;
708
- cursor: pointer;
709
- top: 0;
710
- left: 0;
711
- right: 0;
712
- bottom: 0;
713
- background-color: #ccc;
714
- transition: 0.4s;
715
- border-radius: 28px;
716
-
717
- &::before {
718
- position: absolute;
719
- content: "";
720
- height: 22px;
721
- width: 22px;
722
- left: 3px;
723
- bottom: 3px;
724
- background-color: white;
725
- border-radius: 50%;
726
- transition: 0.4s;
727
- }
728
- }
729
- }
730
- .input_toggle_switch_text {
731
- gap: 4px;
732
- display: flex;
733
- flex-direction: column;
734
- .checkbox_title {
735
- font-family: var(
736
- --_ctm-mob-dn-as-cr-as-bs-ft-fy,
737
- var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
738
- );
739
- color: var(
740
- --_ctm-mob-dn-as-cr-as-bs-cr,
741
- var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
742
- );
743
- font-weight: var(
744
- --_ctm-mob-dn-as-cr-as-bs-ft-wt,
745
- var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
746
- );
747
- font-size: var(
748
- --_ctm-mob-dn-as-cr-as-bs-ft-se,
749
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
750
- );
751
- text-decoration: var(
752
- --_ctm-mob-dn-as-cr-as-bs-ue,
753
- var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
754
- );
755
- letter-spacing: var(
756
- --_ctm-mob-dn-as-cr-as-bs-lr-sg,
757
- var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
758
- );
759
- line-height: var(
760
- --_ctm-mob-dn-as-cr-as-bs-le-ht,
761
- var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
762
- );
763
- font-style: var(
764
- --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
765
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
766
- );
767
- text-align: var(
768
- --_ctm-mob-dn-as-cr-as-bs-tt-an,
769
- var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
770
- );
771
- }
772
- .checkbox_des {
773
- font-family: var(
774
- --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
775
- var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
776
- );
777
- color: var(
778
- --_ctm-mob-dn-as-cr-as-bs-cr-dc,
779
- var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
780
- );
781
- font-weight: var(
782
- --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
783
- var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
784
- );
785
- font-size: var(
786
- --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
787
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
788
- );
789
- text-decoration: var(
790
- --_ctm-mob-dn-as-cr-as-bs-ue-dc,
791
- var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
792
- );
793
- letter-spacing: var(
794
- --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
795
- var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
796
- );
797
- line-height: var(
798
- --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
799
- var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
800
- );
801
- font-style: var(
802
- --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
803
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
804
- );
805
- text-align: var(
806
- --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
807
- var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
808
- );
809
- }
810
- }
811
- }
812
-
813
- // input radio styles
814
- .input_radio_a {
815
- position: relative;
816
- display: inline-flex;
817
- align-items: center;
818
- cursor: pointer;
819
- height: 20px;
820
- width: 20px;
821
-
822
- input[type="radio"] {
823
- opacity: 0;
824
- width: 0;
825
- height: 0;
826
-
827
- &:checked + .custom_radio::after {
828
- display: block;
829
- }
830
- }
831
-
832
- .custom_radio {
833
- height: 18px;
834
- width: 18px;
835
- border-radius: 50%;
836
- background-color: var(--_base-white);
837
- border: 2px solid var(--_gray-600);
838
- position: relative;
839
- transition: border-color 0.3s ease;
840
-
841
- &::after {
842
- content: "";
843
- position: absolute;
844
- top: 3px;
845
- left: 3px;
846
- width: 8px;
847
- height: 8px;
848
- border-radius: 50%;
849
- background-color: var(--_primary-400);
850
- display: none;
851
- }
852
- }
853
-
854
- input[type="radio"]:checked + .custom_radio {
855
- border-color: var(--_primary-400);
856
- }
857
-
858
- &.disabled {
859
- opacity: 0.5;
860
- pointer-events: none;
861
- }
862
- }
863
-
864
- // .custom-upload {
865
- // // text-align: center;
866
- // // border: 1px solid var(--_gray-200);
867
- // // border-radius: 6px;
868
- // // padding: 16px;
869
- // border-radius: 6px;
870
- // border: 1px solid var(--Gray-200, #eaecf0);
871
- // background: var(--Base-White, #fff);
872
- // display: flex;
873
- // padding: 16px 24px;
874
- // flex-direction: column;
875
- // align-items: center;
876
- // gap: 4px;
877
- // align-self: stretch;
878
- // &:hover {
879
- // cursor: pointer;
880
- // border: 1px solid var(--_primary-200);
881
- // background: var(--_primary-25);
882
- // }
883
- // .uploadicon {
884
- // padding: 10px;
885
- // background: #f2f4f7;
886
- // display: inline-block;
887
- // border-radius: 50%;
888
- // margin-bottom: 12px;
889
- // color: var(--_gray-600);
890
- // }
891
- // p {
892
- // padding-bottom: 4px;
893
- // color: var(--_gray-600);
894
- // font-size: 14px;
895
- // strong {
896
- // // color: var(--_primary-400);
897
- // // font-weight: 600;
898
- // color: var(--Primary-400, #243dc6);
899
- // font-size: 14px;
900
- // font-weight: 600;
901
- // // line-height: 20px;
902
- // }
903
- // }
904
- // span {
905
- // color: var(--Gray-600, #475467);
906
- // font-size: 14px;
907
- // font-weight: 400;
908
- // // line-height: 20px;
909
- // }
910
- // }
911
-
912
- .input_color_picker_a {
913
- width: 100% !important;
914
- height: 48px;
915
- border-radius: 4px;
916
- border: 1px solid var(--Gray-300, #d0d5dd);
917
- background: var(--Base-White, #fff);
918
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
919
- outline: none;
920
- transition: border-color 0.2s ease-in-out;
921
- font-size: 14px;
922
- cursor: pointer;
923
- }
924
- .attribute_currency_field {
925
- position: relative;
926
- input {
927
- padding: 12px 12px 12px 32px !important;
928
- }
929
- svg {
930
- position: absolute;
931
- left: 8px;
932
- top: 10px;
933
- background: #fff;
934
- }
935
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="cartAttributes"] {
7
+ // width: var(
8
+ // --_ctm-mob-ele-nw-wh-st-mx,
9
+ // var(
10
+ // --_ctm-tab-ele-nw-wh-st-mx,
11
+ // var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
12
+ // )
13
+ // );
14
+
15
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
16
+
17
+ height: max-content;
18
+ min-width: 240px;
19
+
20
+ // aspect-ratio: var(
21
+ // --_ctm-mob-aspect-ratio,
22
+ // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
23
+ // );
24
+
25
+ & > .wrapper {
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ min-width: 100%;
30
+ max-width: 100%;
31
+ height: auto;
32
+ }
33
+
34
+ .cart__section {
35
+ display: flex;
36
+ align-items: center;
37
+ cursor: pointer;
38
+ gap: 8px;
39
+ }
40
+ .cart-attribute-container {
41
+ width: 100%;
42
+ display: flex;
43
+ flex-direction: column;
44
+ background-color: var(
45
+ --_ctm-mob-dn-as-wt-bd-cr,
46
+ var(--_ctm-tab-dn-as-wt-bd-cr, var(--_ctm-dn-as-wt-bd-cr))
47
+ );
48
+ padding: var(--_ctm-mob-dn-as-wt-pg, var(--_ctm-tab-dn-as-wt-pg, var(--_ctm-dn-as-wt-pg)));
49
+ border-color: var(
50
+ --_ctm-mob-dn-as-wt-br-cr,
51
+ var(--_ctm-tab-dn-as-wt-br-cr, var(--_ctm-dn-as-wt-br-cr))
52
+ );
53
+ border-style: var(
54
+ --_ctm-mob-dn-as-wt-br-se,
55
+ var(--_ctm-tab-dn-as-wt-br-se, var(--_ctm-dn-as-wt-br-se))
56
+ );
57
+ border-width: var(
58
+ --_ctm-mob-dn-as-wt-br-wh,
59
+ var(--_ctm-tab-dn-as-wt-br-wh, var(--_ctm-dn-as-wt-br-wh))
60
+ );
61
+ border-radius: var(
62
+ --_ctm-mob-dn-as-wt-br-rs,
63
+ var(--_ctm-tab-dn-as-wt-br-rs, var(--_ctm-dn-as-wt-br-rs))
64
+ );
65
+ box-shadow: var(
66
+ --_ctm-mob-dn-as-wt-sw-ae,
67
+ var(--_ctm-tab-dn-as-wt-sw-ae, var(--_ctm-dn-as-wt-sw-ae))
68
+ )
69
+ var(
70
+ --_ctm-mob-dn--as-wt-sw-br,
71
+ var(--_ctm-tab-dn--as-wt-sw-br, var(--_ctm-dn--as-wt-sw-br))
72
+ )
73
+ var(--_ctm-mob-dn-as-wt-sw-sd, var(--_ctm-tab-dn-as-wt-sw-sd, var(--_ctm-dn-as-wt-sw-sd)))
74
+ var(--_ctm-mob-dn-as-wt-sw-cr, var(--_ctm-tab-dn-as-wt-sw-cr, var(--_ctm-dn-as-wt-sw-cr)));
75
+ }
76
+ .cart-attribute-header {
77
+ display: flex;
78
+ justify-content: space-between;
79
+ align-items: center;
80
+ background-color: var(
81
+ --_ctm-mob-dn-as-hr-bd-cr,
82
+ var(--_ctm-tab-dn-as-hr-bd-cr, var(--_ctm-dn-as-hr-bd-cr))
83
+ );
84
+ padding: var(--_ctm-mob-dn-as-hr-pg, var(--_ctm-tab-dn-as-hr-pg, var(--_ctm-dn-as-hr-pg)));
85
+ border-color: var(
86
+ --_ctm-mob-dn-as-hr-br-cr,
87
+ var(--_ctm-tab-dn-as-hr-br-cr, var(--_ctm-dn-as-hr-br-cr))
88
+ );
89
+ border-style: var(
90
+ --_ctm-mob-dn-as-hr-br-se,
91
+ var(--_ctm-tab-dn-as-hr-br-se, var(--_ctm-dn-as-hr-br-se))
92
+ );
93
+ border-width: var(
94
+ --_ctm-mob-dn-as-hr-br-wh,
95
+ var(--_ctm-tab-dn-as-hr-br-wh, var(--_ctm-dn-as-hr-br-wh))
96
+ );
97
+ border-radius: var(
98
+ --_ctm-mob-dn-as-hr-br-rs,
99
+ var(--_ctm-tab-dn-as-hr-br-rs, var(--_ctm-dn-as-hr-br-rs))
100
+ );
101
+ .cart_attribute_title {
102
+ font-family: var(
103
+ --_ctm-mob-dn-as-hr-ft-fy,
104
+ var(--_ctm-tab-dn-as-hr-ft-fy, var(--_ctm-dn-as-hr-ft-fy))
105
+ );
106
+ color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
107
+ font-weight: var(
108
+ --_ctm-mob-dn-as-hr-ft-wt,
109
+ var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
110
+ );
111
+ font-size: var(
112
+ --_ctm-mob-dn-as-hr-ft-se,
113
+ var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
114
+ );
115
+ text-decoration: var(
116
+ --_ctm-mob-dn-as-hr-ue,
117
+ var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
118
+ );
119
+ letter-spacing: var(
120
+ --_ctm-mob-dn-as-hr-lr-sg,
121
+ var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
122
+ );
123
+ line-height: var(
124
+ --_ctm-mob-dn-as-hr-le-ht,
125
+ var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
126
+ );
127
+ font-style: var(
128
+ --_ctm-mob-dn-as-hr-ft-se-ic,
129
+ var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
130
+ );
131
+ text-align: var(
132
+ --_ctm-mob-dn-as-hr-tt-an,
133
+ var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
134
+ );
135
+ }
136
+ .icon svg {
137
+ path {
138
+ stroke: var(
139
+ --_ctm-mob-dn-an-as-im-in-c1,
140
+ var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
141
+ );
142
+ }
143
+ width: var(
144
+ --_ctm-mob-dn-an-as-im-in-se,
145
+ var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
146
+ );
147
+ height: var(
148
+ --_ctm-mob-dn-an-as-im-in-se,
149
+ var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
150
+ );
151
+ }
152
+
153
+ .iconDesc svg {
154
+ path {
155
+ stroke: var(
156
+ --_ctm-mob-dn-an-as-im-in-c1-dc,
157
+ var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
158
+ );
159
+ }
160
+ width: var(
161
+ --_ctm-mob-dn-an-as-im-in-se-dc,
162
+ var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
163
+ );
164
+ height: var(
165
+ --_ctm-mob-dn-an-as-im-in-se-dc,
166
+ var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
167
+ );
168
+ }
169
+ }
170
+ .attributes-section-body {
171
+ width: 100%;
172
+ display: flex;
173
+ flex-wrap: wrap;
174
+ overflow-y: auto;
175
+ background-color: var(
176
+ --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
177
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
178
+ );
179
+ padding: var(
180
+ --_ctm-mob-dn-as-cr-ae-is-wr-pg,
181
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
182
+ );
183
+ gap: var(
184
+ --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
185
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp))
186
+ );
187
+ border-color: var(
188
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
189
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
190
+ );
191
+ border-style: var(
192
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
193
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
194
+ );
195
+ border-width: var(
196
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
197
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
198
+ );
199
+ border-radius: var(
200
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
201
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
202
+ );
203
+ .attriTitle {
204
+ // font-weight: 600;
205
+ // font-size: 14px;
206
+ // line-height: 20px;
207
+ // color: #101828;
208
+ // padding-bottom: 6px;
209
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
210
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
211
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
212
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
213
+ text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
214
+ letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
215
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
216
+ font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
217
+ text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
218
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
219
+ }
220
+ .attriDes {
221
+ // font-weight: 400;
222
+ // font-size: 14px;
223
+ // line-height: 20px;
224
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
225
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
226
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
227
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
228
+ text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
229
+ letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
230
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
231
+ font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
232
+ text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
233
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
234
+ }
235
+ .attribute {
236
+ width: 100%;
237
+ display: flex;
238
+ flex-direction: column;
239
+ padding: var(
240
+ --_ctm-mob-dn-as-cr-as-fs-pg,
241
+ var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg))
242
+ );
243
+ gap: var(
244
+ --_ctm-mob-dn-as-cr-as-fs-im-gp,
245
+ var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp))
246
+ );
247
+ .label {
248
+ display: block;
249
+ padding: var(
250
+ --_ctm-mob-dn-as-cr-as-ls-pg,
251
+ var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
252
+ );
253
+ font-family: var(
254
+ --_ctm-mob-dn-as-cr-as-ls-ft-fy,
255
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
256
+ );
257
+ color: var(
258
+ --_ctm-mob-dn-as-cr-as-ls-cr,
259
+ var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
260
+ );
261
+ font-weight: var(
262
+ --_ctm-mob-dn-as-cr-as-ls-ft-wt,
263
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
264
+ );
265
+ font-size: var(
266
+ --_ctm-mob-dn-as-cr-as-ls-ft-se,
267
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
268
+ );
269
+ text-decoration: var(
270
+ --_ctm-mob-dn-as-cr-as-ls-ue,
271
+ var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
272
+ );
273
+ letter-spacing: var(
274
+ --_ctm-mob-dn-as-cr-as-ls-lr-sg,
275
+ var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
276
+ );
277
+ line-height: var(
278
+ --_ctm-mob-dn-as-cr-as-ls-le-ht,
279
+ var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
280
+ );
281
+ font-style: var(
282
+ --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
283
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
284
+ );
285
+ text-align: var(
286
+ --_ctm-mob-dn-as-cr-as-ls-tt-an,
287
+ var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
288
+ );
289
+ &.required::after {
290
+ content: " *";
291
+ color: var(--_error-500);
292
+ }
293
+ }
294
+ .attribute_field {
295
+ width: 100% !important;
296
+ input {
297
+ background-color: var(
298
+ --_ctm-mob-dn-as-cr-as-is-bd-cr,
299
+ var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
300
+ );
301
+ padding: var(
302
+ --_ctm-mob-dn-as-cr-as-is-pg,
303
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
304
+ );
305
+ gap: var(
306
+ --_ctm-mob-dn-as-cr-as-is-im-gp,
307
+ var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp))
308
+ );
309
+ border-color: var(
310
+ --_ctm-mob-dn-as-cr-as-is-br-cr,
311
+ var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
312
+ );
313
+ border-style: var(
314
+ --_ctm-mob-dn-as-cr-as-is-br-se,
315
+ var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
316
+ );
317
+ border-width: var(
318
+ --_ctm-mob-dn-as-cr-as-is-br-wh,
319
+ var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
320
+ );
321
+ border-radius: var(
322
+ --_ctm-mob-dn-as-cr-as-is-br-rs,
323
+ var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
324
+ );
325
+ &::placeholder {
326
+ font-family: var(
327
+ --_ctm-mob-dn-as-cr-as-is-ft-fy,
328
+ var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
329
+ );
330
+ color: var(--_thm-cs-be-se-1);
331
+ font-weight: var(
332
+ --_ctm-mob-dn-as-cr-as-is-ft-wt,
333
+ var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
334
+ );
335
+ font-size: var(
336
+ --_ctm-mob-dn-as-cr-as-is-ft-se,
337
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
338
+ );
339
+ text-decoration: var(
340
+ --_ctm-mob-dn-as-cr-as-is-ue,
341
+ var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
342
+ );
343
+ letter-spacing: var(
344
+ --_ctm-mob-dn-as-cr-as-is-lr-sg,
345
+ var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
346
+ );
347
+ line-height: var(
348
+ --_ctm-mob-dn-as-cr-as-is-le-ht,
349
+ var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
350
+ );
351
+ font-style: var(
352
+ --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
353
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
354
+ );
355
+ text-align: var(
356
+ --_ctm-mob-dn-as-cr-as-is-tt-an,
357
+ var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
358
+ );
359
+ }
360
+ }
361
+ .attribute_form_field {
362
+ font-family: var(
363
+ --_ctm-mob-dn-as-cr-as-is-ft-fy,
364
+ var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
365
+ );
366
+ color: var(
367
+ --_ctm-mob-dn-as-cr-as-is-cr,
368
+ var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
369
+ );
370
+ font-weight: var(
371
+ --_ctm-mob-dn-as-cr-as-is-ft-wt,
372
+ var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
373
+ );
374
+ font-size: var(
375
+ --_ctm-mob-dn-as-cr-as-is-ft-se,
376
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
377
+ );
378
+ text-decoration: var(
379
+ --_ctm-mob-dn-as-cr-as-is-ue,
380
+ var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
381
+ );
382
+ letter-spacing: var(
383
+ --_ctm-mob-dn-as-cr-as-is-lr-sg,
384
+ var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
385
+ );
386
+ line-height: var(
387
+ --_ctm-mob-dn-as-cr-as-is-le-ht,
388
+ var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
389
+ );
390
+ font-style: var(
391
+ --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
392
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
393
+ );
394
+ text-align: var(
395
+ --_ctm-mob-dn-as-cr-as-is-tt-an,
396
+ var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
397
+ );
398
+ transition:
399
+ background-color 0.2s,
400
+ color 0.2s,
401
+ border-color 0.2s,
402
+ box-shadow 0.2s;
403
+ &:focus {
404
+ box-shadow:
405
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
406
+ 0px 0px 0px 2px var(--primary-100);
407
+ border: 1px solid var(--primary-300);
408
+ }
409
+ }
410
+ .dropdown-input-section {
411
+ height: auto !important;
412
+ background-color: var(
413
+ --_ctm-mob-dn-as-cr-as-is-bd-cr,
414
+ var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
415
+ );
416
+ padding: var(
417
+ --_ctm-mob-dn-as-cr-as-is-pg,
418
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
419
+ );
420
+ border-color: var(
421
+ --_ctm-mob-dn-as-cr-as-is-br-cr,
422
+ var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
423
+ );
424
+ border-style: var(
425
+ --_ctm-mob-dn-as-cr-as-is-br-se,
426
+ var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
427
+ );
428
+ border-width: var(
429
+ --_ctm-mob-dn-as-cr-as-is-br-wh,
430
+ var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
431
+ );
432
+ border-radius: var(
433
+ --_ctm-mob-dn-as-cr-as-is-br-rs,
434
+ var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
435
+ );
436
+ font-family: var(
437
+ --_ctm-mob-dn-as-cr-as-dn-ft-fy,
438
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
439
+ );
440
+ color: var(
441
+ --_ctm-mob-dn-as-cr-as-dn-cr,
442
+ var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
443
+ );
444
+ font-weight: var(
445
+ --_ctm-mob-dn-as-cr-as-dn-ft-wt,
446
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
447
+ );
448
+ font-size: var(
449
+ --_ctm-mob-dn-as-cr-as-dn-ft-se,
450
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
451
+ );
452
+ text-decoration: var(
453
+ --_ctm-mob-dn-as-cr-as-dn-ue,
454
+ var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
455
+ );
456
+ letter-spacing: var(
457
+ --_ctm-mob-dn-as-cr-as-dn-lr-sg,
458
+ var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
459
+ );
460
+ line-height: var(
461
+ --_ctm-mob-dn-as-cr-as-dn-le-ht,
462
+ var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
463
+ );
464
+ font-style: var(
465
+ --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
466
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
467
+ );
468
+ text-align: var(
469
+ --_ctm-mob-dn-as-cr-as-dn-tt-an,
470
+ var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
471
+ );
472
+ .selected-display {
473
+ .selected-item {
474
+ display: flex;
475
+ align-items: center;
476
+ .color-swatch {
477
+ position: relative;
478
+ // top: 1px;
479
+ }
480
+ .svg_icon svg {
481
+ width: 16px;
482
+ height: 16px;
483
+ }
484
+ }
485
+ }
486
+ }
487
+ &:focus {
488
+ border-color: var(--_primary-400);
489
+ outline: 2px solid var(--_primary-200);
490
+ }
491
+ &.error {
492
+ border-color: #dc2626;
493
+ background-color: #fef2f2;
494
+ }
495
+ .react-datepicker-wrapper {
496
+ width: 100%;
497
+ .react-datepicker__close-icon::after {
498
+ background-color: transparent;
499
+ font-size: 25px;
500
+ color: var(--_gray-500);
501
+ }
502
+ }
503
+ .custom-upload {
504
+ display: flex;
505
+ flex-direction: column;
506
+ align-items: center;
507
+ align-self: stretch;
508
+
509
+ background-color: var(
510
+ --_ctm-mob-dn-as-cr-us-bd-cr,
511
+ var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr))
512
+ );
513
+ padding: var(
514
+ --_ctm-mob-dn-as-cr-us-pg,
515
+ var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg))
516
+ );
517
+ gap: var(
518
+ --_ctm-mob-dn-as-cr-us-im-gp,
519
+ var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp))
520
+ );
521
+ border-color: var(
522
+ --_ctm-mob-dn-as-cr-us-br-cr,
523
+ var(--_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr))
524
+ );
525
+ border-style: var(
526
+ --_ctm-mob-dn-as-cr-us-br-se,
527
+ var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se))
528
+ );
529
+ border-width: var(
530
+ --_ctm-mob-dn-as-cr-us-br-wh,
531
+ var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh))
532
+ );
533
+ border-radius: var(
534
+ --_ctm-mob-dn-as-cr-us-br-rs,
535
+ var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs))
536
+ );
537
+ .file_upload_text {
538
+ text-align: center;
539
+ display: flex;
540
+ flex-direction: column;
541
+ gap: 6px;
542
+ p {
543
+ strong {
544
+ font-family: var(
545
+ --_ctm-mob-dn-as-cr-us-ft-fy,
546
+ var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
547
+ );
548
+ // color: var(
549
+ // --_ctm-mob-dn-as-cr-us-cr,
550
+ // var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
551
+ // );
552
+ color: var(--_thm-cs-tt-ls-as);
553
+ font-weight: var(
554
+ --_ctm-mob-dn-as-cr-us-ft-wt,
555
+ var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
556
+ );
557
+ font-size: var(
558
+ --_ctm-mob-dn-as-cr-us-ft-se,
559
+ var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
560
+ );
561
+ text-decoration: var(
562
+ --_ctm-mob-dn-as-cr-us-ue,
563
+ var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
564
+ );
565
+ letter-spacing: var(
566
+ --_ctm-mob-dn-as-cr-us-lr-sg,
567
+ var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
568
+ );
569
+ line-height: var(
570
+ --_ctm-mob-dn-as-cr-us-le-ht,
571
+ var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
572
+ );
573
+ font-style: var(
574
+ --_ctm-mob-dn-as-cr-us-ft-se-ic,
575
+ var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
576
+ );
577
+ text-align: var(
578
+ --_ctm-mob-dn-as-cr-us-tt-an,
579
+ var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
580
+ );
581
+ }
582
+ }
583
+ span {
584
+ font-family: var(
585
+ --_ctm-mob-dn-as-cr-us-ft-fy-dc,
586
+ var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
587
+ );
588
+ color: var(
589
+ --_ctm-mob-dn-as-cr-us-cr-dc,
590
+ var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
591
+ );
592
+ font-weight: var(
593
+ --_ctm-mob-dn-as-cr-us-ft-wt-dc,
594
+ var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
595
+ );
596
+ font-size: var(
597
+ --_ctm-mob-dn-as-cr-us-ft-se-dc,
598
+ var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
599
+ );
600
+ text-decoration: var(
601
+ --_ctm-mob-dn-as-cr-us-ue-dc,
602
+ var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
603
+ );
604
+ letter-spacing: var(
605
+ --_ctm-mob-dn-as-cr-us-lr-sg-dc,
606
+ var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
607
+ );
608
+ line-height: var(
609
+ --_ctm-mob-dn-as-cr-us-le-ht-dc,
610
+ var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
611
+ );
612
+ font-style: var(
613
+ --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
614
+ var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
615
+ );
616
+ text-align: var(
617
+ --_ctm-mob-dn-as-cr-us-tt-an-dc,
618
+ var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
619
+ );
620
+ }
621
+ }
622
+ .uploadicon {
623
+ // padding: 10px;
624
+ // background: #f2f4f7;
625
+ display: inline-block;
626
+ // border-radius: 50%;
627
+ // color: var(--_gray-600);
628
+ }
629
+ }
630
+ }
631
+ }
632
+ .error-text {
633
+ font-size: 12px;
634
+ color: var(--_error-500);
635
+ }
636
+ .text_area_attribute {
637
+ width: 100%;
638
+ .input_textarea_a {
639
+ width: 100%;
640
+ }
641
+ }
642
+ .cart_item_attr_disabled {
643
+ pointer-events: none;
644
+
645
+ opacity: 0.5;
646
+ cursor: auto;
647
+ }
648
+ }
649
+ }
650
+ }
651
+
652
+ // toggle styles
653
+ .input_toggle_switch_container {
654
+ display: flex;
655
+ background-color: var(
656
+ --_ctm-mob-dn-as-cr-as-bs-bd-cr,
657
+ var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
658
+ );
659
+ border-color: var(
660
+ --_ctm-mob-dn-as-cr-as-bs-br-cr,
661
+ var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
662
+ );
663
+ border-style: var(
664
+ --_ctm-mob-dn-as-cr-as-bs-br-se,
665
+ var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
666
+ );
667
+ border-width: var(
668
+ --_ctm-mob-dn-as-cr-as-bs-br-wh,
669
+ var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
670
+ );
671
+ border-radius: var(
672
+ --_ctm-mob-dn-as-cr-as-bs-br-rs,
673
+ var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
674
+ );
675
+ padding: var(
676
+ --_ctm-mob-dn-as-cr-as-bs-pg,
677
+ var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
678
+ );
679
+ gap: var(
680
+ --_ctm-mob-dn-as-cr-as-bs-im-gp,
681
+ var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
682
+ );
683
+ .input_toggle_switch {
684
+ position: relative;
685
+ display: inline-block;
686
+ width: 50px;
687
+ height: 28px;
688
+
689
+ input[type="checkbox"] {
690
+ opacity: 0;
691
+ width: 0;
692
+ height: 0;
693
+
694
+ &:checked + .slider {
695
+ background-color: #4caf50;
696
+
697
+ &::before {
698
+ transform: translateX(22px);
699
+ }
700
+ }
701
+ }
702
+
703
+ .slider {
704
+ position: absolute;
705
+ cursor: pointer;
706
+ top: 0;
707
+ left: 0;
708
+ right: 0;
709
+ bottom: 0;
710
+ background-color: #ccc;
711
+ transition: 0.4s;
712
+ border-radius: 28px;
713
+
714
+ &::before {
715
+ position: absolute;
716
+ content: "";
717
+ height: 22px;
718
+ width: 22px;
719
+ left: 3px;
720
+ bottom: 3px;
721
+ background-color: white;
722
+ border-radius: 50%;
723
+ transition: 0.4s;
724
+ }
725
+ }
726
+ }
727
+ .input_toggle_switch_text {
728
+ gap: 4px;
729
+ display: flex;
730
+ flex-direction: column;
731
+ .checkbox_title {
732
+ font-family: var(
733
+ --_ctm-mob-dn-as-cr-as-bs-ft-fy,
734
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
735
+ );
736
+ color: var(
737
+ --_ctm-mob-dn-as-cr-as-bs-cr,
738
+ var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
739
+ );
740
+ font-weight: var(
741
+ --_ctm-mob-dn-as-cr-as-bs-ft-wt,
742
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
743
+ );
744
+ font-size: var(
745
+ --_ctm-mob-dn-as-cr-as-bs-ft-se,
746
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
747
+ );
748
+ text-decoration: var(
749
+ --_ctm-mob-dn-as-cr-as-bs-ue,
750
+ var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
751
+ );
752
+ letter-spacing: var(
753
+ --_ctm-mob-dn-as-cr-as-bs-lr-sg,
754
+ var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
755
+ );
756
+ line-height: var(
757
+ --_ctm-mob-dn-as-cr-as-bs-le-ht,
758
+ var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
759
+ );
760
+ font-style: var(
761
+ --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
762
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
763
+ );
764
+ text-align: var(
765
+ --_ctm-mob-dn-as-cr-as-bs-tt-an,
766
+ var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
767
+ );
768
+ }
769
+ .checkbox_des {
770
+ font-family: var(
771
+ --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
772
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
773
+ );
774
+ color: var(
775
+ --_ctm-mob-dn-as-cr-as-bs-cr-dc,
776
+ var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
777
+ );
778
+ font-weight: var(
779
+ --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
780
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
781
+ );
782
+ font-size: var(
783
+ --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
784
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
785
+ );
786
+ text-decoration: var(
787
+ --_ctm-mob-dn-as-cr-as-bs-ue-dc,
788
+ var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
789
+ );
790
+ letter-spacing: var(
791
+ --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
792
+ var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
793
+ );
794
+ line-height: var(
795
+ --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
796
+ var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
797
+ );
798
+ font-style: var(
799
+ --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
800
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
801
+ );
802
+ text-align: var(
803
+ --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
804
+ var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
805
+ );
806
+ }
807
+ }
808
+ }
809
+
810
+ // input radio styles
811
+ .input_radio_a {
812
+ position: relative;
813
+ display: inline-flex;
814
+ align-items: center;
815
+ cursor: pointer;
816
+ height: 20px;
817
+ width: 20px;
818
+
819
+ input[type="radio"] {
820
+ opacity: 0;
821
+ width: 0;
822
+ height: 0;
823
+
824
+ &:checked + .custom_radio::after {
825
+ display: block;
826
+ }
827
+ }
828
+
829
+ .custom_radio {
830
+ height: 18px;
831
+ width: 18px;
832
+ border-radius: 50%;
833
+ background-color: var(--_base-white);
834
+ border: 2px solid var(--_gray-600);
835
+ position: relative;
836
+ transition: border-color 0.3s ease;
837
+
838
+ &::after {
839
+ content: "";
840
+ position: absolute;
841
+ top: 3px;
842
+ left: 3px;
843
+ width: 8px;
844
+ height: 8px;
845
+ border-radius: 50%;
846
+ background-color: var(--_primary-400);
847
+ display: none;
848
+ }
849
+ }
850
+
851
+ input[type="radio"]:checked + .custom_radio {
852
+ border-color: var(--_primary-400);
853
+ }
854
+
855
+ &.disabled {
856
+ opacity: 0.5;
857
+ pointer-events: none;
858
+ }
859
+ }
860
+
861
+ // .custom-upload {
862
+ // // text-align: center;
863
+ // // border: 1px solid var(--_gray-200);
864
+ // // border-radius: 6px;
865
+ // // padding: 16px;
866
+ // border-radius: 6px;
867
+ // border: 1px solid var(--Gray-200, #eaecf0);
868
+ // background: var(--Base-White, #fff);
869
+ // display: flex;
870
+ // padding: 16px 24px;
871
+ // flex-direction: column;
872
+ // align-items: center;
873
+ // gap: 4px;
874
+ // align-self: stretch;
875
+ // &:hover {
876
+ // cursor: pointer;
877
+ // border: 1px solid var(--_primary-200);
878
+ // background: var(--_primary-25);
879
+ // }
880
+ // .uploadicon {
881
+ // padding: 10px;
882
+ // background: #f2f4f7;
883
+ // display: inline-block;
884
+ // border-radius: 50%;
885
+ // margin-bottom: 12px;
886
+ // color: var(--_gray-600);
887
+ // }
888
+ // p {
889
+ // padding-bottom: 4px;
890
+ // color: var(--_gray-600);
891
+ // font-size: 14px;
892
+ // strong {
893
+ // // color: var(--_primary-400);
894
+ // // font-weight: 600;
895
+ // color: var(--Primary-400, #243dc6);
896
+ // font-size: 14px;
897
+ // font-weight: 600;
898
+ // // line-height: 20px;
899
+ // }
900
+ // }
901
+ // span {
902
+ // color: var(--Gray-600, #475467);
903
+ // font-size: 14px;
904
+ // font-weight: 400;
905
+ // // line-height: 20px;
906
+ // }
907
+ // }
908
+
909
+ .input_color_picker_a {
910
+ width: 100% !important;
911
+ height: 48px;
912
+ border-radius: 4px;
913
+ border: 1px solid var(--Gray-300, #d0d5dd);
914
+ background: var(--Base-White, #fff);
915
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
916
+ outline: none;
917
+ transition: border-color 0.2s ease-in-out;
918
+ font-size: 14px;
919
+ cursor: pointer;
920
+ }
921
+ .attribute_currency_field {
922
+ position: relative;
923
+ input {
924
+ padding: 12px 12px 12px 32px !important;
925
+ }
926
+ svg {
927
+ position: absolute;
928
+ left: 8px;
929
+ top: 10px;
930
+ background: #fff;
931
+ }
932
+ }