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

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