@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

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 (155) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleCategories.scss +301 -301
  16. package/dist/bundleDetails.scss +6189 -6189
  17. package/dist/buy-for-tab-container.scss +141 -141
  18. package/dist/buy-for-tab.scss +649 -649
  19. package/dist/buy-for-tabs-container-item.scss +80 -80
  20. package/dist/buyForPopup.scss +339 -339
  21. package/dist/cart-details.scss +3986 -3986
  22. package/dist/cart-products-sidebar.scss +211 -211
  23. package/dist/cart-summary.scss +2826 -2826
  24. package/dist/cart-wrapper.scss +127 -127
  25. package/dist/cartAttributes.scss +1422 -1422
  26. package/dist/cartDropdownOverlay.scss +653 -653
  27. package/dist/cartGrouping.scss +89 -89
  28. package/dist/category-groups-element.scss +739 -739
  29. package/dist/category-groups-quota-details.scss +626 -626
  30. package/dist/category.scss +137 -137
  31. package/dist/categoryDetails.scss +61 -61
  32. package/dist/categoryWidget.scss +34 -34
  33. package/dist/checkbox-radio.scss +124 -124
  34. package/dist/code-temp.scss +59 -59
  35. package/dist/colorpicker_v2.scss +62 -62
  36. package/dist/common-element.scss +35 -35
  37. package/dist/confirm-modal.scss +370 -370
  38. package/dist/confirmationModal.scss +139 -139
  39. package/dist/contact-us.scss +105 -105
  40. package/dist/container.scss +168 -168
  41. package/dist/countdown.scss +899 -899
  42. package/dist/coupon.scss +1519 -1519
  43. package/dist/custom-fonts.scss +100 -100
  44. package/dist/customization-tree.scss +162 -162
  45. package/dist/default-dropdown.scss +259 -259
  46. package/dist/dropdownTemplate.scss +699 -699
  47. package/dist/editCartItem.scss +110 -110
  48. package/dist/embed-temp.scss +73 -73
  49. package/dist/embroider-preview-element.scss +94 -94
  50. package/dist/embroider-template-1-v2.scss +1105 -1105
  51. package/dist/embroider-template-1.scss +501 -501
  52. package/dist/embroidery.scss +247 -247
  53. package/dist/employee-bulk-order.scss +4060 -4060
  54. package/dist/emtpy-templates.scss +165 -165
  55. package/dist/faq.scss +696 -696
  56. package/dist/fb-dropdown.scss +135 -135
  57. package/dist/filter-results.scss +361 -361
  58. package/dist/filters.scss +3040 -3040
  59. package/dist/flex-text-editor.scss +271 -271
  60. package/dist/form-preview.scss +530 -530
  61. package/dist/gallery-slider-temp.scss +1776 -1776
  62. package/dist/global-styles.scss +198 -198
  63. package/dist/grid.scss +169 -169
  64. package/dist/icon-library.scss +78 -78
  65. package/dist/image-for-product.scss +21 -21
  66. package/dist/image-temp.scss +203 -203
  67. package/dist/item-stock.scss +93 -93
  68. package/dist/kitDetails.scss +5739 -5739
  69. package/dist/kits.scss +305 -305
  70. package/dist/language-selector.scss +948 -948
  71. package/dist/last-x-orders.scss +285 -285
  72. package/dist/layouter-item.scss +141 -141
  73. package/dist/layouter-pro-item.scss +139 -139
  74. package/dist/layouter-pro.scss +134 -134
  75. package/dist/layouter.scss +491 -491
  76. package/dist/light-box-v2.scss +155 -155
  77. package/dist/lightbox.scss +78 -78
  78. package/dist/loader.scss +37 -37
  79. package/dist/login.scss +29 -11
  80. package/dist/map.scss +1359 -1359
  81. package/dist/marchandiserSets.scss +141 -141
  82. package/dist/mega-menu-container.scss +152 -152
  83. package/dist/menu-item.scss +19 -19
  84. package/dist/menu-v2.scss +999 -999
  85. package/dist/menu.scss +174 -174
  86. package/dist/multi-select-dropdown.scss +316 -316
  87. package/dist/my-templates.scss +477 -477
  88. package/dist/my-wishlist.scss +27 -27
  89. package/dist/option-bar.scss +886 -886
  90. package/dist/order-processing.scss +61 -61
  91. package/dist/order-status.scss +2187 -2187
  92. package/dist/overflow-module.scss +63 -63
  93. package/dist/past-orders.scss +1039 -1039
  94. package/dist/payment-methods.scss +307 -307
  95. package/dist/phone-input.scss +208 -208
  96. package/dist/pickup-locations.scss +1359 -1359
  97. package/dist/position-module.scss +95 -95
  98. package/dist/prefix-list.scss +86 -86
  99. package/dist/product-actions.scss +2872 -2872
  100. package/dist/product-basic-elements.scss +600 -600
  101. package/dist/product-customizations.scss +155 -155
  102. package/dist/product-highlights.scss +348 -348
  103. package/dist/product-image-allocation.scss +1477 -1477
  104. package/dist/product-inventory.scss +1621 -1621
  105. package/dist/product-labels.scss +265 -265
  106. package/dist/product-options.scss +1444 -1444
  107. package/dist/product-price.scss +3392 -3392
  108. package/dist/product-promotions.scss +3224 -3224
  109. package/dist/product-sizechart.scss +1921 -1921
  110. package/dist/product.scss +140 -140
  111. package/dist/profile.scss +824 -824
  112. package/dist/quantity-selector.scss +1074 -1074
  113. package/dist/quick-inventory-check.scss +285 -285
  114. package/dist/quick-links.scss +627 -627
  115. package/dist/quota-details.scss +526 -526
  116. package/dist/quotes.scss +847 -847
  117. package/dist/repeater-embla-controls.scss +211 -211
  118. package/dist/repeater-grid-toggle.scss +206 -206
  119. package/dist/repeater-item.scss +152 -152
  120. package/dist/repeater.scss +946 -946
  121. package/dist/request-for-quotes.scss +841 -841
  122. package/dist/responsive-behaviour.scss +29 -29
  123. package/dist/rfqs.scss +861 -861
  124. package/dist/scroll.scss +414 -414
  125. package/dist/search-results-heading.scss +309 -309
  126. package/dist/search.scss +689 -689
  127. package/dist/section.scss +276 -276
  128. package/dist/shareCartSideBar.scss +254 -254
  129. package/dist/shipping-estimator.scss +41 -41
  130. package/dist/shipping-payments.scss +2518 -2518
  131. package/dist/simple-list.scss +338 -338
  132. package/dist/skeleton.scss +64 -64
  133. package/dist/spotlight.scss +1706 -1706
  134. package/dist/stack.scss +171 -171
  135. package/dist/static-global.scss +292 -292
  136. package/dist/static-text.scss +52 -52
  137. package/dist/stockStatus.scss +70 -70
  138. package/dist/store-locations.scss +1592 -1592
  139. package/dist/sub-category.scss +74 -74
  140. package/dist/submit-quote.scss +275 -275
  141. package/dist/tab-container-item.scss +80 -80
  142. package/dist/tab-container.scss +141 -141
  143. package/dist/table.scss +9 -0
  144. package/dist/tabs.scss +440 -440
  145. package/dist/text-temp.scss +109 -109
  146. package/dist/theme-classes.scss +421 -421
  147. package/dist/toaster.scss +392 -392
  148. package/dist/toggle-button.scss +32 -32
  149. package/dist/transform-properties-module.scss +20 -20
  150. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  151. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  152. package/dist/user-elements.scss +2896 -2896
  153. package/dist/widget.scss +153 -153
  154. package/dist/wishlist-overlay.scss +48 -48
  155. package/package.json +1 -1
package/dist/cartAttributes.scss CHANGED
@@ -1,1422 +1,1422 @@
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
- text-transform: var(
107
- --_ctm-mob-dn-as-hr-tt-tm,
108
- var(--_ctm-tab-dn-as-hr-tt-tm, var(--_ctm-dn-as-hr-tt-tm))
109
- );
110
- word-wrap: var(
111
- --_ctm-mob-dn-as-hr-wd-wp,
112
- var(--_ctm-tab-dn-as-hr-wd-wp, var(--_ctm-dn-as-hr-wd-wp))
113
- );
114
- word-break: var(
115
- --_ctm-mob-dn-as-hr-wd-bk,
116
- var(--_ctm-tab-dn-as-hr-wd-bk, var(--_ctm-dn-as-hr-wd-bk))
117
- );
118
- color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
119
- font-weight: var(
120
- --_ctm-mob-dn-as-hr-ft-wt,
121
- var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
122
- );
123
- font-size: var(
124
- --_ctm-mob-dn-as-hr-ft-se,
125
- var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
126
- );
127
- text-decoration: var(
128
- --_ctm-mob-dn-as-hr-ue,
129
- var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
130
- );
131
- letter-spacing: var(
132
- --_ctm-mob-dn-as-hr-lr-sg,
133
- var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
134
- );
135
- line-height: var(
136
- --_ctm-mob-dn-as-hr-le-ht,
137
- var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
138
- );
139
- font-style: var(
140
- --_ctm-mob-dn-as-hr-ft-se-ic,
141
- var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
142
- );
143
- text-align: var(
144
- --_ctm-mob-dn-as-hr-tt-an,
145
- var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
146
- );
147
- }
148
- .icon svg {
149
- path {
150
- stroke: var(
151
- --_ctm-mob-dn-an-as-im-in-c1,
152
- var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
153
- );
154
- // Overrides the stroke-width presentation attribute baked into the icon markup.
155
- stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25);
156
- }
157
- width: var(
158
- --_ctm-mob-dn-an-as-im-in-se,
159
- var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
160
- );
161
- height: var(
162
- --_ctm-mob-dn-an-as-im-in-se,
163
- var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
164
- );
165
- }
166
-
167
- .iconDesc svg {
168
- path {
169
- stroke: var(
170
- --_ctm-mob-dn-an-as-im-in-c1-dc,
171
- var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
172
- );
173
- // Overrides the stroke-width presentation attribute baked into the icon markup.
174
- stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25);
175
- }
176
- width: var(
177
- --_ctm-mob-dn-an-as-im-in-se-dc,
178
- var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
179
- );
180
- height: var(
181
- --_ctm-mob-dn-an-as-im-in-se-dc,
182
- var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
183
- );
184
- }
185
- }
186
- .attributes-section-body {
187
- width: 100%;
188
- display: flex;
189
- flex-wrap: wrap;
190
- overflow-y: auto;
191
- background-color: var(
192
- --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
193
- var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
194
- );
195
- padding: var(
196
- --_ctm-mob-dn-as-cr-ae-is-wr-pg,
197
- var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
198
- );
199
- gap: var(
200
- --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
201
- var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp, 12px))
202
- );
203
- border-color: var(
204
- --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
205
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
206
- );
207
- border-style: var(
208
- --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
209
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
210
- );
211
- border-width: var(
212
- --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
213
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
214
- );
215
- border-radius: var(
216
- --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
217
- var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
218
- );
219
- .attriTitle {
220
- // font-weight: 600;
221
- // font-size: 14px;
222
- // line-height: 20px;
223
- // color: #101828;
224
- // padding-bottom: 6px;
225
- font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
226
- text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-tm);
227
- word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-wp);
228
- word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-bk);
229
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
230
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
231
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
232
- text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
233
- letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
234
- line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
235
- font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
236
- text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
237
- padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
238
- }
239
- .attriDes {
240
- // font-weight: 400;
241
- // font-size: 14px;
242
- // line-height: 20px;
243
- font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
244
- text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-tm);
245
- word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-wp);
246
- word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-bk);
247
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
248
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
249
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
250
- text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
251
- letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
252
- line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
253
- font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
254
- text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
255
- padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
256
- }
257
- // CurrencyDisplay renders `span.currency_span` and, with isStyledElement, adds no
258
- // inline styles of its own — so the attributesPrice controls own it completely.
259
- // Covers both the per-attribute price and the Order Attributes total.
260
- .currency_span {
261
- display: inline-block;
262
- white-space: nowrap;
263
- font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-fy);
264
- text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-tm);
265
- word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-wp);
266
- word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-bk);
267
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-cr);
268
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-wt);
269
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se);
270
- text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ue);
271
- letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-lr-sg);
272
- line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-le-ht);
273
- font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se-ic);
274
- text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-an);
275
- padding: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-pg);
276
- background-color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-bd-cr);
277
- }
278
- .attribute {
279
- width: 100%;
280
- display: flex;
281
- flex-direction: column;
282
- // Every box property below falls back to the cart-details card styling, so an
283
- // element whose design tokens were never emitted still renders as a card
284
- // instead of an unpadded, borderless row.
285
- padding: var(
286
- --_ctm-mob-dn-as-cr-as-fs-pg,
287
- var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg, 10px))
288
- );
289
- gap: var(
290
- --_ctm-mob-dn-as-cr-as-fs-im-gp,
291
- var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp, 6px))
292
- );
293
- background-color: var(
294
- --_ctm-mob-dn-as-cr-as-fs-bd-cr,
295
- var(--_ctm-tab-dn-as-cr-as-fs-bd-cr, var(--_ctm-dn-as-cr-as-fs-bd-cr, var(--_base-white)))
296
- );
297
- border-color: var(
298
- --_ctm-mob-dn-as-cr-as-fs-br-cr,
299
- var(
300
- --_ctm-tab-dn-as-cr-as-fs-br-cr,
301
- var(--_ctm-dn-as-cr-as-fs-br-cr, var(--_thm-cs-be-se-3))
302
- )
303
- );
304
- border-style: var(
305
- --_ctm-mob-dn-as-cr-as-fs-br-se,
306
- var(--_ctm-tab-dn-as-cr-as-fs-br-se, var(--_ctm-dn-as-cr-as-fs-br-se, solid))
307
- );
308
- border-width: var(
309
- --_ctm-mob-dn-as-cr-as-fs-br-wh,
310
- var(--_ctm-tab-dn-as-cr-as-fs-br-wh, var(--_ctm-dn-as-cr-as-fs-br-wh, 1px))
311
- );
312
- border-radius: var(
313
- --_ctm-mob-dn-as-cr-as-fs-br-rs,
314
- var(--_ctm-tab-dn-as-cr-as-fs-br-rs, var(--_ctm-dn-as-cr-as-fs-br-rs, 4px))
315
- );
316
- .label {
317
- display: block;
318
- padding: var(
319
- --_ctm-mob-dn-as-cr-as-ls-pg,
320
- var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
321
- );
322
- font-family: var(
323
- --_ctm-mob-dn-as-cr-as-ls-ft-fy,
324
- var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
325
- );
326
- text-transform: var(
327
- --_ctm-mob-dn-as-cr-as-ls-tt-tm,
328
- var(--_ctm-tab-dn-as-cr-as-ls-tt-tm, var(--_ctm-dn-as-cr-as-ls-tt-tm))
329
- );
330
- word-wrap: var(
331
- --_ctm-mob-dn-as-cr-as-ls-wd-wp,
332
- var(--_ctm-tab-dn-as-cr-as-ls-wd-wp, var(--_ctm-dn-as-cr-as-ls-wd-wp))
333
- );
334
- word-break: var(
335
- --_ctm-mob-dn-as-cr-as-ls-wd-bk,
336
- var(--_ctm-tab-dn-as-cr-as-ls-wd-bk, var(--_ctm-dn-as-cr-as-ls-wd-bk))
337
- );
338
- &.flex__overflow {
339
- white-space: normal;
340
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
341
- }
342
- color: var(
343
- --_ctm-mob-dn-as-cr-as-ls-cr,
344
- var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
345
- );
346
- font-weight: var(
347
- --_ctm-mob-dn-as-cr-as-ls-ft-wt,
348
- var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
349
- );
350
- font-size: var(
351
- --_ctm-mob-dn-as-cr-as-ls-ft-se,
352
- var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
353
- );
354
- text-decoration: var(
355
- --_ctm-mob-dn-as-cr-as-ls-ue,
356
- var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
357
- );
358
- letter-spacing: var(
359
- --_ctm-mob-dn-as-cr-as-ls-lr-sg,
360
- var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
361
- );
362
- line-height: var(
363
- --_ctm-mob-dn-as-cr-as-ls-le-ht,
364
- var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
365
- );
366
- font-style: var(
367
- --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
368
- var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
369
- );
370
- text-align: var(
371
- --_ctm-mob-dn-as-cr-as-ls-tt-an,
372
- var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
373
- );
374
- &.required::after {
375
- content: " *";
376
- color: var(--_error-500);
377
- }
378
- }
379
- .attribute_field {
380
- width: 100% !important;
381
- input {
382
- background-color: var(
383
- --_ctm-mob-dn-as-cr-as-is-bd-cr,
384
- var(
385
- --_ctm-tab-dn-as-cr-as-is-bd-cr,
386
- var(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white))
387
- )
388
- );
389
- padding: var(
390
- --_ctm-mob-dn-as-cr-as-is-pg,
391
- var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px))
392
- );
393
- gap: var(
394
- --_ctm-mob-dn-as-cr-as-is-im-gp,
395
- var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp, 8px))
396
- );
397
- border-color: var(
398
- --_ctm-mob-dn-as-cr-as-is-br-cr,
399
- var(
400
- --_ctm-tab-dn-as-cr-as-is-br-cr,
401
- var(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3))
402
- )
403
- );
404
- border-style: var(
405
- --_ctm-mob-dn-as-cr-as-is-br-se,
406
- var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se, solid))
407
- );
408
- border-width: var(
409
- --_ctm-mob-dn-as-cr-as-is-br-wh,
410
- var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh, 1px))
411
- );
412
- border-radius: var(
413
- --_ctm-mob-dn-as-cr-as-is-br-rs,
414
- var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs, 4px))
415
- );
416
- &::placeholder {
417
- font-family: var(
418
- --_ctm-mob-dn-as-cr-as-is-ft-fy,
419
- var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
420
- );
421
- text-transform: var(
422
- --_ctm-mob-dn-as-cr-as-is-tt-tm,
423
- var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm))
424
- );
425
- word-wrap: var(
426
- --_ctm-mob-dn-as-cr-as-is-wd-wp,
427
- var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp))
428
- );
429
- word-break: var(
430
- --_ctm-mob-dn-as-cr-as-is-wd-bk,
431
- var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk))
432
- );
433
- color: var(--_thm-cs-be-se-1);
434
- font-weight: var(
435
- --_ctm-mob-dn-as-cr-as-is-ft-wt,
436
- var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
437
- );
438
- font-size: var(
439
- --_ctm-mob-dn-as-cr-as-is-ft-se,
440
- var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
441
- );
442
- text-decoration: var(
443
- --_ctm-mob-dn-as-cr-as-is-ue,
444
- var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
445
- );
446
- letter-spacing: var(
447
- --_ctm-mob-dn-as-cr-as-is-lr-sg,
448
- var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
449
- );
450
- line-height: var(
451
- --_ctm-mob-dn-as-cr-as-is-le-ht,
452
- var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
453
- );
454
- font-style: var(
455
- --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
456
- var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
457
- );
458
- text-align: var(
459
- --_ctm-mob-dn-as-cr-as-is-tt-an,
460
- var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
461
- );
462
- }
463
- }
464
- .attribute_form_field {
465
- font-family: var(
466
- --_ctm-mob-dn-as-cr-as-is-ft-fy,
467
- var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
468
- );
469
- text-transform: var(
470
- --_ctm-mob-dn-as-cr-as-is-tt-tm,
471
- var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm))
472
- );
473
- word-wrap: var(
474
- --_ctm-mob-dn-as-cr-as-is-wd-wp,
475
- var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp))
476
- );
477
- word-break: var(
478
- --_ctm-mob-dn-as-cr-as-is-wd-bk,
479
- var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk))
480
- );
481
- color: var(
482
- --_ctm-mob-dn-as-cr-as-is-cr,
483
- var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
484
- );
485
- font-weight: var(
486
- --_ctm-mob-dn-as-cr-as-is-ft-wt,
487
- var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
488
- );
489
- font-size: var(
490
- --_ctm-mob-dn-as-cr-as-is-ft-se,
491
- var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
492
- );
493
- text-decoration: var(
494
- --_ctm-mob-dn-as-cr-as-is-ue,
495
- var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
496
- );
497
- letter-spacing: var(
498
- --_ctm-mob-dn-as-cr-as-is-lr-sg,
499
- var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
500
- );
501
- line-height: var(
502
- --_ctm-mob-dn-as-cr-as-is-le-ht,
503
- var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
504
- );
505
- font-style: var(
506
- --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
507
- var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
508
- );
509
- text-align: var(
510
- --_ctm-mob-dn-as-cr-as-is-tt-an,
511
- var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
512
- );
513
- transition:
514
- background-color 0.2s,
515
- color 0.2s,
516
- border-color 0.2s,
517
- box-shadow 0.2s;
518
- width: 100%;
519
- padding: var(
520
- --_ctm-mob-dn-as-cr-as-is-pg,
521
- var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px))
522
- );
523
- &:focus {
524
- box-shadow:
525
- 0px 1px 2px rgba(16, 24, 40, 0.05),
526
- 0px 0px 0px 2px var(--_primary-100);
527
- border: 1px solid var(--_primary-300);
528
- }
529
- }
530
- .dropdown-input-section {
531
- height: auto !important;
532
- background-color: var(
533
- --_ctm-mob-dn-as-cr-as-is-bd-cr,
534
- var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
535
- );
536
- padding: var(
537
- --_ctm-mob-dn-as-cr-as-is-pg,
538
- var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
539
- );
540
- border-color: var(
541
- --_ctm-mob-dn-as-cr-as-is-br-cr,
542
- var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
543
- );
544
- border-style: var(
545
- --_ctm-mob-dn-as-cr-as-is-br-se,
546
- var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
547
- );
548
- border-width: var(
549
- --_ctm-mob-dn-as-cr-as-is-br-wh,
550
- var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
551
- );
552
- border-radius: var(
553
- --_ctm-mob-dn-as-cr-as-is-br-rs,
554
- var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
555
- );
556
- font-family: var(
557
- --_ctm-mob-dn-as-cr-as-dn-ft-fy,
558
- var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
559
- );
560
- text-transform: var(
561
- --_ctm-mob-dn-as-cr-as-dn-tt-tm,
562
- var(--_ctm-tab-dn-as-cr-as-dn-tt-tm, var(--_ctm-dn-as-cr-as-dn-tt-tm))
563
- );
564
- word-wrap: var(
565
- --_ctm-mob-dn-as-cr-as-dn-wd-wp,
566
- var(--_ctm-tab-dn-as-cr-as-dn-wd-wp, var(--_ctm-dn-as-cr-as-dn-wd-wp))
567
- );
568
- word-break: var(
569
- --_ctm-mob-dn-as-cr-as-dn-wd-bk,
570
- var(--_ctm-tab-dn-as-cr-as-dn-wd-bk, var(--_ctm-dn-as-cr-as-dn-wd-bk))
571
- );
572
- color: var(
573
- --_ctm-mob-dn-as-cr-as-dn-cr,
574
- var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
575
- );
576
- font-weight: var(
577
- --_ctm-mob-dn-as-cr-as-dn-ft-wt,
578
- var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
579
- );
580
- font-size: var(
581
- --_ctm-mob-dn-as-cr-as-dn-ft-se,
582
- var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
583
- );
584
- text-decoration: var(
585
- --_ctm-mob-dn-as-cr-as-dn-ue,
586
- var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
587
- );
588
- letter-spacing: var(
589
- --_ctm-mob-dn-as-cr-as-dn-lr-sg,
590
- var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
591
- );
592
- line-height: var(
593
- --_ctm-mob-dn-as-cr-as-dn-le-ht,
594
- var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
595
- );
596
- font-style: var(
597
- --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
598
- var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
599
- );
600
- text-align: var(
601
- --_ctm-mob-dn-as-cr-as-dn-tt-an,
602
- var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
603
- );
604
- .selected-display {
605
- .selected-item {
606
- display: flex;
607
- align-items: center;
608
- .color-swatch {
609
- position: relative;
610
- // top: 1px;
611
- }
612
- .svg_icon svg {
613
- width: 16px;
614
- height: 16px;
615
- }
616
- }
617
- }
618
- }
619
- &:focus {
620
- border-color: var(--_primary-400);
621
- outline: 2px solid var(--_primary-200);
622
- }
623
- &.error {
624
- border-color: #dc2626;
625
- background-color: #fef2f2;
626
- }
627
- // DatePickerInput renders the calendar icon as a *sibling* of the input
628
- // wrapper, so it only sits inside the field once it is taken out of flow.
629
- // Without this the icon renders on its own line above the input.
630
- .date_picker_container {
631
- position: relative;
632
-
633
- .svg_icon {
634
- position: absolute;
635
- left: 8px;
636
- // Centring on the midpoint keeps the icon aligned whatever padding or
637
- // font size the input ends up with; a fixed `top` drifts as soon as the
638
- // merchant changes either.
639
- top: 50%;
640
- transform: translateY(-50%);
641
- display: inline-flex;
642
- align-items: center;
643
- line-height: 0;
644
- pointer-events: none;
645
- // The input paints a background, so the icon needs to sit above it.
646
- z-index: 1;
647
-
648
- svg {
649
- display: block;
650
- // The icon markup carries its own width/height/stroke attributes;
651
- // these override them so the attributesInputs icon controls apply.
652
- width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
653
- height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
654
-
655
- path {
656
- stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085);
657
- stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667);
658
- }
659
- }
660
- }
661
-
662
- .react-datepicker-wrapper {
663
- .react-datepicker__input-container {
664
- input {
665
- padding-left: 32px !important;
666
- }
667
- }
668
- }
669
- }
670
- .react-datepicker-wrapper {
671
- width: 100%;
672
- .react-datepicker__close-icon::after {
673
- background-color: transparent;
674
- font-size: 25px;
675
- color: var(--_gray-500);
676
- }
677
- }
678
- // Same shape as the date picker: the percent glyph is a sibling of the input,
679
- // so it needs lifting out of flow to sit inside the field.
680
- // `&.` because attribute.tsx puts this class on the .attribute_field element
681
- // itself (`className="attribute_field input_percent_a"`), not on a child.
682
- &.input_percent_a {
683
- position: relative;
684
-
685
- .svg_icon {
686
- position: absolute;
687
- right: 10px;
688
- top: 50%;
689
- transform: translateY(-50%);
690
- display: inline-flex;
691
- align-items: center;
692
- line-height: 0;
693
- pointer-events: none;
694
- z-index: 1;
695
-
696
- svg {
697
- display: block;
698
- width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
699
- height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
700
-
701
- path {
702
- stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085);
703
- stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667);
704
- }
705
- }
706
- }
707
-
708
- input {
709
- // Keep the value clear of the glyph, and drop the number spinner that
710
- // would otherwise render on top of it.
711
- padding-right: 32px !important;
712
- appearance: textfield;
713
- -moz-appearance: textfield;
714
-
715
- &::-webkit-outer-spin-button,
716
- &::-webkit-inner-spin-button {
717
- -webkit-appearance: none;
718
- margin: 0;
719
- }
720
- }
721
- }
722
- // Co-class on .attribute_field, same as the percent field above.
723
- &.color_picker_a {
724
- position: relative;
725
-
726
- .color-circle {
727
- // The swatch carries inline width/height, so the size control can only
728
- // take effect with !important. Falls back to the inline 30px.
729
- width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important;
730
- height: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important;
731
- }
732
-
733
- .color-picker-container {
734
- // The popover used to sit in flow, so opening it pushed the rest of the
735
- // panel down and overflowed the card in a narrow sidebar.
736
- position: absolute;
737
- z-index: 5;
738
- top: calc(100% + 4px);
739
- left: 0;
740
- min-width: 220px;
741
- background-color: prepareMediaVariable(
742
- --_ctm-dn-as-cr-as-cr-pr-bd-cr,
743
- var(--_base-white)
744
- );
745
- padding: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-pg, 12px);
746
- border-color: prepareMediaVariable(
747
- --_ctm-dn-as-cr-as-cr-pr-br-cr,
748
- var(--_thm-cs-be-se-3)
749
- );
750
- border-style: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-se, solid);
751
- border-width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-wh, 1px);
752
- border-radius: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-rs, 4px);
753
- box-shadow: 0px 4px 12px rgba(16, 24, 40, 0.12);
754
-
755
- .custom_hex_color_picker_div {
756
- margin-top: 8px;
757
-
758
- label {
759
- display: inline-block;
760
- margin-bottom: 4px;
761
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700));
762
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px);
763
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500);
764
- line-height: 20px;
765
- }
766
- }
767
-
768
- .custom__div {
769
- display: grid;
770
- grid-template-columns: repeat(4, 1fr);
771
- gap: 0;
772
-
773
- label {
774
- display: flex;
775
- flex-direction: column;
776
- color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700));
777
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px);
778
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500);
779
-
780
- input {
781
- border: 1px solid var(--_thm-cs-be-se-3);
782
- padding: 8px;
783
- outline: none;
784
- text-align: center;
785
- border-radius: 0;
786
- }
787
-
788
- &:first-child input {
789
- border-right: none;
790
- border-top-left-radius: 4px;
791
- border-bottom-left-radius: 4px;
792
- }
793
-
794
- &:last-child input {
795
- border-left: none;
796
- border-top-right-radius: 4px;
797
- border-bottom-right-radius: 4px;
798
- }
799
- }
800
- }
801
- }
802
- }
803
- // Co-class on .attribute_field, same as the percent field above.
804
- &.input_textarea_a {
805
- width: 100%;
806
-
807
- .attribute_text_area_field {
808
- width: 100% !important;
809
- // A textarea with no height authored collapsed to roughly one row.
810
- min-height: prepareMediaVariable(--_ctm-dn-as-cr-as-tt-aa-ht, 80px);
811
- resize: vertical;
812
- // Each property falls back to the single-line input styling, so the
813
- // textarea still matches the other fields until it is authored.
814
- background-color: prepareMediaVariable(
815
- --_ctm-dn-as-cr-as-tt-aa-bd-cr,
816
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white))
817
- );
818
- padding: prepareMediaVariable(
819
- --_ctm-dn-as-cr-as-tt-aa-pg,
820
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-pg, 8px 12px)
821
- );
822
- border-color: prepareMediaVariable(
823
- --_ctm-dn-as-cr-as-tt-aa-br-cr,
824
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3))
825
- );
826
- border-style: prepareMediaVariable(
827
- --_ctm-dn-as-cr-as-tt-aa-br-se,
828
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-se, solid)
829
- );
830
- border-width: prepareMediaVariable(
831
- --_ctm-dn-as-cr-as-tt-aa-br-wh,
832
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-wh, 1px)
833
- );
834
- border-radius: prepareMediaVariable(
835
- --_ctm-dn-as-cr-as-tt-aa-br-rs,
836
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-rs, 4px)
837
- );
838
- font-family: prepareMediaVariable(
839
- --_ctm-dn-as-cr-as-tt-aa-ft-fy,
840
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-fy)
841
- );
842
- font-size: prepareMediaVariable(
843
- --_ctm-dn-as-cr-as-tt-aa-ft-se,
844
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-se)
845
- );
846
- font-weight: prepareMediaVariable(
847
- --_ctm-dn-as-cr-as-tt-aa-ft-wt,
848
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-wt)
849
- );
850
- color: prepareMediaVariable(
851
- --_ctm-dn-as-cr-as-tt-aa-cr,
852
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-cr)
853
- );
854
- line-height: prepareMediaVariable(
855
- --_ctm-dn-as-cr-as-tt-aa-le-ht,
856
- prepareMediaVariable(--_ctm-dn-as-cr-as-is-le-ht)
857
- );
858
- transition:
859
- background-color 0.2s,
860
- color 0.2s,
861
- border-color 0.2s,
862
- box-shadow 0.2s;
863
-
864
- &::placeholder {
865
- color: var(--_gray-500);
866
- }
867
-
868
- &:focus {
869
- outline: 0 none;
870
- box-shadow:
871
- 0px 1px 2px rgba(16, 24, 40, 0.05),
872
- 0px 0px 0px 2px var(--primary-100);
873
- border: 1px solid var(--primary-300);
874
- }
875
- }
876
- }
877
- .custom-upload {
878
- display: flex;
879
- // Row, matching cart-details: the icon sits beside the text, and the
880
- // filled state puts the preview and the clear button at opposite ends.
881
- align-items: center;
882
- align-self: stretch;
883
- position: relative;
884
-
885
- background-color: var(
886
- --_ctm-mob-dn-as-cr-us-bd-cr,
887
- var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr, var(--_base-white)))
888
- );
889
- padding: var(
890
- --_ctm-mob-dn-as-cr-us-pg,
891
- var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg, 16px))
892
- );
893
- gap: var(
894
- --_ctm-mob-dn-as-cr-us-im-gp,
895
- var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp, 12px))
896
- );
897
- border-color: var(
898
- --_ctm-mob-dn-as-cr-us-br-cr,
899
- var(
900
- --_ctm-tab-dn-as-cr-us-br-cr,
901
- var(--_ctm-dn-as-cr-us-br-cr, var(--_thm-cs-be-se-3))
902
- )
903
- );
904
- border-style: var(
905
- --_ctm-mob-dn-as-cr-us-br-se,
906
- var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se, solid))
907
- );
908
- border-width: var(
909
- --_ctm-mob-dn-as-cr-us-br-wh,
910
- var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh, 1px))
911
- );
912
- border-radius: var(
913
- --_ctm-mob-dn-as-cr-us-br-rs,
914
- var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs, 4px))
915
- );
916
-
917
- .clear_upload_icon {
918
- // Never shrink and never inherit the preview's height: the button stays a
919
- // 30px circle centred against the preview, however many lines the file
920
- // name wraps to. (The old `margin-top: 3px` nudged it off centre.)
921
- flex: 0 0 auto;
922
- align-self: center;
923
- display: flex;
924
- align-items: center;
925
- justify-content: center;
926
- width: 30px;
927
- height: 30px;
928
- background: #fff;
929
- border-radius: 50%;
930
- padding: 3px;
931
-
932
- .svg_icon {
933
- display: flex;
934
- align-items: center;
935
- justify-content: center;
936
- line-height: 0;
937
-
938
- svg {
939
- display: block;
940
- width: 20px;
941
- height: 20px;
942
- }
943
- }
944
-
945
- &:hover {
946
- .svg_icon {
947
- svg {
948
- path {
949
- stroke: var(--_error-500);
950
- }
951
- }
952
- }
953
- }
954
- }
955
-
956
- // &:hover {
957
- // .clear_upload_icon {
958
- // display: block;
959
- // }
960
- // }
961
-
962
- // FileUpload renders the thumbnail and the file name as siblings inside
963
- // .preview_image_container, so the name cannot be styled from inside
964
- // .preview_image. `min-width: 0` is what lets the name truncate instead of
965
- // pushing the clear button out of the card.
966
- .preview_image_container,
967
- .preview_file {
968
- display: flex;
969
- align-items: center;
970
- gap: 8px;
971
- flex: 1 1 auto;
972
- min-width: 0;
973
- }
974
-
975
- .preview_image {
976
- display: flex;
977
- align-items: center;
978
- flex: 0 0 auto;
979
-
980
- img {
981
- width: 100%;
982
- height: 100%;
983
- object-fit: cover;
984
- border-radius: 50%;
985
- display: block;
986
- }
987
- }
988
-
989
- .file_info {
990
- min-width: 0;
991
- }
992
-
993
- // The filled state's file name follows the Uploads description typography,
994
- // so the document/image preview is authorable like the rest of the field.
995
- .image_title,
996
- .file_name,
997
- .file_extension {
998
- min-width: 0;
999
- font-family: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-fy-dc);
1000
- color: prepareMediaVariable(--_ctm-dn-as-cr-us-cr-dc, var(--_gray-700));
1001
- font-size: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-se-dc, 14px);
1002
- font-weight: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-wt-dc, 400);
1003
- line-height: prepareMediaVariable(--_ctm-dn-as-cr-us-le-ht-dc, 150%);
1004
- display: -webkit-box;
1005
- -webkit-box-orient: vertical;
1006
- -webkit-line-clamp: 1;
1007
- overflow: hidden;
1008
- word-break: break-all;
1009
- }
1010
-
1011
- .preview_file {
1012
- .svg_icon {
1013
- flex: 0 0 auto;
1014
- line-height: 0;
1015
- }
1016
- }
1017
- .file_upload_text {
1018
- text-align: center;
1019
- display: flex;
1020
- flex-direction: column;
1021
- gap: 6px;
1022
- p {
1023
- strong {
1024
- font-family: var(
1025
- --_ctm-mob-dn-as-cr-us-ft-fy,
1026
- var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
1027
- );
1028
- text-transform: var(
1029
- --_ctm-mob-dn-as-cr-us-tt-tm,
1030
- var(--_ctm-tab-dn-as-cr-us-tt-tm, var(--_ctm-dn-as-cr-us-tt-tm))
1031
- );
1032
- word-wrap: var(
1033
- --_ctm-mob-dn-as-cr-us-wd-wp,
1034
- var(--_ctm-tab-dn-as-cr-us-wd-wp, var(--_ctm-dn-as-cr-us-wd-wp))
1035
- );
1036
- word-break: var(
1037
- --_ctm-mob-dn-as-cr-us-wd-bk,
1038
- var(--_ctm-tab-dn-as-cr-us-wd-bk, var(--_ctm-dn-as-cr-us-wd-bk))
1039
- );
1040
- // color: var(
1041
- // --_ctm-mob-dn-as-cr-us-cr,
1042
- // var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
1043
- // );
1044
- color: var(--_thm-cs-tt-ls-as);
1045
- font-weight: var(
1046
- --_ctm-mob-dn-as-cr-us-ft-wt,
1047
- var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
1048
- );
1049
- font-size: var(
1050
- --_ctm-mob-dn-as-cr-us-ft-se,
1051
- var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
1052
- );
1053
- text-decoration: var(
1054
- --_ctm-mob-dn-as-cr-us-ue,
1055
- var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
1056
- );
1057
- letter-spacing: var(
1058
- --_ctm-mob-dn-as-cr-us-lr-sg,
1059
- var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
1060
- );
1061
- line-height: var(
1062
- --_ctm-mob-dn-as-cr-us-le-ht,
1063
- var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
1064
- );
1065
- font-style: var(
1066
- --_ctm-mob-dn-as-cr-us-ft-se-ic,
1067
- var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
1068
- );
1069
- text-align: var(
1070
- --_ctm-mob-dn-as-cr-us-tt-an,
1071
- var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
1072
- );
1073
- }
1074
- }
1075
- span {
1076
- font-family: var(
1077
- --_ctm-mob-dn-as-cr-us-ft-fy-dc,
1078
- var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
1079
- );
1080
- text-transform: var(
1081
- --_ctm-mob-dn-as-cr-us-tt-tm-dc,
1082
- var(--_ctm-tab-dn-as-cr-us-tt-tm-dc, var(--_ctm-dn-as-cr-us-tt-tm-dc))
1083
- );
1084
- word-wrap: var(
1085
- --_ctm-mob-dn-as-cr-us-wd-wp-dc,
1086
- var(--_ctm-tab-dn-as-cr-us-wd-wp-dc, var(--_ctm-dn-as-cr-us-wd-wp-dc))
1087
- );
1088
- word-break: var(
1089
- --_ctm-mob-dn-as-cr-us-wd-bk-dc,
1090
- var(--_ctm-tab-dn-as-cr-us-wd-bk-dc, var(--_ctm-dn-as-cr-us-wd-bk-dc))
1091
- );
1092
- color: var(
1093
- --_ctm-mob-dn-as-cr-us-cr-dc,
1094
- var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
1095
- );
1096
- font-weight: var(
1097
- --_ctm-mob-dn-as-cr-us-ft-wt-dc,
1098
- var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
1099
- );
1100
- font-size: var(
1101
- --_ctm-mob-dn-as-cr-us-ft-se-dc,
1102
- var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
1103
- );
1104
- text-decoration: var(
1105
- --_ctm-mob-dn-as-cr-us-ue-dc,
1106
- var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
1107
- );
1108
- letter-spacing: var(
1109
- --_ctm-mob-dn-as-cr-us-lr-sg-dc,
1110
- var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
1111
- );
1112
- line-height: var(
1113
- --_ctm-mob-dn-as-cr-us-le-ht-dc,
1114
- var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
1115
- );
1116
- font-style: var(
1117
- --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
1118
- var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
1119
- );
1120
- text-align: var(
1121
- --_ctm-mob-dn-as-cr-us-tt-an-dc,
1122
- var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
1123
- );
1124
- }
1125
- }
1126
- .uploadicon {
1127
- // padding: 10px;
1128
- // background: #f2f4f7;
1129
- display: inline-block;
1130
- // border-radius: 50%;
1131
- // color: var(--_gray-600);
1132
- }
1133
- }
1134
- .has-file {
1135
- justify-content: space-between;
1136
- }
1137
- // Multi-upload stacks one filled card per file, above the upload button.
1138
- .multi-upload-list {
1139
- display: flex;
1140
- flex-direction: column;
1141
- gap: 8px;
1142
- margin-bottom: 8px;
1143
- }
1144
- }
1145
- }
1146
- .error-text {
1147
- font-size: 12px;
1148
- color: var(--_error-500);
1149
- }
1150
- .text_area_attribute {
1151
- width: 100%;
1152
- .input_textarea_a {
1153
- width: 100%;
1154
- }
1155
- }
1156
- .cart_item_attr_disabled {
1157
- pointer-events: none;
1158
-
1159
- opacity: 0.5;
1160
- cursor: auto;
1161
- }
1162
- }
1163
- }
1164
- }
1165
-
1166
- // toggle styles
1167
- .input_toggle_switch_container {
1168
- display: flex;
1169
- background-color: var(
1170
- --_ctm-mob-dn-as-cr-as-bs-bd-cr,
1171
- var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
1172
- );
1173
- border-color: var(
1174
- --_ctm-mob-dn-as-cr-as-bs-br-cr,
1175
- var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
1176
- );
1177
- border-style: var(
1178
- --_ctm-mob-dn-as-cr-as-bs-br-se,
1179
- var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
1180
- );
1181
- border-width: var(
1182
- --_ctm-mob-dn-as-cr-as-bs-br-wh,
1183
- var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
1184
- );
1185
- border-radius: var(
1186
- --_ctm-mob-dn-as-cr-as-bs-br-rs,
1187
- var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
1188
- );
1189
- padding: var(
1190
- --_ctm-mob-dn-as-cr-as-bs-pg,
1191
- var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
1192
- );
1193
- gap: var(
1194
- --_ctm-mob-dn-as-cr-as-bs-im-gp,
1195
- var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
1196
- );
1197
- .input_toggle_switch {
1198
- position: relative;
1199
- display: inline-block;
1200
- width: 50px;
1201
- height: 28px;
1202
-
1203
- input[type="checkbox"] {
1204
- opacity: 0;
1205
- width: 0;
1206
- height: 0;
1207
-
1208
- &:checked + .slider {
1209
- background-color: #4caf50;
1210
-
1211
- &::before {
1212
- transform: translateX(22px);
1213
- }
1214
- }
1215
- }
1216
-
1217
- .slider {
1218
- position: absolute;
1219
- cursor: pointer;
1220
- top: 0;
1221
- left: 0;
1222
- right: 0;
1223
- bottom: 0;
1224
- background-color: #ccc;
1225
- transition: 0.4s;
1226
- border-radius: 28px;
1227
-
1228
- &::before {
1229
- position: absolute;
1230
- content: "";
1231
- height: 22px;
1232
- width: 22px;
1233
- left: 3px;
1234
- bottom: 3px;
1235
- background-color: white;
1236
- border-radius: 50%;
1237
- transition: 0.4s;
1238
- }
1239
- }
1240
- }
1241
- .input_toggle_switch_text {
1242
- gap: 4px;
1243
- display: flex;
1244
- flex-direction: column;
1245
- .checkbox_title {
1246
- font-family: var(
1247
- --_ctm-mob-dn-as-cr-as-bs-ft-fy,
1248
- var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
1249
- );
1250
- text-transform: var(
1251
- --_ctm-mob-dn-as-cr-as-bs-tt-tm,
1252
- var(--_ctm-tab-dn-as-cr-as-bs-tt-tm, var(--_ctm-dn-as-cr-as-bs-tt-tm))
1253
- );
1254
- word-wrap: var(
1255
- --_ctm-mob-dn-as-cr-as-bs-wd-wp,
1256
- var(--_ctm-tab-dn-as-cr-as-bs-wd-wp, var(--_ctm-dn-as-cr-as-bs-wd-wp))
1257
- );
1258
- word-break: var(
1259
- --_ctm-mob-dn-as-cr-as-bs-wd-bk,
1260
- var(--_ctm-tab-dn-as-cr-as-bs-wd-bk, var(--_ctm-dn-as-cr-as-bs-wd-bk))
1261
- );
1262
- color: var(
1263
- --_ctm-mob-dn-as-cr-as-bs-cr,
1264
- var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
1265
- );
1266
- font-weight: var(
1267
- --_ctm-mob-dn-as-cr-as-bs-ft-wt,
1268
- var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
1269
- );
1270
- font-size: var(
1271
- --_ctm-mob-dn-as-cr-as-bs-ft-se,
1272
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
1273
- );
1274
- text-decoration: var(
1275
- --_ctm-mob-dn-as-cr-as-bs-ue,
1276
- var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
1277
- );
1278
- letter-spacing: var(
1279
- --_ctm-mob-dn-as-cr-as-bs-lr-sg,
1280
- var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
1281
- );
1282
- line-height: var(
1283
- --_ctm-mob-dn-as-cr-as-bs-le-ht,
1284
- var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
1285
- );
1286
- font-style: var(
1287
- --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
1288
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
1289
- );
1290
- text-align: var(
1291
- --_ctm-mob-dn-as-cr-as-bs-tt-an,
1292
- var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
1293
- );
1294
- }
1295
- .checkbox_des {
1296
- font-family: var(
1297
- --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
1298
- var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
1299
- );
1300
- text-transform: var(
1301
- --_ctm-mob-dn-as-cr-as-bs-tt-tm-dc,
1302
- var(--_ctm-tab-dn-as-cr-as-bs-tt-tm-dc, var(--_ctm-dn-as-cr-as-bs-tt-tm-dc))
1303
- );
1304
- word-wrap: var(
1305
- --_ctm-mob-dn-as-cr-as-bs-wd-wp-dc,
1306
- var(--_ctm-tab-dn-as-cr-as-bs-wd-wp-dc, var(--_ctm-dn-as-cr-as-bs-wd-wp-dc))
1307
- );
1308
- word-break: var(
1309
- --_ctm-mob-dn-as-cr-as-bs-wd-bk-dc,
1310
- var(--_ctm-tab-dn-as-cr-as-bs-wd-bk-dc, var(--_ctm-dn-as-cr-as-bs-wd-bk-dc))
1311
- );
1312
- color: var(
1313
- --_ctm-mob-dn-as-cr-as-bs-cr-dc,
1314
- var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
1315
- );
1316
- font-weight: var(
1317
- --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
1318
- var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
1319
- );
1320
- font-size: var(
1321
- --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
1322
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
1323
- );
1324
- text-decoration: var(
1325
- --_ctm-mob-dn-as-cr-as-bs-ue-dc,
1326
- var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
1327
- );
1328
- letter-spacing: var(
1329
- --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
1330
- var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
1331
- );
1332
- line-height: var(
1333
- --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
1334
- var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
1335
- );
1336
- font-style: var(
1337
- --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
1338
- var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
1339
- );
1340
- text-align: var(
1341
- --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
1342
- var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
1343
- );
1344
- }
1345
- }
1346
- }
1347
-
1348
- // input radio styles
1349
- .input_radio_a {
1350
- position: relative;
1351
- display: inline-flex;
1352
- align-items: center;
1353
- cursor: pointer;
1354
- height: 20px;
1355
- width: 20px;
1356
-
1357
- input[type="radio"] {
1358
- opacity: 0;
1359
- width: 0;
1360
- height: 0;
1361
-
1362
- &:checked + .custom_radio::after {
1363
- display: block;
1364
- }
1365
- }
1366
-
1367
- .custom_radio {
1368
- height: 18px;
1369
- width: 18px;
1370
- border-radius: 50%;
1371
- background-color: var(--_base-white);
1372
- border: 2px solid var(--_gray-600);
1373
- position: relative;
1374
- transition: border-color 0.3s ease;
1375
-
1376
- &::after {
1377
- content: "";
1378
- position: absolute;
1379
- top: 3px;
1380
- left: 3px;
1381
- width: 8px;
1382
- height: 8px;
1383
- border-radius: 50%;
1384
- background-color: var(--_primary-400);
1385
- display: none;
1386
- }
1387
- }
1388
-
1389
- input[type="radio"]:checked + .custom_radio {
1390
- border-color: var(--_primary-400);
1391
- }
1392
-
1393
- &.disabled {
1394
- opacity: 0.5;
1395
- pointer-events: none;
1396
- }
1397
- }
1398
-
1399
- .input_color_picker_a {
1400
- width: 100% !important;
1401
- height: 48px;
1402
- border-radius: 4px;
1403
- border: 1px solid var(--Gray-300, #d0d5dd);
1404
- background: var(--Base-White, #fff);
1405
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1406
- outline: none;
1407
- transition: border-color 0.2s ease-in-out;
1408
- font-size: 14px;
1409
- cursor: pointer;
1410
- }
1411
- .attribute_currency_field {
1412
- position: relative;
1413
- input {
1414
- padding: 12px 12px 12px 32px !important;
1415
- }
1416
- svg {
1417
- position: absolute;
1418
- left: 8px;
1419
- top: 10px;
1420
- background: #fff;
1421
- }
1422
- }
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
+ text-transform: var(
107
+ --_ctm-mob-dn-as-hr-tt-tm,
108
+ var(--_ctm-tab-dn-as-hr-tt-tm, var(--_ctm-dn-as-hr-tt-tm))
109
+ );
110
+ word-wrap: var(
111
+ --_ctm-mob-dn-as-hr-wd-wp,
112
+ var(--_ctm-tab-dn-as-hr-wd-wp, var(--_ctm-dn-as-hr-wd-wp))
113
+ );
114
+ word-break: var(
115
+ --_ctm-mob-dn-as-hr-wd-bk,
116
+ var(--_ctm-tab-dn-as-hr-wd-bk, var(--_ctm-dn-as-hr-wd-bk))
117
+ );
118
+ color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
119
+ font-weight: var(
120
+ --_ctm-mob-dn-as-hr-ft-wt,
121
+ var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
122
+ );
123
+ font-size: var(
124
+ --_ctm-mob-dn-as-hr-ft-se,
125
+ var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
126
+ );
127
+ text-decoration: var(
128
+ --_ctm-mob-dn-as-hr-ue,
129
+ var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
130
+ );
131
+ letter-spacing: var(
132
+ --_ctm-mob-dn-as-hr-lr-sg,
133
+ var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
134
+ );
135
+ line-height: var(
136
+ --_ctm-mob-dn-as-hr-le-ht,
137
+ var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
138
+ );
139
+ font-style: var(
140
+ --_ctm-mob-dn-as-hr-ft-se-ic,
141
+ var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
142
+ );
143
+ text-align: var(
144
+ --_ctm-mob-dn-as-hr-tt-an,
145
+ var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
146
+ );
147
+ }
148
+ .icon svg {
149
+ path {
150
+ stroke: var(
151
+ --_ctm-mob-dn-an-as-im-in-c1,
152
+ var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
153
+ );
154
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
155
+ stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25);
156
+ }
157
+ width: var(
158
+ --_ctm-mob-dn-an-as-im-in-se,
159
+ var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
160
+ );
161
+ height: var(
162
+ --_ctm-mob-dn-an-as-im-in-se,
163
+ var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
164
+ );
165
+ }
166
+
167
+ .iconDesc svg {
168
+ path {
169
+ stroke: var(
170
+ --_ctm-mob-dn-an-as-im-in-c1-dc,
171
+ var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
172
+ );
173
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
174
+ stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25);
175
+ }
176
+ width: var(
177
+ --_ctm-mob-dn-an-as-im-in-se-dc,
178
+ var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
179
+ );
180
+ height: var(
181
+ --_ctm-mob-dn-an-as-im-in-se-dc,
182
+ var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
183
+ );
184
+ }
185
+ }
186
+ .attributes-section-body {
187
+ width: 100%;
188
+ display: flex;
189
+ flex-wrap: wrap;
190
+ overflow-y: auto;
191
+ background-color: var(
192
+ --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
193
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
194
+ );
195
+ padding: var(
196
+ --_ctm-mob-dn-as-cr-ae-is-wr-pg,
197
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
198
+ );
199
+ gap: var(
200
+ --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
201
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp, 12px))
202
+ );
203
+ border-color: var(
204
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
205
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
206
+ );
207
+ border-style: var(
208
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
209
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
210
+ );
211
+ border-width: var(
212
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
213
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
214
+ );
215
+ border-radius: var(
216
+ --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
217
+ var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
218
+ );
219
+ .attriTitle {
220
+ // font-weight: 600;
221
+ // font-size: 14px;
222
+ // line-height: 20px;
223
+ // color: #101828;
224
+ // padding-bottom: 6px;
225
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
226
+ text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-tm);
227
+ word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-wp);
228
+ word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-bk);
229
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
230
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
231
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
232
+ text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
233
+ letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
234
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
235
+ font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
236
+ text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
237
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
238
+ }
239
+ .attriDes {
240
+ // font-weight: 400;
241
+ // font-size: 14px;
242
+ // line-height: 20px;
243
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
244
+ text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-tm);
245
+ word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-wp);
246
+ word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-bk);
247
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
248
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
249
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
250
+ text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
251
+ letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
252
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
253
+ font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
254
+ text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
255
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
256
+ }
257
+ // CurrencyDisplay renders `span.currency_span` and, with isStyledElement, adds no
258
+ // inline styles of its own — so the attributesPrice controls own it completely.
259
+ // Covers both the per-attribute price and the Order Attributes total.
260
+ .currency_span {
261
+ display: inline-block;
262
+ white-space: nowrap;
263
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-fy);
264
+ text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-tm);
265
+ word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-wp);
266
+ word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-wd-bk);
267
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-cr);
268
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-wt);
269
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se);
270
+ text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ue);
271
+ letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-lr-sg);
272
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-le-ht);
273
+ font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-ft-se-ic);
274
+ text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-tt-an);
275
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-pg);
276
+ background-color: prepareMediaVariable(--_ctm-dn-as-cr-as-pe-bd-cr);
277
+ }
278
+ .attribute {
279
+ width: 100%;
280
+ display: flex;
281
+ flex-direction: column;
282
+ // Every box property below falls back to the cart-details card styling, so an
283
+ // element whose design tokens were never emitted still renders as a card
284
+ // instead of an unpadded, borderless row.
285
+ padding: var(
286
+ --_ctm-mob-dn-as-cr-as-fs-pg,
287
+ var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg, 10px))
288
+ );
289
+ gap: var(
290
+ --_ctm-mob-dn-as-cr-as-fs-im-gp,
291
+ var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp, 6px))
292
+ );
293
+ background-color: var(
294
+ --_ctm-mob-dn-as-cr-as-fs-bd-cr,
295
+ var(--_ctm-tab-dn-as-cr-as-fs-bd-cr, var(--_ctm-dn-as-cr-as-fs-bd-cr, var(--_base-white)))
296
+ );
297
+ border-color: var(
298
+ --_ctm-mob-dn-as-cr-as-fs-br-cr,
299
+ var(
300
+ --_ctm-tab-dn-as-cr-as-fs-br-cr,
301
+ var(--_ctm-dn-as-cr-as-fs-br-cr, var(--_thm-cs-be-se-3))
302
+ )
303
+ );
304
+ border-style: var(
305
+ --_ctm-mob-dn-as-cr-as-fs-br-se,
306
+ var(--_ctm-tab-dn-as-cr-as-fs-br-se, var(--_ctm-dn-as-cr-as-fs-br-se, solid))
307
+ );
308
+ border-width: var(
309
+ --_ctm-mob-dn-as-cr-as-fs-br-wh,
310
+ var(--_ctm-tab-dn-as-cr-as-fs-br-wh, var(--_ctm-dn-as-cr-as-fs-br-wh, 1px))
311
+ );
312
+ border-radius: var(
313
+ --_ctm-mob-dn-as-cr-as-fs-br-rs,
314
+ var(--_ctm-tab-dn-as-cr-as-fs-br-rs, var(--_ctm-dn-as-cr-as-fs-br-rs, 4px))
315
+ );
316
+ .label {
317
+ display: block;
318
+ padding: var(
319
+ --_ctm-mob-dn-as-cr-as-ls-pg,
320
+ var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
321
+ );
322
+ font-family: var(
323
+ --_ctm-mob-dn-as-cr-as-ls-ft-fy,
324
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
325
+ );
326
+ text-transform: var(
327
+ --_ctm-mob-dn-as-cr-as-ls-tt-tm,
328
+ var(--_ctm-tab-dn-as-cr-as-ls-tt-tm, var(--_ctm-dn-as-cr-as-ls-tt-tm))
329
+ );
330
+ word-wrap: var(
331
+ --_ctm-mob-dn-as-cr-as-ls-wd-wp,
332
+ var(--_ctm-tab-dn-as-cr-as-ls-wd-wp, var(--_ctm-dn-as-cr-as-ls-wd-wp))
333
+ );
334
+ word-break: var(
335
+ --_ctm-mob-dn-as-cr-as-ls-wd-bk,
336
+ var(--_ctm-tab-dn-as-cr-as-ls-wd-bk, var(--_ctm-dn-as-cr-as-ls-wd-bk))
337
+ );
338
+ &.flex__overflow {
339
+ white-space: normal;
340
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
341
+ }
342
+ color: var(
343
+ --_ctm-mob-dn-as-cr-as-ls-cr,
344
+ var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
345
+ );
346
+ font-weight: var(
347
+ --_ctm-mob-dn-as-cr-as-ls-ft-wt,
348
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
349
+ );
350
+ font-size: var(
351
+ --_ctm-mob-dn-as-cr-as-ls-ft-se,
352
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
353
+ );
354
+ text-decoration: var(
355
+ --_ctm-mob-dn-as-cr-as-ls-ue,
356
+ var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
357
+ );
358
+ letter-spacing: var(
359
+ --_ctm-mob-dn-as-cr-as-ls-lr-sg,
360
+ var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
361
+ );
362
+ line-height: var(
363
+ --_ctm-mob-dn-as-cr-as-ls-le-ht,
364
+ var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
365
+ );
366
+ font-style: var(
367
+ --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
368
+ var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
369
+ );
370
+ text-align: var(
371
+ --_ctm-mob-dn-as-cr-as-ls-tt-an,
372
+ var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
373
+ );
374
+ &.required::after {
375
+ content: " *";
376
+ color: var(--_error-500);
377
+ }
378
+ }
379
+ .attribute_field {
380
+ width: 100% !important;
381
+ input {
382
+ background-color: var(
383
+ --_ctm-mob-dn-as-cr-as-is-bd-cr,
384
+ var(
385
+ --_ctm-tab-dn-as-cr-as-is-bd-cr,
386
+ var(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white))
387
+ )
388
+ );
389
+ padding: var(
390
+ --_ctm-mob-dn-as-cr-as-is-pg,
391
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px))
392
+ );
393
+ gap: var(
394
+ --_ctm-mob-dn-as-cr-as-is-im-gp,
395
+ var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp, 8px))
396
+ );
397
+ border-color: var(
398
+ --_ctm-mob-dn-as-cr-as-is-br-cr,
399
+ var(
400
+ --_ctm-tab-dn-as-cr-as-is-br-cr,
401
+ var(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3))
402
+ )
403
+ );
404
+ border-style: var(
405
+ --_ctm-mob-dn-as-cr-as-is-br-se,
406
+ var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se, solid))
407
+ );
408
+ border-width: var(
409
+ --_ctm-mob-dn-as-cr-as-is-br-wh,
410
+ var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh, 1px))
411
+ );
412
+ border-radius: var(
413
+ --_ctm-mob-dn-as-cr-as-is-br-rs,
414
+ var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs, 4px))
415
+ );
416
+ &::placeholder {
417
+ font-family: var(
418
+ --_ctm-mob-dn-as-cr-as-is-ft-fy,
419
+ var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
420
+ );
421
+ text-transform: var(
422
+ --_ctm-mob-dn-as-cr-as-is-tt-tm,
423
+ var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm))
424
+ );
425
+ word-wrap: var(
426
+ --_ctm-mob-dn-as-cr-as-is-wd-wp,
427
+ var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp))
428
+ );
429
+ word-break: var(
430
+ --_ctm-mob-dn-as-cr-as-is-wd-bk,
431
+ var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk))
432
+ );
433
+ color: var(--_thm-cs-be-se-1);
434
+ font-weight: var(
435
+ --_ctm-mob-dn-as-cr-as-is-ft-wt,
436
+ var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
437
+ );
438
+ font-size: var(
439
+ --_ctm-mob-dn-as-cr-as-is-ft-se,
440
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
441
+ );
442
+ text-decoration: var(
443
+ --_ctm-mob-dn-as-cr-as-is-ue,
444
+ var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
445
+ );
446
+ letter-spacing: var(
447
+ --_ctm-mob-dn-as-cr-as-is-lr-sg,
448
+ var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
449
+ );
450
+ line-height: var(
451
+ --_ctm-mob-dn-as-cr-as-is-le-ht,
452
+ var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
453
+ );
454
+ font-style: var(
455
+ --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
456
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
457
+ );
458
+ text-align: var(
459
+ --_ctm-mob-dn-as-cr-as-is-tt-an,
460
+ var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
461
+ );
462
+ }
463
+ }
464
+ .attribute_form_field {
465
+ font-family: var(
466
+ --_ctm-mob-dn-as-cr-as-is-ft-fy,
467
+ var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
468
+ );
469
+ text-transform: var(
470
+ --_ctm-mob-dn-as-cr-as-is-tt-tm,
471
+ var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm))
472
+ );
473
+ word-wrap: var(
474
+ --_ctm-mob-dn-as-cr-as-is-wd-wp,
475
+ var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp))
476
+ );
477
+ word-break: var(
478
+ --_ctm-mob-dn-as-cr-as-is-wd-bk,
479
+ var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk))
480
+ );
481
+ color: var(
482
+ --_ctm-mob-dn-as-cr-as-is-cr,
483
+ var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
484
+ );
485
+ font-weight: var(
486
+ --_ctm-mob-dn-as-cr-as-is-ft-wt,
487
+ var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
488
+ );
489
+ font-size: var(
490
+ --_ctm-mob-dn-as-cr-as-is-ft-se,
491
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
492
+ );
493
+ text-decoration: var(
494
+ --_ctm-mob-dn-as-cr-as-is-ue,
495
+ var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
496
+ );
497
+ letter-spacing: var(
498
+ --_ctm-mob-dn-as-cr-as-is-lr-sg,
499
+ var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
500
+ );
501
+ line-height: var(
502
+ --_ctm-mob-dn-as-cr-as-is-le-ht,
503
+ var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
504
+ );
505
+ font-style: var(
506
+ --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
507
+ var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
508
+ );
509
+ text-align: var(
510
+ --_ctm-mob-dn-as-cr-as-is-tt-an,
511
+ var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
512
+ );
513
+ transition:
514
+ background-color 0.2s,
515
+ color 0.2s,
516
+ border-color 0.2s,
517
+ box-shadow 0.2s;
518
+ width: 100%;
519
+ padding: var(
520
+ --_ctm-mob-dn-as-cr-as-is-pg,
521
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg, 8px 12px))
522
+ );
523
+ &:focus {
524
+ box-shadow:
525
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
526
+ 0px 0px 0px 2px var(--_primary-100);
527
+ border: 1px solid var(--_primary-300);
528
+ }
529
+ }
530
+ .dropdown-input-section {
531
+ height: auto !important;
532
+ background-color: var(
533
+ --_ctm-mob-dn-as-cr-as-is-bd-cr,
534
+ var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
535
+ );
536
+ padding: var(
537
+ --_ctm-mob-dn-as-cr-as-is-pg,
538
+ var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
539
+ );
540
+ border-color: var(
541
+ --_ctm-mob-dn-as-cr-as-is-br-cr,
542
+ var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
543
+ );
544
+ border-style: var(
545
+ --_ctm-mob-dn-as-cr-as-is-br-se,
546
+ var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
547
+ );
548
+ border-width: var(
549
+ --_ctm-mob-dn-as-cr-as-is-br-wh,
550
+ var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
551
+ );
552
+ border-radius: var(
553
+ --_ctm-mob-dn-as-cr-as-is-br-rs,
554
+ var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
555
+ );
556
+ font-family: var(
557
+ --_ctm-mob-dn-as-cr-as-dn-ft-fy,
558
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
559
+ );
560
+ text-transform: var(
561
+ --_ctm-mob-dn-as-cr-as-dn-tt-tm,
562
+ var(--_ctm-tab-dn-as-cr-as-dn-tt-tm, var(--_ctm-dn-as-cr-as-dn-tt-tm))
563
+ );
564
+ word-wrap: var(
565
+ --_ctm-mob-dn-as-cr-as-dn-wd-wp,
566
+ var(--_ctm-tab-dn-as-cr-as-dn-wd-wp, var(--_ctm-dn-as-cr-as-dn-wd-wp))
567
+ );
568
+ word-break: var(
569
+ --_ctm-mob-dn-as-cr-as-dn-wd-bk,
570
+ var(--_ctm-tab-dn-as-cr-as-dn-wd-bk, var(--_ctm-dn-as-cr-as-dn-wd-bk))
571
+ );
572
+ color: var(
573
+ --_ctm-mob-dn-as-cr-as-dn-cr,
574
+ var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
575
+ );
576
+ font-weight: var(
577
+ --_ctm-mob-dn-as-cr-as-dn-ft-wt,
578
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
579
+ );
580
+ font-size: var(
581
+ --_ctm-mob-dn-as-cr-as-dn-ft-se,
582
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
583
+ );
584
+ text-decoration: var(
585
+ --_ctm-mob-dn-as-cr-as-dn-ue,
586
+ var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
587
+ );
588
+ letter-spacing: var(
589
+ --_ctm-mob-dn-as-cr-as-dn-lr-sg,
590
+ var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
591
+ );
592
+ line-height: var(
593
+ --_ctm-mob-dn-as-cr-as-dn-le-ht,
594
+ var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
595
+ );
596
+ font-style: var(
597
+ --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
598
+ var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
599
+ );
600
+ text-align: var(
601
+ --_ctm-mob-dn-as-cr-as-dn-tt-an,
602
+ var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
603
+ );
604
+ .selected-display {
605
+ .selected-item {
606
+ display: flex;
607
+ align-items: center;
608
+ .color-swatch {
609
+ position: relative;
610
+ // top: 1px;
611
+ }
612
+ .svg_icon svg {
613
+ width: 16px;
614
+ height: 16px;
615
+ }
616
+ }
617
+ }
618
+ }
619
+ &:focus {
620
+ border-color: var(--_primary-400);
621
+ outline: 2px solid var(--_primary-200);
622
+ }
623
+ &.error {
624
+ border-color: #dc2626;
625
+ background-color: #fef2f2;
626
+ }
627
+ // DatePickerInput renders the calendar icon as a *sibling* of the input
628
+ // wrapper, so it only sits inside the field once it is taken out of flow.
629
+ // Without this the icon renders on its own line above the input.
630
+ .date_picker_container {
631
+ position: relative;
632
+
633
+ .svg_icon {
634
+ position: absolute;
635
+ left: 8px;
636
+ // Centring on the midpoint keeps the icon aligned whatever padding or
637
+ // font size the input ends up with; a fixed `top` drifts as soon as the
638
+ // merchant changes either.
639
+ top: 50%;
640
+ transform: translateY(-50%);
641
+ display: inline-flex;
642
+ align-items: center;
643
+ line-height: 0;
644
+ pointer-events: none;
645
+ // The input paints a background, so the icon needs to sit above it.
646
+ z-index: 1;
647
+
648
+ svg {
649
+ display: block;
650
+ // The icon markup carries its own width/height/stroke attributes;
651
+ // these override them so the attributesInputs icon controls apply.
652
+ width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
653
+ height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
654
+
655
+ path {
656
+ stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085);
657
+ stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667);
658
+ }
659
+ }
660
+ }
661
+
662
+ .react-datepicker-wrapper {
663
+ .react-datepicker__input-container {
664
+ input {
665
+ padding-left: 32px !important;
666
+ }
667
+ }
668
+ }
669
+ }
670
+ .react-datepicker-wrapper {
671
+ width: 100%;
672
+ .react-datepicker__close-icon::after {
673
+ background-color: transparent;
674
+ font-size: 25px;
675
+ color: var(--_gray-500);
676
+ }
677
+ }
678
+ // Same shape as the date picker: the percent glyph is a sibling of the input,
679
+ // so it needs lifting out of flow to sit inside the field.
680
+ // `&.` because attribute.tsx puts this class on the .attribute_field element
681
+ // itself (`className="attribute_field input_percent_a"`), not on a child.
682
+ &.input_percent_a {
683
+ position: relative;
684
+
685
+ .svg_icon {
686
+ position: absolute;
687
+ right: 10px;
688
+ top: 50%;
689
+ transform: translateY(-50%);
690
+ display: inline-flex;
691
+ align-items: center;
692
+ line-height: 0;
693
+ pointer-events: none;
694
+ z-index: 1;
695
+
696
+ svg {
697
+ display: block;
698
+ width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
699
+ height: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-se, 16px);
700
+
701
+ path {
702
+ stroke: prepareMediaVariable(--_ctm-dn-as-cr-as-is-in-c1, #667085);
703
+ stroke-width: prepareMediaVariable(--_ctm-dn-as-cr-as-is-se-wh, 1.66667);
704
+ }
705
+ }
706
+ }
707
+
708
+ input {
709
+ // Keep the value clear of the glyph, and drop the number spinner that
710
+ // would otherwise render on top of it.
711
+ padding-right: 32px !important;
712
+ appearance: textfield;
713
+ -moz-appearance: textfield;
714
+
715
+ &::-webkit-outer-spin-button,
716
+ &::-webkit-inner-spin-button {
717
+ -webkit-appearance: none;
718
+ margin: 0;
719
+ }
720
+ }
721
+ }
722
+ // Co-class on .attribute_field, same as the percent field above.
723
+ &.color_picker_a {
724
+ position: relative;
725
+
726
+ .color-circle {
727
+ // The swatch carries inline width/height, so the size control can only
728
+ // take effect with !important. Falls back to the inline 30px.
729
+ width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important;
730
+ height: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-in-se, 30px) !important;
731
+ }
732
+
733
+ .color-picker-container {
734
+ // The popover used to sit in flow, so opening it pushed the rest of the
735
+ // panel down and overflowed the card in a narrow sidebar.
736
+ position: absolute;
737
+ z-index: 5;
738
+ top: calc(100% + 4px);
739
+ left: 0;
740
+ min-width: 220px;
741
+ background-color: prepareMediaVariable(
742
+ --_ctm-dn-as-cr-as-cr-pr-bd-cr,
743
+ var(--_base-white)
744
+ );
745
+ padding: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-pg, 12px);
746
+ border-color: prepareMediaVariable(
747
+ --_ctm-dn-as-cr-as-cr-pr-br-cr,
748
+ var(--_thm-cs-be-se-3)
749
+ );
750
+ border-style: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-se, solid);
751
+ border-width: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-wh, 1px);
752
+ border-radius: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-br-rs, 4px);
753
+ box-shadow: 0px 4px 12px rgba(16, 24, 40, 0.12);
754
+
755
+ .custom_hex_color_picker_div {
756
+ margin-top: 8px;
757
+
758
+ label {
759
+ display: inline-block;
760
+ margin-bottom: 4px;
761
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700));
762
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px);
763
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500);
764
+ line-height: 20px;
765
+ }
766
+ }
767
+
768
+ .custom__div {
769
+ display: grid;
770
+ grid-template-columns: repeat(4, 1fr);
771
+ gap: 0;
772
+
773
+ label {
774
+ display: flex;
775
+ flex-direction: column;
776
+ color: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-cr, var(--_gray-700));
777
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-se, 14px);
778
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-cr-pr-ft-wt, 500);
779
+
780
+ input {
781
+ border: 1px solid var(--_thm-cs-be-se-3);
782
+ padding: 8px;
783
+ outline: none;
784
+ text-align: center;
785
+ border-radius: 0;
786
+ }
787
+
788
+ &:first-child input {
789
+ border-right: none;
790
+ border-top-left-radius: 4px;
791
+ border-bottom-left-radius: 4px;
792
+ }
793
+
794
+ &:last-child input {
795
+ border-left: none;
796
+ border-top-right-radius: 4px;
797
+ border-bottom-right-radius: 4px;
798
+ }
799
+ }
800
+ }
801
+ }
802
+ }
803
+ // Co-class on .attribute_field, same as the percent field above.
804
+ &.input_textarea_a {
805
+ width: 100%;
806
+
807
+ .attribute_text_area_field {
808
+ width: 100% !important;
809
+ // A textarea with no height authored collapsed to roughly one row.
810
+ min-height: prepareMediaVariable(--_ctm-dn-as-cr-as-tt-aa-ht, 80px);
811
+ resize: vertical;
812
+ // Each property falls back to the single-line input styling, so the
813
+ // textarea still matches the other fields until it is authored.
814
+ background-color: prepareMediaVariable(
815
+ --_ctm-dn-as-cr-as-tt-aa-bd-cr,
816
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-bd-cr, var(--_base-white))
817
+ );
818
+ padding: prepareMediaVariable(
819
+ --_ctm-dn-as-cr-as-tt-aa-pg,
820
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-pg, 8px 12px)
821
+ );
822
+ border-color: prepareMediaVariable(
823
+ --_ctm-dn-as-cr-as-tt-aa-br-cr,
824
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-cr, var(--_thm-cs-be-se-3))
825
+ );
826
+ border-style: prepareMediaVariable(
827
+ --_ctm-dn-as-cr-as-tt-aa-br-se,
828
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-se, solid)
829
+ );
830
+ border-width: prepareMediaVariable(
831
+ --_ctm-dn-as-cr-as-tt-aa-br-wh,
832
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-wh, 1px)
833
+ );
834
+ border-radius: prepareMediaVariable(
835
+ --_ctm-dn-as-cr-as-tt-aa-br-rs,
836
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-br-rs, 4px)
837
+ );
838
+ font-family: prepareMediaVariable(
839
+ --_ctm-dn-as-cr-as-tt-aa-ft-fy,
840
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-fy)
841
+ );
842
+ font-size: prepareMediaVariable(
843
+ --_ctm-dn-as-cr-as-tt-aa-ft-se,
844
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-se)
845
+ );
846
+ font-weight: prepareMediaVariable(
847
+ --_ctm-dn-as-cr-as-tt-aa-ft-wt,
848
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-ft-wt)
849
+ );
850
+ color: prepareMediaVariable(
851
+ --_ctm-dn-as-cr-as-tt-aa-cr,
852
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-cr)
853
+ );
854
+ line-height: prepareMediaVariable(
855
+ --_ctm-dn-as-cr-as-tt-aa-le-ht,
856
+ prepareMediaVariable(--_ctm-dn-as-cr-as-is-le-ht)
857
+ );
858
+ transition:
859
+ background-color 0.2s,
860
+ color 0.2s,
861
+ border-color 0.2s,
862
+ box-shadow 0.2s;
863
+
864
+ &::placeholder {
865
+ color: var(--_gray-500);
866
+ }
867
+
868
+ &:focus {
869
+ outline: 0 none;
870
+ box-shadow:
871
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
872
+ 0px 0px 0px 2px var(--primary-100);
873
+ border: 1px solid var(--primary-300);
874
+ }
875
+ }
876
+ }
877
+ .custom-upload {
878
+ display: flex;
879
+ // Row, matching cart-details: the icon sits beside the text, and the
880
+ // filled state puts the preview and the clear button at opposite ends.
881
+ align-items: center;
882
+ align-self: stretch;
883
+ position: relative;
884
+
885
+ background-color: var(
886
+ --_ctm-mob-dn-as-cr-us-bd-cr,
887
+ var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr, var(--_base-white)))
888
+ );
889
+ padding: var(
890
+ --_ctm-mob-dn-as-cr-us-pg,
891
+ var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg, 16px))
892
+ );
893
+ gap: var(
894
+ --_ctm-mob-dn-as-cr-us-im-gp,
895
+ var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp, 12px))
896
+ );
897
+ border-color: var(
898
+ --_ctm-mob-dn-as-cr-us-br-cr,
899
+ var(
900
+ --_ctm-tab-dn-as-cr-us-br-cr,
901
+ var(--_ctm-dn-as-cr-us-br-cr, var(--_thm-cs-be-se-3))
902
+ )
903
+ );
904
+ border-style: var(
905
+ --_ctm-mob-dn-as-cr-us-br-se,
906
+ var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se, solid))
907
+ );
908
+ border-width: var(
909
+ --_ctm-mob-dn-as-cr-us-br-wh,
910
+ var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh, 1px))
911
+ );
912
+ border-radius: var(
913
+ --_ctm-mob-dn-as-cr-us-br-rs,
914
+ var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs, 4px))
915
+ );
916
+
917
+ .clear_upload_icon {
918
+ // Never shrink and never inherit the preview's height: the button stays a
919
+ // 30px circle centred against the preview, however many lines the file
920
+ // name wraps to. (The old `margin-top: 3px` nudged it off centre.)
921
+ flex: 0 0 auto;
922
+ align-self: center;
923
+ display: flex;
924
+ align-items: center;
925
+ justify-content: center;
926
+ width: 30px;
927
+ height: 30px;
928
+ background: #fff;
929
+ border-radius: 50%;
930
+ padding: 3px;
931
+
932
+ .svg_icon {
933
+ display: flex;
934
+ align-items: center;
935
+ justify-content: center;
936
+ line-height: 0;
937
+
938
+ svg {
939
+ display: block;
940
+ width: 20px;
941
+ height: 20px;
942
+ }
943
+ }
944
+
945
+ &:hover {
946
+ .svg_icon {
947
+ svg {
948
+ path {
949
+ stroke: var(--_error-500);
950
+ }
951
+ }
952
+ }
953
+ }
954
+ }
955
+
956
+ // &:hover {
957
+ // .clear_upload_icon {
958
+ // display: block;
959
+ // }
960
+ // }
961
+
962
+ // FileUpload renders the thumbnail and the file name as siblings inside
963
+ // .preview_image_container, so the name cannot be styled from inside
964
+ // .preview_image. `min-width: 0` is what lets the name truncate instead of
965
+ // pushing the clear button out of the card.
966
+ .preview_image_container,
967
+ .preview_file {
968
+ display: flex;
969
+ align-items: center;
970
+ gap: 8px;
971
+ flex: 1 1 auto;
972
+ min-width: 0;
973
+ }
974
+
975
+ .preview_image {
976
+ display: flex;
977
+ align-items: center;
978
+ flex: 0 0 auto;
979
+
980
+ img {
981
+ width: 100%;
982
+ height: 100%;
983
+ object-fit: cover;
984
+ border-radius: 50%;
985
+ display: block;
986
+ }
987
+ }
988
+
989
+ .file_info {
990
+ min-width: 0;
991
+ }
992
+
993
+ // The filled state's file name follows the Uploads description typography,
994
+ // so the document/image preview is authorable like the rest of the field.
995
+ .image_title,
996
+ .file_name,
997
+ .file_extension {
998
+ min-width: 0;
999
+ font-family: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-fy-dc);
1000
+ color: prepareMediaVariable(--_ctm-dn-as-cr-us-cr-dc, var(--_gray-700));
1001
+ font-size: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-se-dc, 14px);
1002
+ font-weight: prepareMediaVariable(--_ctm-dn-as-cr-us-ft-wt-dc, 400);
1003
+ line-height: prepareMediaVariable(--_ctm-dn-as-cr-us-le-ht-dc, 150%);
1004
+ display: -webkit-box;
1005
+ -webkit-box-orient: vertical;
1006
+ -webkit-line-clamp: 1;
1007
+ overflow: hidden;
1008
+ word-break: break-all;
1009
+ }
1010
+
1011
+ .preview_file {
1012
+ .svg_icon {
1013
+ flex: 0 0 auto;
1014
+ line-height: 0;
1015
+ }
1016
+ }
1017
+ .file_upload_text {
1018
+ text-align: center;
1019
+ display: flex;
1020
+ flex-direction: column;
1021
+ gap: 6px;
1022
+ p {
1023
+ strong {
1024
+ font-family: var(
1025
+ --_ctm-mob-dn-as-cr-us-ft-fy,
1026
+ var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
1027
+ );
1028
+ text-transform: var(
1029
+ --_ctm-mob-dn-as-cr-us-tt-tm,
1030
+ var(--_ctm-tab-dn-as-cr-us-tt-tm, var(--_ctm-dn-as-cr-us-tt-tm))
1031
+ );
1032
+ word-wrap: var(
1033
+ --_ctm-mob-dn-as-cr-us-wd-wp,
1034
+ var(--_ctm-tab-dn-as-cr-us-wd-wp, var(--_ctm-dn-as-cr-us-wd-wp))
1035
+ );
1036
+ word-break: var(
1037
+ --_ctm-mob-dn-as-cr-us-wd-bk,
1038
+ var(--_ctm-tab-dn-as-cr-us-wd-bk, var(--_ctm-dn-as-cr-us-wd-bk))
1039
+ );
1040
+ // color: var(
1041
+ // --_ctm-mob-dn-as-cr-us-cr,
1042
+ // var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
1043
+ // );
1044
+ color: var(--_thm-cs-tt-ls-as);
1045
+ font-weight: var(
1046
+ --_ctm-mob-dn-as-cr-us-ft-wt,
1047
+ var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
1048
+ );
1049
+ font-size: var(
1050
+ --_ctm-mob-dn-as-cr-us-ft-se,
1051
+ var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
1052
+ );
1053
+ text-decoration: var(
1054
+ --_ctm-mob-dn-as-cr-us-ue,
1055
+ var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
1056
+ );
1057
+ letter-spacing: var(
1058
+ --_ctm-mob-dn-as-cr-us-lr-sg,
1059
+ var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
1060
+ );
1061
+ line-height: var(
1062
+ --_ctm-mob-dn-as-cr-us-le-ht,
1063
+ var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
1064
+ );
1065
+ font-style: var(
1066
+ --_ctm-mob-dn-as-cr-us-ft-se-ic,
1067
+ var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
1068
+ );
1069
+ text-align: var(
1070
+ --_ctm-mob-dn-as-cr-us-tt-an,
1071
+ var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
1072
+ );
1073
+ }
1074
+ }
1075
+ span {
1076
+ font-family: var(
1077
+ --_ctm-mob-dn-as-cr-us-ft-fy-dc,
1078
+ var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
1079
+ );
1080
+ text-transform: var(
1081
+ --_ctm-mob-dn-as-cr-us-tt-tm-dc,
1082
+ var(--_ctm-tab-dn-as-cr-us-tt-tm-dc, var(--_ctm-dn-as-cr-us-tt-tm-dc))
1083
+ );
1084
+ word-wrap: var(
1085
+ --_ctm-mob-dn-as-cr-us-wd-wp-dc,
1086
+ var(--_ctm-tab-dn-as-cr-us-wd-wp-dc, var(--_ctm-dn-as-cr-us-wd-wp-dc))
1087
+ );
1088
+ word-break: var(
1089
+ --_ctm-mob-dn-as-cr-us-wd-bk-dc,
1090
+ var(--_ctm-tab-dn-as-cr-us-wd-bk-dc, var(--_ctm-dn-as-cr-us-wd-bk-dc))
1091
+ );
1092
+ color: var(
1093
+ --_ctm-mob-dn-as-cr-us-cr-dc,
1094
+ var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
1095
+ );
1096
+ font-weight: var(
1097
+ --_ctm-mob-dn-as-cr-us-ft-wt-dc,
1098
+ var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
1099
+ );
1100
+ font-size: var(
1101
+ --_ctm-mob-dn-as-cr-us-ft-se-dc,
1102
+ var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
1103
+ );
1104
+ text-decoration: var(
1105
+ --_ctm-mob-dn-as-cr-us-ue-dc,
1106
+ var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
1107
+ );
1108
+ letter-spacing: var(
1109
+ --_ctm-mob-dn-as-cr-us-lr-sg-dc,
1110
+ var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
1111
+ );
1112
+ line-height: var(
1113
+ --_ctm-mob-dn-as-cr-us-le-ht-dc,
1114
+ var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
1115
+ );
1116
+ font-style: var(
1117
+ --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
1118
+ var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
1119
+ );
1120
+ text-align: var(
1121
+ --_ctm-mob-dn-as-cr-us-tt-an-dc,
1122
+ var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
1123
+ );
1124
+ }
1125
+ }
1126
+ .uploadicon {
1127
+ // padding: 10px;
1128
+ // background: #f2f4f7;
1129
+ display: inline-block;
1130
+ // border-radius: 50%;
1131
+ // color: var(--_gray-600);
1132
+ }
1133
+ }
1134
+ .has-file {
1135
+ justify-content: space-between;
1136
+ }
1137
+ // Multi-upload stacks one filled card per file, above the upload button.
1138
+ .multi-upload-list {
1139
+ display: flex;
1140
+ flex-direction: column;
1141
+ gap: 8px;
1142
+ margin-bottom: 8px;
1143
+ }
1144
+ }
1145
+ }
1146
+ .error-text {
1147
+ font-size: 12px;
1148
+ color: var(--_error-500);
1149
+ }
1150
+ .text_area_attribute {
1151
+ width: 100%;
1152
+ .input_textarea_a {
1153
+ width: 100%;
1154
+ }
1155
+ }
1156
+ .cart_item_attr_disabled {
1157
+ pointer-events: none;
1158
+
1159
+ opacity: 0.5;
1160
+ cursor: auto;
1161
+ }
1162
+ }
1163
+ }
1164
+ }
1165
+
1166
+ // toggle styles
1167
+ .input_toggle_switch_container {
1168
+ display: flex;
1169
+ background-color: var(
1170
+ --_ctm-mob-dn-as-cr-as-bs-bd-cr,
1171
+ var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
1172
+ );
1173
+ border-color: var(
1174
+ --_ctm-mob-dn-as-cr-as-bs-br-cr,
1175
+ var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
1176
+ );
1177
+ border-style: var(
1178
+ --_ctm-mob-dn-as-cr-as-bs-br-se,
1179
+ var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
1180
+ );
1181
+ border-width: var(
1182
+ --_ctm-mob-dn-as-cr-as-bs-br-wh,
1183
+ var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
1184
+ );
1185
+ border-radius: var(
1186
+ --_ctm-mob-dn-as-cr-as-bs-br-rs,
1187
+ var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
1188
+ );
1189
+ padding: var(
1190
+ --_ctm-mob-dn-as-cr-as-bs-pg,
1191
+ var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
1192
+ );
1193
+ gap: var(
1194
+ --_ctm-mob-dn-as-cr-as-bs-im-gp,
1195
+ var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
1196
+ );
1197
+ .input_toggle_switch {
1198
+ position: relative;
1199
+ display: inline-block;
1200
+ width: 50px;
1201
+ height: 28px;
1202
+
1203
+ input[type="checkbox"] {
1204
+ opacity: 0;
1205
+ width: 0;
1206
+ height: 0;
1207
+
1208
+ &:checked + .slider {
1209
+ background-color: #4caf50;
1210
+
1211
+ &::before {
1212
+ transform: translateX(22px);
1213
+ }
1214
+ }
1215
+ }
1216
+
1217
+ .slider {
1218
+ position: absolute;
1219
+ cursor: pointer;
1220
+ top: 0;
1221
+ left: 0;
1222
+ right: 0;
1223
+ bottom: 0;
1224
+ background-color: #ccc;
1225
+ transition: 0.4s;
1226
+ border-radius: 28px;
1227
+
1228
+ &::before {
1229
+ position: absolute;
1230
+ content: "";
1231
+ height: 22px;
1232
+ width: 22px;
1233
+ left: 3px;
1234
+ bottom: 3px;
1235
+ background-color: white;
1236
+ border-radius: 50%;
1237
+ transition: 0.4s;
1238
+ }
1239
+ }
1240
+ }
1241
+ .input_toggle_switch_text {
1242
+ gap: 4px;
1243
+ display: flex;
1244
+ flex-direction: column;
1245
+ .checkbox_title {
1246
+ font-family: var(
1247
+ --_ctm-mob-dn-as-cr-as-bs-ft-fy,
1248
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
1249
+ );
1250
+ text-transform: var(
1251
+ --_ctm-mob-dn-as-cr-as-bs-tt-tm,
1252
+ var(--_ctm-tab-dn-as-cr-as-bs-tt-tm, var(--_ctm-dn-as-cr-as-bs-tt-tm))
1253
+ );
1254
+ word-wrap: var(
1255
+ --_ctm-mob-dn-as-cr-as-bs-wd-wp,
1256
+ var(--_ctm-tab-dn-as-cr-as-bs-wd-wp, var(--_ctm-dn-as-cr-as-bs-wd-wp))
1257
+ );
1258
+ word-break: var(
1259
+ --_ctm-mob-dn-as-cr-as-bs-wd-bk,
1260
+ var(--_ctm-tab-dn-as-cr-as-bs-wd-bk, var(--_ctm-dn-as-cr-as-bs-wd-bk))
1261
+ );
1262
+ color: var(
1263
+ --_ctm-mob-dn-as-cr-as-bs-cr,
1264
+ var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
1265
+ );
1266
+ font-weight: var(
1267
+ --_ctm-mob-dn-as-cr-as-bs-ft-wt,
1268
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
1269
+ );
1270
+ font-size: var(
1271
+ --_ctm-mob-dn-as-cr-as-bs-ft-se,
1272
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
1273
+ );
1274
+ text-decoration: var(
1275
+ --_ctm-mob-dn-as-cr-as-bs-ue,
1276
+ var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
1277
+ );
1278
+ letter-spacing: var(
1279
+ --_ctm-mob-dn-as-cr-as-bs-lr-sg,
1280
+ var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
1281
+ );
1282
+ line-height: var(
1283
+ --_ctm-mob-dn-as-cr-as-bs-le-ht,
1284
+ var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
1285
+ );
1286
+ font-style: var(
1287
+ --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
1288
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
1289
+ );
1290
+ text-align: var(
1291
+ --_ctm-mob-dn-as-cr-as-bs-tt-an,
1292
+ var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
1293
+ );
1294
+ }
1295
+ .checkbox_des {
1296
+ font-family: var(
1297
+ --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
1298
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
1299
+ );
1300
+ text-transform: var(
1301
+ --_ctm-mob-dn-as-cr-as-bs-tt-tm-dc,
1302
+ var(--_ctm-tab-dn-as-cr-as-bs-tt-tm-dc, var(--_ctm-dn-as-cr-as-bs-tt-tm-dc))
1303
+ );
1304
+ word-wrap: var(
1305
+ --_ctm-mob-dn-as-cr-as-bs-wd-wp-dc,
1306
+ var(--_ctm-tab-dn-as-cr-as-bs-wd-wp-dc, var(--_ctm-dn-as-cr-as-bs-wd-wp-dc))
1307
+ );
1308
+ word-break: var(
1309
+ --_ctm-mob-dn-as-cr-as-bs-wd-bk-dc,
1310
+ var(--_ctm-tab-dn-as-cr-as-bs-wd-bk-dc, var(--_ctm-dn-as-cr-as-bs-wd-bk-dc))
1311
+ );
1312
+ color: var(
1313
+ --_ctm-mob-dn-as-cr-as-bs-cr-dc,
1314
+ var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
1315
+ );
1316
+ font-weight: var(
1317
+ --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
1318
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
1319
+ );
1320
+ font-size: var(
1321
+ --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
1322
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
1323
+ );
1324
+ text-decoration: var(
1325
+ --_ctm-mob-dn-as-cr-as-bs-ue-dc,
1326
+ var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
1327
+ );
1328
+ letter-spacing: var(
1329
+ --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
1330
+ var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
1331
+ );
1332
+ line-height: var(
1333
+ --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
1334
+ var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
1335
+ );
1336
+ font-style: var(
1337
+ --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
1338
+ var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
1339
+ );
1340
+ text-align: var(
1341
+ --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
1342
+ var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
1343
+ );
1344
+ }
1345
+ }
1346
+ }
1347
+
1348
+ // input radio styles
1349
+ .input_radio_a {
1350
+ position: relative;
1351
+ display: inline-flex;
1352
+ align-items: center;
1353
+ cursor: pointer;
1354
+ height: 20px;
1355
+ width: 20px;
1356
+
1357
+ input[type="radio"] {
1358
+ opacity: 0;
1359
+ width: 0;
1360
+ height: 0;
1361
+
1362
+ &:checked + .custom_radio::after {
1363
+ display: block;
1364
+ }
1365
+ }
1366
+
1367
+ .custom_radio {
1368
+ height: 18px;
1369
+ width: 18px;
1370
+ border-radius: 50%;
1371
+ background-color: var(--_base-white);
1372
+ border: 2px solid var(--_gray-600);
1373
+ position: relative;
1374
+ transition: border-color 0.3s ease;
1375
+
1376
+ &::after {
1377
+ content: "";
1378
+ position: absolute;
1379
+ top: 3px;
1380
+ left: 3px;
1381
+ width: 8px;
1382
+ height: 8px;
1383
+ border-radius: 50%;
1384
+ background-color: var(--_primary-400);
1385
+ display: none;
1386
+ }
1387
+ }
1388
+
1389
+ input[type="radio"]:checked + .custom_radio {
1390
+ border-color: var(--_primary-400);
1391
+ }
1392
+
1393
+ &.disabled {
1394
+ opacity: 0.5;
1395
+ pointer-events: none;
1396
+ }
1397
+ }
1398
+
1399
+ .input_color_picker_a {
1400
+ width: 100% !important;
1401
+ height: 48px;
1402
+ border-radius: 4px;
1403
+ border: 1px solid var(--Gray-300, #d0d5dd);
1404
+ background: var(--Base-White, #fff);
1405
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
1406
+ outline: none;
1407
+ transition: border-color 0.2s ease-in-out;
1408
+ font-size: 14px;
1409
+ cursor: pointer;
1410
+ }
1411
+ .attribute_currency_field {
1412
+ position: relative;
1413
+ input {
1414
+ padding: 12px 12px 12px 32px !important;
1415
+ }
1416
+ svg {
1417
+ position: absolute;
1418
+ left: 8px;
1419
+ top: 10px;
1420
+ background: #fff;
1421
+ }
1422
+ }