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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (158) hide show
  1. package/dist/add-existing-form.scss +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleCategories.scss +301 -301
  16. package/dist/bundleDetails.scss +6189 -6189
  17. package/dist/buy-for-tab-container.scss +141 -141
  18. package/dist/buy-for-tab.scss +649 -649
  19. package/dist/buy-for-tabs-container-item.scss +80 -80
  20. package/dist/buyForPopup.scss +339 -339
  21. package/dist/cart-details.scss +3986 -3986
  22. package/dist/cart-products-sidebar.scss +211 -211
  23. package/dist/cart-summary.scss +2826 -2826
  24. package/dist/cart-wrapper.scss +127 -127
  25. package/dist/cartAttributes.scss +1422 -1422
  26. package/dist/cartDropdownOverlay.scss +653 -653
  27. package/dist/cartGrouping.scss +89 -89
  28. package/dist/category-groups-element.scss +739 -739
  29. package/dist/category-groups-quota-details.scss +626 -626
  30. package/dist/category.scss +137 -137
  31. package/dist/categoryDetails.scss +61 -61
  32. package/dist/categoryWidget.scss +34 -34
  33. package/dist/checkbox-radio.scss +124 -124
  34. package/dist/code-temp.scss +59 -59
  35. package/dist/colorpicker_v2.scss +62 -62
  36. package/dist/common-element.scss +35 -35
  37. package/dist/confirm-modal.scss +370 -370
  38. package/dist/confirmationModal.scss +139 -139
  39. package/dist/contact-us.scss +105 -105
  40. package/dist/container.scss +168 -168
  41. package/dist/countdown.scss +899 -899
  42. package/dist/coupon.scss +1519 -1519
  43. package/dist/custom-fonts.scss +100 -100
  44. package/dist/customization-tree.scss +162 -162
  45. package/dist/default-dropdown.scss +259 -259
  46. package/dist/dropdownTemplate.scss +699 -699
  47. package/dist/editCartItem.scss +110 -110
  48. package/dist/embed-temp.scss +73 -73
  49. package/dist/embroider-preview-element.scss +94 -94
  50. package/dist/embroider-template-1-v2.scss +1105 -1105
  51. package/dist/embroider-template-1.scss +501 -501
  52. package/dist/embroidery.scss +247 -247
  53. package/dist/employee-bulk-order.scss +4060 -4060
  54. package/dist/emtpy-templates.scss +165 -165
  55. package/dist/faq.scss +696 -696
  56. package/dist/fb-dropdown.scss +135 -135
  57. package/dist/filter-results.scss +361 -361
  58. package/dist/filters.scss +3040 -3040
  59. package/dist/flex-text-editor.scss +271 -271
  60. package/dist/form-preview.scss +530 -530
  61. package/dist/gallery-slider-temp.scss +1776 -1776
  62. package/dist/global-styles.scss +198 -198
  63. package/dist/grid.scss +169 -169
  64. package/dist/icon-library.scss +78 -78
  65. package/dist/icon-list.scss +39 -0
  66. package/dist/image-for-product.scss +21 -21
  67. package/dist/image-temp.scss +203 -203
  68. package/dist/item-stock.scss +93 -93
  69. package/dist/kitDetails.scss +5739 -5739
  70. package/dist/kits.scss +305 -305
  71. package/dist/language-selector.scss +948 -948
  72. package/dist/last-x-orders.scss +285 -285
  73. package/dist/layouter-item.scss +141 -141
  74. package/dist/layouter-pro-item.scss +139 -139
  75. package/dist/layouter-pro.scss +134 -134
  76. package/dist/layouter.scss +491 -491
  77. package/dist/light-box-v2.scss +155 -155
  78. package/dist/lightbox.scss +78 -78
  79. package/dist/loader.scss +37 -37
  80. package/dist/login.scss +29 -11
  81. package/dist/map.scss +1359 -1359
  82. package/dist/marchandiserSets.scss +141 -141
  83. package/dist/mega-menu-container.scss +152 -152
  84. package/dist/menu-item.scss +19 -19
  85. package/dist/menu-v2.scss +999 -999
  86. package/dist/menu.scss +174 -174
  87. package/dist/multi-select-dropdown.scss +316 -316
  88. package/dist/my-templates.scss +477 -477
  89. package/dist/my-wishlist.scss +27 -27
  90. package/dist/option-bar.scss +886 -886
  91. package/dist/order-processing.scss +61 -61
  92. package/dist/order-status.scss +2187 -2187
  93. package/dist/overflow-module.scss +63 -63
  94. package/dist/past-orders.scss +1039 -1039
  95. package/dist/payment-methods.scss +307 -307
  96. package/dist/phone-input.scss +208 -208
  97. package/dist/pickup-locations.scss +1359 -1359
  98. package/dist/position-module.scss +95 -95
  99. package/dist/prefix-list.scss +86 -86
  100. package/dist/product-actions.scss +2872 -2872
  101. package/dist/product-basic-elements.scss +600 -600
  102. package/dist/product-customizations.scss +155 -155
  103. package/dist/product-highlights.scss +348 -348
  104. package/dist/product-image-allocation.scss +1477 -1477
  105. package/dist/product-inventory.scss +1621 -1621
  106. package/dist/product-labels.scss +265 -265
  107. package/dist/product-options.scss +1444 -1444
  108. package/dist/product-price.scss +4 -0
  109. package/dist/product-promotions.scss +3224 -3224
  110. package/dist/product-sizechart.scss +1921 -1921
  111. package/dist/product.scss +140 -140
  112. package/dist/profile.scss +824 -824
  113. package/dist/quantity-selector.scss +1074 -1074
  114. package/dist/quick-inventory-check.scss +285 -285
  115. package/dist/quick-links.scss +627 -627
  116. package/dist/quota-details.scss +526 -526
  117. package/dist/quotes.scss +847 -847
  118. package/dist/repeater-embla-controls.scss +211 -211
  119. package/dist/repeater-grid-toggle.scss +206 -206
  120. package/dist/repeater-item.scss +152 -152
  121. package/dist/repeater.scss +946 -946
  122. package/dist/request-for-quotes.scss +841 -841
  123. package/dist/responsive-behaviour.scss +29 -29
  124. package/dist/rfqs.scss +861 -861
  125. package/dist/scroll.scss +414 -414
  126. package/dist/search-results-heading.scss +309 -309
  127. package/dist/search.scss +689 -689
  128. package/dist/section.scss +276 -276
  129. package/dist/shareCartSideBar.scss +254 -254
  130. package/dist/shipping-estimator.scss +41 -41
  131. package/dist/shipping-payments.scss +2518 -2518
  132. package/dist/simple-list.scss +338 -338
  133. package/dist/skeleton.scss +64 -64
  134. package/dist/spotlight.scss +1706 -1706
  135. package/dist/stack.scss +171 -171
  136. package/dist/static-global.scss +292 -292
  137. package/dist/static-text.scss +52 -52
  138. package/dist/stockStatus.scss +70 -70
  139. package/dist/store-locations.scss +1592 -1592
  140. package/dist/sub-category.scss +74 -74
  141. package/dist/submit-quote.scss +275 -275
  142. package/dist/tab-container-item.scss +80 -80
  143. package/dist/tab-container.scss +141 -141
  144. package/dist/table.scss +9 -0
  145. package/dist/tabs.scss +440 -440
  146. package/dist/text-temp.scss +109 -109
  147. package/dist/theme-classes.scss +421 -421
  148. package/dist/toaster.scss +392 -392
  149. package/dist/toggle-button.scss +32 -32
  150. package/dist/transform-properties-module.scss +20 -20
  151. package/dist/types/builder/tools/element-edit/icon-list.d.ts +5 -0
  152. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  153. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  154. package/dist/types/builder/tools/element-edit/userElements.d.ts +99 -0
  155. package/dist/user-elements.scss +2896 -2911
  156. package/dist/widget.scss +153 -153
  157. package/dist/wishlist-overlay.scss +48 -48
  158. package/package.json +1 -1
package/dist/quantity-selector.scss CHANGED
@@ -1,1074 +1,1074 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- [data-div-type="element"] {
6
- &[data-element-type="quantitySelector"] {
7
- // width: var(--_lt-wh);
8
- // height: var(--_lt-ht);
9
- // margin: var(--_lt-mn);
10
- // padding: var(--_lt-pg);
11
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
- // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
- // height: ;
16
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
- // --_aspect-ratio: calc(
18
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
- // );
20
-
21
- & > .wrapper {
22
- width: 100%;
23
- // height: 100%;
24
- }
25
- &[data-show-shadow="false"] {
26
- --_show-shadow: none;
27
- }
28
- // /* Chrome, Safari, Edge, Opera */
29
- // input::-webkit-outer-spin-button,
30
- // input::-webkit-inner-spin-button {
31
- // -webkit-appearance: none;
32
- // margin: 0;
33
- // }
34
-
35
- // /* Firefox */
36
- // input[type="number"] {
37
- // -moz-appearance: textfield;
38
- // }
39
- .text-element {
40
- background: #6d96e4;
41
- padding: 10px;
42
- font-weight: 600;
43
- color: rgba(75, 69, 70, 1);
44
- }
45
- .quantity_container {
46
- background-color: var(
47
- --_ctm-mob-dn-wt-se-bd-cr,
48
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
49
- );
50
-
51
- border-color: var(
52
- --_ctm-mob-dn-wt-se-br-cr,
53
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
54
- );
55
-
56
- border-style: var(
57
- --_ctm-mob-dn-wt-se-br-se,
58
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
59
- );
60
-
61
- border-width: var(
62
- --_ctm-mob-dn-wt-se-br-wh,
63
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
64
- );
65
-
66
- border-radius: var(
67
- --_ctm-mob-dn-wt-se-br-rs,
68
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
69
- );
70
-
71
- box-shadow: var(
72
- --_show-shadow,
73
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
- );
78
-
79
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
80
- gap: var(
81
- --_ctm-mob-lt-it-ad-mn-qy-sg,
82
- var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
83
- );
84
- display: flex;
85
- flex-direction: column;
86
- // gap: var(
87
- // --_ctm-mob-lt-te-ad-dn-sg,
88
- // var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
89
- // );
90
- .label-wrapper {
91
- // height:;
92
- display: flex;
93
- align-items: center;
94
- background-color: var(
95
- --_ctm-mob-dn-ll-bd-cr,
96
- var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr))
97
- );
98
-
99
- border-color: var(
100
- --_ctm-mob-dn-ll-br-cr,
101
- var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr))
102
- );
103
-
104
- border-style: var(
105
- --_ctm-mob-dn-ll-br-se,
106
- var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se))
107
- );
108
-
109
- border-width: var(
110
- --_ctm-mob-dn-ll-br-wh,
111
- var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh))
112
- );
113
-
114
- border-radius: var(
115
- --_ctm-mob-dn-ll-br-rs,
116
- var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs))
117
- );
118
-
119
- box-shadow: var(
120
- --_show-shadow,
121
- var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae)))
122
- var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br)))
123
- var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd)))
124
- var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr)))
125
- );
126
- .label {
127
- height: unset;
128
- }
129
- }
130
-
131
- .label {
132
- white-space: nowrap;
133
- width: 100%;
134
- height: 100%;
135
-
136
- color: var(--_ctm-mob-dn-ll-cr, var(--_ctm-tab-dn-ll-cr, var(--_ctm-dn-ll-cr)));
137
- font-family: var(
138
- --_ctm-mob-dn-ll-ft-fy,
139
- var(--_ctm-tab-dn-ll-ft-fy, var(--_ctm-dn-ll-ft-fy))
140
- );
141
- font-size: var(
142
- --_ctm-mob-dn-ll-ft-se,
143
- var(--_ctm-tab-dn-ll-ft-se, var(--_ctm-dn-ll-ft-se))
144
- );
145
- font-weight: var(
146
- --_ctm-mob-dn-ll-ft-wt,
147
- var(--_ctm-tab-dn-ll-ft-wt, var(--_ctm-dn-ll-ft-wt))
148
- );
149
- font-style: var(
150
- --_ctm-mob-dn-ll-ft-se-ic,
151
- var(--_ctm-tab-dn-ll-ft-se-ic, var(--_ctm-dn-ll-ft-se-ic))
152
- );
153
- text-align: var(
154
- --_ctm-mob-dn-ll-tt-an,
155
- var(--_ctm-tab-dn-ll-tt-an, var(--_ctm-dn-ll-tt-an))
156
- );
157
- letter-spacing: var(
158
- --_ctm-mob-dn-ll-lr-sg,
159
- var(--_ctm-tab-dn-ll-lr-sg, var(--_ctm-dn-ll-lr-sg))
160
- );
161
- line-height: var(
162
- --_ctm-mob-dn-ll-le-ht,
163
- var(--_ctm-tab-dn-ll-le-ht, var(--_ctm-dn-ll-le-ht-dc))
164
- );
165
- text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
166
- padding: prepareMediaVariable(--_ctm-dn-ll-pg);
167
- text-transform: prepareMediaVariable(--_ctm-dn-ll-tt-tm);
168
- word-wrap: prepareMediaVariable(--_ctm-dn-ll-wd-wp);
169
- word-break: prepareMediaVariable(--_ctm-dn-ll-wd-bk);
170
- }
171
-
172
- .input {
173
- flex-grow: 1;
174
- outline: none;
175
- padding: 8px;
176
-
177
- &::placeholder {
178
- color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
179
- font-family: var(
180
- --_ctm-mob-dn-pr-tt-ft-fy,
181
- var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
182
- );
183
- text-transform: var(
184
- --_ctm-mob-dn-pr-tt-tt-tm,
185
- var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm))
186
- );
187
- word-wrap: var(
188
- --_ctm-mob-dn-pr-tt-wd-wp,
189
- var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp))
190
- );
191
- word-break: var(
192
- --_ctm-mob-dn-pr-tt-wd-bk,
193
- var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk))
194
- );
195
- font-size: var(
196
- --_ctm-mob-dn-pr-tt-ft-se,
197
- var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
198
- );
199
- font-weight: var(
200
- --_ctm-mob-dn-pr-tt-ft-wt,
201
- var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
202
- );
203
- font-style: var(
204
- --_ctm-mob-dn-pr-tt-ft-se-ic,
205
- var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
206
- );
207
- text-align: var(
208
- --_ctm-mob-dn-pr-tt-tt-an,
209
- var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
210
- );
211
- letter-spacing: var(
212
- --_ctm-mob-dn-pr-tt-lr-sg,
213
- var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
214
- );
215
- line-height: var(
216
- --_ctm-mob-dn-pr-tt-le-ht,
217
- var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
218
- );
219
- text-decoration: var(
220
- --_ctm-mob-dn-pr-tt-ue,
221
- var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
222
- );
223
- }
224
- }
225
-
226
- .quantity_open_input {
227
- display: flex;
228
- align-items: flex-start;
229
- flex-direction: column;
230
- gap: var(
231
- --_ctm-mob-lt-ll-ad-it-sg,
232
- var(--_ctm-tab-lt-ll-ad-it-sg, var(--_ctm-lt-ll-ad-it-sg))
233
- );
234
- &[data-label-position="Bottom"] {
235
- flex-direction: column-reverse;
236
- align-items: flex-start;
237
- .label-wrapper {
238
- width: 100%;
239
- }
240
- }
241
- &[data-label-position="Top"] {
242
- .label-wrapper {
243
- width: 100%;
244
- }
245
- }
246
- &[data-label-position="Left"] {
247
- flex-direction: row;
248
- align-items: stretch;
249
- }
250
- &[data-label-position="Right"] {
251
- flex-direction: row-reverse;
252
- align-items: stretch;
253
- }
254
- }
255
- .input-wrapper {
256
- display: flex;
257
- align-items: center;
258
- justify-content: space-between;
259
- width: 100%;
260
- overflow: hidden;
261
- & > div {
262
- width: 100%;
263
- }
264
-
265
- position: relative;
266
- background-color: var(
267
- --_ctm-mob-dn-it-bd-cr,
268
- var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
269
- );
270
- box-shadow: var(
271
- --_ctm-mob-dn-it-sw-ae,
272
- var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))
273
- )
274
- var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br)))
275
- var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd)))
276
- var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
277
- border-radius: var(
278
- --_ctm-mob-dn-it-br-rs,
279
- var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs))
280
- );
281
-
282
- border-color: var(
283
- --_ctm-mob-dn-it-br-cr,
284
- var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr))
285
- );
286
- border-style: var(
287
- --_ctm-mob-dn-it-br-se,
288
- var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se))
289
- );
290
- border-width: var(
291
- --_ctm-mob-dn-it-br-wh,
292
- var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh))
293
- );
294
-
295
- padding: prepareMediaVariable(--_ctm-dn-it-pg);
296
- width: prepareMediaVariable(--_ctm-dn-it-wh);
297
-
298
- .input__dropdown {
299
- position: absolute;
300
- top: 100%;
301
- z-index: 10;
302
- border: 1px solid var(--_gray-200);
303
- padding: 20px;
304
- padding: 0px;
305
- margin-top: 10px;
306
- right: 0px;
307
- max-height: 150px;
308
- overflow-y: auto;
309
- border-radius: 4px;
310
- margin-top: 10px;
311
-
312
- .dropdown__option {
313
- padding: 8px;
314
- cursor: pointer;
315
- border-bottom: 1px solid var(--_gray-200);
316
- text-align: center;
317
- background-color: #fff;
318
- user-select: none;
319
- &:hover,
320
- &.active {
321
- background-color: var(--_primary-25);
322
- }
323
- }
324
- }
325
-
326
- .buttons {
327
- display: flex;
328
- flex-direction: column;
329
- align-items: center;
330
- justify-content: space-between;
331
- position: absolute;
332
- right: 10px;
333
-
334
- button {
335
- width: 20px;
336
- height: 20px;
337
- background: none;
338
- border: none;
339
- cursor: pointer;
340
- padding: 0;
341
- font-size: 14px;
342
- color: #333;
343
-
344
- &:hover {
345
- color: #000;
346
- }
347
-
348
- &:disabled {
349
- color: #ccc;
350
- cursor: not-allowed;
351
- }
352
- }
353
- }
354
- }
355
- .icrease-decrease {
356
- input {
357
- text-align: center;
358
- }
359
- }
360
- .input_dropdown {
361
- .input {
362
- min-width: 50px;
363
- }
364
- .est__dropdown {
365
- min-width: 50px;
366
- }
367
- }
368
-
369
- //Dropdown
370
- .est__dropdown__main {
371
- position: relative;
372
- width: 100%;
373
- margin-top: 0px;
374
- // padding: 30px;
375
- label {
376
- font-size: 14px;
377
- color: var(--_gray-700);
378
- margin-bottom: 8px;
379
- display: block;
380
- }
381
-
382
- .est__dropdown {
383
- cursor: pointer;
384
- position: relative;
385
- color: var(--_gray-700);
386
-
387
- // border-radius: 6px;
388
- // background-color: #fff;
389
- border: none;
390
- border-radius: 0;
391
- background-color: transparent;
392
- display: flex;
393
- justify-content: space-between;
394
- align-items: center;
395
- padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);
396
-
397
- width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
398
- .value__selected {
399
- width: 100%;
400
- background-color: var(
401
- --_ctm-mob-dn-dn-se-bd-cr,
402
- var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
403
- );
404
-
405
- border-color: var(
406
- --_ctm-mob-dn-dn-se-br-cr,
407
- var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
408
- );
409
-
410
- border-style: var(
411
- --_ctm-mob-dn-dn-se-br-se,
412
- var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
413
- );
414
-
415
- border-width: var(
416
- --_ctm-mob-dn-dn-se-br-wh,
417
- var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
418
- );
419
-
420
- border-radius: var(
421
- --_ctm-mob-dn-dn-se-br-rs,
422
- var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
423
- );
424
-
425
- box-shadow: var(
426
- --_show-shadow,
427
- var(
428
- --_ctm-mob-dn-dn-se-sw-ae,
429
- var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
430
- )
431
- var(
432
- --_ctm-mob-dn-dn-se-sw-br,
433
- var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
434
- )
435
- var(
436
- --_ctm-mob-dn-dn-se-sw-sd,
437
- var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
438
- )
439
- var(
440
- --_ctm-mob-dn-dn-se-sw-cr,
441
- var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
442
- )
443
- );
444
- }
445
-
446
- &.open .list {
447
- display: flex;
448
- }
449
- .est__dropdown__button {
450
- display: flex;
451
- align-items: center;
452
- width: 100%;
453
- }
454
-
455
- .est__dropdown__icon {
456
- position: absolute;
457
- // top: 10px;
458
- right: 5px;
459
- }
460
-
461
- .list {
462
- display: none;
463
- flex-direction: column;
464
- border: 1px solid var(--_gray-200);
465
- border-radius: 6px;
466
- position: absolute;
467
- top: 100%;
468
- left: 0;
469
- width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
470
- background-color: #fff;
471
- border-radius: 4px;
472
- z-index: var(--_higher-zIndex);
473
- max-height: 200px;
474
- overflow-y: auto;
475
- margin-top: var(
476
- --_ctm-mob-dn-dn-se-on-ad-lt-sg,
477
- var(--_ctm-tab-dn-dn-se-on-ad-lt-sg, var(--_ctm-dn-dn-se-on-ad-lt-sg))
478
- );
479
- gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
480
-
481
- &.top {
482
- bottom: 100%;
483
- top: auto;
484
- }
485
-
486
- .list__option {
487
- cursor: pointer;
488
- text-align: center;
489
- }
490
- }
491
- }
492
- }
493
- .btn__with__text {
494
- height: 100%;
495
- }
496
-
497
- .btn__with__text[data-btn-name="increase-button"] {
498
- &[data-show-shadow="false"] {
499
- --_show-shadow: none;
500
- }
501
- &[data-icon-position="left"] {
502
- --_sf-fd-bn: row;
503
- }
504
- &[data-icon-position="right"] {
505
- --_sf-fd-bn: row-reverse;
506
- }
507
- &[data-icon-position="center"] {
508
- --_sf-fd-bn: row;
509
- }
510
-
511
- &:hover {
512
- --_sf-hr-bd-cr: var(
513
- --_ctm-mob-dn-ie-bn-hr-se-bd-cr,
514
- var(--_ctm-tab-dn-ie-bn-hr-se-bd-cr, var(--_ctm-dn-ie-bn-hr-se-bd-cr))
515
- );
516
- --_sf-hr-br-cr: var(
517
- --_ctm-mob-dn-ie-bn-hr-se-br-cr,
518
- var(--_ctm-tab-dn-ie-bn-hr-se-br-cr, var(--_ctm-dn-ie-bn-hr-se-br-cr))
519
- );
520
- --_sf-hr-br-se: var(
521
- --_ctm-mob-dn-ie-bn-hr-se-br-se,
522
- var(--_ctm-tab-dn-ie-bn-hr-se-br-se, var(--_ctm-dn-ie-bn-hr-se-br-se))
523
- );
524
- --_sf-hr-br-wh: var(
525
- --_ctm-mob-dn-ie-bn-hr-se-br-wh,
526
- var(--_ctm-tab-dn-ie-bn-hr-se-br-wh, var(--_ctm-dn-ie-bn-hr-se-br-wh))
527
- );
528
- --_sf-hr-br-rs: var(
529
- --_ctm-mob-dn-ie-bn-hr-se-br-rs,
530
- var(--_ctm-tab-dn-ie-bn-hr-se-br-rs, var(--_ctm-dn-ie-bn-hr-se-br-rs))
531
- );
532
- --_sf-hr-at: var(
533
- --_ctm-mob-dn-ie-bn-hr-se-at,
534
- var(--_ctm-tab-dn-ie-bn-hr-se-at, var(--_ctm-dn-ie-bn-hr-se-at))
535
- );
536
- --_sf-hr-gp: var(
537
- --_ctm-mob-dn-ie-bn-hr-se-gp,
538
- var(--_ctm-tab-dn-ie-bn-hr-se-gp, var(--_ctm-dn-ie-bn-hr-se-gp))
539
- );
540
-
541
- // for shadow
542
- --_sf-hr-sw-ae: var(
543
- --_ctm-mob-dn-ie-bn-hr-se-sw-ae,
544
- var(--_ctm-tab-dn-ie-bn-hr-se-sw-ae, var(--_ctm-dn-ie-bn-hr-se-sw-ae))
545
- );
546
- --_sf-hr-sw-br: var(
547
- --_ctm-mob-dn-ie-bn-hr-se-sw-br,
548
- var(--_ctm-tab-dn-ie-bn-hr-se-sw-br, var(--_ctm-dn-ie-bn-hr-se-sw-br))
549
- );
550
- --_sf-hr-sw-hr: var(
551
- --_ctm-mob-dn-ie-bn-hr-se-sw-hr,
552
- var(--_ctm-tab-dn-ie-bn-hr-se-sw-hr, var(--_ctm-dn-ie-bn-hr-se-sw-hr))
553
- );
554
- --_sf-hr-sw-cr: var(
555
- --_ctm-mob-dn-ie-bn-hr-se-sw-cr,
556
- var(--_ctm-tab-dn-ie-bn-hr-se-sw-cr, var(--_ctm-dn-ie-bn-hr-se-sw-cr))
557
- );
558
-
559
- // for font
560
-
561
- --_sf-hr-cr: var(
562
- --_ctm-mob-dn-ie-bn-hr-se-cr,
563
- var(--_ctm-tab-dn-ie-bn-hr-se-cr, var(--_ctm-dn-ie-bn-hr-se-cr))
564
- );
565
- --_sf-hr-ft-fy: var(
566
- --_ctm-mob-dn-ie-bn-hr-se-ft-fy,
567
- var(--_ctm-tab-dn-ie-bn-hr-se-ft-fy, var(--_ctm-dn-ie-bn-hr-se-ft-fy))
568
- );
569
- --_sf-hr-tt-tm: var(
570
- --_ctm-mob-dn-ie-bn-hr-se-tt-tm,
571
- var(--_ctm-tab-dn-ie-bn-hr-se-tt-tm, var(--_ctm-dn-ie-bn-hr-se-tt-tm))
572
- );
573
- --_sf-hr-wd-wp: var(
574
- --_ctm-mob-dn-ie-bn-hr-se-wd-wp,
575
- var(--_ctm-tab-dn-ie-bn-hr-se-wd-wp, var(--_ctm-dn-ie-bn-hr-se-wd-wp))
576
- );
577
- --_sf-hr-wd-bk: var(
578
- --_ctm-mob-dn-ie-bn-hr-se-wd-bk,
579
- var(--_ctm-tab-dn-ie-bn-hr-se-wd-bk, var(--_ctm-dn-ie-bn-hr-se-wd-bk))
580
- );
581
- --_sf-hr-ft-se: var(
582
- --_ctm-mob-dn-ie-bn-hr-se-ft-se,
583
- var(--_ctm-tab-dn-ie-bn-hr-se-ft-se, var(--_ctm-dn-ie-bn-hr-se-ft-se))
584
- );
585
- --_sf-hr-ft-wt: var(
586
- --_ctm-mob-dn-ie-bn-hr-se-ft-wt,
587
- var(--_ctm-tab-dn-ie-bn-hr-se-ft-wt, var(--_ctm-dn-ie-bn-hr-se-ft-wt))
588
- );
589
- --_sf-hr-ft-se-ic: var(
590
- --_ctm-mob-dn-ie-bn-hr-se-ft-se-ic,
591
- var(--_ctm-tab-dn-ie-bn-hr-se-ft-se-ic, var(--_ctm-dn-ie-bn-hr-se-ft-se-ic))
592
- );
593
- --_sf-hr-tt-an: var(
594
- --_ctm-mob-dn-ie-bn-hr-se-tt-an,
595
- var(--_ctm-tab-dn-ie-bn-hr-se-tt-an, var(--_ctm-dn-ie-bn-hr-se-tt-an))
596
- );
597
- --_sf-hr-lr-sg: var(
598
- --_ctm-mob-dn-ie-bn-hr-se-lr-sg,
599
- var(--_ctm-tab-dn-ie-bn-hr-se-lr-sg, var(--_ctm-dn-ie-bn-hr-se-lr-sg))
600
- );
601
- --_sf-hr-le-ht: var(
602
- --_ctm-mob-dn-ie-bn-hr-se-le-ht,
603
- var(--_ctm-tab-dn-ie-bn-hr-se-le-ht, var(--_ctm-dn-ie-bn-hr-se-le-ht))
604
- );
605
-
606
- --_sf-hr-in-se: var(
607
- --_ctm-mob-dn-ie-bn-hr-se-in-se,
608
- var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
609
- );
610
- --_sf-hr-in-se: var(
611
- --_ctm-mob-dn-ie-bn-hr-se-in-se,
612
- var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
613
- );
614
- --_sf-hr-in-c1: var(
615
- --_ctm-mob-dn-ie-bn-hr-se-in-c1,
616
- var(--_ctm-tab-dn-ie-bn-hr-se-in-c1, var(--_ctm-dn-ie-bn-hr-se-in-c1))
617
- );
618
- --_sf-hr-ue: var(
619
- --_ctm-mob-dn-ie-bn-hr-se-ue,
620
- var(--_ctm-tab-dn-ie-bn-hr-se-ue, var(--_ctm-dn-ie-bn-hr-se-ue))
621
- );
622
-
623
- // for pading and width
624
- --_sf-hr-pg: var(
625
- --_ctm-mob-dn-ie-bn-hr-pg,
626
- var(--_ctm-tab-dn-ie-bn-hr-pg, var(--_ctm-dn-ie-bn-hr-pg))
627
- );
628
- --_sf-hr-wh: var(
629
- --_ctm-mob-dn-ie-bn-hr-wh,
630
- var(--_ctm-tab-dn-ie-bn-hr-wh, var(--_ctm-dn-ie-bn-hr-wh))
631
- );
632
-
633
- &[data-hover-show-shadow="false"] {
634
- --_hover-show-shadow: none;
635
- }
636
- &[data-hover-show-icon="false"] {
637
- --_hover-show-icon: none;
638
- }
639
- }
640
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-bd-cr));
641
-
642
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-pg));
643
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wh));
644
- display: flex;
645
- flex-direction: var(--_sf-fd-bn);
646
- align-items: center;
647
-
648
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-at));
649
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-gp));
650
-
651
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-rs));
652
-
653
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-ae))
654
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-br))
655
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-sd))
656
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-cr));
657
-
658
- &[data-show-border="true"] {
659
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-cr));
660
-
661
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-se));
662
-
663
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-wh));
664
- }
665
-
666
- .txt {
667
- display: flex;
668
-
669
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-cr));
670
-
671
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-fy));
672
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-tm));
673
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-wp));
674
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-bk));
675
- &.flex__overflow {
676
- white-space: normal;
677
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
678
- }
679
-
680
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se));
681
-
682
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-wt));
683
-
684
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se-ic));
685
-
686
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-an));
687
-
688
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-lr-sg));
689
-
690
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-le-ht));
691
-
692
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
693
- }
694
-
695
- .icon {
696
- display: var(--_hover-show-icon, var(--_show-icon, flex));
697
- svg {
698
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
699
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
700
-
701
- path {
702
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-c1));
703
- // Overrides the stroke-width presentation attribute baked into the icon markup.
704
- stroke-width: prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-se-wh, 1.25);
705
- }
706
- }
707
- }
708
- [data-element-style="Text"] {
709
- display: inline-block;
710
- width: 100%;
711
- }
712
-
713
- .icon--hover {
714
- // position: absolute;
715
- // inset: 0;
716
- // opacity: 0;
717
- display: none;
718
- transition: opacity 0.2s ease;
719
- }
720
-
721
- &:hover .icon--hover {
722
- // opacity: 1;
723
- display: flex;
724
- }
725
-
726
- &:hover .icon--default {
727
- // opacity: 0;
728
- display: none;
729
- }
730
- }
731
-
732
- .btn__with__text[data-btn-name="decrease-button"] {
733
- &[data-show-shadow="false"] {
734
- --_show-shadow: none;
735
- }
736
- &[data-icon-position="left"] {
737
- --_sf-fd-bn: row;
738
- }
739
- &[data-icon-position="right"] {
740
- --_sf-fd-bn: row-reverse;
741
- }
742
- &[data-icon-position="center"] {
743
- --_sf-fd-bn: row;
744
- }
745
- &:disabled {
746
- opacity: 0.5;
747
- cursor: not-allowed;
748
- }
749
- &:hover {
750
- --_sf-hr-bd-cr: var(
751
- --_ctm-mob-dn-de-bn-hr-se-bd-cr,
752
- var(--_ctm-tab-dn-de-bn-hr-se-bd-cr, var(--_ctm-dn-de-bn-hr-se-bd-cr))
753
- );
754
- --_sf-hr-br-cr: var(
755
- --_ctm-mob-dn-de-bn-hr-se-br-cr,
756
- var(--_ctm-tab-dn-de-bn-hr-se-br-cr, var(--_ctm-dn-de-bn-hr-se-br-cr))
757
- );
758
- --_sf-hr-br-se: var(
759
- --_ctm-mob-dn-de-bn-hr-se-br-se,
760
- var(--_ctm-tab-dn-de-bn-hr-se-br-se, var(--_ctm-dn-de-bn-hr-se-br-se))
761
- );
762
- --_sf-hr-br-wh: var(
763
- --_ctm-mob-dn-de-bn-hr-se-br-wh,
764
- var(--_ctm-tab-dn-de-bn-hr-se-br-wh, var(--_ctm-dn-de-bn-hr-se-br-wh))
765
- );
766
- --_sf-hr-br-rs: var(
767
- --_ctm-mob-dn-de-bn-hr-se-br-rs,
768
- var(--_ctm-tab-dn-de-bn-hr-se-br-rs, var(--_ctm-dn-de-bn-hr-se-br-rs))
769
- );
770
- --_sf-hr-at: var(
771
- --_ctm-mob-dn-de-bn-hr-se-at,
772
- var(--_ctm-tab-dn-de-bn-hr-se-at, var(--_ctm-dn-de-bn-hr-se-at))
773
- );
774
- --_sf-hr-gp: var(
775
- --_ctm-mob-dn-de-bn-hr-se-gp,
776
- var(--_ctm-tab-dn-de-bn-hr-se-gp, var(--_ctm-dn-de-bn-hr-se-gp))
777
- );
778
-
779
- // for shadow
780
- --_sf-hr-sw-ae: var(
781
- --_ctm-mob-dn-de-bn-hr-se-sw-ae,
782
- var(--_ctm-tab-dn-de-bn-hr-se-sw-ae, var(--_ctm-dn-de-bn-hr-se-sw-ae))
783
- );
784
- --_sf-hr-sw-br: var(
785
- --_ctm-mob-dn-de-bn-hr-se-sw-br,
786
- var(--_ctm-tab-dn-de-bn-hr-se-sw-br, var(--_ctm-dn-de-bn-hr-se-sw-br))
787
- );
788
- --_sf-hr-sw-hr: var(
789
- --_ctm-mob-dn-de-bn-hr-se-sw-hr,
790
- var(--_ctm-tab-dn-de-bn-hr-se-sw-hr, var(--_ctm-dn-de-bn-hr-se-sw-hr))
791
- );
792
- --_sf-hr-sw-cr: var(
793
- --_ctm-mob-dn-de-bn-hr-se-sw-cr,
794
- var(--_ctm-tab-dn-de-bn-hr-se-sw-cr, var(--_ctm-dn-de-bn-hr-se-sw-cr))
795
- );
796
-
797
- // for font
798
-
799
- --_sf-hr-cr: var(
800
- --_ctm-mob-dn-de-bn-hr-se-cr,
801
- var(--_ctm-tab-dn-de-bn-hr-se-cr, var(--_ctm-dn-de-bn-hr-se-cr))
802
- );
803
- --_sf-hr-ft-fy: var(
804
- --_ctm-mob-dn-de-bn-hr-se-ft-fy,
805
- var(--_ctm-tab-dn-de-bn-hr-se-ft-fy, var(--_ctm-dn-de-bn-hr-se-ft-fy))
806
- );
807
- --_sf-hr-tt-tm: var(
808
- --_ctm-mob-dn-de-bn-hr-se-tt-tm,
809
- var(--_ctm-tab-dn-de-bn-hr-se-tt-tm, var(--_ctm-dn-de-bn-hr-se-tt-tm))
810
- );
811
- --_sf-hr-wd-wp: var(
812
- --_ctm-mob-dn-de-bn-hr-se-wd-wp,
813
- var(--_ctm-tab-dn-de-bn-hr-se-wd-wp, var(--_ctm-dn-de-bn-hr-se-wd-wp))
814
- );
815
- --_sf-hr-wd-bk: var(
816
- --_ctm-mob-dn-de-bn-hr-se-wd-bk,
817
- var(--_ctm-tab-dn-de-bn-hr-se-wd-bk, var(--_ctm-dn-de-bn-hr-se-wd-bk))
818
- );
819
- --_sf-hr-ft-se: var(
820
- --_ctm-mob-dn-de-bn-hr-se-ft-se,
821
- var(--_ctm-tab-dn-de-bn-hr-se-ft-se, var(--_ctm-dn-de-bn-hr-se-ft-se))
822
- );
823
- --_sf-hr-ft-wt: var(
824
- --_ctm-mob-dn-de-bn-hr-se-ft-wt,
825
- var(--_ctm-tab-dn-de-bn-hr-se-ft-wt, var(--_ctm-dn-de-bn-hr-se-ft-wt))
826
- );
827
- --_sf-hr-ft-se-ic: var(
828
- --_ctm-mob-dn-de-bn-hr-se-ft-se-ic,
829
- var(--_ctm-tab-dn-de-bn-hr-se-ft-se-ic, var(--_ctm-dn-de-bn-hr-se-ft-se-ic))
830
- );
831
- --_sf-hr-tt-an: var(
832
- --_ctm-mob-dn-de-bn-hr-se-tt-an,
833
- var(--_ctm-tab-dn-de-bn-hr-se-tt-an, var(--_ctm-dn-de-bn-hr-se-tt-an))
834
- );
835
- --_sf-hr-lr-sg: var(
836
- --_ctm-mob-dn-de-bn-hr-se-lr-sg,
837
- var(--_ctm-tab-dn-de-bn-hr-se-lr-sg, var(--_ctm-dn-de-bn-hr-se-lr-sg))
838
- );
839
- --_sf-hr-le-ht: var(
840
- --_ctm-mob-dn-de-bn-hr-se-le-ht,
841
- var(--_ctm-tab-dn-de-bn-hr-se-le-ht, var(--_ctm-dn-de-bn-hr-se-le-ht))
842
- );
843
-
844
- --_sf-hr-in-se: var(
845
- --_ctm-mob-dn-de-bn-hr-se-in-se,
846
- var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
847
- );
848
- --_sf-hr-in-se: var(
849
- --_ctm-mob-dn-de-bn-hr-se-in-se,
850
- var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
851
- );
852
- --_sf-hr-in-c1: var(
853
- --_ctm-mob-dn-de-bn-hr-se-in-c1,
854
- var(--_ctm-tab-dn-de-bn-hr-se-in-c1, var(--_ctm-dn-de-bn-hr-se-in-c1))
855
- );
856
- --_sf-hr-ue: var(
857
- --_ctm-mob-dn-de-bn-hr-se-ue,
858
- var(--_ctm-tab-dn-de-bn-hr-se-ue, var(--_ctm-dn-de-bn-hr-se-ue))
859
- );
860
-
861
- // for pading and width
862
- --_sf-hr-pg: var(
863
- --_ctm-mob-dn-de-bn-hr-pg,
864
- var(--_ctm-tab-dn-de-bn-hr-pg, var(--_ctm-dn-de-bn-hr-pg))
865
- );
866
- --_sf-hr-wh: var(
867
- --_ctm-mob-dn-de-bn-hr-wh,
868
- var(--_ctm-tab-dn-de-bn-hr-wh, var(--_ctm-dn-de-bn-hr-wh))
869
- );
870
-
871
- &[data-hover-show-shadow="false"] {
872
- --_hover-show-shadow: none;
873
- }
874
- &[data-hover-show-icon="false"] {
875
- --_hover-show-icon: none;
876
- }
877
- }
878
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-bd-cr));
879
-
880
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-pg));
881
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wh));
882
- display: flex;
883
- flex-direction: var(--_sf-fd-bn);
884
- align-items: center;
885
-
886
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-at));
887
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-gp));
888
-
889
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-rs));
890
-
891
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-ae))
892
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-br))
893
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-sd))
894
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-cr));
895
-
896
- &[data-show-border="true"] {
897
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-cr));
898
-
899
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-se));
900
-
901
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-wh));
902
- }
903
-
904
- .txt {
905
- display: flex;
906
-
907
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-cr));
908
-
909
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-fy));
910
- text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-tm));
911
- word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-wp));
912
- word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-bk));
913
- &.flex__overflow {
914
- white-space: normal;
915
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
916
- }
917
-
918
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se));
919
-
920
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-wt));
921
-
922
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se-ic));
923
-
924
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-an));
925
-
926
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-lr-sg));
927
-
928
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-le-ht));
929
-
930
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
931
- }
932
-
933
- .icon {
934
- display: var(--_hover-show-icon, var(--_show-icon, flex));
935
- svg {
936
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
937
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
938
-
939
- path {
940
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-c1));
941
- // Overrides the stroke-width presentation attribute baked into the icon markup.
942
- stroke-width: prepareMediaVariable(--_ctm-dn-de-bn-dt-se-se-wh, 1.25);
943
- }
944
- }
945
- }
946
- [data-element-style="Text"] {
947
- display: inline-block;
948
- width: 100%;
949
- }
950
-
951
- .icon--hover {
952
- // position: absolute;
953
- // inset: 0;
954
- // opacity: 0;
955
- display: none;
956
- transition: opacity 0.2s ease;
957
- }
958
-
959
- &:hover .icon--hover {
960
- // opacity: 1;
961
- display: flex;
962
- }
963
-
964
- &:hover .icon--default {
965
- // opacity: 0;
966
- display: none;
967
- }
968
- }
969
-
970
- .minimum__order__qty {
971
- white-space: nowrap;
972
-
973
- height: 100%;
974
- width: 100%;
975
- text-wrap: auto;
976
-
977
- background-color: var(
978
- --_ctm-mob-dn-mm-or-qy-bd-cr,
979
- var(--_ctm-tab-dn-mm-or-qy-bd-cr, var(--_ctm-dn-mm-or-qy-bd-cr))
980
- );
981
-
982
- border-color: var(
983
- --_ctm-mob-dn-mm-or-qy-br-cr,
984
- var(--_ctm-tab-dn-mm-or-qy-br-cr, var(--_ctm-dn-mm-or-qy-br-cr))
985
- );
986
-
987
- border-style: var(
988
- --_ctm-mob-dn-mm-or-qy-br-se,
989
- var(--_ctm-tab-dn-mm-or-qy-br-se, var(--_ctm-dn-mm-or-qy-br-se))
990
- );
991
-
992
- border-width: var(
993
- --_ctm-mob-dn-mm-or-qy-br-wh,
994
- var(--_ctm-tab-dn-mm-or-qy-br-wh, var(--_ctm-dn-mm-or-qy-br-wh))
995
- );
996
-
997
- border-radius: var(
998
- --_ctm-mob-dn-mm-or-qy-br-rs,
999
- var(--_ctm-tab-dn-mm-or-qy-br-rs, var(--_ctm-dn-mm-or-qy-br-rs))
1000
- );
1001
-
1002
- box-shadow: var(
1003
- --_show-shadow,
1004
- var(
1005
- --_ctm-mob-dn-mm-or-qy-sw-ae,
1006
- var(--_ctm-tab-dn-mm-or-qy-sw-ae, var(--_ctm-dn-mm-or-qy-sw-ae))
1007
- )
1008
- var(
1009
- --_ctm-mob-dn-mm-or-qy-sw-br,
1010
- var(--_ctm-tab-dn-mm-or-qy-sw-br, var(--_ctm-dn-mm-or-qy-sw-br))
1011
- )
1012
- var(
1013
- --_ctm-mob-dn-mm-or-qy-sw-sd,
1014
- var(--_ctm-tab-dn-mm-or-qy-sw-sd, var(--_ctm-dn-mm-or-qy-sw-sd))
1015
- )
1016
- var(
1017
- --_ctm-mob-dn-mm-or-qy-sw-cr,
1018
- var(--_ctm-tab-dn-mm-or-qy-sw-cr, var(--_ctm-dn-mm-or-qy-sw-cr))
1019
- )
1020
- );
1021
-
1022
- color: var(
1023
- --_ctm-mob-dn-mm-or-qy-cr,
1024
- var(--_ctm-tab-dn-mm-or-qy-cr, var(--_ctm-dn-mm-or-qy-cr))
1025
- );
1026
- font-family: var(
1027
- --_ctm-mob-dn-mm-or-qy-ft-fy,
1028
- var(--_ctm-tab-dn-mm-or-qy-ft-fy, var(--_ctm-dn-mm-or-qy-ft-fy))
1029
- );
1030
- text-transform: var(
1031
- --_ctm-mob-dn-mm-or-qy-tt-tm,
1032
- var(--_ctm-tab-dn-mm-or-qy-tt-tm, var(--_ctm-dn-mm-or-qy-tt-tm))
1033
- );
1034
- word-wrap: var(
1035
- --_ctm-mob-dn-mm-or-qy-wd-wp,
1036
- var(--_ctm-tab-dn-mm-or-qy-wd-wp, var(--_ctm-dn-mm-or-qy-wd-wp))
1037
- );
1038
- word-break: var(
1039
- --_ctm-mob-dn-mm-or-qy-wd-bk,
1040
- var(--_ctm-tab-dn-mm-or-qy-wd-bk, var(--_ctm-dn-mm-or-qy-wd-bk))
1041
- );
1042
- font-size: var(
1043
- --_ctm-mob-dn-mm-or-qy-ft-se,
1044
- var(--_ctm-tab-dn-mm-or-qy-ft-se, var(--_ctm-dn-mm-or-qy-ft-se))
1045
- );
1046
- font-weight: var(
1047
- --_ctm-mob-dn-mm-or-qy-ft-wt,
1048
- var(--_ctm-tab-dn-mm-or-qy-ft-wt, var(--_ctm-dn-mm-or-qy-ft-wt))
1049
- );
1050
- font-style: var(
1051
- --_ctm-mob-dn-mm-or-qy-ft-se-ic,
1052
- var(--_ctm-tab-dn-mm-or-qy-ft-se-ic, var(--_ctm-dn-mm-or-qy-ft-se-ic))
1053
- );
1054
- text-align: var(
1055
- --_ctm-mob-dn-mm-or-qy-tt-an,
1056
- var(--_ctm-tab-dn-mm-or-qy-tt-an, var(--_ctm-dn-mm-or-qy-tt-an))
1057
- );
1058
- letter-spacing: var(
1059
- --_ctm-mob-dn-mm-or-qy-lr-sg,
1060
- var(--_ctm-tab-dn-mm-or-qy-lr-sg, var(--_ctm-dn-mm-or-qy-lr-sg))
1061
- );
1062
- line-height: var(
1063
- --_ctm-mob-dn-mm-or-qy-le-ht,
1064
- var(--_ctm-tab-dn-mm-or-qy-le-ht, var(--_ctm-dn-mm-or-qy-le-ht-dc))
1065
- );
1066
- text-decoration: var(
1067
- --_ctm-mob-dn-mm-or-qy-ue,
1068
- var(--_ctm-tab-dn-mm-or-qy-ue, var(--_ctm-dn-mm-or-qy-ue))
1069
- );
1070
- padding: prepareMediaVariable(--_ctm-dn-mm-or-qy-pg);
1071
- }
1072
- }
1073
- }
1074
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="quantitySelector"] {
7
+ // width: var(--_lt-wh);
8
+ // height: var(--_lt-ht);
9
+ // margin: var(--_lt-mn);
10
+ // padding: var(--_lt-pg);
11
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
13
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
14
+ // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
15
+ // height: ;
16
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
17
+ // --_aspect-ratio: calc(
18
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
19
+ // );
20
+
21
+ & > .wrapper {
22
+ width: 100%;
23
+ // height: 100%;
24
+ }
25
+ &[data-show-shadow="false"] {
26
+ --_show-shadow: none;
27
+ }
28
+ // /* Chrome, Safari, Edge, Opera */
29
+ // input::-webkit-outer-spin-button,
30
+ // input::-webkit-inner-spin-button {
31
+ // -webkit-appearance: none;
32
+ // margin: 0;
33
+ // }
34
+
35
+ // /* Firefox */
36
+ // input[type="number"] {
37
+ // -moz-appearance: textfield;
38
+ // }
39
+ .text-element {
40
+ background: #6d96e4;
41
+ padding: 10px;
42
+ font-weight: 600;
43
+ color: rgba(75, 69, 70, 1);
44
+ }
45
+ .quantity_container {
46
+ background-color: var(
47
+ --_ctm-mob-dn-wt-se-bd-cr,
48
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
49
+ );
50
+
51
+ border-color: var(
52
+ --_ctm-mob-dn-wt-se-br-cr,
53
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
54
+ );
55
+
56
+ border-style: var(
57
+ --_ctm-mob-dn-wt-se-br-se,
58
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
59
+ );
60
+
61
+ border-width: var(
62
+ --_ctm-mob-dn-wt-se-br-wh,
63
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
64
+ );
65
+
66
+ border-radius: var(
67
+ --_ctm-mob-dn-wt-se-br-rs,
68
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
69
+ );
70
+
71
+ box-shadow: var(
72
+ --_show-shadow,
73
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
74
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
75
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
76
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
77
+ );
78
+
79
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
80
+ gap: var(
81
+ --_ctm-mob-lt-it-ad-mn-qy-sg,
82
+ var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
83
+ );
84
+ display: flex;
85
+ flex-direction: column;
86
+ // gap: var(
87
+ // --_ctm-mob-lt-te-ad-dn-sg,
88
+ // var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
89
+ // );
90
+ .label-wrapper {
91
+ // height:;
92
+ display: flex;
93
+ align-items: center;
94
+ background-color: var(
95
+ --_ctm-mob-dn-ll-bd-cr,
96
+ var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr))
97
+ );
98
+
99
+ border-color: var(
100
+ --_ctm-mob-dn-ll-br-cr,
101
+ var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr))
102
+ );
103
+
104
+ border-style: var(
105
+ --_ctm-mob-dn-ll-br-se,
106
+ var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se))
107
+ );
108
+
109
+ border-width: var(
110
+ --_ctm-mob-dn-ll-br-wh,
111
+ var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh))
112
+ );
113
+
114
+ border-radius: var(
115
+ --_ctm-mob-dn-ll-br-rs,
116
+ var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs))
117
+ );
118
+
119
+ box-shadow: var(
120
+ --_show-shadow,
121
+ var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae)))
122
+ var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br)))
123
+ var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd)))
124
+ var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr)))
125
+ );
126
+ .label {
127
+ height: unset;
128
+ }
129
+ }
130
+
131
+ .label {
132
+ white-space: nowrap;
133
+ width: 100%;
134
+ height: 100%;
135
+
136
+ color: var(--_ctm-mob-dn-ll-cr, var(--_ctm-tab-dn-ll-cr, var(--_ctm-dn-ll-cr)));
137
+ font-family: var(
138
+ --_ctm-mob-dn-ll-ft-fy,
139
+ var(--_ctm-tab-dn-ll-ft-fy, var(--_ctm-dn-ll-ft-fy))
140
+ );
141
+ font-size: var(
142
+ --_ctm-mob-dn-ll-ft-se,
143
+ var(--_ctm-tab-dn-ll-ft-se, var(--_ctm-dn-ll-ft-se))
144
+ );
145
+ font-weight: var(
146
+ --_ctm-mob-dn-ll-ft-wt,
147
+ var(--_ctm-tab-dn-ll-ft-wt, var(--_ctm-dn-ll-ft-wt))
148
+ );
149
+ font-style: var(
150
+ --_ctm-mob-dn-ll-ft-se-ic,
151
+ var(--_ctm-tab-dn-ll-ft-se-ic, var(--_ctm-dn-ll-ft-se-ic))
152
+ );
153
+ text-align: var(
154
+ --_ctm-mob-dn-ll-tt-an,
155
+ var(--_ctm-tab-dn-ll-tt-an, var(--_ctm-dn-ll-tt-an))
156
+ );
157
+ letter-spacing: var(
158
+ --_ctm-mob-dn-ll-lr-sg,
159
+ var(--_ctm-tab-dn-ll-lr-sg, var(--_ctm-dn-ll-lr-sg))
160
+ );
161
+ line-height: var(
162
+ --_ctm-mob-dn-ll-le-ht,
163
+ var(--_ctm-tab-dn-ll-le-ht, var(--_ctm-dn-ll-le-ht-dc))
164
+ );
165
+ text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
166
+ padding: prepareMediaVariable(--_ctm-dn-ll-pg);
167
+ text-transform: prepareMediaVariable(--_ctm-dn-ll-tt-tm);
168
+ word-wrap: prepareMediaVariable(--_ctm-dn-ll-wd-wp);
169
+ word-break: prepareMediaVariable(--_ctm-dn-ll-wd-bk);
170
+ }
171
+
172
+ .input {
173
+ flex-grow: 1;
174
+ outline: none;
175
+ padding: 8px;
176
+
177
+ &::placeholder {
178
+ color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
179
+ font-family: var(
180
+ --_ctm-mob-dn-pr-tt-ft-fy,
181
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy))
182
+ );
183
+ text-transform: var(
184
+ --_ctm-mob-dn-pr-tt-tt-tm,
185
+ var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm))
186
+ );
187
+ word-wrap: var(
188
+ --_ctm-mob-dn-pr-tt-wd-wp,
189
+ var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp))
190
+ );
191
+ word-break: var(
192
+ --_ctm-mob-dn-pr-tt-wd-bk,
193
+ var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk))
194
+ );
195
+ font-size: var(
196
+ --_ctm-mob-dn-pr-tt-ft-se,
197
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se))
198
+ );
199
+ font-weight: var(
200
+ --_ctm-mob-dn-pr-tt-ft-wt,
201
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt))
202
+ );
203
+ font-style: var(
204
+ --_ctm-mob-dn-pr-tt-ft-se-ic,
205
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic))
206
+ );
207
+ text-align: var(
208
+ --_ctm-mob-dn-pr-tt-tt-an,
209
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an))
210
+ );
211
+ letter-spacing: var(
212
+ --_ctm-mob-dn-pr-tt-lr-sg,
213
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg))
214
+ );
215
+ line-height: var(
216
+ --_ctm-mob-dn-pr-tt-le-ht,
217
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht))
218
+ );
219
+ text-decoration: var(
220
+ --_ctm-mob-dn-pr-tt-ue,
221
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue))
222
+ );
223
+ }
224
+ }
225
+
226
+ .quantity_open_input {
227
+ display: flex;
228
+ align-items: flex-start;
229
+ flex-direction: column;
230
+ gap: var(
231
+ --_ctm-mob-lt-ll-ad-it-sg,
232
+ var(--_ctm-tab-lt-ll-ad-it-sg, var(--_ctm-lt-ll-ad-it-sg))
233
+ );
234
+ &[data-label-position="Bottom"] {
235
+ flex-direction: column-reverse;
236
+ align-items: flex-start;
237
+ .label-wrapper {
238
+ width: 100%;
239
+ }
240
+ }
241
+ &[data-label-position="Top"] {
242
+ .label-wrapper {
243
+ width: 100%;
244
+ }
245
+ }
246
+ &[data-label-position="Left"] {
247
+ flex-direction: row;
248
+ align-items: stretch;
249
+ }
250
+ &[data-label-position="Right"] {
251
+ flex-direction: row-reverse;
252
+ align-items: stretch;
253
+ }
254
+ }
255
+ .input-wrapper {
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: space-between;
259
+ width: 100%;
260
+ overflow: hidden;
261
+ & > div {
262
+ width: 100%;
263
+ }
264
+
265
+ position: relative;
266
+ background-color: var(
267
+ --_ctm-mob-dn-it-bd-cr,
268
+ var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
269
+ );
270
+ box-shadow: var(
271
+ --_ctm-mob-dn-it-sw-ae,
272
+ var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))
273
+ )
274
+ var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br)))
275
+ var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd)))
276
+ var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
277
+ border-radius: var(
278
+ --_ctm-mob-dn-it-br-rs,
279
+ var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs))
280
+ );
281
+
282
+ border-color: var(
283
+ --_ctm-mob-dn-it-br-cr,
284
+ var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr))
285
+ );
286
+ border-style: var(
287
+ --_ctm-mob-dn-it-br-se,
288
+ var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se))
289
+ );
290
+ border-width: var(
291
+ --_ctm-mob-dn-it-br-wh,
292
+ var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh))
293
+ );
294
+
295
+ padding: prepareMediaVariable(--_ctm-dn-it-pg);
296
+ width: prepareMediaVariable(--_ctm-dn-it-wh);
297
+
298
+ .input__dropdown {
299
+ position: absolute;
300
+ top: 100%;
301
+ z-index: 10;
302
+ border: 1px solid var(--_gray-200);
303
+ padding: 20px;
304
+ padding: 0px;
305
+ margin-top: 10px;
306
+ right: 0px;
307
+ max-height: 150px;
308
+ overflow-y: auto;
309
+ border-radius: 4px;
310
+ margin-top: 10px;
311
+
312
+ .dropdown__option {
313
+ padding: 8px;
314
+ cursor: pointer;
315
+ border-bottom: 1px solid var(--_gray-200);
316
+ text-align: center;
317
+ background-color: #fff;
318
+ user-select: none;
319
+ &:hover,
320
+ &.active {
321
+ background-color: var(--_primary-25);
322
+ }
323
+ }
324
+ }
325
+
326
+ .buttons {
327
+ display: flex;
328
+ flex-direction: column;
329
+ align-items: center;
330
+ justify-content: space-between;
331
+ position: absolute;
332
+ right: 10px;
333
+
334
+ button {
335
+ width: 20px;
336
+ height: 20px;
337
+ background: none;
338
+ border: none;
339
+ cursor: pointer;
340
+ padding: 0;
341
+ font-size: 14px;
342
+ color: #333;
343
+
344
+ &:hover {
345
+ color: #000;
346
+ }
347
+
348
+ &:disabled {
349
+ color: #ccc;
350
+ cursor: not-allowed;
351
+ }
352
+ }
353
+ }
354
+ }
355
+ .icrease-decrease {
356
+ input {
357
+ text-align: center;
358
+ }
359
+ }
360
+ .input_dropdown {
361
+ .input {
362
+ min-width: 50px;
363
+ }
364
+ .est__dropdown {
365
+ min-width: 50px;
366
+ }
367
+ }
368
+
369
+ //Dropdown
370
+ .est__dropdown__main {
371
+ position: relative;
372
+ width: 100%;
373
+ margin-top: 0px;
374
+ // padding: 30px;
375
+ label {
376
+ font-size: 14px;
377
+ color: var(--_gray-700);
378
+ margin-bottom: 8px;
379
+ display: block;
380
+ }
381
+
382
+ .est__dropdown {
383
+ cursor: pointer;
384
+ position: relative;
385
+ color: var(--_gray-700);
386
+
387
+ // border-radius: 6px;
388
+ // background-color: #fff;
389
+ border: none;
390
+ border-radius: 0;
391
+ background-color: transparent;
392
+ display: flex;
393
+ justify-content: space-between;
394
+ align-items: center;
395
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);
396
+
397
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
398
+ .value__selected {
399
+ width: 100%;
400
+ background-color: var(
401
+ --_ctm-mob-dn-dn-se-bd-cr,
402
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
403
+ );
404
+
405
+ border-color: var(
406
+ --_ctm-mob-dn-dn-se-br-cr,
407
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
408
+ );
409
+
410
+ border-style: var(
411
+ --_ctm-mob-dn-dn-se-br-se,
412
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
413
+ );
414
+
415
+ border-width: var(
416
+ --_ctm-mob-dn-dn-se-br-wh,
417
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
418
+ );
419
+
420
+ border-radius: var(
421
+ --_ctm-mob-dn-dn-se-br-rs,
422
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
423
+ );
424
+
425
+ box-shadow: var(
426
+ --_show-shadow,
427
+ var(
428
+ --_ctm-mob-dn-dn-se-sw-ae,
429
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
430
+ )
431
+ var(
432
+ --_ctm-mob-dn-dn-se-sw-br,
433
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
434
+ )
435
+ var(
436
+ --_ctm-mob-dn-dn-se-sw-sd,
437
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
438
+ )
439
+ var(
440
+ --_ctm-mob-dn-dn-se-sw-cr,
441
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
442
+ )
443
+ );
444
+ }
445
+
446
+ &.open .list {
447
+ display: flex;
448
+ }
449
+ .est__dropdown__button {
450
+ display: flex;
451
+ align-items: center;
452
+ width: 100%;
453
+ }
454
+
455
+ .est__dropdown__icon {
456
+ position: absolute;
457
+ // top: 10px;
458
+ right: 5px;
459
+ }
460
+
461
+ .list {
462
+ display: none;
463
+ flex-direction: column;
464
+ border: 1px solid var(--_gray-200);
465
+ border-radius: 6px;
466
+ position: absolute;
467
+ top: 100%;
468
+ left: 0;
469
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
470
+ background-color: #fff;
471
+ border-radius: 4px;
472
+ z-index: var(--_higher-zIndex);
473
+ max-height: 200px;
474
+ overflow-y: auto;
475
+ margin-top: var(
476
+ --_ctm-mob-dn-dn-se-on-ad-lt-sg,
477
+ var(--_ctm-tab-dn-dn-se-on-ad-lt-sg, var(--_ctm-dn-dn-se-on-ad-lt-sg))
478
+ );
479
+ gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
480
+
481
+ &.top {
482
+ bottom: 100%;
483
+ top: auto;
484
+ }
485
+
486
+ .list__option {
487
+ cursor: pointer;
488
+ text-align: center;
489
+ }
490
+ }
491
+ }
492
+ }
493
+ .btn__with__text {
494
+ height: 100%;
495
+ }
496
+
497
+ .btn__with__text[data-btn-name="increase-button"] {
498
+ &[data-show-shadow="false"] {
499
+ --_show-shadow: none;
500
+ }
501
+ &[data-icon-position="left"] {
502
+ --_sf-fd-bn: row;
503
+ }
504
+ &[data-icon-position="right"] {
505
+ --_sf-fd-bn: row-reverse;
506
+ }
507
+ &[data-icon-position="center"] {
508
+ --_sf-fd-bn: row;
509
+ }
510
+
511
+ &:hover {
512
+ --_sf-hr-bd-cr: var(
513
+ --_ctm-mob-dn-ie-bn-hr-se-bd-cr,
514
+ var(--_ctm-tab-dn-ie-bn-hr-se-bd-cr, var(--_ctm-dn-ie-bn-hr-se-bd-cr))
515
+ );
516
+ --_sf-hr-br-cr: var(
517
+ --_ctm-mob-dn-ie-bn-hr-se-br-cr,
518
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-cr, var(--_ctm-dn-ie-bn-hr-se-br-cr))
519
+ );
520
+ --_sf-hr-br-se: var(
521
+ --_ctm-mob-dn-ie-bn-hr-se-br-se,
522
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-se, var(--_ctm-dn-ie-bn-hr-se-br-se))
523
+ );
524
+ --_sf-hr-br-wh: var(
525
+ --_ctm-mob-dn-ie-bn-hr-se-br-wh,
526
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-wh, var(--_ctm-dn-ie-bn-hr-se-br-wh))
527
+ );
528
+ --_sf-hr-br-rs: var(
529
+ --_ctm-mob-dn-ie-bn-hr-se-br-rs,
530
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-rs, var(--_ctm-dn-ie-bn-hr-se-br-rs))
531
+ );
532
+ --_sf-hr-at: var(
533
+ --_ctm-mob-dn-ie-bn-hr-se-at,
534
+ var(--_ctm-tab-dn-ie-bn-hr-se-at, var(--_ctm-dn-ie-bn-hr-se-at))
535
+ );
536
+ --_sf-hr-gp: var(
537
+ --_ctm-mob-dn-ie-bn-hr-se-gp,
538
+ var(--_ctm-tab-dn-ie-bn-hr-se-gp, var(--_ctm-dn-ie-bn-hr-se-gp))
539
+ );
540
+
541
+ // for shadow
542
+ --_sf-hr-sw-ae: var(
543
+ --_ctm-mob-dn-ie-bn-hr-se-sw-ae,
544
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-ae, var(--_ctm-dn-ie-bn-hr-se-sw-ae))
545
+ );
546
+ --_sf-hr-sw-br: var(
547
+ --_ctm-mob-dn-ie-bn-hr-se-sw-br,
548
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-br, var(--_ctm-dn-ie-bn-hr-se-sw-br))
549
+ );
550
+ --_sf-hr-sw-hr: var(
551
+ --_ctm-mob-dn-ie-bn-hr-se-sw-hr,
552
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-hr, var(--_ctm-dn-ie-bn-hr-se-sw-hr))
553
+ );
554
+ --_sf-hr-sw-cr: var(
555
+ --_ctm-mob-dn-ie-bn-hr-se-sw-cr,
556
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-cr, var(--_ctm-dn-ie-bn-hr-se-sw-cr))
557
+ );
558
+
559
+ // for font
560
+
561
+ --_sf-hr-cr: var(
562
+ --_ctm-mob-dn-ie-bn-hr-se-cr,
563
+ var(--_ctm-tab-dn-ie-bn-hr-se-cr, var(--_ctm-dn-ie-bn-hr-se-cr))
564
+ );
565
+ --_sf-hr-ft-fy: var(
566
+ --_ctm-mob-dn-ie-bn-hr-se-ft-fy,
567
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-fy, var(--_ctm-dn-ie-bn-hr-se-ft-fy))
568
+ );
569
+ --_sf-hr-tt-tm: var(
570
+ --_ctm-mob-dn-ie-bn-hr-se-tt-tm,
571
+ var(--_ctm-tab-dn-ie-bn-hr-se-tt-tm, var(--_ctm-dn-ie-bn-hr-se-tt-tm))
572
+ );
573
+ --_sf-hr-wd-wp: var(
574
+ --_ctm-mob-dn-ie-bn-hr-se-wd-wp,
575
+ var(--_ctm-tab-dn-ie-bn-hr-se-wd-wp, var(--_ctm-dn-ie-bn-hr-se-wd-wp))
576
+ );
577
+ --_sf-hr-wd-bk: var(
578
+ --_ctm-mob-dn-ie-bn-hr-se-wd-bk,
579
+ var(--_ctm-tab-dn-ie-bn-hr-se-wd-bk, var(--_ctm-dn-ie-bn-hr-se-wd-bk))
580
+ );
581
+ --_sf-hr-ft-se: var(
582
+ --_ctm-mob-dn-ie-bn-hr-se-ft-se,
583
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-se, var(--_ctm-dn-ie-bn-hr-se-ft-se))
584
+ );
585
+ --_sf-hr-ft-wt: var(
586
+ --_ctm-mob-dn-ie-bn-hr-se-ft-wt,
587
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-wt, var(--_ctm-dn-ie-bn-hr-se-ft-wt))
588
+ );
589
+ --_sf-hr-ft-se-ic: var(
590
+ --_ctm-mob-dn-ie-bn-hr-se-ft-se-ic,
591
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-se-ic, var(--_ctm-dn-ie-bn-hr-se-ft-se-ic))
592
+ );
593
+ --_sf-hr-tt-an: var(
594
+ --_ctm-mob-dn-ie-bn-hr-se-tt-an,
595
+ var(--_ctm-tab-dn-ie-bn-hr-se-tt-an, var(--_ctm-dn-ie-bn-hr-se-tt-an))
596
+ );
597
+ --_sf-hr-lr-sg: var(
598
+ --_ctm-mob-dn-ie-bn-hr-se-lr-sg,
599
+ var(--_ctm-tab-dn-ie-bn-hr-se-lr-sg, var(--_ctm-dn-ie-bn-hr-se-lr-sg))
600
+ );
601
+ --_sf-hr-le-ht: var(
602
+ --_ctm-mob-dn-ie-bn-hr-se-le-ht,
603
+ var(--_ctm-tab-dn-ie-bn-hr-se-le-ht, var(--_ctm-dn-ie-bn-hr-se-le-ht))
604
+ );
605
+
606
+ --_sf-hr-in-se: var(
607
+ --_ctm-mob-dn-ie-bn-hr-se-in-se,
608
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
609
+ );
610
+ --_sf-hr-in-se: var(
611
+ --_ctm-mob-dn-ie-bn-hr-se-in-se,
612
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
613
+ );
614
+ --_sf-hr-in-c1: var(
615
+ --_ctm-mob-dn-ie-bn-hr-se-in-c1,
616
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-c1, var(--_ctm-dn-ie-bn-hr-se-in-c1))
617
+ );
618
+ --_sf-hr-ue: var(
619
+ --_ctm-mob-dn-ie-bn-hr-se-ue,
620
+ var(--_ctm-tab-dn-ie-bn-hr-se-ue, var(--_ctm-dn-ie-bn-hr-se-ue))
621
+ );
622
+
623
+ // for pading and width
624
+ --_sf-hr-pg: var(
625
+ --_ctm-mob-dn-ie-bn-hr-pg,
626
+ var(--_ctm-tab-dn-ie-bn-hr-pg, var(--_ctm-dn-ie-bn-hr-pg))
627
+ );
628
+ --_sf-hr-wh: var(
629
+ --_ctm-mob-dn-ie-bn-hr-wh,
630
+ var(--_ctm-tab-dn-ie-bn-hr-wh, var(--_ctm-dn-ie-bn-hr-wh))
631
+ );
632
+
633
+ &[data-hover-show-shadow="false"] {
634
+ --_hover-show-shadow: none;
635
+ }
636
+ &[data-hover-show-icon="false"] {
637
+ --_hover-show-icon: none;
638
+ }
639
+ }
640
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-bd-cr));
641
+
642
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-pg));
643
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wh));
644
+ display: flex;
645
+ flex-direction: var(--_sf-fd-bn);
646
+ align-items: center;
647
+
648
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-at));
649
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-gp));
650
+
651
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-rs));
652
+
653
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-ae))
654
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-br))
655
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-sd))
656
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-cr));
657
+
658
+ &[data-show-border="true"] {
659
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-cr));
660
+
661
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-se));
662
+
663
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-wh));
664
+ }
665
+
666
+ .txt {
667
+ display: flex;
668
+
669
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-cr));
670
+
671
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-fy));
672
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-tm));
673
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-wp));
674
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-bk));
675
+ &.flex__overflow {
676
+ white-space: normal;
677
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
678
+ }
679
+
680
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se));
681
+
682
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-wt));
683
+
684
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se-ic));
685
+
686
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-an));
687
+
688
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-lr-sg));
689
+
690
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-le-ht));
691
+
692
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
693
+ }
694
+
695
+ .icon {
696
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
697
+ svg {
698
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
699
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
700
+
701
+ path {
702
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-c1));
703
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
704
+ stroke-width: prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-se-wh, 1.25);
705
+ }
706
+ }
707
+ }
708
+ [data-element-style="Text"] {
709
+ display: inline-block;
710
+ width: 100%;
711
+ }
712
+
713
+ .icon--hover {
714
+ // position: absolute;
715
+ // inset: 0;
716
+ // opacity: 0;
717
+ display: none;
718
+ transition: opacity 0.2s ease;
719
+ }
720
+
721
+ &:hover .icon--hover {
722
+ // opacity: 1;
723
+ display: flex;
724
+ }
725
+
726
+ &:hover .icon--default {
727
+ // opacity: 0;
728
+ display: none;
729
+ }
730
+ }
731
+
732
+ .btn__with__text[data-btn-name="decrease-button"] {
733
+ &[data-show-shadow="false"] {
734
+ --_show-shadow: none;
735
+ }
736
+ &[data-icon-position="left"] {
737
+ --_sf-fd-bn: row;
738
+ }
739
+ &[data-icon-position="right"] {
740
+ --_sf-fd-bn: row-reverse;
741
+ }
742
+ &[data-icon-position="center"] {
743
+ --_sf-fd-bn: row;
744
+ }
745
+ &:disabled {
746
+ opacity: 0.5;
747
+ cursor: not-allowed;
748
+ }
749
+ &:hover {
750
+ --_sf-hr-bd-cr: var(
751
+ --_ctm-mob-dn-de-bn-hr-se-bd-cr,
752
+ var(--_ctm-tab-dn-de-bn-hr-se-bd-cr, var(--_ctm-dn-de-bn-hr-se-bd-cr))
753
+ );
754
+ --_sf-hr-br-cr: var(
755
+ --_ctm-mob-dn-de-bn-hr-se-br-cr,
756
+ var(--_ctm-tab-dn-de-bn-hr-se-br-cr, var(--_ctm-dn-de-bn-hr-se-br-cr))
757
+ );
758
+ --_sf-hr-br-se: var(
759
+ --_ctm-mob-dn-de-bn-hr-se-br-se,
760
+ var(--_ctm-tab-dn-de-bn-hr-se-br-se, var(--_ctm-dn-de-bn-hr-se-br-se))
761
+ );
762
+ --_sf-hr-br-wh: var(
763
+ --_ctm-mob-dn-de-bn-hr-se-br-wh,
764
+ var(--_ctm-tab-dn-de-bn-hr-se-br-wh, var(--_ctm-dn-de-bn-hr-se-br-wh))
765
+ );
766
+ --_sf-hr-br-rs: var(
767
+ --_ctm-mob-dn-de-bn-hr-se-br-rs,
768
+ var(--_ctm-tab-dn-de-bn-hr-se-br-rs, var(--_ctm-dn-de-bn-hr-se-br-rs))
769
+ );
770
+ --_sf-hr-at: var(
771
+ --_ctm-mob-dn-de-bn-hr-se-at,
772
+ var(--_ctm-tab-dn-de-bn-hr-se-at, var(--_ctm-dn-de-bn-hr-se-at))
773
+ );
774
+ --_sf-hr-gp: var(
775
+ --_ctm-mob-dn-de-bn-hr-se-gp,
776
+ var(--_ctm-tab-dn-de-bn-hr-se-gp, var(--_ctm-dn-de-bn-hr-se-gp))
777
+ );
778
+
779
+ // for shadow
780
+ --_sf-hr-sw-ae: var(
781
+ --_ctm-mob-dn-de-bn-hr-se-sw-ae,
782
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-ae, var(--_ctm-dn-de-bn-hr-se-sw-ae))
783
+ );
784
+ --_sf-hr-sw-br: var(
785
+ --_ctm-mob-dn-de-bn-hr-se-sw-br,
786
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-br, var(--_ctm-dn-de-bn-hr-se-sw-br))
787
+ );
788
+ --_sf-hr-sw-hr: var(
789
+ --_ctm-mob-dn-de-bn-hr-se-sw-hr,
790
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-hr, var(--_ctm-dn-de-bn-hr-se-sw-hr))
791
+ );
792
+ --_sf-hr-sw-cr: var(
793
+ --_ctm-mob-dn-de-bn-hr-se-sw-cr,
794
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-cr, var(--_ctm-dn-de-bn-hr-se-sw-cr))
795
+ );
796
+
797
+ // for font
798
+
799
+ --_sf-hr-cr: var(
800
+ --_ctm-mob-dn-de-bn-hr-se-cr,
801
+ var(--_ctm-tab-dn-de-bn-hr-se-cr, var(--_ctm-dn-de-bn-hr-se-cr))
802
+ );
803
+ --_sf-hr-ft-fy: var(
804
+ --_ctm-mob-dn-de-bn-hr-se-ft-fy,
805
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-fy, var(--_ctm-dn-de-bn-hr-se-ft-fy))
806
+ );
807
+ --_sf-hr-tt-tm: var(
808
+ --_ctm-mob-dn-de-bn-hr-se-tt-tm,
809
+ var(--_ctm-tab-dn-de-bn-hr-se-tt-tm, var(--_ctm-dn-de-bn-hr-se-tt-tm))
810
+ );
811
+ --_sf-hr-wd-wp: var(
812
+ --_ctm-mob-dn-de-bn-hr-se-wd-wp,
813
+ var(--_ctm-tab-dn-de-bn-hr-se-wd-wp, var(--_ctm-dn-de-bn-hr-se-wd-wp))
814
+ );
815
+ --_sf-hr-wd-bk: var(
816
+ --_ctm-mob-dn-de-bn-hr-se-wd-bk,
817
+ var(--_ctm-tab-dn-de-bn-hr-se-wd-bk, var(--_ctm-dn-de-bn-hr-se-wd-bk))
818
+ );
819
+ --_sf-hr-ft-se: var(
820
+ --_ctm-mob-dn-de-bn-hr-se-ft-se,
821
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-se, var(--_ctm-dn-de-bn-hr-se-ft-se))
822
+ );
823
+ --_sf-hr-ft-wt: var(
824
+ --_ctm-mob-dn-de-bn-hr-se-ft-wt,
825
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-wt, var(--_ctm-dn-de-bn-hr-se-ft-wt))
826
+ );
827
+ --_sf-hr-ft-se-ic: var(
828
+ --_ctm-mob-dn-de-bn-hr-se-ft-se-ic,
829
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-se-ic, var(--_ctm-dn-de-bn-hr-se-ft-se-ic))
830
+ );
831
+ --_sf-hr-tt-an: var(
832
+ --_ctm-mob-dn-de-bn-hr-se-tt-an,
833
+ var(--_ctm-tab-dn-de-bn-hr-se-tt-an, var(--_ctm-dn-de-bn-hr-se-tt-an))
834
+ );
835
+ --_sf-hr-lr-sg: var(
836
+ --_ctm-mob-dn-de-bn-hr-se-lr-sg,
837
+ var(--_ctm-tab-dn-de-bn-hr-se-lr-sg, var(--_ctm-dn-de-bn-hr-se-lr-sg))
838
+ );
839
+ --_sf-hr-le-ht: var(
840
+ --_ctm-mob-dn-de-bn-hr-se-le-ht,
841
+ var(--_ctm-tab-dn-de-bn-hr-se-le-ht, var(--_ctm-dn-de-bn-hr-se-le-ht))
842
+ );
843
+
844
+ --_sf-hr-in-se: var(
845
+ --_ctm-mob-dn-de-bn-hr-se-in-se,
846
+ var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
847
+ );
848
+ --_sf-hr-in-se: var(
849
+ --_ctm-mob-dn-de-bn-hr-se-in-se,
850
+ var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
851
+ );
852
+ --_sf-hr-in-c1: var(
853
+ --_ctm-mob-dn-de-bn-hr-se-in-c1,
854
+ var(--_ctm-tab-dn-de-bn-hr-se-in-c1, var(--_ctm-dn-de-bn-hr-se-in-c1))
855
+ );
856
+ --_sf-hr-ue: var(
857
+ --_ctm-mob-dn-de-bn-hr-se-ue,
858
+ var(--_ctm-tab-dn-de-bn-hr-se-ue, var(--_ctm-dn-de-bn-hr-se-ue))
859
+ );
860
+
861
+ // for pading and width
862
+ --_sf-hr-pg: var(
863
+ --_ctm-mob-dn-de-bn-hr-pg,
864
+ var(--_ctm-tab-dn-de-bn-hr-pg, var(--_ctm-dn-de-bn-hr-pg))
865
+ );
866
+ --_sf-hr-wh: var(
867
+ --_ctm-mob-dn-de-bn-hr-wh,
868
+ var(--_ctm-tab-dn-de-bn-hr-wh, var(--_ctm-dn-de-bn-hr-wh))
869
+ );
870
+
871
+ &[data-hover-show-shadow="false"] {
872
+ --_hover-show-shadow: none;
873
+ }
874
+ &[data-hover-show-icon="false"] {
875
+ --_hover-show-icon: none;
876
+ }
877
+ }
878
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-bd-cr));
879
+
880
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-pg));
881
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wh));
882
+ display: flex;
883
+ flex-direction: var(--_sf-fd-bn);
884
+ align-items: center;
885
+
886
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-at));
887
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-gp));
888
+
889
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-rs));
890
+
891
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-ae))
892
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-br))
893
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-sd))
894
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-cr));
895
+
896
+ &[data-show-border="true"] {
897
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-cr));
898
+
899
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-se));
900
+
901
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-wh));
902
+ }
903
+
904
+ .txt {
905
+ display: flex;
906
+
907
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-cr));
908
+
909
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-fy));
910
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-tm));
911
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-wp));
912
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-bk));
913
+ &.flex__overflow {
914
+ white-space: normal;
915
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
916
+ }
917
+
918
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se));
919
+
920
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-wt));
921
+
922
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se-ic));
923
+
924
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-an));
925
+
926
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-lr-sg));
927
+
928
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-le-ht));
929
+
930
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
931
+ }
932
+
933
+ .icon {
934
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
935
+ svg {
936
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
937
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
938
+
939
+ path {
940
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-c1));
941
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
942
+ stroke-width: prepareMediaVariable(--_ctm-dn-de-bn-dt-se-se-wh, 1.25);
943
+ }
944
+ }
945
+ }
946
+ [data-element-style="Text"] {
947
+ display: inline-block;
948
+ width: 100%;
949
+ }
950
+
951
+ .icon--hover {
952
+ // position: absolute;
953
+ // inset: 0;
954
+ // opacity: 0;
955
+ display: none;
956
+ transition: opacity 0.2s ease;
957
+ }
958
+
959
+ &:hover .icon--hover {
960
+ // opacity: 1;
961
+ display: flex;
962
+ }
963
+
964
+ &:hover .icon--default {
965
+ // opacity: 0;
966
+ display: none;
967
+ }
968
+ }
969
+
970
+ .minimum__order__qty {
971
+ white-space: nowrap;
972
+
973
+ height: 100%;
974
+ width: 100%;
975
+ text-wrap: auto;
976
+
977
+ background-color: var(
978
+ --_ctm-mob-dn-mm-or-qy-bd-cr,
979
+ var(--_ctm-tab-dn-mm-or-qy-bd-cr, var(--_ctm-dn-mm-or-qy-bd-cr))
980
+ );
981
+
982
+ border-color: var(
983
+ --_ctm-mob-dn-mm-or-qy-br-cr,
984
+ var(--_ctm-tab-dn-mm-or-qy-br-cr, var(--_ctm-dn-mm-or-qy-br-cr))
985
+ );
986
+
987
+ border-style: var(
988
+ --_ctm-mob-dn-mm-or-qy-br-se,
989
+ var(--_ctm-tab-dn-mm-or-qy-br-se, var(--_ctm-dn-mm-or-qy-br-se))
990
+ );
991
+
992
+ border-width: var(
993
+ --_ctm-mob-dn-mm-or-qy-br-wh,
994
+ var(--_ctm-tab-dn-mm-or-qy-br-wh, var(--_ctm-dn-mm-or-qy-br-wh))
995
+ );
996
+
997
+ border-radius: var(
998
+ --_ctm-mob-dn-mm-or-qy-br-rs,
999
+ var(--_ctm-tab-dn-mm-or-qy-br-rs, var(--_ctm-dn-mm-or-qy-br-rs))
1000
+ );
1001
+
1002
+ box-shadow: var(
1003
+ --_show-shadow,
1004
+ var(
1005
+ --_ctm-mob-dn-mm-or-qy-sw-ae,
1006
+ var(--_ctm-tab-dn-mm-or-qy-sw-ae, var(--_ctm-dn-mm-or-qy-sw-ae))
1007
+ )
1008
+ var(
1009
+ --_ctm-mob-dn-mm-or-qy-sw-br,
1010
+ var(--_ctm-tab-dn-mm-or-qy-sw-br, var(--_ctm-dn-mm-or-qy-sw-br))
1011
+ )
1012
+ var(
1013
+ --_ctm-mob-dn-mm-or-qy-sw-sd,
1014
+ var(--_ctm-tab-dn-mm-or-qy-sw-sd, var(--_ctm-dn-mm-or-qy-sw-sd))
1015
+ )
1016
+ var(
1017
+ --_ctm-mob-dn-mm-or-qy-sw-cr,
1018
+ var(--_ctm-tab-dn-mm-or-qy-sw-cr, var(--_ctm-dn-mm-or-qy-sw-cr))
1019
+ )
1020
+ );
1021
+
1022
+ color: var(
1023
+ --_ctm-mob-dn-mm-or-qy-cr,
1024
+ var(--_ctm-tab-dn-mm-or-qy-cr, var(--_ctm-dn-mm-or-qy-cr))
1025
+ );
1026
+ font-family: var(
1027
+ --_ctm-mob-dn-mm-or-qy-ft-fy,
1028
+ var(--_ctm-tab-dn-mm-or-qy-ft-fy, var(--_ctm-dn-mm-or-qy-ft-fy))
1029
+ );
1030
+ text-transform: var(
1031
+ --_ctm-mob-dn-mm-or-qy-tt-tm,
1032
+ var(--_ctm-tab-dn-mm-or-qy-tt-tm, var(--_ctm-dn-mm-or-qy-tt-tm))
1033
+ );
1034
+ word-wrap: var(
1035
+ --_ctm-mob-dn-mm-or-qy-wd-wp,
1036
+ var(--_ctm-tab-dn-mm-or-qy-wd-wp, var(--_ctm-dn-mm-or-qy-wd-wp))
1037
+ );
1038
+ word-break: var(
1039
+ --_ctm-mob-dn-mm-or-qy-wd-bk,
1040
+ var(--_ctm-tab-dn-mm-or-qy-wd-bk, var(--_ctm-dn-mm-or-qy-wd-bk))
1041
+ );
1042
+ font-size: var(
1043
+ --_ctm-mob-dn-mm-or-qy-ft-se,
1044
+ var(--_ctm-tab-dn-mm-or-qy-ft-se, var(--_ctm-dn-mm-or-qy-ft-se))
1045
+ );
1046
+ font-weight: var(
1047
+ --_ctm-mob-dn-mm-or-qy-ft-wt,
1048
+ var(--_ctm-tab-dn-mm-or-qy-ft-wt, var(--_ctm-dn-mm-or-qy-ft-wt))
1049
+ );
1050
+ font-style: var(
1051
+ --_ctm-mob-dn-mm-or-qy-ft-se-ic,
1052
+ var(--_ctm-tab-dn-mm-or-qy-ft-se-ic, var(--_ctm-dn-mm-or-qy-ft-se-ic))
1053
+ );
1054
+ text-align: var(
1055
+ --_ctm-mob-dn-mm-or-qy-tt-an,
1056
+ var(--_ctm-tab-dn-mm-or-qy-tt-an, var(--_ctm-dn-mm-or-qy-tt-an))
1057
+ );
1058
+ letter-spacing: var(
1059
+ --_ctm-mob-dn-mm-or-qy-lr-sg,
1060
+ var(--_ctm-tab-dn-mm-or-qy-lr-sg, var(--_ctm-dn-mm-or-qy-lr-sg))
1061
+ );
1062
+ line-height: var(
1063
+ --_ctm-mob-dn-mm-or-qy-le-ht,
1064
+ var(--_ctm-tab-dn-mm-or-qy-le-ht, var(--_ctm-dn-mm-or-qy-le-ht-dc))
1065
+ );
1066
+ text-decoration: var(
1067
+ --_ctm-mob-dn-mm-or-qy-ue,
1068
+ var(--_ctm-tab-dn-mm-or-qy-ue, var(--_ctm-dn-mm-or-qy-ue))
1069
+ );
1070
+ padding: prepareMediaVariable(--_ctm-dn-mm-or-qy-pg);
1071
+ }
1072
+ }
1073
+ }
1074
+ }