@sc-360-v2/storefront-cms-library 0.5.72 → 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 (124) 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/bundleDetails.scss +3774 -5072
  18. package/dist/button.scss +79 -103
  19. package/dist/buy-for-tab-container.scss +77 -106
  20. package/dist/buyForHeaders.scss +1722 -2976
  21. package/dist/cart-details.scss +481 -1012
  22. package/dist/cart-summary.scss +557 -1149
  23. package/dist/cart-wrapper.scss +37 -79
  24. package/dist/cart.scss +117 -225
  25. package/dist/cartAttributes.scss +416 -735
  26. package/dist/category-groups-element.scss +127 -108
  27. package/dist/category-groups-product-grid.scss +120 -147
  28. package/dist/category-groups-product-image.scss +1162 -1457
  29. package/dist/category-groups-product-options.scss +613 -680
  30. package/dist/category-groups-product-price.scss +1966 -3244
  31. package/dist/category-groups-quota-details.scss +210 -464
  32. package/dist/category.scss +26 -50
  33. package/dist/checkout.scss +24 -16
  34. package/dist/confirm-modal.scss +22 -2
  35. package/dist/container.scss +32 -54
  36. package/dist/countdown.scss +255 -443
  37. package/dist/coupon.scss +351 -710
  38. package/dist/default-dropdown.scss +12 -1
  39. package/dist/embroider-template-1-v2.scss +123 -172
  40. package/dist/embroider-template-1.scss +68 -104
  41. package/dist/embroidery.scss +30 -31
  42. package/dist/employee-bulk-order.scss +418 -142
  43. package/dist/faq.scss +228 -408
  44. package/dist/filter-results.scss +125 -265
  45. package/dist/filters.scss +900 -1797
  46. package/dist/gallery-slider-temp.scss +432 -750
  47. package/dist/global-styles.scss +218 -198
  48. package/dist/grid.scss +25 -33
  49. package/dist/hotspot.scss +68 -115
  50. package/dist/image-temp.scss +21 -20
  51. package/dist/item-stock.scss +9 -16
  52. package/dist/kitDetails.scss +2719 -4299
  53. package/dist/kits.scss +24 -19
  54. package/dist/language-selector.scss +211 -361
  55. package/dist/last-x-orders.scss +95 -174
  56. package/dist/layouter-item.scss +75 -103
  57. package/dist/layouter-pro-item.scss +89 -95
  58. package/dist/layouter-pro.scss +87 -92
  59. package/dist/layouter.scss +383 -445
  60. package/dist/light-box-v2.scss +89 -104
  61. package/dist/login.scss +287 -566
  62. package/dist/map.scss +221 -368
  63. package/dist/marchandiserSets.scss +95 -104
  64. package/dist/mega-menu-container.scss +96 -109
  65. package/dist/mega-menu.scss +624 -731
  66. package/dist/menu-item.scss +2 -2
  67. package/dist/menu-v2.scss +507 -619
  68. package/dist/multi-select-dropdown.scss +27 -3
  69. package/dist/my-templates.scss +38 -9
  70. package/dist/option-bar.scss +215 -375
  71. package/dist/order-status.scss +646 -1117
  72. package/dist/overflow-module.scss +6 -7
  73. package/dist/past-orders.scss +118 -149
  74. package/dist/payment-methods.scss +46 -30
  75. package/dist/pickup-locations.scss +558 -1118
  76. package/dist/position-module.scss +20 -17
  77. package/dist/prefix-list.scss +21 -10
  78. package/dist/product-actions.scss +1750 -2055
  79. package/dist/product-basic-elements.scss +108 -169
  80. package/dist/product-highlights.scss +107 -152
  81. package/dist/product-image-bundles.scss +337 -642
  82. package/dist/product-inventory.scss +673 -1357
  83. package/dist/product-labels.scss +84 -105
  84. package/dist/product-options.scss +1117 -1274
  85. package/dist/product-price.scss +1283 -2561
  86. package/dist/product-promotions.scss +1388 -2830
  87. package/dist/product-sizechart.scss +516 -905
  88. package/dist/product.scss +28 -61
  89. package/dist/productDetails.scss +19 -39
  90. package/dist/profile.scss +207 -447
  91. package/dist/quantity-selector.scss +837 -1074
  92. package/dist/quick-inventory-check.scss +95 -174
  93. package/dist/quick-links.scss +55 -133
  94. package/dist/quick-order-pad.scss +218 -271
  95. package/dist/quota-details.scss +152 -282
  96. package/dist/quotes.scss +89 -122
  97. package/dist/repeater-embla-controls.scss +35 -15
  98. package/dist/repeater-grid-toggle.scss +156 -166
  99. package/dist/repeater-item.scss +41 -64
  100. package/dist/repeater.scss +671 -814
  101. package/dist/request-for-quotes.scss +66 -16
  102. package/dist/responsive-behaviour.scss +3 -1
  103. package/dist/rfqs.scss +118 -181
  104. package/dist/scroll.scss +93 -172
  105. package/dist/search.scss +179 -326
  106. package/dist/section.scss +27 -51
  107. package/dist/shipping-payments.scss +198 -58
  108. package/dist/simple-list.scss +74 -164
  109. package/dist/social.scss +80 -145
  110. package/dist/sort.scss +11 -19
  111. package/dist/stack.scss +23 -34
  112. package/dist/static-global.scss +44 -26
  113. package/dist/stockStatus.scss +11 -19
  114. package/dist/store-locations.scss +577 -1105
  115. package/dist/tab-container.scss +81 -108
  116. package/dist/table-common.scss +217 -408
  117. package/dist/table.scss +271 -502
  118. package/dist/text-temp.scss +8 -7
  119. package/dist/theme-classes.scss +17 -13
  120. package/dist/uom-selector.scss +489 -949
  121. package/dist/user-elements.scss +529 -837
  122. package/dist/variant-picker.scss +1281 -2555
  123. package/dist/volume-pricing.scss +541 -1037
  124. package/package.json +1 -1
@@ -1,1074 +1,837 @@
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
+
26
+ &[data-show-shadow="false"] {
27
+ --_show-shadow: none;
28
+ }
29
+
30
+ // /* Chrome, Safari, Edge, Opera */
31
+ // input::-webkit-outer-spin-button,
32
+ // input::-webkit-inner-spin-button {
33
+ // -webkit-appearance: none;
34
+ // margin: 0;
35
+ // }
36
+
37
+ // /* Firefox */
38
+ // input[type="number"] {
39
+ // -moz-appearance: textfield;
40
+ // }
41
+ .text-element {
42
+ background: #6d96e4;
43
+ padding: 10px;
44
+ font-weight: 600;
45
+ color: rgba(75, 69, 70, 1);
46
+ }
47
+
48
+ .quantity_container {
49
+ background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
50
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
51
+
52
+ border-color: var(--_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
+ border-style: var(--_ctm-mob-dn-wt-se-br-se,
56
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
57
+
58
+ border-width: var(--_ctm-mob-dn-wt-se-br-wh,
59
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
60
+
61
+ border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
62
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
63
+
64
+ box-shadow: var(--_show-shadow,
65
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
66
+
67
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
68
+ gap: var(--_ctm-mob-lt-it-ad-mn-qy-sg,
69
+ var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg)));
70
+ display: flex;
71
+ flex-direction: column;
72
+
73
+ // gap: var(
74
+ // --_ctm-mob-lt-te-ad-dn-sg,
75
+ // var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
76
+ // );
77
+ .label-wrapper {
78
+ // height:;
79
+ display: flex;
80
+ align-items: center;
81
+ background-color: var(--_ctm-mob-dn-ll-bd-cr,
82
+ var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr)));
83
+
84
+ border-color: var(--_ctm-mob-dn-ll-br-cr,
85
+ var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr)));
86
+
87
+ border-style: var(--_ctm-mob-dn-ll-br-se,
88
+ var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se)));
89
+
90
+ border-width: var(--_ctm-mob-dn-ll-br-wh,
91
+ var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh)));
92
+
93
+ border-radius: var(--_ctm-mob-dn-ll-br-rs,
94
+ var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs)));
95
+
96
+ box-shadow: var(--_show-shadow,
97
+ var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae))) var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br))) var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd))) var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr))));
98
+
99
+ .label {
100
+ height: unset;
101
+ }
102
+ }
103
+
104
+ .label {
105
+ white-space: nowrap;
106
+ width: 100%;
107
+ height: 100%;
108
+
109
+ color: var(--_ctm-mob-dn-ll-cr, var(--_ctm-tab-dn-ll-cr, var(--_ctm-dn-ll-cr)));
110
+ font-family: var(--_ctm-mob-dn-ll-ft-fy,
111
+ var(--_ctm-tab-dn-ll-ft-fy, var(--_ctm-dn-ll-ft-fy)));
112
+ font-size: var(--_ctm-mob-dn-ll-ft-se,
113
+ var(--_ctm-tab-dn-ll-ft-se, var(--_ctm-dn-ll-ft-se)));
114
+ font-weight: var(--_ctm-mob-dn-ll-ft-wt,
115
+ var(--_ctm-tab-dn-ll-ft-wt, var(--_ctm-dn-ll-ft-wt)));
116
+ font-style: var(--_ctm-mob-dn-ll-ft-se-ic,
117
+ var(--_ctm-tab-dn-ll-ft-se-ic, var(--_ctm-dn-ll-ft-se-ic)));
118
+ text-align: var(--_ctm-mob-dn-ll-tt-an,
119
+ var(--_ctm-tab-dn-ll-tt-an, var(--_ctm-dn-ll-tt-an)));
120
+ letter-spacing: var(--_ctm-mob-dn-ll-lr-sg,
121
+ var(--_ctm-tab-dn-ll-lr-sg, var(--_ctm-dn-ll-lr-sg)));
122
+ line-height: var(--_ctm-mob-dn-ll-le-ht,
123
+ var(--_ctm-tab-dn-ll-le-ht, var(--_ctm-dn-ll-le-ht)));
124
+ text-decoration: var(--_ctm-mob-dn-ll-ue, var(--_ctm-tab-dn-ll-ue, var(--_ctm-dn-ll-ue)));
125
+ padding: prepareMediaVariable(--_ctm-dn-ll-pg);
126
+ text-transform: prepareMediaVariable(--_ctm-dn-ll-tt-tm);
127
+ word-wrap: prepareMediaVariable(--_ctm-dn-ll-wd-wp);
128
+ word-break: prepareMediaVariable(--_ctm-dn-ll-wd-bk);
129
+ }
130
+
131
+ .input {
132
+ flex-grow: 1;
133
+ outline: none;
134
+ padding: 8px;
135
+
136
+ &::placeholder {
137
+ color: var(--_ctm-mob-dn-pr-tt-cr, var(--_ctm-tab-dn-pr-tt-cr, var(--_ctm-dn-pr-tt-cr)));
138
+ font-family: var(--_ctm-mob-dn-pr-tt-ft-fy,
139
+ var(--_ctm-tab-dn-pr-tt-ft-fy, var(--_ctm-dn-pr-tt-ft-fy)));
140
+ text-transform: var(--_ctm-mob-dn-pr-tt-tt-tm,
141
+ var(--_ctm-tab-dn-pr-tt-tt-tm, var(--_ctm-dn-pr-tt-tt-tm)));
142
+ word-wrap: var(--_ctm-mob-dn-pr-tt-wd-wp,
143
+ var(--_ctm-tab-dn-pr-tt-wd-wp, var(--_ctm-dn-pr-tt-wd-wp)));
144
+ word-break: var(--_ctm-mob-dn-pr-tt-wd-bk,
145
+ var(--_ctm-tab-dn-pr-tt-wd-bk, var(--_ctm-dn-pr-tt-wd-bk)));
146
+ font-size: var(--_ctm-mob-dn-pr-tt-ft-se,
147
+ var(--_ctm-tab-dn-pr-tt-ft-se, var(--_ctm-dn-pr-tt-ft-se)));
148
+ font-weight: var(--_ctm-mob-dn-pr-tt-ft-wt,
149
+ var(--_ctm-tab-dn-pr-tt-ft-wt, var(--_ctm-dn-pr-tt-ft-wt)));
150
+ font-style: var(--_ctm-mob-dn-pr-tt-ft-se-ic,
151
+ var(--_ctm-tab-dn-pr-tt-ft-se-ic, var(--_ctm-dn-pr-tt-ft-se-ic)));
152
+ text-align: var(--_ctm-mob-dn-pr-tt-tt-an,
153
+ var(--_ctm-tab-dn-pr-tt-tt-an, var(--_ctm-dn-pr-tt-tt-an)));
154
+ letter-spacing: var(--_ctm-mob-dn-pr-tt-lr-sg,
155
+ var(--_ctm-tab-dn-pr-tt-lr-sg, var(--_ctm-dn-pr-tt-lr-sg)));
156
+ line-height: var(--_ctm-mob-dn-pr-tt-le-ht,
157
+ var(--_ctm-tab-dn-pr-tt-le-ht, var(--_ctm-dn-pr-tt-le-ht)));
158
+ text-decoration: var(--_ctm-mob-dn-pr-tt-ue,
159
+ var(--_ctm-tab-dn-pr-tt-ue, var(--_ctm-dn-pr-tt-ue)));
160
+ }
161
+ }
162
+
163
+ .quantity_open_input {
164
+ display: flex;
165
+ align-items: flex-start;
166
+ flex-direction: column;
167
+ gap: var(--_ctm-mob-lt-ll-ad-it-sg,
168
+ var(--_ctm-tab-lt-ll-ad-it-sg, var(--_ctm-lt-ll-ad-it-sg)));
169
+
170
+ &[data-label-position="Bottom"] {
171
+ flex-direction: column-reverse;
172
+ align-items: flex-start;
173
+
174
+ .label-wrapper {
175
+ width: 100%;
176
+ }
177
+ }
178
+
179
+ &[data-label-position="Top"] {
180
+ .label-wrapper {
181
+ width: 100%;
182
+ }
183
+ }
184
+
185
+ &[data-label-position="Left"] {
186
+ flex-direction: row;
187
+ align-items: stretch;
188
+ }
189
+
190
+ &[data-label-position="Right"] {
191
+ flex-direction: row-reverse;
192
+ align-items: stretch;
193
+ }
194
+ }
195
+
196
+ .input-wrapper {
197
+ display: flex;
198
+ align-items: center;
199
+ justify-content: space-between;
200
+ width: 100%;
201
+ overflow: hidden;
202
+
203
+ &>div {
204
+ width: 100%;
205
+ }
206
+
207
+ position: relative;
208
+ background-color: var(--_ctm-mob-dn-it-bd-cr,
209
+ var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr)));
210
+ box-shadow: var(--_ctm-mob-dn-it-sw-ae,
211
+ var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))) var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br))) var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd))) var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
212
+ border-radius: var(--_ctm-mob-dn-it-br-rs,
213
+ var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs)));
214
+
215
+ border-color: var(--_ctm-mob-dn-it-br-cr,
216
+ var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr)));
217
+ border-style: var(--_ctm-mob-dn-it-br-se,
218
+ var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se)));
219
+ border-width: var(--_ctm-mob-dn-it-br-wh,
220
+ var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh)));
221
+
222
+ padding: prepareMediaVariable(--_ctm-dn-it-pg);
223
+ width: prepareMediaVariable(--_ctm-dn-it-wh);
224
+
225
+ .input__dropdown {
226
+ position: absolute;
227
+ top: 100%;
228
+ z-index: 10;
229
+ border: 1px solid var(--_gray-200);
230
+ padding: 20px;
231
+ padding: 0px;
232
+ margin-top: 10px;
233
+ right: 0px;
234
+ max-height: 150px;
235
+ overflow-y: auto;
236
+ border-radius: 4px;
237
+ margin-top: 10px;
238
+
239
+ .dropdown__option {
240
+ padding: 8px;
241
+ cursor: pointer;
242
+ border-bottom: 1px solid var(--_gray-200);
243
+ text-align: center;
244
+ background-color: #fff;
245
+ user-select: none;
246
+
247
+ &:hover,
248
+ &.active {
249
+ background-color: var(--_primary-25);
250
+ }
251
+ }
252
+ }
253
+
254
+ .buttons {
255
+ display: flex;
256
+ flex-direction: column;
257
+ align-items: center;
258
+ justify-content: space-between;
259
+ position: absolute;
260
+ right: 10px;
261
+
262
+ button {
263
+ width: 20px;
264
+ height: 20px;
265
+ background: none;
266
+ border: none;
267
+ cursor: pointer;
268
+ padding: 0;
269
+ font-size: 14px;
270
+ color: #333;
271
+
272
+ &:hover {
273
+ color: #000;
274
+ }
275
+
276
+ &:disabled {
277
+ color: #ccc;
278
+ cursor: not-allowed;
279
+ }
280
+ }
281
+ }
282
+ }
283
+
284
+ .icrease-decrease {
285
+ input {
286
+ text-align: center;
287
+ }
288
+ }
289
+
290
+ .input_dropdown {
291
+ .input {
292
+ min-width: 50px;
293
+ }
294
+
295
+ .est__dropdown {
296
+ min-width: 50px;
297
+ }
298
+ }
299
+
300
+ //Dropdown
301
+ .est__dropdown__main {
302
+ position: relative;
303
+ width: 100%;
304
+ margin-top: 0px;
305
+
306
+ // padding: 30px;
307
+ label {
308
+ font-size: 14px;
309
+ color: var(--_gray-700);
310
+ margin-bottom: 8px;
311
+ display: block;
312
+ }
313
+
314
+ .est__dropdown {
315
+ cursor: pointer;
316
+ position: relative;
317
+ color: var(--_gray-700);
318
+
319
+ // border-radius: 6px;
320
+ // background-color: #fff;
321
+ border: none;
322
+ border-radius: 0;
323
+ background-color: transparent;
324
+ display: flex;
325
+ justify-content: space-between;
326
+ align-items: center;
327
+ padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);
328
+
329
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
330
+
331
+ .value__selected {
332
+ width: 100%;
333
+ background-color: var(--_ctm-mob-dn-dn-se-bd-cr,
334
+ var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr)));
335
+
336
+ border-color: var(--_ctm-mob-dn-dn-se-br-cr,
337
+ var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr)));
338
+
339
+ border-style: var(--_ctm-mob-dn-dn-se-br-se,
340
+ var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se)));
341
+
342
+ border-width: var(--_ctm-mob-dn-dn-se-br-wh,
343
+ var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh)));
344
+
345
+ border-radius: var(--_ctm-mob-dn-dn-se-br-rs,
346
+ var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs)));
347
+
348
+ box-shadow: var(--_show-shadow,
349
+ var(--_ctm-mob-dn-dn-se-sw-ae,
350
+ var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))) var(--_ctm-mob-dn-dn-se-sw-br,
351
+ var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))) var(--_ctm-mob-dn-dn-se-sw-sd,
352
+ var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))) var(--_ctm-mob-dn-dn-se-sw-cr,
353
+ var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))));
354
+ }
355
+
356
+ &.open .list {
357
+ display: flex;
358
+ }
359
+
360
+ .est__dropdown__button {
361
+ display: flex;
362
+ align-items: center;
363
+ width: 100%;
364
+ }
365
+
366
+ .est__dropdown__icon {
367
+ position: absolute;
368
+ // top: 10px;
369
+ right: 5px;
370
+ }
371
+
372
+ .list {
373
+ display: none;
374
+ flex-direction: column;
375
+ border: 1px solid var(--_gray-200);
376
+ border-radius: 6px;
377
+ position: absolute;
378
+ top: 100%;
379
+ left: 0;
380
+ width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
381
+ background-color: #fff;
382
+ border-radius: 4px;
383
+ z-index: var(--_higher-zIndex);
384
+ max-height: 200px;
385
+ overflow-y: auto;
386
+ margin-top: var(--_ctm-mob-dn-dn-se-on-ad-lt-sg,
387
+ var(--_ctm-tab-dn-dn-se-on-ad-lt-sg, var(--_ctm-dn-dn-se-on-ad-lt-sg)));
388
+ gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));
389
+
390
+ &.top {
391
+ bottom: 100%;
392
+ top: auto;
393
+ }
394
+
395
+ .list__option {
396
+ cursor: pointer;
397
+ text-align: center;
398
+ }
399
+ }
400
+ }
401
+ }
402
+
403
+ .btn__with__text {
404
+ height: 100%;
405
+ }
406
+
407
+ .btn__with__text[data-btn-name="increase-button"] {
408
+ &[data-show-shadow="false"] {
409
+ --_show-shadow: none;
410
+ }
411
+
412
+ &[data-icon-position="left"] {
413
+ --_sf-fd-bn: row;
414
+ }
415
+
416
+ &[data-icon-position="right"] {
417
+ --_sf-fd-bn: row-reverse;
418
+ }
419
+
420
+ &[data-icon-position="center"] {
421
+ --_sf-fd-bn: row;
422
+ }
423
+
424
+ &:hover {
425
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-ie-bn-hr-se-bd-cr,
426
+ var(--_ctm-tab-dn-ie-bn-hr-se-bd-cr, var(--_ctm-dn-ie-bn-hr-se-bd-cr)));
427
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-ie-bn-hr-se-br-cr,
428
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-cr, var(--_ctm-dn-ie-bn-hr-se-br-cr)));
429
+ --_sf-hr-br-se: var(--_ctm-mob-dn-ie-bn-hr-se-br-se,
430
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-se, var(--_ctm-dn-ie-bn-hr-se-br-se)));
431
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-ie-bn-hr-se-br-wh,
432
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-wh, var(--_ctm-dn-ie-bn-hr-se-br-wh)));
433
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-ie-bn-hr-se-br-rs,
434
+ var(--_ctm-tab-dn-ie-bn-hr-se-br-rs, var(--_ctm-dn-ie-bn-hr-se-br-rs)));
435
+ --_sf-hr-at: var(--_ctm-mob-dn-ie-bn-hr-se-at,
436
+ var(--_ctm-tab-dn-ie-bn-hr-se-at, var(--_ctm-dn-ie-bn-hr-se-at)));
437
+ --_sf-hr-gp: var(--_ctm-mob-dn-ie-bn-hr-se-gp,
438
+ var(--_ctm-tab-dn-ie-bn-hr-se-gp, var(--_ctm-dn-ie-bn-hr-se-gp)));
439
+
440
+ // for shadow
441
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-ie-bn-hr-se-sw-ae,
442
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-ae, var(--_ctm-dn-ie-bn-hr-se-sw-ae)));
443
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-ie-bn-hr-se-sw-br,
444
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-br, var(--_ctm-dn-ie-bn-hr-se-sw-br)));
445
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-ie-bn-hr-se-sw-hr,
446
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-hr, var(--_ctm-dn-ie-bn-hr-se-sw-hr)));
447
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-ie-bn-hr-se-sw-cr,
448
+ var(--_ctm-tab-dn-ie-bn-hr-se-sw-cr, var(--_ctm-dn-ie-bn-hr-se-sw-cr)));
449
+
450
+ // for font
451
+
452
+ --_sf-hr-cr: var(--_ctm-mob-dn-ie-bn-hr-se-cr,
453
+ var(--_ctm-tab-dn-ie-bn-hr-se-cr, var(--_ctm-dn-ie-bn-hr-se-cr)));
454
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-ie-bn-hr-se-ft-fy,
455
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-fy, var(--_ctm-dn-ie-bn-hr-se-ft-fy)));
456
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-ie-bn-hr-se-tt-tm,
457
+ var(--_ctm-tab-dn-ie-bn-hr-se-tt-tm, var(--_ctm-dn-ie-bn-hr-se-tt-tm)));
458
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-ie-bn-hr-se-wd-wp,
459
+ var(--_ctm-tab-dn-ie-bn-hr-se-wd-wp, var(--_ctm-dn-ie-bn-hr-se-wd-wp)));
460
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-ie-bn-hr-se-wd-bk,
461
+ var(--_ctm-tab-dn-ie-bn-hr-se-wd-bk, var(--_ctm-dn-ie-bn-hr-se-wd-bk)));
462
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-ie-bn-hr-se-ft-se,
463
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-se, var(--_ctm-dn-ie-bn-hr-se-ft-se)));
464
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-ie-bn-hr-se-ft-wt,
465
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-wt, var(--_ctm-dn-ie-bn-hr-se-ft-wt)));
466
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-ie-bn-hr-se-ft-se-ic,
467
+ var(--_ctm-tab-dn-ie-bn-hr-se-ft-se-ic, var(--_ctm-dn-ie-bn-hr-se-ft-se-ic)));
468
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-ie-bn-hr-se-tt-an,
469
+ var(--_ctm-tab-dn-ie-bn-hr-se-tt-an, var(--_ctm-dn-ie-bn-hr-se-tt-an)));
470
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-ie-bn-hr-se-lr-sg,
471
+ var(--_ctm-tab-dn-ie-bn-hr-se-lr-sg, var(--_ctm-dn-ie-bn-hr-se-lr-sg)));
472
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-ie-bn-hr-se-le-ht,
473
+ var(--_ctm-tab-dn-ie-bn-hr-se-le-ht, var(--_ctm-dn-ie-bn-hr-se-le-ht)));
474
+
475
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ie-bn-hr-se-in-se,
476
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se)));
477
+ --_sf-hr-in-se: var(--_ctm-mob-dn-ie-bn-hr-se-in-se,
478
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se)));
479
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-ie-bn-hr-se-in-c1,
480
+ var(--_ctm-tab-dn-ie-bn-hr-se-in-c1, var(--_ctm-dn-ie-bn-hr-se-in-c1)));
481
+ --_sf-hr-ue: var(--_ctm-mob-dn-ie-bn-hr-se-ue,
482
+ var(--_ctm-tab-dn-ie-bn-hr-se-ue, var(--_ctm-dn-ie-bn-hr-se-ue)));
483
+
484
+ // for pading and width
485
+ --_sf-hr-pg: var(--_ctm-mob-dn-ie-bn-hr-pg,
486
+ var(--_ctm-tab-dn-ie-bn-hr-pg, var(--_ctm-dn-ie-bn-hr-pg)));
487
+ --_sf-hr-wh: var(--_ctm-mob-dn-ie-bn-hr-wh,
488
+ var(--_ctm-tab-dn-ie-bn-hr-wh, var(--_ctm-dn-ie-bn-hr-wh)));
489
+
490
+ &[data-hover-show-shadow="false"] {
491
+ --_hover-show-shadow: none;
492
+ }
493
+
494
+ &[data-hover-show-icon="false"] {
495
+ --_hover-show-icon: none;
496
+ }
497
+ }
498
+
499
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-bd-cr));
500
+
501
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-pg));
502
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wh));
503
+ display: flex;
504
+ flex-direction: var(--_sf-fd-bn);
505
+ align-items: center;
506
+
507
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-at));
508
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-gp));
509
+
510
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-rs));
511
+
512
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-cr));
513
+
514
+ &[data-show-border="true"] {
515
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-cr));
516
+
517
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-se));
518
+
519
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-wh));
520
+ }
521
+
522
+ .txt {
523
+ display: flex;
524
+
525
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-cr));
526
+
527
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-fy));
528
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-tm));
529
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-wp));
530
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-bk));
531
+
532
+ &.flex__overflow {
533
+ white-space: normal;
534
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
535
+ }
536
+
537
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se));
538
+
539
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-wt));
540
+
541
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-se-ic));
542
+
543
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-an));
544
+
545
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-lr-sg));
546
+
547
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-le-ht));
548
+
549
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
550
+ }
551
+
552
+ .icon {
553
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
554
+
555
+ svg {
556
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
557
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
558
+
559
+ path {
560
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-c1));
561
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
562
+ stroke-width: prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-se-wh, 1.25);
563
+ }
564
+ }
565
+ }
566
+
567
+ [data-element-style="Text"] {
568
+ display: inline-block;
569
+ width: 100%;
570
+ }
571
+
572
+ .icon--hover {
573
+ // position: absolute;
574
+ // inset: 0;
575
+ // opacity: 0;
576
+ display: none;
577
+ transition: opacity 0.2s ease;
578
+ }
579
+
580
+ &:hover .icon--hover {
581
+ // opacity: 1;
582
+ display: flex;
583
+ }
584
+
585
+ &:hover .icon--default {
586
+ // opacity: 0;
587
+ display: none;
588
+ }
589
+ }
590
+
591
+ .btn__with__text[data-btn-name="decrease-button"] {
592
+ &[data-show-shadow="false"] {
593
+ --_show-shadow: none;
594
+ }
595
+
596
+ &[data-icon-position="left"] {
597
+ --_sf-fd-bn: row;
598
+ }
599
+
600
+ &[data-icon-position="right"] {
601
+ --_sf-fd-bn: row-reverse;
602
+ }
603
+
604
+ &[data-icon-position="center"] {
605
+ --_sf-fd-bn: row;
606
+ }
607
+
608
+ &:disabled {
609
+ opacity: 0.5;
610
+ cursor: not-allowed;
611
+ }
612
+
613
+ &:hover {
614
+ --_sf-hr-bd-cr: var(--_ctm-mob-dn-de-bn-hr-se-bd-cr,
615
+ var(--_ctm-tab-dn-de-bn-hr-se-bd-cr, var(--_ctm-dn-de-bn-hr-se-bd-cr)));
616
+ --_sf-hr-br-cr: var(--_ctm-mob-dn-de-bn-hr-se-br-cr,
617
+ var(--_ctm-tab-dn-de-bn-hr-se-br-cr, var(--_ctm-dn-de-bn-hr-se-br-cr)));
618
+ --_sf-hr-br-se: var(--_ctm-mob-dn-de-bn-hr-se-br-se,
619
+ var(--_ctm-tab-dn-de-bn-hr-se-br-se, var(--_ctm-dn-de-bn-hr-se-br-se)));
620
+ --_sf-hr-br-wh: var(--_ctm-mob-dn-de-bn-hr-se-br-wh,
621
+ var(--_ctm-tab-dn-de-bn-hr-se-br-wh, var(--_ctm-dn-de-bn-hr-se-br-wh)));
622
+ --_sf-hr-br-rs: var(--_ctm-mob-dn-de-bn-hr-se-br-rs,
623
+ var(--_ctm-tab-dn-de-bn-hr-se-br-rs, var(--_ctm-dn-de-bn-hr-se-br-rs)));
624
+ --_sf-hr-at: var(--_ctm-mob-dn-de-bn-hr-se-at,
625
+ var(--_ctm-tab-dn-de-bn-hr-se-at, var(--_ctm-dn-de-bn-hr-se-at)));
626
+ --_sf-hr-gp: var(--_ctm-mob-dn-de-bn-hr-se-gp,
627
+ var(--_ctm-tab-dn-de-bn-hr-se-gp, var(--_ctm-dn-de-bn-hr-se-gp)));
628
+
629
+ // for shadow
630
+ --_sf-hr-sw-ae: var(--_ctm-mob-dn-de-bn-hr-se-sw-ae,
631
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-ae, var(--_ctm-dn-de-bn-hr-se-sw-ae)));
632
+ --_sf-hr-sw-br: var(--_ctm-mob-dn-de-bn-hr-se-sw-br,
633
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-br, var(--_ctm-dn-de-bn-hr-se-sw-br)));
634
+ --_sf-hr-sw-hr: var(--_ctm-mob-dn-de-bn-hr-se-sw-hr,
635
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-hr, var(--_ctm-dn-de-bn-hr-se-sw-hr)));
636
+ --_sf-hr-sw-cr: var(--_ctm-mob-dn-de-bn-hr-se-sw-cr,
637
+ var(--_ctm-tab-dn-de-bn-hr-se-sw-cr, var(--_ctm-dn-de-bn-hr-se-sw-cr)));
638
+
639
+ // for font
640
+
641
+ --_sf-hr-cr: var(--_ctm-mob-dn-de-bn-hr-se-cr,
642
+ var(--_ctm-tab-dn-de-bn-hr-se-cr, var(--_ctm-dn-de-bn-hr-se-cr)));
643
+ --_sf-hr-ft-fy: var(--_ctm-mob-dn-de-bn-hr-se-ft-fy,
644
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-fy, var(--_ctm-dn-de-bn-hr-se-ft-fy)));
645
+ --_sf-hr-tt-tm: var(--_ctm-mob-dn-de-bn-hr-se-tt-tm,
646
+ var(--_ctm-tab-dn-de-bn-hr-se-tt-tm, var(--_ctm-dn-de-bn-hr-se-tt-tm)));
647
+ --_sf-hr-wd-wp: var(--_ctm-mob-dn-de-bn-hr-se-wd-wp,
648
+ var(--_ctm-tab-dn-de-bn-hr-se-wd-wp, var(--_ctm-dn-de-bn-hr-se-wd-wp)));
649
+ --_sf-hr-wd-bk: var(--_ctm-mob-dn-de-bn-hr-se-wd-bk,
650
+ var(--_ctm-tab-dn-de-bn-hr-se-wd-bk, var(--_ctm-dn-de-bn-hr-se-wd-bk)));
651
+ --_sf-hr-ft-se: var(--_ctm-mob-dn-de-bn-hr-se-ft-se,
652
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-se, var(--_ctm-dn-de-bn-hr-se-ft-se)));
653
+ --_sf-hr-ft-wt: var(--_ctm-mob-dn-de-bn-hr-se-ft-wt,
654
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-wt, var(--_ctm-dn-de-bn-hr-se-ft-wt)));
655
+ --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-de-bn-hr-se-ft-se-ic,
656
+ var(--_ctm-tab-dn-de-bn-hr-se-ft-se-ic, var(--_ctm-dn-de-bn-hr-se-ft-se-ic)));
657
+ --_sf-hr-tt-an: var(--_ctm-mob-dn-de-bn-hr-se-tt-an,
658
+ var(--_ctm-tab-dn-de-bn-hr-se-tt-an, var(--_ctm-dn-de-bn-hr-se-tt-an)));
659
+ --_sf-hr-lr-sg: var(--_ctm-mob-dn-de-bn-hr-se-lr-sg,
660
+ var(--_ctm-tab-dn-de-bn-hr-se-lr-sg, var(--_ctm-dn-de-bn-hr-se-lr-sg)));
661
+ --_sf-hr-le-ht: var(--_ctm-mob-dn-de-bn-hr-se-le-ht,
662
+ var(--_ctm-tab-dn-de-bn-hr-se-le-ht, var(--_ctm-dn-de-bn-hr-se-le-ht)));
663
+
664
+ --_sf-hr-in-se: var(--_ctm-mob-dn-de-bn-hr-se-in-se,
665
+ var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se)));
666
+ --_sf-hr-in-se: var(--_ctm-mob-dn-de-bn-hr-se-in-se,
667
+ var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se)));
668
+ --_sf-hr-in-c1: var(--_ctm-mob-dn-de-bn-hr-se-in-c1,
669
+ var(--_ctm-tab-dn-de-bn-hr-se-in-c1, var(--_ctm-dn-de-bn-hr-se-in-c1)));
670
+ --_sf-hr-ue: var(--_ctm-mob-dn-de-bn-hr-se-ue,
671
+ var(--_ctm-tab-dn-de-bn-hr-se-ue, var(--_ctm-dn-de-bn-hr-se-ue)));
672
+
673
+ // for pading and width
674
+ --_sf-hr-pg: var(--_ctm-mob-dn-de-bn-hr-pg,
675
+ var(--_ctm-tab-dn-de-bn-hr-pg, var(--_ctm-dn-de-bn-hr-pg)));
676
+ --_sf-hr-wh: var(--_ctm-mob-dn-de-bn-hr-wh,
677
+ var(--_ctm-tab-dn-de-bn-hr-wh, var(--_ctm-dn-de-bn-hr-wh)));
678
+
679
+ &[data-hover-show-shadow="false"] {
680
+ --_hover-show-shadow: none;
681
+ }
682
+
683
+ &[data-hover-show-icon="false"] {
684
+ --_hover-show-icon: none;
685
+ }
686
+ }
687
+
688
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-bd-cr));
689
+
690
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-pg));
691
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wh));
692
+ display: flex;
693
+ flex-direction: var(--_sf-fd-bn);
694
+ align-items: center;
695
+
696
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-at));
697
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-gp));
698
+
699
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-rs));
700
+
701
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-cr));
702
+
703
+ &[data-show-border="true"] {
704
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-cr));
705
+
706
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-se));
707
+
708
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-wh));
709
+ }
710
+
711
+ .txt {
712
+ display: flex;
713
+
714
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-cr));
715
+
716
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-fy));
717
+ text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-tm));
718
+ word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-wp));
719
+ word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-bk));
720
+
721
+ &.flex__overflow {
722
+ white-space: normal;
723
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
724
+ }
725
+
726
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se));
727
+
728
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-wt));
729
+
730
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-se-ic));
731
+
732
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-an));
733
+
734
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-lr-sg));
735
+
736
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-le-ht));
737
+
738
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
739
+ }
740
+
741
+ .icon {
742
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
743
+
744
+ svg {
745
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
746
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
747
+
748
+ path {
749
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-c1));
750
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
751
+ stroke-width: prepareMediaVariable(--_ctm-dn-de-bn-dt-se-se-wh, 1.25);
752
+ }
753
+ }
754
+ }
755
+
756
+ [data-element-style="Text"] {
757
+ display: inline-block;
758
+ width: 100%;
759
+ }
760
+
761
+ .icon--hover {
762
+ // position: absolute;
763
+ // inset: 0;
764
+ // opacity: 0;
765
+ display: none;
766
+ transition: opacity 0.2s ease;
767
+ }
768
+
769
+ &:hover .icon--hover {
770
+ // opacity: 1;
771
+ display: flex;
772
+ }
773
+
774
+ &:hover .icon--default {
775
+ // opacity: 0;
776
+ display: none;
777
+ }
778
+ }
779
+
780
+ .minimum__order__qty {
781
+ white-space: nowrap;
782
+
783
+ height: 100%;
784
+ width: 100%;
785
+ text-wrap: auto;
786
+
787
+ background-color: var(--_ctm-mob-dn-mm-or-qy-bd-cr,
788
+ var(--_ctm-tab-dn-mm-or-qy-bd-cr, var(--_ctm-dn-mm-or-qy-bd-cr)));
789
+
790
+ border-color: var(--_ctm-mob-dn-mm-or-qy-br-cr,
791
+ var(--_ctm-tab-dn-mm-or-qy-br-cr, var(--_ctm-dn-mm-or-qy-br-cr)));
792
+
793
+ border-style: var(--_ctm-mob-dn-mm-or-qy-br-se,
794
+ var(--_ctm-tab-dn-mm-or-qy-br-se, var(--_ctm-dn-mm-or-qy-br-se)));
795
+
796
+ border-width: var(--_ctm-mob-dn-mm-or-qy-br-wh,
797
+ var(--_ctm-tab-dn-mm-or-qy-br-wh, var(--_ctm-dn-mm-or-qy-br-wh)));
798
+
799
+ border-radius: var(--_ctm-mob-dn-mm-or-qy-br-rs,
800
+ var(--_ctm-tab-dn-mm-or-qy-br-rs, var(--_ctm-dn-mm-or-qy-br-rs)));
801
+
802
+ box-shadow: var(--_show-shadow,
803
+ var(--_ctm-mob-dn-mm-or-qy-sw-ae,
804
+ var(--_ctm-tab-dn-mm-or-qy-sw-ae, var(--_ctm-dn-mm-or-qy-sw-ae))) var(--_ctm-mob-dn-mm-or-qy-sw-br,
805
+ var(--_ctm-tab-dn-mm-or-qy-sw-br, var(--_ctm-dn-mm-or-qy-sw-br))) var(--_ctm-mob-dn-mm-or-qy-sw-sd,
806
+ var(--_ctm-tab-dn-mm-or-qy-sw-sd, var(--_ctm-dn-mm-or-qy-sw-sd))) var(--_ctm-mob-dn-mm-or-qy-sw-cr,
807
+ var(--_ctm-tab-dn-mm-or-qy-sw-cr, var(--_ctm-dn-mm-or-qy-sw-cr))));
808
+
809
+ color: var(--_ctm-mob-dn-mm-or-qy-cr,
810
+ var(--_ctm-tab-dn-mm-or-qy-cr, var(--_ctm-dn-mm-or-qy-cr)));
811
+ font-family: var(--_ctm-mob-dn-mm-or-qy-ft-fy,
812
+ var(--_ctm-tab-dn-mm-or-qy-ft-fy, var(--_ctm-dn-mm-or-qy-ft-fy)));
813
+ text-transform: var(--_ctm-mob-dn-mm-or-qy-tt-tm,
814
+ var(--_ctm-tab-dn-mm-or-qy-tt-tm, var(--_ctm-dn-mm-or-qy-tt-tm)));
815
+ word-wrap: var(--_ctm-mob-dn-mm-or-qy-wd-wp,
816
+ var(--_ctm-tab-dn-mm-or-qy-wd-wp, var(--_ctm-dn-mm-or-qy-wd-wp)));
817
+ word-break: var(--_ctm-mob-dn-mm-or-qy-wd-bk,
818
+ var(--_ctm-tab-dn-mm-or-qy-wd-bk, var(--_ctm-dn-mm-or-qy-wd-bk)));
819
+ font-size: var(--_ctm-mob-dn-mm-or-qy-ft-se,
820
+ var(--_ctm-tab-dn-mm-or-qy-ft-se, var(--_ctm-dn-mm-or-qy-ft-se)));
821
+ font-weight: var(--_ctm-mob-dn-mm-or-qy-ft-wt,
822
+ var(--_ctm-tab-dn-mm-or-qy-ft-wt, var(--_ctm-dn-mm-or-qy-ft-wt)));
823
+ font-style: var(--_ctm-mob-dn-mm-or-qy-ft-se-ic,
824
+ var(--_ctm-tab-dn-mm-or-qy-ft-se-ic, var(--_ctm-dn-mm-or-qy-ft-se-ic)));
825
+ text-align: var(--_ctm-mob-dn-mm-or-qy-tt-an,
826
+ var(--_ctm-tab-dn-mm-or-qy-tt-an, var(--_ctm-dn-mm-or-qy-tt-an)));
827
+ letter-spacing: var(--_ctm-mob-dn-mm-or-qy-lr-sg,
828
+ var(--_ctm-tab-dn-mm-or-qy-lr-sg, var(--_ctm-dn-mm-or-qy-lr-sg)));
829
+ line-height: var(--_ctm-mob-dn-mm-or-qy-le-ht,
830
+ var(--_ctm-tab-dn-mm-or-qy-le-ht, var(--_ctm-dn-mm-or-qy-le-ht-dc)));
831
+ text-decoration: var(--_ctm-mob-dn-mm-or-qy-ue,
832
+ var(--_ctm-tab-dn-mm-or-qy-ue, var(--_ctm-dn-mm-or-qy-ue)));
833
+ padding: prepareMediaVariable(--_ctm-dn-mm-or-qy-pg);
834
+ }
835
+ }
836
+ }
837
+ }