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

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