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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (183) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/add-products-tab-details.scss +3818 -0
  5. package/dist/add-products-tab.scss +142 -3052
  6. package/dist/allocationDetails.scss +2247 -2247
  7. package/dist/allocations.scss +1603 -1603
  8. package/dist/amount-estimator.scss +1083 -1083
  9. package/dist/animation-control.scss +23 -23
  10. package/dist/badge.scss +388 -388
  11. package/dist/brand-basic-elements.scss +292 -292
  12. package/dist/brand.scss +93 -93
  13. package/dist/breadcrumbs.scss +802 -802
  14. package/dist/builder.js +1 -1
  15. package/dist/bulk-order-pad.scss +677 -677
  16. package/dist/bulk-variant-picker copy.scss +1121 -1121
  17. package/dist/bulk-variant-picker.scss +3294 -3294
  18. package/dist/bundle copy.scss +2805 -2805
  19. package/dist/bundle.scss +2383 -2383
  20. package/dist/bundleDetails copy.scss +1431 -1431
  21. package/dist/bundleDetails.scss +3320 -3285
  22. package/dist/button copy.scss +271 -271
  23. package/dist/button.scss +292 -292
  24. package/dist/buy-for-tab-container.scss +90 -90
  25. package/dist/buy-for-tab.scss +3 -4
  26. package/dist/buy-for-tabs-container-item.scss +80 -80
  27. package/dist/buyForHeaders.scss +6718 -6718
  28. package/dist/buyForPopup.scss +70 -52
  29. package/dist/cart-details.scss +3207 -3207
  30. package/dist/cart-products-sidebar.scss +211 -211
  31. package/dist/cart-summary.scss +2728 -2728
  32. package/dist/cart-wrapper.scss +127 -127
  33. package/dist/cart.scss +269 -269
  34. package/dist/cartAttributes.scss +935 -935
  35. package/dist/cartDropdownOverlay.scss +513 -237
  36. package/dist/cartGrouping.scss +89 -89
  37. package/dist/category-groups-element.scss +138 -138
  38. package/dist/category.scss +73 -73
  39. package/dist/categoryDetails.scss +61 -61
  40. package/dist/categoryWidget.scss +34 -34
  41. package/dist/checkbox-radio.scss +124 -124
  42. package/dist/checkout.scss +6460 -6569
  43. package/dist/code-temp.scss +58 -58
  44. package/dist/colorpicker_v2.scss +52 -52
  45. package/dist/common-element.scss +35 -35
  46. package/dist/confirm-modal.scss +351 -351
  47. package/dist/confirmationModal.scss +139 -139
  48. package/dist/contact-us.scss +105 -105
  49. package/dist/container.scss +114 -114
  50. package/dist/countdown.scss +751 -751
  51. package/dist/coupon.scss +1254 -1254
  52. package/dist/custom-fonts.scss +100 -100
  53. package/dist/customization-tree.scss +160 -160
  54. package/dist/default-dropdown.scss +240 -240
  55. package/dist/dropdownTemplate.scss +57 -43
  56. package/dist/editCartItem.scss +111 -111
  57. package/dist/embed-temp.scss +72 -72
  58. package/dist/embroider-preview-element.scss +94 -94
  59. package/dist/embroider-template-1-v2.scss +937 -937
  60. package/dist/embroider-template-1.scss +482 -482
  61. package/dist/embroidery.scss +213 -213
  62. package/dist/employee-bulk-order.scss +4057 -4057
  63. package/dist/emtpy-templates.scss +165 -165
  64. package/dist/faq.scss +564 -564
  65. package/dist/fb-dropdown.scss +125 -125
  66. package/dist/filter-results.scss +323 -323
  67. package/dist/filters.scss +2418 -2418
  68. package/dist/flex-text-editor.scss +271 -271
  69. package/dist/form-preview.scss +290 -290
  70. package/dist/form-zindex-module.scss +24 -24
  71. package/dist/gallery-slider-temp.scss +1234 -1234
  72. package/dist/global-styles.scss +86 -86
  73. package/dist/grid.scss +119 -119
  74. package/dist/hotspot.scss +397 -397
  75. package/dist/icon-library.scss +74 -74
  76. package/dist/icon-list.scss +268 -268
  77. package/dist/image-for-product.scss +21 -21
  78. package/dist/image-temp.scss +168 -168
  79. package/dist/item-stock.scss +87 -87
  80. package/dist/language-selector.scss +528 -528
  81. package/dist/layouter-item.scss +89 -89
  82. package/dist/layouter-pro-item.scss +80 -80
  83. package/dist/layouter-pro.scss +88 -88
  84. package/dist/layouter.scss +294 -294
  85. package/dist/light-box-v2.scss +105 -105
  86. package/dist/lightbox.scss +78 -78
  87. package/dist/line.scss +166 -166
  88. package/dist/loader.scss +37 -37
  89. package/dist/login.scss +1473 -1473
  90. package/dist/map.scss +962 -962
  91. package/dist/marchandiserSets.scss +60 -60
  92. package/dist/mega-menu-container.scss +99 -99
  93. package/dist/mega-menu.scss +838 -838
  94. package/dist/menu-item.scss +19 -19
  95. package/dist/menu-v2.scss +730 -730
  96. package/dist/menu.scss +162 -162
  97. package/dist/modal.scss +2267 -2267
  98. package/dist/multi-select-dropdown.scss +282 -279
  99. package/dist/my-templates.scss +463 -463
  100. package/dist/my-wishlist.scss +17 -17
  101. package/dist/option-bar.scss +845 -845
  102. package/dist/order-processing.scss +61 -61
  103. package/dist/order-status.scss +1856 -1856
  104. package/dist/overflow-module.scss +63 -63
  105. package/dist/past-orders.scss +975 -975
  106. package/dist/payment-methods.scss +289 -289
  107. package/dist/pickup-locations.scss +1167 -1167
  108. package/dist/position-module.scss +95 -95
  109. package/dist/prefix-list.scss +86 -86
  110. package/dist/product-actions copy.scss +2765 -2765
  111. package/dist/product-actions.scss +2286 -2286
  112. package/dist/product-basic-elements.scss +770 -770
  113. package/dist/product-customizations.scss +149 -149
  114. package/dist/product-highlights copy.scss +217 -217
  115. package/dist/product-highlights.scss +311 -311
  116. package/dist/product-image copy.scss +787 -787
  117. package/dist/product-image-bundles.scss +1512 -0
  118. package/dist/product-image.scss +1 -1
  119. package/dist/product-inventory.scss +1378 -1378
  120. package/dist/product-options.scss +1144 -1144
  121. package/dist/product-price.scss +2598 -2598
  122. package/dist/product-promotions.scss +2759 -2759
  123. package/dist/product-sizechart.scss +1826 -1826
  124. package/dist/product.scss +97 -97
  125. package/dist/productDetails.scss +70 -70
  126. package/dist/profile.scss +3 -2
  127. package/dist/quantity-selector.scss +3 -2
  128. package/dist/quick-links.scss +552 -552
  129. package/dist/quick-order-pad.scss +237 -237
  130. package/dist/quota-details.scss +263 -263
  131. package/dist/quotes.scss +737 -737
  132. package/dist/repeater copy.scss +635 -635
  133. package/dist/repeater-embla-controls.scss +6 -3
  134. package/dist/repeater-grid-toggle.scss +58 -58
  135. package/dist/repeater-item.scss +90 -90
  136. package/dist/repeater.scss +915 -915
  137. package/dist/request-for-quotes.scss +746 -746
  138. package/dist/responsive-behaviour.scss +29 -29
  139. package/dist/rfqs.scss +736 -736
  140. package/dist/scroll.scss +222 -222
  141. package/dist/search-results-heading.scss +279 -279
  142. package/dist/search.scss +296 -296
  143. package/dist/section.scss +209 -209
  144. package/dist/shareCartSideBar.scss +254 -254
  145. package/dist/shipping-estimator.scss +41 -41
  146. package/dist/shipping-payments.scss +2467 -2467
  147. package/dist/simple-list.scss +259 -259
  148. package/dist/skeleton.scss +74 -74
  149. package/dist/social.scss +276 -276
  150. package/dist/sort.scss +89 -89
  151. package/dist/spotlight.scss +1663 -1663
  152. package/dist/stack.scss +129 -129
  153. package/dist/static-global.scss +167 -0
  154. package/dist/static-text.scss +52 -52
  155. package/dist/stockStatus.scss +64 -64
  156. package/dist/store-locations.scss +1398 -1398
  157. package/dist/sub-category.scss +74 -74
  158. package/dist/submit-quote.scss +275 -275
  159. package/dist/tab-container-item.scss +80 -80
  160. package/dist/tab-container.scss +89 -89
  161. package/dist/tab-v2.scss +583 -583
  162. package/dist/table-common.scss +506 -506
  163. package/dist/table.scss +685 -685
  164. package/dist/tabs.scss +395 -395
  165. package/dist/text-temp-v2.scss +139 -139
  166. package/dist/text-temp.scss +109 -109
  167. package/dist/theme-classes.scss +296 -296
  168. package/dist/toaster.scss +350 -350
  169. package/dist/toggle-button.scss +32 -32
  170. package/dist/transform-properties-module.scss +20 -20
  171. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +1790 -441
  172. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +9 -0
  173. package/dist/uom-selector.scss +1169 -1169
  174. package/dist/user-elements copy.scss +1437 -1437
  175. package/dist/user-elements.scss +2471 -2471
  176. package/dist/variant-picker.scss +2384 -2384
  177. package/dist/video.scss +476 -476
  178. package/dist/volume-pricing copy 2.scss +1468 -1468
  179. package/dist/volume-pricing copy.scss +1077 -1077
  180. package/dist/volume-pricing.scss +1175 -1175
  181. package/dist/widget.scss +148 -148
  182. package/dist/wishlist-overlay.scss +48 -48
  183. package/package.json +1 -1
package/dist/product-actions.scss CHANGED
@@ -1,2286 +1,2286 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
-
5
- [data-div-type="element"] {
6
- &[data-element-type="productActions"] {
7
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
8
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
9
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
10
-
11
- // & > .wrapper {
12
- // // width: 100%;
13
- // // height: 100%;
14
- // }
15
- .text-element {
16
- background: #6d96e4;
17
- padding: 10px;
18
- font-weight: 600;
19
- color: rgba(75, 69, 70, 1);
20
- }
21
- .action__buttons__wrapper {
22
- background-color: var(
23
- --_ctm-mob-dn-wt-se-bd-cr,
24
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
25
- );
26
-
27
- border-color: var(
28
- --_ctm-mob-dn-wt-se-br-cr,
29
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
30
- );
31
-
32
- border-style: var(
33
- --_ctm-mob-dn-wt-se-br-se,
34
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
35
- );
36
-
37
- border-width: var(
38
- --_ctm-mob-dn-wt-se-br-wh,
39
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
40
- );
41
-
42
- border-radius: var(
43
- --_ctm-mob-dn-wt-se-br-rs,
44
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
45
- );
46
-
47
- box-shadow: var(
48
- --_show-shadow,
49
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
50
- var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
51
- var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
52
- var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
53
- );
54
-
55
- //
56
-
57
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
58
-
59
- display: flex;
60
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
61
- flex-direction: column;
62
- align-items: var(--_ctm-mob-lt-is-at, var(--_ctm-tab-lt-is-at, var(--_ctm-lt-is-at)));
63
- min-height: 30px;
64
-
65
- // &[data-actions-overflow-item-wrap="true"] {
66
- // flex-wrap: wrap;
67
- // }
68
- // &[data-actions-display-style="true"] {
69
- // flex-direction: column;
70
- // }
71
- .cart-dropdown-container {
72
- &:hover {
73
- --_sf-hr-wh: var(
74
- --_ctm-mob-dn-wt-hr-wh,
75
- var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
76
- );
77
- }
78
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
79
- }
80
- &[data-display-style="Stack Horizontally"] {
81
- flex-direction: row;
82
- row-gap: var(--_ctm-mob-lt-im-vl-sg, var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg)));
83
- flex-wrap: wrap;
84
- }
85
- // .btn__with__text {
86
- // white-space: nowrap;
87
- // }
88
-
89
- .btn__with__text[data-btn-name="addToCart"] {
90
- justify-content: center;
91
- &[data-show-shadow="false"] {
92
- --_show-shadow: none;
93
- }
94
- &[data-icon-position="left"] {
95
- --_sf-fd-bn: row;
96
- }
97
- &[data-icon-position="right"] {
98
- --_sf-fd-bn: row-reverse;
99
- }
100
- &[data-icon-position="center"] {
101
- --_sf-fd-bn: row;
102
- }
103
-
104
- &:hover {
105
- --_sf-hr-bd-cr: var(
106
- --_ctm-mob-dn-ad-to-ct-hr-se-bd-cr,
107
- var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr))
108
- );
109
- --_sf-hr-br-cr: var(
110
- --_ctm-mob-dn-ad-to-ct-hr-se-br-cr,
111
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr))
112
- );
113
- --_sf-hr-br-se: var(
114
- --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
115
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
116
- );
117
- --_sf-hr-br-wh: var(
118
- --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
119
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
120
- );
121
- --_sf-hr-br-rs: var(
122
- --_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
123
- var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs))
124
- );
125
- --_sf-hr-at: var(
126
- --_ctm-mob-dn-ad-to-ct-hr-se-at,
127
- var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at))
128
- );
129
- --_sf-hr-gp: var(
130
- --_ctm-mob-dn-ad-to-ct-hr-se-gp,
131
- var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp))
132
- );
133
-
134
- // for shadow
135
- --_sf-hr-sw-ae: var(
136
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-ae,
137
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-ae, var(--_ctm-dn-ad-to-ct-hr-se-sw-ae))
138
- );
139
- --_sf-hr-sw-br: var(
140
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-br,
141
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-br, var(--_ctm-dn-ad-to-ct-hr-se-sw-br))
142
- );
143
- --_sf-hr-sw-hr: var(
144
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-hr,
145
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-hr, var(--_ctm-dn-ad-to-ct-hr-se-sw-hr))
146
- );
147
- --_sf-hr-sw-cr: var(
148
- --_ctm-mob-dn-ad-to-ct-hr-se-sw-cr,
149
- var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-cr, var(--_ctm-dn-ad-to-ct-hr-se-sw-cr))
150
- );
151
-
152
- // for font
153
-
154
- --_sf-hr-cr: var(
155
- --_ctm-mob-dn-ad-to-ct-hr-se-cr,
156
- var(--_ctm-tab-dn-ad-to-ct-hr-se-cr, var(--_ctm-dn-ad-to-ct-hr-se-cr))
157
- );
158
- --_sf-hr-ft-fy: var(
159
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-fy,
160
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-fy, var(--_ctm-dn-ad-to-ct-hr-se-ft-fy))
161
- );
162
- --_sf-hr-ft-se: var(
163
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-se,
164
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se, var(--_ctm-dn-ad-to-ct-hr-se-ft-se))
165
- );
166
- --_sf-hr-ft-wt: var(
167
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-wt,
168
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-wt, var(--_ctm-dn-ad-to-ct-hr-se-ft-wt))
169
- );
170
- --_sf-hr-ft-se-ic: var(
171
- --_ctm-mob-dn-ad-to-ct-hr-se-ft-se-ic,
172
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic))
173
- );
174
- --_sf-hr-tt-an: var(
175
- --_ctm-mob-dn-ad-to-ct-hr-se-tt-an,
176
- var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-an, var(--_ctm-dn-ad-to-ct-hr-se-tt-an))
177
- );
178
- --_sf-hr-lr-sg: var(
179
- --_ctm-mob-dn-ad-to-ct-hr-se-lr-sg,
180
- var(--_ctm-tab-dn-ad-to-ct-hr-se-lr-sg, var(--_ctm-dn-ad-to-ct-hr-se-lr-sg))
181
- );
182
- --_sf-hr-le-ht: var(
183
- --_ctm-mob-dn-ad-to-ct-hr-se-le-ht,
184
- var(--_ctm-tab-dn-ad-to-ct-hr-se-le-ht, var(--_ctm-dn-ad-to-ct-hr-se-le-ht))
185
- );
186
-
187
- --_sf-hr-in-se: var(
188
- --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
189
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
190
- );
191
- --_sf-hr-in-se: var(
192
- --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
193
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
194
- );
195
- --_sf-hr-in-c1: var(
196
- --_ctm-mob-dn-ad-to-ct-hr-se-in-c1,
197
- var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
198
- );
199
- --_sf-hr-ue: var(
200
- --_ctm-mob-dn-ad-to-ct-hr-se-ue,
201
- var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
202
- );
203
-
204
- // for pading and width
205
- --_sf-hr-pg: var(
206
- --_ctm-mob-dn-ad-to-ct-hr-pg,
207
- var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg))
208
- );
209
- --_sf-hr-wh: var(
210
- --_ctm-mob-dn-ad-to-ct-hr-wh,
211
- var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
212
- );
213
-
214
- &[data-hover-show-shadow="false"] {
215
- --_hover-show-shadow: none;
216
- }
217
- &[data-hover-show-icon="false"] {
218
- --_hover-show-icon: none;
219
- }
220
- }
221
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr));
222
-
223
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-pg));
224
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wh));
225
- display: flex;
226
- flex-direction: var(--_sf-fd-bn);
227
- align-items: center;
228
-
229
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-at));
230
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-gp));
231
-
232
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-rs));
233
-
234
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-ae))
235
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-br))
236
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-sd))
237
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-cr));
238
-
239
- &[data-show-border="true"] {
240
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-cr));
241
-
242
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-se));
243
-
244
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-wh));
245
- }
246
-
247
- .txt {
248
- display: flex;
249
-
250
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr));
251
-
252
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-fy));
253
-
254
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se));
255
-
256
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-wt));
257
-
258
- font-style: var(
259
- --_sf-hr-ft-se-ic,
260
- prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic)
261
- );
262
-
263
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-an));
264
-
265
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg));
266
-
267
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-le-ht));
268
-
269
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
270
- }
271
-
272
- .icon {
273
- display: var(--_hover-show-icon, var(--_show-icon, flex));
274
- svg {
275
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
276
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
277
-
278
- path {
279
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
280
- }
281
- }
282
- }
283
- [data-element-style="Text"] {
284
- display: inline-block;
285
- width: 100%;
286
- }
287
-
288
- .icon--hover {
289
- // position: absolute;
290
- // inset: 0;
291
- // opacity: 0;
292
- display: none;
293
- transition: opacity 0.2s ease;
294
- }
295
-
296
- &:hover .icon--hover {
297
- // opacity: 1;
298
- display: flex;
299
- }
300
-
301
- &:hover .icon--default {
302
- // opacity: 0;
303
- display: none;
304
- }
305
- }
306
-
307
- .btn__with__text[data-btn-name="buyNow"] {
308
- &[data-show-shadow="false"] {
309
- --_show-shadow: none;
310
- }
311
- &[data-icon-position="left"] {
312
- --_sf-fd-bn: row;
313
- }
314
- &[data-icon-position="right"] {
315
- --_sf-fd-bn: row-reverse;
316
- }
317
- &[data-icon-position="center"] {
318
- --_sf-fd-bn: row;
319
- }
320
-
321
- &:hover {
322
- --_sf-hr-bd-cr: var(
323
- --_ctm-mob-dn-by-nw-hr-se-bd-cr,
324
- var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr))
325
- );
326
- --_sf-hr-br-cr: var(
327
- --_ctm-mob-dn-by-nw-hr-se-br-cr,
328
- var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr))
329
- );
330
- --_sf-hr-br-se: var(
331
- --_ctm-mob-dn-by-nw-hr-se-br-se,
332
- var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
333
- );
334
- --_sf-hr-br-wh: var(
335
- --_ctm-mob-dn-by-nw-hr-se-br-wh,
336
- var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
337
- );
338
- --_sf-hr-br-rs: var(
339
- --_ctm-mob-dn-by-nw-hr-se-br-rs,
340
- var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs))
341
- );
342
-
343
- --_sf-hr-at: var(
344
- --_ctm-mob-dn-by-nw-hr-se-at,
345
- var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at))
346
- );
347
- --_sf-hr-gp: var(
348
- --_ctm-mob-dn-by-nw-hr-se-gp,
349
- var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp))
350
- );
351
-
352
- // for shadow
353
- --_sf-hr-sw-ae: var(
354
- --_ctm-mob-dn-by-nw-hr-se-sw-ae,
355
- var(--_ctm-tab-dn-by-nw-hr-se-sw-ae, var(--_ctm-dn-by-nw-hr-se-sw-ae))
356
- );
357
- --_sf-hr-sw-br: var(
358
- --_ctm-mob-dn-by-nw-hr-se-sw-br,
359
- var(--_ctm-tab-dn-by-nw-hr-se-sw-br, var(--_ctm-dn-by-nw-hr-se-sw-br))
360
- );
361
- --_sf-hr-sw-hr: var(
362
- --_ctm-mob-dn-by-nw-hr-se-sw-hr,
363
- var(--_ctm-tab-dn-by-nw-hr-se-sw-hr, var(--_ctm-dn-by-nw-hr-se-sw-hr))
364
- );
365
- --_sf-hr-sw-cr: var(
366
- --_ctm-mob-dn-by-nw-hr-se-sw-cr,
367
- var(--_ctm-tab-dn-by-nw-hr-se-sw-cr, var(--_ctm-dn-by-nw-hr-se-sw-cr))
368
- );
369
-
370
- // for font
371
-
372
- --_sf-hr-cr: var(
373
- --_ctm-mob-dn-by-nw-hr-se-cr,
374
- var(--_ctm-tab-dn-by-nw-hr-se-cr, var(--_ctm-dn-by-nw-hr-se-cr))
375
- );
376
- --_sf-hr-ft-fy: var(
377
- --_ctm-mob-dn-by-nw-hr-se-ft-fy,
378
- var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
379
- );
380
- --_sf-hr-ft-se: var(
381
- --_ctm-mob-dn-by-nw-hr-se-ft-se,
382
- var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))
383
- );
384
- --_sf-hr-ft-wt: var(
385
- --_ctm-mob-dn-by-nw-hr-se-ft-wt,
386
- var(--_ctm-tab-dn-by-nw-hr-se-ft-wt, var(--_ctm-dn-by-nw-hr-se-ft-wt))
387
- );
388
- --_sf-hr-ft-se-ic: var(
389
- --_ctm-mob-dn-by-nw-hr-se-ft-se-ic,
390
- var(--_ctm-tab-dn-by-nw-hr-se-ft-se-ic, var(--_ctm-dn-by-nw-hr-se-ft-se-ic))
391
- );
392
- --_sf-hr-tt-an: var(
393
- --_ctm-mob-dn-by-nw-hr-se-tt-an,
394
- var(--_ctm-tab-dn-by-nw-hr-se-tt-an, var(--_ctm-dn-by-nw-hr-se-tt-an))
395
- );
396
- --_sf-hr-lr-sg: var(
397
- --_ctm-mob-dn-by-nw-hr-se-lr-sg,
398
- var(--_ctm-tab-dn-by-nw-hr-se-lr-sg, var(--_ctm-dn-by-nw-hr-se-lr-sg))
399
- );
400
- --_sf-hr-le-ht: var(
401
- --_ctm-mob-dn-by-nw-hr-se-le-ht,
402
- var(--_ctm-tab-dn-by-nw-hr-se-le-ht, var(--_ctm-dn-by-nw-hr-se-le-ht))
403
- );
404
-
405
- --_sf-hr-in-se: var(
406
- --_ctm-mob-dn-by-nw-hr-se-in-se,
407
- var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
408
- );
409
- --_sf-hr-in-se: var(
410
- --_ctm-mob-dn-by-nw-hr-se-in-se,
411
- var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
412
- );
413
- --_sf-hr-in-c1: var(
414
- --_ctm-mob-dn-by-nw-hr-se-in-c1,
415
- var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
416
- );
417
- --_sf-hr-ue: var(
418
- --_ctm-mob-dn-by-nw-hr-se-ue,
419
- var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
420
- );
421
-
422
- // for pading and width
423
- --_sf-hr-pg: var(
424
- --_ctm-mob-dn-by-nw-hr-pg,
425
- var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg))
426
- );
427
- --_sf-hr-wh: var(
428
- --_ctm-mob-dn-by-nw-hr-wh,
429
- var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-hr-wh))
430
- );
431
-
432
- &[data-hover-show-shadow="false"] {
433
- --_hover-show-shadow: none;
434
- }
435
- &[data-hover-show-icon="false"] {
436
- --_hover-show-icon: none;
437
- }
438
- }
439
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-bd-cr));
440
-
441
- display: flex;
442
- flex-direction: var(--_sf-fd-bn);
443
- align-items: center;
444
-
445
- justify-content: prepareMediaVariable(--_ctm-lt-tt-an);
446
- gap: prepareMediaVariable(--_ctm-lt-gp);
447
-
448
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-at));
449
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-gp));
450
-
451
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-pg));
452
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wh));
453
-
454
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-rs));
455
-
456
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-ae))
457
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-br))
458
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-sd))
459
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-cr));
460
-
461
- &[data-show-border="true"] {
462
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-cr));
463
-
464
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-se));
465
-
466
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-wh));
467
- }
468
-
469
- .txt {
470
- display: flex;
471
-
472
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr));
473
-
474
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-fy));
475
-
476
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se));
477
-
478
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-wt));
479
-
480
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic));
481
-
482
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-an));
483
-
484
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-lr-sg));
485
-
486
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-le-ht));
487
-
488
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
489
- }
490
-
491
- .icon {
492
- display: var(--_hover-show-icon, var(--_show-icon, flex));
493
- svg {
494
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
495
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
496
-
497
- path {
498
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
499
- }
500
- }
501
- }
502
- [data-element-style="Text"] {
503
- display: inline-block;
504
- width: 100%;
505
- }
506
-
507
- .icon--hover {
508
- // position: absolute;
509
- // inset: 0;
510
- // opacity: 0;
511
- display: none;
512
- transition: opacity 0.2s ease;
513
- }
514
-
515
- &:hover .icon--hover {
516
- // opacity: 1;
517
- display: flex;
518
- }
519
-
520
- &:hover .icon--default {
521
- // opacity: 0;
522
- display: none;
523
- }
524
- }
525
-
526
- .btn__with__text[data-btn-name="wishlist"] {
527
- &[data-show-shadow="false"] {
528
- --_show-shadow: none;
529
- }
530
- &[data-icon-position="left"] {
531
- --_sf-fd-bn: row;
532
- }
533
- &[data-icon-position="right"] {
534
- --_sf-fd-bn: row-reverse;
535
- }
536
- &[data-icon-position="center"] {
537
- --_sf-fd-bn: row;
538
- }
539
-
540
- &:hover {
541
- --_sf-hr-bd-cr: var(
542
- --_ctm-mob-dn-wt-hr-se-bd-cr,
543
- var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr))
544
- );
545
- --_sf-hr-br-cr: var(
546
- --_ctm-mob-dn-wt-hr-se-br-cr,
547
- var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr))
548
- );
549
- --_sf-hr-br-se: var(
550
- --_ctm-mob-dn-wt-hr-se-br-se,
551
- var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
552
- );
553
- --_sf-hr-br-wh: var(
554
- --_ctm-mob-dn-wt-hr-se-br-wh,
555
- var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
556
- );
557
- --_sf-hr-br-rs: var(
558
- --_ctm-mob-dn-wt-hr-se-br-rs,
559
- var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs))
560
- );
561
-
562
- --_sf-hr-at: var(
563
- --_ctm-mob-dn-wt-hr-se-at,
564
- var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at))
565
- );
566
- --_sf-hr-gp: var(
567
- --_ctm-mob-dn-wt-hr-se-gp,
568
- var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp))
569
- );
570
-
571
- // for shadow
572
- --_sf-hr-sw-ae: var(
573
- --_ctm-mob-dn-wt-hr-se-sw-ae,
574
- var(--_ctm-tab-dn-wt-hr-se-sw-ae, var(--_ctm-dn-wt-hr-se-sw-ae))
575
- );
576
- --_sf-hr-sw-br: var(
577
- --_ctm-mob-dn-wt-hr-se-sw-br,
578
- var(--_ctm-tab-dn-wt-hr-se-sw-br, var(--_ctm-dn-wt-hr-se-sw-br))
579
- );
580
- --_sf-hr-sw-hr: var(
581
- --_ctm-mob-dn-wt-hr-se-sw-hr,
582
- var(--_ctm-tab-dn-wt-hr-se-sw-hr, var(--_ctm-dn-wt-hr-se-sw-hr))
583
- );
584
- --_sf-hr-sw-cr: var(
585
- --_ctm-mob-dn-wt-hr-se-sw-cr,
586
- var(--_ctm-tab-dn-wt-hr-se-sw-cr, var(--_ctm-dn-wt-hr-se-sw-cr))
587
- );
588
-
589
- // for font
590
-
591
- --_sf-hr-cr: var(
592
- --_ctm-mob-dn-wt-hr-se-cr,
593
- var(--_ctm-tab-dn-wt-hr-se-cr, var(--_ctm-dn-wt-hr-se-cr))
594
- );
595
- --_sf-hr-ft-fy: var(
596
- --_ctm-mob-dn-wt-hr-se-ft-fy,
597
- var(--_ctm-tab-dn-wt-hr-se-ft-fy, var(--_ctm-dn-wt-hr-se-ft-fy))
598
- );
599
- --_sf-hr-ft-se: var(
600
- --_ctm-mob-dn-wt-hr-se-ft-se,
601
- var(--_ctm-tab-dn-wt-hr-se-ft-se, var(--_ctm-dn-wt-hr-se-ft-se))
602
- );
603
- --_sf-hr-ft-wt: var(
604
- --_ctm-mob-dn-wt-hr-se-ft-wt,
605
- var(--_ctm-tab-dn-wt-hr-se-ft-wt, var(--_ctm-dn-wt-hr-se-ft-wt))
606
- );
607
- --_sf-hr-ft-se-ic: var(
608
- --_ctm-mob-dn-wt-hr-se-ft-se-ic,
609
- var(--_ctm-tab-dn-wt-hr-se-ft-se-ic, var(--_ctm-dn-wt-hr-se-ft-se-ic))
610
- );
611
- --_sf-hr-tt-an: var(
612
- --_ctm-mob-dn-wt-hr-se-tt-an,
613
- var(--_ctm-tab-dn-wt-hr-se-tt-an, var(--_ctm-dn-wt-hr-se-tt-an))
614
- );
615
- --_sf-hr-lr-sg: var(
616
- --_ctm-mob-dn-wt-hr-se-lr-sg,
617
- var(--_ctm-tab-dn-wt-hr-se-lr-sg, var(--_ctm-dn-wt-hr-se-lr-sg))
618
- );
619
- --_sf-hr-le-ht: var(
620
- --_ctm-mob-dn-wt-hr-se-le-ht,
621
- var(--_ctm-tab-dn-wt-hr-se-le-ht, var(--_ctm-dn-wt-hr-se-le-ht))
622
- );
623
-
624
- --_sf-hr-in-se: var(
625
- --_ctm-mob-dn-wt-hr-se-in-se,
626
- var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
627
- );
628
- --_sf-hr-in-se: var(
629
- --_ctm-mob-dn-wt-hr-se-in-se,
630
- var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
631
- );
632
- --_sf-hr-in-c1: var(
633
- --_ctm-mob-dn-wt-hr-se-in-c1,
634
- var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
635
- );
636
- --_sf-hr-ue: var(
637
- --_ctm-mob-dn-wt-hr-se-ue,
638
- var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
639
- );
640
-
641
- // for pading and width
642
- --_sf-hr-pg: var(
643
- --_ctm-mob-dn-wt-hr-pg,
644
- var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg))
645
- );
646
- --_sf-hr-wh: var(
647
- --_ctm-mob-dn-wt-hr-wh,
648
- var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
649
- );
650
-
651
- &[data-hover-show-shadow="false"] {
652
- --_hover-show-shadow: none;
653
- }
654
- &[data-hover-show-icon="false"] {
655
- --_hover-show-icon: none;
656
- }
657
- }
658
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-bd-cr));
659
-
660
- display: flex;
661
- flex-direction: var(--_sf-fd-bn);
662
- align-items: center;
663
-
664
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-wt-dt-se-at));
665
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-wt-dt-se-gp));
666
-
667
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-wt-dt-se-pg));
668
- // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
669
- width: 100%;
670
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));
671
-
672
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-ae))
673
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-br))
674
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-sd))
675
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-cr));
676
-
677
- &[data-show-border="true"] {
678
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-cr));
679
-
680
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-se));
681
-
682
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-wh));
683
- }
684
-
685
- .txt {
686
- display: flex;
687
-
688
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr));
689
-
690
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-fy));
691
-
692
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se));
693
-
694
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-wt));
695
-
696
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se-ic));
697
-
698
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-wt-dt-se-tt-an));
699
-
700
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-wt-dt-se-lr-sg));
701
-
702
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-wt-dt-se-le-ht));
703
-
704
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
705
- }
706
-
707
- .icon {
708
- display: var(--_hover-show-icon, var(--_show-icon, flex));
709
- svg {
710
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
711
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
712
-
713
- path {
714
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
715
- }
716
- }
717
- }
718
- [data-element-style="Text"] {
719
- display: inline-block;
720
- width: 100%;
721
- }
722
-
723
- .icon--hover {
724
- // position: absolute;
725
- // inset: 0;
726
- // opacity: 0;
727
- display: none;
728
- transition: opacity 0.2s ease;
729
- }
730
-
731
- &:hover .icon--hover {
732
- // opacity: 1;
733
- display: flex;
734
- }
735
-
736
- &:hover .icon--default {
737
- // opacity: 0;
738
- display: none;
739
- }
740
- }
741
- .btn__with__text[data-btn-name="compare"] {
742
- &[data-show-shadow="false"] {
743
- --_show-shadow: none;
744
- }
745
- &[data-icon-position="left"] {
746
- --_sf-fd-bn: row;
747
- }
748
- &[data-icon-position="right"] {
749
- --_sf-fd-bn: row-reverse;
750
- }
751
- &[data-icon-position="center"] {
752
- --_sf-fd-bn: row;
753
- }
754
-
755
- &:hover {
756
- --_sf-hr-bd-cr: var(
757
- --_ctm-mob-dn-ce-hr-se-bd-cr,
758
- var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr))
759
- );
760
- --_sf-hr-br-cr: var(
761
- --_ctm-mob-dn-ce-hr-se-br-cr,
762
- var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr))
763
- );
764
- --_sf-hr-br-se: var(
765
- --_ctm-mob-dn-ce-hr-se-br-se,
766
- var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
767
- );
768
- --_sf-hr-br-wh: var(
769
- --_ctm-mob-dn-ce-hr-se-br-wh,
770
- var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
771
- );
772
- --_sf-hr-br-rs: var(
773
- --_ctm-mob-dn-ce-hr-se-br-rs,
774
- var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs))
775
- );
776
-
777
- --_sf-hr-at: var(
778
- --_ctm-mob-dn-ce-hr-se-at,
779
- var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at))
780
- );
781
- --_sf-hr-gp: var(
782
- --_ctm-mob-dn-ce-hr-se-gp,
783
- var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp))
784
- );
785
-
786
- // for shadow
787
- --_sf-hr-sw-ae: var(
788
- --_ctm-mob-dn-ce-hr-se-sw-ae,
789
- var(--_ctm-tab-dn-ce-hr-se-sw-ae, var(--_ctm-dn-ce-hr-se-sw-ae))
790
- );
791
- --_sf-hr-sw-br: var(
792
- --_ctm-mob-dn-ce-hr-se-sw-br,
793
- var(--_ctm-tab-dn-ce-hr-se-sw-br, var(--_ctm-dn-ce-hr-se-sw-br))
794
- );
795
- --_sf-hr-sw-hr: var(
796
- --_ctm-mob-dn-ce-hr-se-sw-hr,
797
- var(--_ctm-tab-dn-ce-hr-se-sw-hr, var(--_ctm-dn-ce-hr-se-sw-hr))
798
- );
799
- --_sf-hr-sw-cr: var(
800
- --_ctm-mob-dn-ce-hr-se-sw-cr,
801
- var(--_ctm-tab-dn-ce-hr-se-sw-cr, var(--_ctm-dn-ce-hr-se-sw-cr))
802
- );
803
-
804
- // for font
805
-
806
- --_sf-hr-cr: var(
807
- --_ctm-mob-dn-ce-hr-se-cr,
808
- var(--_ctm-tab-dn-ce-hr-se-cr, var(--_ctm-dn-ce-hr-se-cr))
809
- );
810
- --_sf-hr-ft-fy: var(
811
- --_ctm-mob-dn-ce-hr-se-ft-fy,
812
- var(--_ctm-tab-dn-ce-hr-se-ft-fy, var(--_ctm-dn-ce-hr-se-ft-fy))
813
- );
814
- --_sf-hr-ft-se: var(
815
- --_ctm-mob-dn-ce-hr-se-ft-se,
816
- var(--_ctm-tab-dn-ce-hr-se-ft-se, var(--_ctm-dn-ce-hr-se-ft-se))
817
- );
818
- --_sf-hr-ft-wt: var(
819
- --_ctm-mob-dn-ce-hr-se-ft-wt,
820
- var(--_ctm-tab-dn-ce-hr-se-ft-wt, var(--_ctm-dn-ce-hr-se-ft-wt))
821
- );
822
- --_sf-hr-ft-se-ic: var(
823
- --_ctm-mob-dn-ce-hr-se-ft-se-ic,
824
- var(--_ctm-tab-dn-ce-hr-se-ft-se-ic, var(--_ctm-dn-ce-hr-se-ft-se-ic))
825
- );
826
- --_sf-hr-tt-an: var(
827
- --_ctm-mob-dn-ce-hr-se-tt-an,
828
- var(--_ctm-tab-dn-ce-hr-se-tt-an, var(--_ctm-dn-ce-hr-se-tt-an))
829
- );
830
- --_sf-hr-lr-sg: var(
831
- --_ctm-mob-dn-ce-hr-se-lr-sg,
832
- var(--_ctm-tab-dn-ce-hr-se-lr-sg, var(--_ctm-dn-ce-hr-se-lr-sg))
833
- );
834
- --_sf-hr-le-ht: var(
835
- --_ctm-mob-dn-ce-hr-se-le-ht,
836
- var(--_ctm-tab-dn-ce-hr-se-le-ht, var(--_ctm-dn-ce-hr-se-le-ht))
837
- );
838
-
839
- --_sf-hr-in-se: var(
840
- --_ctm-mob-dn-ce-hr-se-in-se,
841
- var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
842
- );
843
- --_sf-hr-in-se: var(
844
- --_ctm-mob-dn-ce-hr-se-in-se,
845
- var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
846
- );
847
- --_sf-hr-in-c1: var(
848
- --_ctm-mob-dn-ce-hr-se-in-c1,
849
- var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
850
- );
851
- --_sf-hr-ue: var(
852
- --_ctm-mob-dn-ce-hr-se-ue,
853
- var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
854
- );
855
-
856
- // for pading and width
857
- --_sf-hr-pg: var(
858
- --_ctm-mob-dn-ce-hr-pg,
859
- var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg))
860
- );
861
- --_sf-hr-wh: var(
862
- --_ctm-mob-dn-ce-hr-wh,
863
- var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-hr-wh))
864
- );
865
-
866
- &[data-hover-show-shadow="false"] {
867
- --_hover-show-shadow: none;
868
- }
869
- &[data-hover-show-icon="false"] {
870
- --_hover-show-icon: none;
871
- }
872
- }
873
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-bd-cr));
874
-
875
- display: flex;
876
- flex-direction: var(--_sf-fd-bn);
877
- align-items: center;
878
-
879
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ce-dt-se-at));
880
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ce-dt-se-gp));
881
-
882
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ce-dt-se-pg));
883
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-wh));
884
-
885
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-rs));
886
-
887
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-ae))
888
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-br))
889
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-sd))
890
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-cr));
891
-
892
- &[data-show-border="true"] {
893
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-cr));
894
-
895
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-se));
896
-
897
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-wh));
898
- }
899
-
900
- .txt {
901
- display: flex;
902
-
903
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr));
904
-
905
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-fy));
906
-
907
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se));
908
-
909
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-wt));
910
-
911
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se-ic));
912
-
913
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ce-dt-se-tt-an));
914
-
915
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ce-dt-se-lr-sg));
916
-
917
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ce-dt-se-le-ht));
918
-
919
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
920
- }
921
-
922
- .icon {
923
- display: var(--_hover-show-icon, var(--_show-icon, flex));
924
- svg {
925
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
926
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
927
-
928
- path {
929
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
930
- }
931
- }
932
- }
933
- [data-element-style="Text"] {
934
- display: inline-block;
935
- width: 100%;
936
- }
937
-
938
- .icon--hover {
939
- // position: absolute;
940
- // inset: 0;
941
- // opacity: 0;
942
- display: none;
943
- transition: opacity 0.2s ease;
944
- }
945
-
946
- &:hover .icon--hover {
947
- // opacity: 1;
948
- display: flex;
949
- }
950
-
951
- &:hover .icon--default {
952
- // opacity: 0;
953
- display: none;
954
- }
955
- }
956
- .btn__with__text[data-btn-name="addToQuote"] {
957
- &[data-show-shadow="false"] {
958
- --_show-shadow: none;
959
- }
960
- &[data-icon-position="left"] {
961
- --_sf-fd-bn: row;
962
- }
963
- &[data-icon-position="right"] {
964
- --_sf-fd-bn: row-reverse;
965
- }
966
- &[data-icon-position="center"] {
967
- --_sf-fd-bn: row;
968
- }
969
-
970
- &:hover {
971
- --_sf-hr-bd-cr: var(
972
- --_ctm-mob-dn-ad-to-qe-hr-se-bd-cr,
973
- var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr))
974
- );
975
- --_sf-hr-br-cr: var(
976
- --_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
977
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr))
978
- );
979
- --_sf-hr-br-se: var(
980
- --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
981
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
982
- );
983
- --_sf-hr-br-wh: var(
984
- --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
985
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
986
- );
987
- --_sf-hr-br-rs: var(
988
- --_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
989
- var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs))
990
- );
991
-
992
- --_sf-hr-at: var(
993
- --_ctm-mob-dn-ad-to-qe-hr-se-at,
994
- var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at))
995
- );
996
- --_sf-hr-gp: var(
997
- --_ctm-mob-dn-ad-to-qe-hr-se-gp,
998
- var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp))
999
- );
1000
-
1001
- // for shadow
1002
- --_sf-hr-sw-ae: var(
1003
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-ae,
1004
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-ae, var(--_ctm-dn-ad-to-qe-hr-se-sw-ae))
1005
- );
1006
- --_sf-hr-sw-br: var(
1007
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-br,
1008
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-br, var(--_ctm-dn-ad-to-qe-hr-se-sw-br))
1009
- );
1010
- --_sf-hr-sw-hr: var(
1011
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-hr,
1012
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-hr, var(--_ctm-dn-ad-to-qe-hr-se-sw-hr))
1013
- );
1014
- --_sf-hr-sw-cr: var(
1015
- --_ctm-mob-dn-ad-to-qe-hr-se-sw-cr,
1016
- var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-cr, var(--_ctm-dn-ad-to-qe-hr-se-sw-cr))
1017
- );
1018
-
1019
- // for font
1020
-
1021
- --_sf-hr-cr: var(
1022
- --_ctm-mob-dn-ad-to-qe-hr-se-cr,
1023
- var(--_ctm-tab-dn-ad-to-qe-hr-se-cr, var(--_ctm-dn-ad-to-qe-hr-se-cr))
1024
- );
1025
- --_sf-hr-ft-fy: var(
1026
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-fy,
1027
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-fy, var(--_ctm-dn-ad-to-qe-hr-se-ft-fy))
1028
- );
1029
- --_sf-hr-ft-se: var(
1030
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-se,
1031
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se, var(--_ctm-dn-ad-to-qe-hr-se-ft-se))
1032
- );
1033
- --_sf-hr-ft-wt: var(
1034
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-wt,
1035
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-wt, var(--_ctm-dn-ad-to-qe-hr-se-ft-wt))
1036
- );
1037
- --_sf-hr-ft-se-ic: var(
1038
- --_ctm-mob-dn-ad-to-qe-hr-se-ft-se-ic,
1039
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic))
1040
- );
1041
- --_sf-hr-tt-an: var(
1042
- --_ctm-mob-dn-ad-to-qe-hr-se-tt-an,
1043
- var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-an, var(--_ctm-dn-ad-to-qe-hr-se-tt-an))
1044
- );
1045
- --_sf-hr-lr-sg: var(
1046
- --_ctm-mob-dn-ad-to-qe-hr-se-lr-sg,
1047
- var(--_ctm-tab-dn-ad-to-qe-hr-se-lr-sg, var(--_ctm-dn-ad-to-qe-hr-se-lr-sg))
1048
- );
1049
- --_sf-hr-le-ht: var(
1050
- --_ctm-mob-dn-ad-to-qe-hr-se-le-ht,
1051
- var(--_ctm-tab-dn-ad-to-qe-hr-se-le-ht, var(--_ctm-dn-ad-to-qe-hr-se-le-ht))
1052
- );
1053
-
1054
- --_sf-hr-in-se: var(
1055
- --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1056
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1057
- );
1058
- --_sf-hr-in-se: var(
1059
- --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1060
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1061
- );
1062
- --_sf-hr-in-c1: var(
1063
- --_ctm-mob-dn-ad-to-qe-hr-se-in-c1,
1064
- var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
1065
- );
1066
- --_sf-hr-ue: var(
1067
- --_ctm-mob-dn-ad-to-qe-hr-se-ue,
1068
- var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
1069
- );
1070
-
1071
- // for pading and width
1072
- --_sf-hr-pg: var(
1073
- --_ctm-mob-dn-ad-to-qe-hr-pg,
1074
- var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg))
1075
- );
1076
- --_sf-hr-wh: var(
1077
- --_ctm-mob-dn-ad-to-qe-hr-wh,
1078
- var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-hr-wh))
1079
- );
1080
-
1081
- &[data-hover-show-shadow="false"] {
1082
- --_hover-show-shadow: none;
1083
- }
1084
- &[data-hover-show-icon="false"] {
1085
- --_hover-show-icon: none;
1086
- }
1087
- }
1088
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr));
1089
-
1090
- display: flex;
1091
- flex-direction: var(--_sf-fd-bn);
1092
- align-items: center;
1093
-
1094
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-at));
1095
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-gp));
1096
-
1097
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-pg));
1098
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wh));
1099
-
1100
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-rs));
1101
-
1102
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-ae))
1103
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-br))
1104
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-sd))
1105
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-cr));
1106
-
1107
- &[data-show-border="true"] {
1108
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-cr));
1109
-
1110
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-se));
1111
-
1112
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-wh));
1113
- }
1114
-
1115
- .txt {
1116
- display: flex;
1117
-
1118
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr));
1119
-
1120
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-fy));
1121
-
1122
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se));
1123
-
1124
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-wt));
1125
-
1126
- font-style: var(
1127
- --_sf-hr-ft-se-ic,
1128
- prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic)
1129
- );
1130
-
1131
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-an));
1132
-
1133
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg));
1134
-
1135
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-le-ht));
1136
-
1137
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1138
- }
1139
-
1140
- .icon {
1141
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1142
- svg {
1143
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1144
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1145
-
1146
- path {
1147
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
1148
- }
1149
- }
1150
- }
1151
- [data-element-style="Text"] {
1152
- display: inline-block;
1153
- width: 100%;
1154
- }
1155
-
1156
- .icon--hover {
1157
- // position: absolute;
1158
- // inset: 0;
1159
- // opacity: 0;
1160
- display: none;
1161
- transition: opacity 0.2s ease;
1162
- }
1163
-
1164
- &:hover .icon--hover {
1165
- // opacity: 1;
1166
- display: flex;
1167
- }
1168
-
1169
- &:hover .icon--default {
1170
- // opacity: 0;
1171
- display: none;
1172
- }
1173
- }
1174
- .btn__with__text[data-btn-name="addToOrderTemplate"] {
1175
- &[data-show-shadow="false"] {
1176
- --_show-shadow: none;
1177
- }
1178
- &[data-icon-position="left"] {
1179
- --_sf-fd-bn: row;
1180
- }
1181
- &[data-icon-position="right"] {
1182
- --_sf-fd-bn: row-reverse;
1183
- }
1184
- &[data-icon-position="center"] {
1185
- --_sf-fd-bn: row;
1186
- }
1187
-
1188
- &:hover {
1189
- --_sf-hr-bd-cr: var(
1190
- --_ctm-mob-dn-ad-to-or-te-hr-se-bd-cr,
1191
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr))
1192
- );
1193
- --_sf-hr-br-cr: var(
1194
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
1195
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr))
1196
- );
1197
- --_sf-hr-br-se: var(
1198
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1199
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
1200
- );
1201
- --_sf-hr-br-wh: var(
1202
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1203
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
1204
- );
1205
- --_sf-hr-br-rs: var(
1206
- --_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
1207
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs))
1208
- );
1209
-
1210
- --_sf-hr-at: var(
1211
- --_ctm-mob-dn-ad-to-or-te-hr-se-at,
1212
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at))
1213
- );
1214
- --_sf-hr-gp: var(
1215
- --_ctm-mob-dn-ad-to-or-te-hr-se-gp,
1216
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp))
1217
- );
1218
-
1219
- // for shadow
1220
- --_sf-hr-sw-ae: var(
1221
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-ae,
1222
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-ae, var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae))
1223
- );
1224
- --_sf-hr-sw-br: var(
1225
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-br,
1226
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-br, var(--_ctm-dn-ad-to-or-te-hr-se-sw-br))
1227
- );
1228
- --_sf-hr-sw-hr: var(
1229
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-hr,
1230
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-hr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-hr))
1231
- );
1232
- --_sf-hr-sw-cr: var(
1233
- --_ctm-mob-dn-ad-to-or-te-hr-se-sw-cr,
1234
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-cr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr))
1235
- );
1236
-
1237
- // for font
1238
-
1239
- --_sf-hr-cr: var(
1240
- --_ctm-mob-dn-ad-to-or-te-hr-se-cr,
1241
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-cr, var(--_ctm-dn-ad-to-or-te-hr-se-cr))
1242
- );
1243
- --_sf-hr-ft-fy: var(
1244
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-fy,
1245
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-fy, var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy))
1246
- );
1247
- --_sf-hr-ft-se: var(
1248
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se,
1249
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se))
1250
- );
1251
- --_sf-hr-ft-wt: var(
1252
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-wt,
1253
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-wt, var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt))
1254
- );
1255
- --_sf-hr-ft-se-ic: var(
1256
- --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se-ic,
1257
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic))
1258
- );
1259
- --_sf-hr-tt-an: var(
1260
- --_ctm-mob-dn-ad-to-or-te-hr-se-tt-an,
1261
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-an, var(--_ctm-dn-ad-to-or-te-hr-se-tt-an))
1262
- );
1263
- --_sf-hr-lr-sg: var(
1264
- --_ctm-mob-dn-ad-to-or-te-hr-se-lr-sg,
1265
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-lr-sg, var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg))
1266
- );
1267
- --_sf-hr-le-ht: var(
1268
- --_ctm-mob-dn-ad-to-or-te-hr-se-le-ht,
1269
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-le-ht, var(--_ctm-dn-ad-to-or-te-hr-se-le-ht))
1270
- );
1271
-
1272
- --_sf-hr-in-se: var(
1273
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1274
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1275
- );
1276
- --_sf-hr-in-se: var(
1277
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1278
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1279
- );
1280
- --_sf-hr-in-c1: var(
1281
- --_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
1282
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
1283
- );
1284
- --_sf-hr-ue: var(
1285
- --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
1286
- var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
1287
- );
1288
-
1289
- // for pading and width
1290
- --_sf-hr-pg: var(
1291
- --_ctm-mob-dn-ad-to-or-te-hr-pg,
1292
- var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg))
1293
- );
1294
- --_sf-hr-wh: var(
1295
- --_ctm-mob-dn-ad-to-or-te-hr-wh,
1296
- var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-hr-wh))
1297
- );
1298
- &[data-hover-show-shadow="false"] {
1299
- --_hover-show-shadow: none;
1300
- }
1301
- &[data-hover-show-icon="false"] {
1302
- --_hover-show-icon: none;
1303
- }
1304
- }
1305
- background-color: var(
1306
- --_sf-hr-bd-cr,
1307
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr)
1308
- );
1309
-
1310
- padding: 5px 10px;
1311
- display: flex;
1312
- flex-direction: var(--_sf-fd-bn);
1313
- align-items: center;
1314
-
1315
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
1316
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));
1317
-
1318
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
1319
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));
1320
-
1321
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs));
1322
-
1323
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-ae))
1324
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-br))
1325
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-sd))
1326
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-cr));
1327
-
1328
- &[data-show-border="true"] {
1329
- border-color: var(
1330
- --_sf-hr-br-cr,
1331
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-cr)
1332
- );
1333
-
1334
- border-style: var(
1335
- --_sf-hr-br-se,
1336
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
1337
- );
1338
-
1339
- border-width: var(
1340
- --_sf-hr-br-wh,
1341
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
1342
- );
1343
- }
1344
-
1345
- .txt {
1346
- display: flex;
1347
-
1348
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
1349
-
1350
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-fy));
1351
-
1352
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1353
-
1354
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt));
1355
-
1356
- font-style: var(
1357
- --_sf-hr-ft-se-ic,
1358
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
1359
- );
1360
-
1361
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an));
1362
-
1363
- letter-spacing: var(
1364
- --_sf-hr-lr-sg,
1365
- prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
1366
- );
1367
-
1368
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht));
1369
-
1370
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1371
- }
1372
-
1373
- .icon {
1374
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1375
- svg {
1376
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1377
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1378
-
1379
- path {
1380
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1));
1381
- }
1382
- }
1383
- }
1384
- [data-element-style="Text"] {
1385
- display: inline-block;
1386
- width: 100%;
1387
- }
1388
-
1389
- .icon--hover {
1390
- // position: absolute;
1391
- // inset: 0;
1392
- // opacity: 0;
1393
- display: none;
1394
- transition: opacity 0.2s ease;
1395
- }
1396
-
1397
- &:hover .icon--hover {
1398
- // opacity: 1;
1399
- display: flex;
1400
- }
1401
-
1402
- &:hover .icon--default {
1403
- // opacity: 0;
1404
- display: none;
1405
- }
1406
- }
1407
- .btn__with__text[data-btn-name="notifyMe"] {
1408
- &[data-show-shadow="false"] {
1409
- --_show-shadow: none;
1410
- }
1411
- &[data-icon-position="left"] {
1412
- --_sf-fd-bn: row;
1413
- }
1414
- &[data-icon-position="right"] {
1415
- --_sf-fd-bn: row-reverse;
1416
- }
1417
- &[data-icon-position="center"] {
1418
- --_sf-fd-bn: row;
1419
- }
1420
-
1421
- &:hover {
1422
- --_sf-hr-bd-cr: var(
1423
- --_ctm-mob-dn-ny-me-hr-se-bd-cr,
1424
- var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
1425
- );
1426
- --_sf-hr-br-cr: var(
1427
- --_ctm-mob-dn-ny-me-hr-se-br-cr,
1428
- var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
1429
- );
1430
- --_sf-hr-br-se: var(
1431
- --_ctm-mob-dn-ny-me-hr-se-br-se,
1432
- var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1433
- );
1434
- --_sf-hr-br-wh: var(
1435
- --_ctm-mob-dn-ny-me-hr-se-br-wh,
1436
- var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1437
- );
1438
- --_sf-hr-br-rs: var(
1439
- --_ctm-mob-dn-ny-me-hr-se-br-rs,
1440
- var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
1441
- );
1442
- --_sf-hr-at: var(
1443
- --_ctm-mob-dn-ny-me-hr-se-at,
1444
- var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
1445
- );
1446
- --_sf-hr-gp: var(
1447
- --_ctm-mob-dn-ny-me-hr-se-gp,
1448
- var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
1449
- );
1450
-
1451
- // for shadow
1452
- --_sf-hr-sw-ae: var(
1453
- --_ctm-mob-dn-ny-me-hr-se-sw-ae,
1454
- var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
1455
- );
1456
- --_sf-hr-sw-br: var(
1457
- --_ctm-mob-dn-ny-me-hr-se-sw-br,
1458
- var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
1459
- );
1460
- --_sf-hr-sw-hr: var(
1461
- --_ctm-mob-dn-ny-me-hr-se-sw-hr,
1462
- var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
1463
- );
1464
- --_sf-hr-sw-cr: var(
1465
- --_ctm-mob-dn-ny-me-hr-se-sw-cr,
1466
- var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
1467
- );
1468
-
1469
- // for font
1470
-
1471
- --_sf-hr-cr: var(
1472
- --_ctm-mob-dn-ny-me-hr-se-cr,
1473
- var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
1474
- );
1475
- --_sf-hr-ft-fy: var(
1476
- --_ctm-mob-dn-ny-me-hr-se-ft-fy,
1477
- var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
1478
- );
1479
- --_sf-hr-ft-se: var(
1480
- --_ctm-mob-dn-ny-me-hr-se-ft-se,
1481
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
1482
- );
1483
- --_sf-hr-ft-wt: var(
1484
- --_ctm-mob-dn-ny-me-hr-se-ft-wt,
1485
- var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
1486
- );
1487
- --_sf-hr-ft-se-ic: var(
1488
- --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1489
- var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
1490
- );
1491
- --_sf-hr-tt-an: var(
1492
- --_ctm-mob-dn-ny-me-hr-se-tt-an,
1493
- var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
1494
- );
1495
- --_sf-hr-lr-sg: var(
1496
- --_ctm-mob-dn-ny-me-hr-se-lr-sg,
1497
- var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
1498
- );
1499
- --_sf-hr-le-ht: var(
1500
- --_ctm-mob-dn-ny-me-hr-se-le-ht,
1501
- var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
1502
- );
1503
-
1504
- --_sf-hr-in-se: var(
1505
- --_ctm-mob-dn-ny-me-hr-se-in-se,
1506
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1507
- );
1508
- --_sf-hr-in-se: var(
1509
- --_ctm-mob-dn-ny-me-hr-se-in-se,
1510
- var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1511
- );
1512
- --_sf-hr-in-c1: var(
1513
- --_ctm-mob-dn-ny-me-hr-se-in-c1,
1514
- var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
1515
- );
1516
- --_sf-hr-ue: var(
1517
- --_ctm-mob-dn-ny-me-hr-se-ue,
1518
- var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
1519
- );
1520
-
1521
- // for pading and width
1522
- --_sf-hr-pg: var(
1523
- --_ctm-mob-dn-ny-me-hr-pg,
1524
- var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
1525
- );
1526
- --_sf-hr-wh: var(
1527
- --_ctm-mob-dn-ny-me-hr-wh,
1528
- var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
1529
- );
1530
-
1531
- &[data-hover-show-shadow="false"] {
1532
- --_hover-show-shadow: none;
1533
- }
1534
- &[data-hover-show-icon="false"] {
1535
- --_hover-show-icon: none;
1536
- }
1537
- }
1538
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1539
-
1540
- display: flex;
1541
- flex-direction: var(--_sf-fd-bn);
1542
- align-items: center;
1543
-
1544
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1545
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1546
-
1547
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1548
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1549
-
1550
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1551
-
1552
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
1553
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
1554
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
1555
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1556
-
1557
- &[data-show-border="true"] {
1558
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1559
-
1560
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1561
-
1562
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1563
- }
1564
-
1565
- .txt {
1566
- display: flex;
1567
-
1568
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1569
-
1570
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1571
-
1572
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1573
-
1574
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1575
-
1576
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic));
1577
-
1578
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1579
-
1580
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1581
-
1582
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1583
-
1584
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1585
- }
1586
-
1587
- .icon {
1588
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1589
- svg {
1590
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1591
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1592
-
1593
- path {
1594
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1595
- }
1596
- }
1597
- }
1598
- [data-element-style="Text"] {
1599
- display: inline-block;
1600
- width: 100%;
1601
- }
1602
-
1603
- .icon--hover {
1604
- // position: absolute;
1605
- // inset: 0;
1606
- // opacity: 0;
1607
- display: none;
1608
- transition: opacity 0.2s ease;
1609
- }
1610
-
1611
- &:hover .icon--hover {
1612
- // opacity: 1;
1613
- display: flex;
1614
- }
1615
-
1616
- &:hover .icon--default {
1617
- // opacity: 0;
1618
- display: none;
1619
- }
1620
- }
1621
- .btn__with__text[data-btn-name="download"] {
1622
- &[data-show-shadow="false"] {
1623
- --_show-shadow: none;
1624
- }
1625
- &[data-icon-position="left"] {
1626
- --_sf-fd-bn: row;
1627
- }
1628
- &[data-icon-position="right"] {
1629
- --_sf-fd-bn: row-reverse;
1630
- }
1631
- &[data-icon-position="center"] {
1632
- --_sf-fd-bn: row;
1633
- }
1634
-
1635
- &:hover {
1636
- --_sf-hr-bd-cr: var(
1637
- --_ctm-mob-dn-dd-hr-se-bd-cr,
1638
- var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
1639
- );
1640
- --_sf-hr-br-cr: var(
1641
- --_ctm-mob-dn-dd-hr-se-br-cr,
1642
- var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
1643
- );
1644
- --_sf-hr-br-se: var(
1645
- --_ctm-mob-dn-dd-hr-se-br-se,
1646
- var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
1647
- );
1648
- --_sf-hr-br-wh: var(
1649
- --_ctm-mob-dn-dd-hr-se-br-wh,
1650
- var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
1651
- );
1652
- --_sf-hr-br-rs: var(
1653
- --_ctm-mob-dn-dd-hr-se-br-rs,
1654
- var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
1655
- );
1656
- --_sf-hr-at: var(
1657
- --_ctm-mob-dn-dd-hr-se-at,
1658
- var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
1659
- );
1660
- --_sf-hr-gp: var(
1661
- --_ctm-mob-dn-dd-hr-se-gp,
1662
- var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
1663
- );
1664
-
1665
- // for shadow
1666
- --_sf-hr-sw-ae: var(
1667
- --_ctm-mob-dn-dd-hr-se-sw-ae,
1668
- var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
1669
- );
1670
- --_sf-hr-sw-br: var(
1671
- --_ctm-mob-dn-dd-hr-se-sw-br,
1672
- var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
1673
- );
1674
- --_sf-hr-sw-hr: var(
1675
- --_ctm-mob-dn-dd-hr-se-sw-hr,
1676
- var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
1677
- );
1678
- --_sf-hr-sw-cr: var(
1679
- --_ctm-mob-dn-dd-hr-se-sw-cr,
1680
- var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
1681
- );
1682
-
1683
- // for font
1684
-
1685
- --_sf-hr-cr: var(
1686
- --_ctm-mob-dn-dd-hr-se-cr,
1687
- var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
1688
- );
1689
- --_sf-hr-ft-fy: var(
1690
- --_ctm-mob-dn-dd-hr-se-ft-fy,
1691
- var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
1692
- );
1693
- --_sf-hr-ft-se: var(
1694
- --_ctm-mob-dn-dd-hr-se-ft-se,
1695
- var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
1696
- );
1697
- --_sf-hr-ft-wt: var(
1698
- --_ctm-mob-dn-dd-hr-se-ft-wt,
1699
- var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
1700
- );
1701
- --_sf-hr-ft-se-ic: var(
1702
- --_ctm-mob-dn-dd-hr-se-ft-se-ic,
1703
- var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
1704
- );
1705
- --_sf-hr-tt-an: var(
1706
- --_ctm-mob-dn-dd-hr-se-tt-an,
1707
- var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
1708
- );
1709
- --_sf-hr-lr-sg: var(
1710
- --_ctm-mob-dn-dd-hr-se-lr-sg,
1711
- var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
1712
- );
1713
- --_sf-hr-le-ht: var(
1714
- --_ctm-mob-dn-dd-hr-se-le-ht,
1715
- var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
1716
- );
1717
-
1718
- --_sf-hr-in-se: var(
1719
- --_ctm-mob-dn-dd-hr-se-in-se,
1720
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1721
- );
1722
- --_sf-hr-in-se: var(
1723
- --_ctm-mob-dn-dd-hr-se-in-se,
1724
- var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1725
- );
1726
- --_sf-hr-in-c1: var(
1727
- --_ctm-mob-dn-dd-hr-se-in-c1,
1728
- var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
1729
- );
1730
- --_sf-hr-ue: var(
1731
- --_ctm-mob-dn-dd-hr-se-ue,
1732
- var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
1733
- );
1734
-
1735
- // for pading and width
1736
- --_sf-hr-pg: var(
1737
- --_ctm-mob-dn-dd-hr-pg,
1738
- var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
1739
- );
1740
- --_sf-hr-wh: var(
1741
- --_ctm-mob-dn-dd-hr-wh,
1742
- var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
1743
- );
1744
-
1745
- &[data-hover-show-shadow="false"] {
1746
- --_hover-show-shadow: none;
1747
- }
1748
- &[data-hover-show-icon="false"] {
1749
- --_hover-show-icon: none;
1750
- }
1751
- }
1752
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1753
-
1754
- display: flex;
1755
- flex-direction: var(--_sf-fd-bn);
1756
- align-items: center;
1757
-
1758
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1759
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1760
-
1761
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1762
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1763
-
1764
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1765
-
1766
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
1767
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
1768
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
1769
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1770
-
1771
- &[data-show-border="true"] {
1772
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1773
-
1774
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1775
-
1776
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1777
- }
1778
-
1779
- .txt {
1780
- display: flex;
1781
-
1782
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1783
-
1784
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
1785
-
1786
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1787
-
1788
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1789
-
1790
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1791
-
1792
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1793
-
1794
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1795
-
1796
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1797
-
1798
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1799
- }
1800
-
1801
- .icon {
1802
- display: var(--_hover-show-icon, var(--_show-icon, flex));
1803
- svg {
1804
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1805
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1806
-
1807
- path {
1808
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
1809
- }
1810
- }
1811
- }
1812
- [data-element-style="Text"] {
1813
- display: inline-block;
1814
- width: 100%;
1815
- }
1816
-
1817
- .icon--hover {
1818
- // position: absolute;
1819
- // inset: 0;
1820
- // opacity: 0;
1821
- display: none;
1822
- transition: opacity 0.2s ease;
1823
- }
1824
-
1825
- &:hover .icon--hover {
1826
- // opacity: 1;
1827
- display: flex;
1828
- }
1829
-
1830
- &:hover .icon--default {
1831
- // opacity: 0;
1832
- display: none;
1833
- }
1834
- }
1835
- .btn__with__text[data-btn-name="more"] {
1836
- &[data-show-shadow="false"] {
1837
- --_show-shadow: none;
1838
- }
1839
- &[data-icon-position="left"] {
1840
- --_sf-fd-bn: row;
1841
- }
1842
- &[data-icon-position="right"] {
1843
- --_sf-fd-bn: row-reverse;
1844
- }
1845
- &[data-icon-position="center"] {
1846
- --_sf-fd-bn: row;
1847
- }
1848
-
1849
- &:hover {
1850
- --_sf-hr-bd-cr: var(
1851
- --_ctm-mob-dn-me-hr-se-bd-cr,
1852
- var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
1853
- );
1854
- --_sf-hr-br-cr: var(
1855
- --_ctm-mob-dn-me-hr-se-br-cr,
1856
- var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
1857
- );
1858
- --_sf-hr-br-se: var(
1859
- --_ctm-mob-dn-me-hr-se-br-se,
1860
- var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
1861
- );
1862
- --_sf-hr-br-wh: var(
1863
- --_ctm-mob-dn-me-hr-se-br-wh,
1864
- var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
1865
- );
1866
- --_sf-hr-br-rs: var(
1867
- --_ctm-mob-dn-me-hr-se-br-rs,
1868
- var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
1869
- );
1870
- --_sf-hr-at: var(
1871
- --_ctm-mob-dn-me-hr-se-at,
1872
- var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
1873
- );
1874
- --_sf-hr-gp: var(
1875
- --_ctm-mob-dn-me-hr-se-gp,
1876
- var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
1877
- );
1878
-
1879
- // for shadow
1880
- --_sf-hr-sw-ae: var(
1881
- --_ctm-mob-dn-me-hr-se-sw-ae,
1882
- var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
1883
- );
1884
- --_sf-hr-sw-br: var(
1885
- --_ctm-mob-dn-me-hr-se-sw-br,
1886
- var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
1887
- );
1888
- --_sf-hr-sw-hr: var(
1889
- --_ctm-mob-dn-me-hr-se-sw-hr,
1890
- var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
1891
- );
1892
- --_sf-hr-sw-cr: var(
1893
- --_ctm-mob-dn-me-hr-se-sw-cr,
1894
- var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
1895
- );
1896
-
1897
- // for font
1898
-
1899
- --_sf-hr-cr: var(
1900
- --_ctm-mob-dn-me-hr-se-cr,
1901
- var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
1902
- );
1903
- --_sf-hr-ft-fy: var(
1904
- --_ctm-mob-dn-me-hr-se-ft-fy,
1905
- var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
1906
- );
1907
- --_sf-hr-ft-se: var(
1908
- --_ctm-mob-dn-me-hr-se-ft-se,
1909
- var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
1910
- );
1911
- --_sf-hr-ft-wt: var(
1912
- --_ctm-mob-dn-me-hr-se-ft-wt,
1913
- var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
1914
- );
1915
- --_sf-hr-ft-se-ic: var(
1916
- --_ctm-mob-dn-me-hr-se-ft-se-ic,
1917
- var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
1918
- );
1919
- --_sf-hr-tt-an: var(
1920
- --_ctm-mob-dn-me-hr-se-tt-an,
1921
- var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
1922
- );
1923
- --_sf-hr-lr-sg: var(
1924
- --_ctm-mob-dn-me-hr-se-lr-sg,
1925
- var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
1926
- );
1927
- --_sf-hr-le-ht: var(
1928
- --_ctm-mob-dn-me-hr-se-le-ht,
1929
- var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
1930
- );
1931
-
1932
- --_sf-hr-in-se: var(
1933
- --_ctm-mob-dn-me-hr-se-in-se,
1934
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1935
- );
1936
- --_sf-hr-in-se: var(
1937
- --_ctm-mob-dn-me-hr-se-in-se,
1938
- var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1939
- );
1940
- --_sf-hr-in-c1: var(
1941
- --_ctm-mob-dn-me-hr-se-in-c1,
1942
- var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
1943
- );
1944
- --_sf-hr-ue: var(
1945
- --_ctm-mob-dn-me-hr-se-ue,
1946
- var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
1947
- );
1948
-
1949
- // for pading and width
1950
- --_sf-hr-pg: var(
1951
- --_ctm-mob-dn-me-hr-pg,
1952
- var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
1953
- );
1954
- --_sf-hr-wh: var(
1955
- --_ctm-mob-dn-me-hr-wh,
1956
- var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
1957
- );
1958
-
1959
- &[data-hover-show-shadow="false"] {
1960
- --_hover-show-shadow: none;
1961
- }
1962
- &[data-hover-show-icon="false"] {
1963
- --_hover-show-icon: none;
1964
- }
1965
- }
1966
- background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
1967
-
1968
- display: flex;
1969
- flex-direction: var(--_sf-fd-bn);
1970
- align-items: center;
1971
-
1972
- justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
1973
- gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
1974
-
1975
- padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
1976
- width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
1977
- height: 100%;
1978
- border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
1979
-
1980
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
1981
- var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
1982
- var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
1983
- var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
1984
-
1985
- &[data-show-border="true"] {
1986
- border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
1987
-
1988
- border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
1989
-
1990
- border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
1991
- }
1992
-
1993
- .txt {
1994
- display: flex;
1995
-
1996
- color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
1997
-
1998
- font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
1999
-
2000
- font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2001
-
2002
- font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2003
-
2004
- font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2005
-
2006
- text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2007
-
2008
- letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2009
-
2010
- line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2011
-
2012
- text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2013
- }
2014
-
2015
- .icon {
2016
- display: var(--_hover-show-icon, var(--_show-icon, flex));
2017
- svg {
2018
- width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2019
- height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2020
-
2021
- path {
2022
- stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2023
- }
2024
- }
2025
- }
2026
- [data-element-style="Text"] {
2027
- display: inline-block;
2028
- width: 100%;
2029
- }
2030
-
2031
- .icon--hover {
2032
- // position: absolute;
2033
- // inset: 0;
2034
- // opacity: 0;
2035
- display: none;
2036
- transition: opacity 0.2s ease;
2037
- }
2038
-
2039
- &:hover .icon--hover {
2040
- // opacity: 1;
2041
- display: flex;
2042
- }
2043
-
2044
- &:hover .icon--default {
2045
- // opacity: 0;
2046
- display: none;
2047
- }
2048
- }
2049
-
2050
- // .dropdown-menu {
2051
- // display: block;
2052
- // position: absolute;
2053
- // top: 110%;
2054
-
2055
- // &[data-position="left"] {
2056
- // left: 0;
2057
- // }
2058
- // &[data-position="right"] {
2059
- // right: 0;
2060
- // }
2061
- // &[data-position="center"] {
2062
- // left: 50%;
2063
- // transform: translateX(-50%);
2064
- // }
2065
- // // top: 78%;
2066
- // // left: 100%;
2067
- // // margin-left: 8px;
2068
-
2069
- // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2070
- // min-width: 200px;
2071
- // z-index: 100;
2072
- // display: flex;
2073
- // flex-direction: column;
2074
- // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
2075
-
2076
- // background-color: var(
2077
- // --_ctm-mob-dn-dn-se-bd-cr,
2078
- // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2079
- // );
2080
-
2081
- // border-color: var(
2082
- // --_ctm-mob-dn-dn-se-br-cr,
2083
- // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2084
- // );
2085
-
2086
- // border-style: var(
2087
- // --_ctm-mob-dn-dn-se-br-se,
2088
- // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2089
- // );
2090
-
2091
- // border-width: var(
2092
- // --_ctm-mob-dn-dn-se-br-wh,
2093
- // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2094
- // );
2095
-
2096
- // border-radius: var(
2097
- // --_ctm-mob-dn-dn-se-br-rs,
2098
- // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2099
- // );
2100
-
2101
- // box-shadow: var(
2102
- // --_show-shadow,
2103
- // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
2104
- // var(
2105
- // --_ctm-mob-dn-dn-se-sw-br,
2106
- // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2107
- // )
2108
- // var(
2109
- // --_ctm-mob-dn-dn-se-sw-sd,
2110
- // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2111
- // )
2112
- // var(
2113
- // --_ctm-mob-dn-dn-se-sw-cr,
2114
- // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2115
- // )
2116
- // );
2117
- // }
2118
- .popover-container {
2119
- position: relative;
2120
- display: inline-block;
2121
- .popover-trigger {
2122
- cursor: pointer;
2123
- font-weight: 500;
2124
- color: #2b6cb0;
2125
- }
2126
-
2127
- .popover-box {
2128
- // position: absolute;
2129
- // top: calc(100% + 10px);
2130
- // right: 0;
2131
- // background: white;
2132
- // padding: 12px 16px;
2133
- // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
2134
- // border-radius: 8px;
2135
- // min-width: 150px;
2136
- // z-index: 10;
2137
- position: absolute;
2138
- // border: 1px solid #ccc;
2139
- // min-width: 150px;
2140
- max-width: 200px;
2141
- z-index: 1000;
2142
- // left: 40px;
2143
- // top: 0;
2144
- // right: -125%;
2145
- padding: 8px;
2146
- border-radius: 4px;
2147
- }
2148
-
2149
- .popover-box {
2150
- display: flex;
2151
- flex-direction: column;
2152
-
2153
- // width: 100%;
2154
- gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2155
- background-color: var(
2156
- --_ctm-mob-dn-pr-se-bd-cr,
2157
- var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2158
- );
2159
-
2160
- border-color: var(
2161
- --_ctm-mob-dn-pr-se-br-cr,
2162
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2163
- );
2164
-
2165
- border-style: var(
2166
- --_ctm-mob-dn-pr-se-br-se,
2167
- var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2168
- );
2169
-
2170
- border-width: var(
2171
- --_ctm-mob-dn-pr-se-br-wh,
2172
- var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2173
- );
2174
-
2175
- border-radius: var(
2176
- --_ctm-mob-dn-pr-se-br-rs,
2177
- var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2178
- );
2179
-
2180
- box-shadow: var(
2181
- --_show-shadow,
2182
- var(
2183
- --_ctm-mob-dn-pr-se-sw-ae,
2184
- var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2185
- )
2186
- var(
2187
- --_ctm-mob-dn-pr-se-sw-br,
2188
- var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2189
- )
2190
- var(
2191
- --_ctm-mob-dn-pr-se-sw-sd,
2192
- var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2193
- )
2194
- var(
2195
- --_ctm-mob-dn-pr-se-sw-cr,
2196
- var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2197
- )
2198
- );
2199
-
2200
- padding: var(
2201
- --_ctm-mob-dn-pr-se-pg,
2202
- var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2203
- );
2204
- }
2205
-
2206
- .popover-box strong {
2207
- display: block;
2208
- margin-bottom: 6px;
2209
- font-weight: bold;
2210
- }
2211
-
2212
- .popover-arrow {
2213
- position: absolute;
2214
- top: 8px;
2215
- left: -5px;
2216
- width: 12px;
2217
- min-height: 12px;
2218
-
2219
- // background-color: var(
2220
- // --_ctm-mob-dn-pr-se-bd-cr,
2221
- // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2222
- // );
2223
- transform: rotate(-45deg);
2224
- box-shadow: -1px -1px 0px
2225
- var(
2226
- --_ctm-mob-dn-pr-se-br-cr,
2227
- var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2228
- );
2229
- }
2230
-
2231
- .popover_item {
2232
- // padding-inline: var(--_sf-cd-gp);
2233
- color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2234
- font-family: var(
2235
- --_ctm-mob-dn-pr-se-ft-fy,
2236
- var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2237
- );
2238
- font-size: var(
2239
- --_ctm-mob-dn-pr-se-ft-se,
2240
- var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2241
- );
2242
- font-weight: var(
2243
- --_ctm-mob-dn-pr-se-ft-wt,
2244
- var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2245
- );
2246
- font-style: var(
2247
- --_ctm-mob-dn-pr-se-ft-se-ic,
2248
- var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2249
- );
2250
- text-align: var(
2251
- --_ctm-mob-dn-pr-se-tt-an,
2252
- var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2253
- );
2254
- letter-spacing: var(
2255
- --_ctm-mob-dn-pr-se-lr-sg,
2256
- var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2257
- );
2258
- line-height: var(
2259
- --_ctm-mob-dn-pr-se-le-ht,
2260
- var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2261
- );
2262
- text-decoration: var(
2263
- --_ctm-mob-dn-pr-se-ue,
2264
- var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2265
- );
2266
- // margin-left: 10px;
2267
- }
2268
- }
2269
-
2270
- &[data-display-style="Stack Vertically"] {
2271
- .popover-box {
2272
- left: 100%;
2273
- transform: translate(0%);
2274
- margin-left: 6px;
2275
- top: 0;
2276
- }
2277
- }
2278
- &[data-display-style="Stack Horizontally"] {
2279
- .popover-box {
2280
- right: 0;
2281
- margin-top: 6px;
2282
- }
2283
- }
2284
- }
2285
- }
2286
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+
5
+ [data-div-type="element"] {
6
+ &[data-element-type="productActions"] {
7
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
8
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
9
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
10
+
11
+ // & > .wrapper {
12
+ // // width: 100%;
13
+ // // height: 100%;
14
+ // }
15
+ .text-element {
16
+ background: #6d96e4;
17
+ padding: 10px;
18
+ font-weight: 600;
19
+ color: rgba(75, 69, 70, 1);
20
+ }
21
+ .action__buttons__wrapper {
22
+ background-color: var(
23
+ --_ctm-mob-dn-wt-se-bd-cr,
24
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
25
+ );
26
+
27
+ border-color: var(
28
+ --_ctm-mob-dn-wt-se-br-cr,
29
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
30
+ );
31
+
32
+ border-style: var(
33
+ --_ctm-mob-dn-wt-se-br-se,
34
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
35
+ );
36
+
37
+ border-width: var(
38
+ --_ctm-mob-dn-wt-se-br-wh,
39
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
40
+ );
41
+
42
+ border-radius: var(
43
+ --_ctm-mob-dn-wt-se-br-rs,
44
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
45
+ );
46
+
47
+ box-shadow: var(
48
+ --_show-shadow,
49
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
50
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
51
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
52
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
53
+ );
54
+
55
+ //
56
+
57
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
58
+
59
+ display: flex;
60
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
61
+ flex-direction: column;
62
+ align-items: var(--_ctm-mob-lt-is-at, var(--_ctm-tab-lt-is-at, var(--_ctm-lt-is-at)));
63
+ min-height: 30px;
64
+
65
+ // &[data-actions-overflow-item-wrap="true"] {
66
+ // flex-wrap: wrap;
67
+ // }
68
+ // &[data-actions-display-style="true"] {
69
+ // flex-direction: column;
70
+ // }
71
+ .cart-dropdown-container {
72
+ &:hover {
73
+ --_sf-hr-wh: var(
74
+ --_ctm-mob-dn-wt-hr-wh,
75
+ var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
76
+ );
77
+ }
78
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
79
+ }
80
+ &[data-display-style="Stack Horizontally"] {
81
+ flex-direction: row;
82
+ row-gap: var(--_ctm-mob-lt-im-vl-sg, var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg)));
83
+ flex-wrap: wrap;
84
+ }
85
+ // .btn__with__text {
86
+ // white-space: nowrap;
87
+ // }
88
+
89
+ .btn__with__text[data-btn-name="addToCart"] {
90
+ justify-content: center;
91
+ &[data-show-shadow="false"] {
92
+ --_show-shadow: none;
93
+ }
94
+ &[data-icon-position="left"] {
95
+ --_sf-fd-bn: row;
96
+ }
97
+ &[data-icon-position="right"] {
98
+ --_sf-fd-bn: row-reverse;
99
+ }
100
+ &[data-icon-position="center"] {
101
+ --_sf-fd-bn: row;
102
+ }
103
+
104
+ &:hover {
105
+ --_sf-hr-bd-cr: var(
106
+ --_ctm-mob-dn-ad-to-ct-hr-se-bd-cr,
107
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr))
108
+ );
109
+ --_sf-hr-br-cr: var(
110
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-cr,
111
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr))
112
+ );
113
+ --_sf-hr-br-se: var(
114
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-se,
115
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se))
116
+ );
117
+ --_sf-hr-br-wh: var(
118
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-wh,
119
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-wh, var(--_ctm-dn-ad-to-ct-hr-se-br-wh))
120
+ );
121
+ --_sf-hr-br-rs: var(
122
+ --_ctm-mob-dn-ad-to-ct-hr-se-br-rs,
123
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-br-rs, var(--_ctm-dn-ad-to-ct-hr-se-br-rs))
124
+ );
125
+ --_sf-hr-at: var(
126
+ --_ctm-mob-dn-ad-to-ct-hr-se-at,
127
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-at, var(--_ctm-dn-ad-to-ct-hr-se-at))
128
+ );
129
+ --_sf-hr-gp: var(
130
+ --_ctm-mob-dn-ad-to-ct-hr-se-gp,
131
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-gp, var(--_ctm-dn-ad-to-ct-hr-se-gp))
132
+ );
133
+
134
+ // for shadow
135
+ --_sf-hr-sw-ae: var(
136
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-ae,
137
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-ae, var(--_ctm-dn-ad-to-ct-hr-se-sw-ae))
138
+ );
139
+ --_sf-hr-sw-br: var(
140
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-br,
141
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-br, var(--_ctm-dn-ad-to-ct-hr-se-sw-br))
142
+ );
143
+ --_sf-hr-sw-hr: var(
144
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-hr,
145
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-hr, var(--_ctm-dn-ad-to-ct-hr-se-sw-hr))
146
+ );
147
+ --_sf-hr-sw-cr: var(
148
+ --_ctm-mob-dn-ad-to-ct-hr-se-sw-cr,
149
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-sw-cr, var(--_ctm-dn-ad-to-ct-hr-se-sw-cr))
150
+ );
151
+
152
+ // for font
153
+
154
+ --_sf-hr-cr: var(
155
+ --_ctm-mob-dn-ad-to-ct-hr-se-cr,
156
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-cr, var(--_ctm-dn-ad-to-ct-hr-se-cr))
157
+ );
158
+ --_sf-hr-ft-fy: var(
159
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-fy,
160
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-fy, var(--_ctm-dn-ad-to-ct-hr-se-ft-fy))
161
+ );
162
+ --_sf-hr-ft-se: var(
163
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-se,
164
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se, var(--_ctm-dn-ad-to-ct-hr-se-ft-se))
165
+ );
166
+ --_sf-hr-ft-wt: var(
167
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-wt,
168
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-wt, var(--_ctm-dn-ad-to-ct-hr-se-ft-wt))
169
+ );
170
+ --_sf-hr-ft-se-ic: var(
171
+ --_ctm-mob-dn-ad-to-ct-hr-se-ft-se-ic,
172
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic))
173
+ );
174
+ --_sf-hr-tt-an: var(
175
+ --_ctm-mob-dn-ad-to-ct-hr-se-tt-an,
176
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-tt-an, var(--_ctm-dn-ad-to-ct-hr-se-tt-an))
177
+ );
178
+ --_sf-hr-lr-sg: var(
179
+ --_ctm-mob-dn-ad-to-ct-hr-se-lr-sg,
180
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-lr-sg, var(--_ctm-dn-ad-to-ct-hr-se-lr-sg))
181
+ );
182
+ --_sf-hr-le-ht: var(
183
+ --_ctm-mob-dn-ad-to-ct-hr-se-le-ht,
184
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-le-ht, var(--_ctm-dn-ad-to-ct-hr-se-le-ht))
185
+ );
186
+
187
+ --_sf-hr-in-se: var(
188
+ --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
189
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
190
+ );
191
+ --_sf-hr-in-se: var(
192
+ --_ctm-mob-dn-ad-to-ct-hr-se-in-se,
193
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-se, var(--_ctm-dn-ad-to-ct-hr-se-in-se))
194
+ );
195
+ --_sf-hr-in-c1: var(
196
+ --_ctm-mob-dn-ad-to-ct-hr-se-in-c1,
197
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-in-c1, var(--_ctm-dn-ad-to-ct-hr-se-in-c1))
198
+ );
199
+ --_sf-hr-ue: var(
200
+ --_ctm-mob-dn-ad-to-ct-hr-se-ue,
201
+ var(--_ctm-tab-dn-ad-to-ct-hr-se-ue, var(--_ctm-dn-ad-to-ct-hr-se-ue))
202
+ );
203
+
204
+ // for pading and width
205
+ --_sf-hr-pg: var(
206
+ --_ctm-mob-dn-ad-to-ct-hr-pg,
207
+ var(--_ctm-tab-dn-ad-to-ct-hr-pg, var(--_ctm-dn-ad-to-ct-hr-pg))
208
+ );
209
+ --_sf-hr-wh: var(
210
+ --_ctm-mob-dn-ad-to-ct-hr-wh,
211
+ var(--_ctm-tab-dn-ad-to-ct-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
212
+ );
213
+
214
+ &[data-hover-show-shadow="false"] {
215
+ --_hover-show-shadow: none;
216
+ }
217
+ &[data-hover-show-icon="false"] {
218
+ --_hover-show-icon: none;
219
+ }
220
+ }
221
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-bd-cr));
222
+
223
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-pg));
224
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-wh));
225
+ display: flex;
226
+ flex-direction: var(--_sf-fd-bn);
227
+ align-items: center;
228
+
229
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-at));
230
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-gp));
231
+
232
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-rs));
233
+
234
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-ae))
235
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-br))
236
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-sd))
237
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-sw-cr));
238
+
239
+ &[data-show-border="true"] {
240
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-cr));
241
+
242
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-se));
243
+
244
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-br-wh));
245
+ }
246
+
247
+ .txt {
248
+ display: flex;
249
+
250
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-cr));
251
+
252
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-fy));
253
+
254
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se));
255
+
256
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-wt));
257
+
258
+ font-style: var(
259
+ --_sf-hr-ft-se-ic,
260
+ prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic)
261
+ );
262
+
263
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-tt-an));
264
+
265
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-lr-sg));
266
+
267
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-le-ht));
268
+
269
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
270
+ }
271
+
272
+ .icon {
273
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
274
+ svg {
275
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
276
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-se));
277
+
278
+ path {
279
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-ct-dt-se-in-c1));
280
+ }
281
+ }
282
+ }
283
+ [data-element-style="Text"] {
284
+ display: inline-block;
285
+ width: 100%;
286
+ }
287
+
288
+ .icon--hover {
289
+ // position: absolute;
290
+ // inset: 0;
291
+ // opacity: 0;
292
+ display: none;
293
+ transition: opacity 0.2s ease;
294
+ }
295
+
296
+ &:hover .icon--hover {
297
+ // opacity: 1;
298
+ display: flex;
299
+ }
300
+
301
+ &:hover .icon--default {
302
+ // opacity: 0;
303
+ display: none;
304
+ }
305
+ }
306
+
307
+ .btn__with__text[data-btn-name="buyNow"] {
308
+ &[data-show-shadow="false"] {
309
+ --_show-shadow: none;
310
+ }
311
+ &[data-icon-position="left"] {
312
+ --_sf-fd-bn: row;
313
+ }
314
+ &[data-icon-position="right"] {
315
+ --_sf-fd-bn: row-reverse;
316
+ }
317
+ &[data-icon-position="center"] {
318
+ --_sf-fd-bn: row;
319
+ }
320
+
321
+ &:hover {
322
+ --_sf-hr-bd-cr: var(
323
+ --_ctm-mob-dn-by-nw-hr-se-bd-cr,
324
+ var(--_ctm-tab-dn-by-nw-hr-se-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr))
325
+ );
326
+ --_sf-hr-br-cr: var(
327
+ --_ctm-mob-dn-by-nw-hr-se-br-cr,
328
+ var(--_ctm-tab-dn-by-nw-hr-se-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr))
329
+ );
330
+ --_sf-hr-br-se: var(
331
+ --_ctm-mob-dn-by-nw-hr-se-br-se,
332
+ var(--_ctm-tab-dn-by-nw-hr-se-br-se, var(--_ctm-dn-by-nw-hr-se-br-se))
333
+ );
334
+ --_sf-hr-br-wh: var(
335
+ --_ctm-mob-dn-by-nw-hr-se-br-wh,
336
+ var(--_ctm-tab-dn-by-nw-hr-se-br-wh, var(--_ctm-dn-by-nw-hr-se-br-wh))
337
+ );
338
+ --_sf-hr-br-rs: var(
339
+ --_ctm-mob-dn-by-nw-hr-se-br-rs,
340
+ var(--_ctm-tab-dn-by-nw-hr-se-br-rs, var(--_ctm-dn-by-nw-hr-se-br-rs))
341
+ );
342
+
343
+ --_sf-hr-at: var(
344
+ --_ctm-mob-dn-by-nw-hr-se-at,
345
+ var(--_ctm-tab-dn-by-nw-hr-se-at, var(--_ctm-dn-by-nw-hr-se-at))
346
+ );
347
+ --_sf-hr-gp: var(
348
+ --_ctm-mob-dn-by-nw-hr-se-gp,
349
+ var(--_ctm-tab-dn-by-nw-hr-se-gp, var(--_ctm-dn-by-nw-hr-se-gp))
350
+ );
351
+
352
+ // for shadow
353
+ --_sf-hr-sw-ae: var(
354
+ --_ctm-mob-dn-by-nw-hr-se-sw-ae,
355
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-ae, var(--_ctm-dn-by-nw-hr-se-sw-ae))
356
+ );
357
+ --_sf-hr-sw-br: var(
358
+ --_ctm-mob-dn-by-nw-hr-se-sw-br,
359
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-br, var(--_ctm-dn-by-nw-hr-se-sw-br))
360
+ );
361
+ --_sf-hr-sw-hr: var(
362
+ --_ctm-mob-dn-by-nw-hr-se-sw-hr,
363
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-hr, var(--_ctm-dn-by-nw-hr-se-sw-hr))
364
+ );
365
+ --_sf-hr-sw-cr: var(
366
+ --_ctm-mob-dn-by-nw-hr-se-sw-cr,
367
+ var(--_ctm-tab-dn-by-nw-hr-se-sw-cr, var(--_ctm-dn-by-nw-hr-se-sw-cr))
368
+ );
369
+
370
+ // for font
371
+
372
+ --_sf-hr-cr: var(
373
+ --_ctm-mob-dn-by-nw-hr-se-cr,
374
+ var(--_ctm-tab-dn-by-nw-hr-se-cr, var(--_ctm-dn-by-nw-hr-se-cr))
375
+ );
376
+ --_sf-hr-ft-fy: var(
377
+ --_ctm-mob-dn-by-nw-hr-se-ft-fy,
378
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-fy, var(--_ctm-dn-by-nw-hr-se-ft-fy))
379
+ );
380
+ --_sf-hr-ft-se: var(
381
+ --_ctm-mob-dn-by-nw-hr-se-ft-se,
382
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-se, var(--_ctm-dn-by-nw-hr-se-ft-se))
383
+ );
384
+ --_sf-hr-ft-wt: var(
385
+ --_ctm-mob-dn-by-nw-hr-se-ft-wt,
386
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-wt, var(--_ctm-dn-by-nw-hr-se-ft-wt))
387
+ );
388
+ --_sf-hr-ft-se-ic: var(
389
+ --_ctm-mob-dn-by-nw-hr-se-ft-se-ic,
390
+ var(--_ctm-tab-dn-by-nw-hr-se-ft-se-ic, var(--_ctm-dn-by-nw-hr-se-ft-se-ic))
391
+ );
392
+ --_sf-hr-tt-an: var(
393
+ --_ctm-mob-dn-by-nw-hr-se-tt-an,
394
+ var(--_ctm-tab-dn-by-nw-hr-se-tt-an, var(--_ctm-dn-by-nw-hr-se-tt-an))
395
+ );
396
+ --_sf-hr-lr-sg: var(
397
+ --_ctm-mob-dn-by-nw-hr-se-lr-sg,
398
+ var(--_ctm-tab-dn-by-nw-hr-se-lr-sg, var(--_ctm-dn-by-nw-hr-se-lr-sg))
399
+ );
400
+ --_sf-hr-le-ht: var(
401
+ --_ctm-mob-dn-by-nw-hr-se-le-ht,
402
+ var(--_ctm-tab-dn-by-nw-hr-se-le-ht, var(--_ctm-dn-by-nw-hr-se-le-ht))
403
+ );
404
+
405
+ --_sf-hr-in-se: var(
406
+ --_ctm-mob-dn-by-nw-hr-se-in-se,
407
+ var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
408
+ );
409
+ --_sf-hr-in-se: var(
410
+ --_ctm-mob-dn-by-nw-hr-se-in-se,
411
+ var(--_ctm-tab-dn-by-nw-hr-se-in-se, var(--_ctm-dn-by-nw-hr-se-in-se))
412
+ );
413
+ --_sf-hr-in-c1: var(
414
+ --_ctm-mob-dn-by-nw-hr-se-in-c1,
415
+ var(--_ctm-tab-dn-by-nw-hr-se-in-c1, var(--_ctm-dn-by-nw-hr-se-in-c1))
416
+ );
417
+ --_sf-hr-ue: var(
418
+ --_ctm-mob-dn-by-nw-hr-se-ue,
419
+ var(--_ctm-tab-dn-by-nw-hr-se-ue, var(--_ctm-dn-by-nw-hr-se-ue))
420
+ );
421
+
422
+ // for pading and width
423
+ --_sf-hr-pg: var(
424
+ --_ctm-mob-dn-by-nw-hr-pg,
425
+ var(--_ctm-tab-dn-by-nw-hr-pg, var(--_ctm-dn-by-nw-hr-pg))
426
+ );
427
+ --_sf-hr-wh: var(
428
+ --_ctm-mob-dn-by-nw-hr-wh,
429
+ var(--_ctm-tab-dn-by-nw-hr-wh, var(--_ctm-dn-by-nw-hr-wh))
430
+ );
431
+
432
+ &[data-hover-show-shadow="false"] {
433
+ --_hover-show-shadow: none;
434
+ }
435
+ &[data-hover-show-icon="false"] {
436
+ --_hover-show-icon: none;
437
+ }
438
+ }
439
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-bd-cr));
440
+
441
+ display: flex;
442
+ flex-direction: var(--_sf-fd-bn);
443
+ align-items: center;
444
+
445
+ justify-content: prepareMediaVariable(--_ctm-lt-tt-an);
446
+ gap: prepareMediaVariable(--_ctm-lt-gp);
447
+
448
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-at));
449
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-gp));
450
+
451
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-pg));
452
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-wh));
453
+
454
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-rs));
455
+
456
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-ae))
457
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-br))
458
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-sd))
459
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-sw-cr));
460
+
461
+ &[data-show-border="true"] {
462
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-cr));
463
+
464
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-se));
465
+
466
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-br-wh));
467
+ }
468
+
469
+ .txt {
470
+ display: flex;
471
+
472
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-cr));
473
+
474
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-fy));
475
+
476
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se));
477
+
478
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-wt));
479
+
480
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-ft-se-ic));
481
+
482
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-tt-an));
483
+
484
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-lr-sg));
485
+
486
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-le-ht));
487
+
488
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
489
+ }
490
+
491
+ .icon {
492
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
493
+ svg {
494
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
495
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-se));
496
+
497
+ path {
498
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-by-nw-dt-se-in-c1));
499
+ }
500
+ }
501
+ }
502
+ [data-element-style="Text"] {
503
+ display: inline-block;
504
+ width: 100%;
505
+ }
506
+
507
+ .icon--hover {
508
+ // position: absolute;
509
+ // inset: 0;
510
+ // opacity: 0;
511
+ display: none;
512
+ transition: opacity 0.2s ease;
513
+ }
514
+
515
+ &:hover .icon--hover {
516
+ // opacity: 1;
517
+ display: flex;
518
+ }
519
+
520
+ &:hover .icon--default {
521
+ // opacity: 0;
522
+ display: none;
523
+ }
524
+ }
525
+
526
+ .btn__with__text[data-btn-name="wishlist"] {
527
+ &[data-show-shadow="false"] {
528
+ --_show-shadow: none;
529
+ }
530
+ &[data-icon-position="left"] {
531
+ --_sf-fd-bn: row;
532
+ }
533
+ &[data-icon-position="right"] {
534
+ --_sf-fd-bn: row-reverse;
535
+ }
536
+ &[data-icon-position="center"] {
537
+ --_sf-fd-bn: row;
538
+ }
539
+
540
+ &:hover {
541
+ --_sf-hr-bd-cr: var(
542
+ --_ctm-mob-dn-wt-hr-se-bd-cr,
543
+ var(--_ctm-tab-dn-wt-hr-se-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr))
544
+ );
545
+ --_sf-hr-br-cr: var(
546
+ --_ctm-mob-dn-wt-hr-se-br-cr,
547
+ var(--_ctm-tab-dn-wt-hr-se-br-cr, var(--_ctm-dn-wt-hr-se-br-cr))
548
+ );
549
+ --_sf-hr-br-se: var(
550
+ --_ctm-mob-dn-wt-hr-se-br-se,
551
+ var(--_ctm-tab-dn-wt-hr-se-br-se, var(--_ctm-dn-wt-hr-se-br-se))
552
+ );
553
+ --_sf-hr-br-wh: var(
554
+ --_ctm-mob-dn-wt-hr-se-br-wh,
555
+ var(--_ctm-tab-dn-wt-hr-se-br-wh, var(--_ctm-dn-wt-hr-se-br-wh))
556
+ );
557
+ --_sf-hr-br-rs: var(
558
+ --_ctm-mob-dn-wt-hr-se-br-rs,
559
+ var(--_ctm-tab-dn-wt-hr-se-br-rs, var(--_ctm-dn-wt-hr-se-br-rs))
560
+ );
561
+
562
+ --_sf-hr-at: var(
563
+ --_ctm-mob-dn-wt-hr-se-at,
564
+ var(--_ctm-tab-dn-wt-hr-se-at, var(--_ctm-dn-wt-hr-se-at))
565
+ );
566
+ --_sf-hr-gp: var(
567
+ --_ctm-mob-dn-wt-hr-se-gp,
568
+ var(--_ctm-tab-dn-wt-hr-se-gp, var(--_ctm-dn-wt-hr-se-gp))
569
+ );
570
+
571
+ // for shadow
572
+ --_sf-hr-sw-ae: var(
573
+ --_ctm-mob-dn-wt-hr-se-sw-ae,
574
+ var(--_ctm-tab-dn-wt-hr-se-sw-ae, var(--_ctm-dn-wt-hr-se-sw-ae))
575
+ );
576
+ --_sf-hr-sw-br: var(
577
+ --_ctm-mob-dn-wt-hr-se-sw-br,
578
+ var(--_ctm-tab-dn-wt-hr-se-sw-br, var(--_ctm-dn-wt-hr-se-sw-br))
579
+ );
580
+ --_sf-hr-sw-hr: var(
581
+ --_ctm-mob-dn-wt-hr-se-sw-hr,
582
+ var(--_ctm-tab-dn-wt-hr-se-sw-hr, var(--_ctm-dn-wt-hr-se-sw-hr))
583
+ );
584
+ --_sf-hr-sw-cr: var(
585
+ --_ctm-mob-dn-wt-hr-se-sw-cr,
586
+ var(--_ctm-tab-dn-wt-hr-se-sw-cr, var(--_ctm-dn-wt-hr-se-sw-cr))
587
+ );
588
+
589
+ // for font
590
+
591
+ --_sf-hr-cr: var(
592
+ --_ctm-mob-dn-wt-hr-se-cr,
593
+ var(--_ctm-tab-dn-wt-hr-se-cr, var(--_ctm-dn-wt-hr-se-cr))
594
+ );
595
+ --_sf-hr-ft-fy: var(
596
+ --_ctm-mob-dn-wt-hr-se-ft-fy,
597
+ var(--_ctm-tab-dn-wt-hr-se-ft-fy, var(--_ctm-dn-wt-hr-se-ft-fy))
598
+ );
599
+ --_sf-hr-ft-se: var(
600
+ --_ctm-mob-dn-wt-hr-se-ft-se,
601
+ var(--_ctm-tab-dn-wt-hr-se-ft-se, var(--_ctm-dn-wt-hr-se-ft-se))
602
+ );
603
+ --_sf-hr-ft-wt: var(
604
+ --_ctm-mob-dn-wt-hr-se-ft-wt,
605
+ var(--_ctm-tab-dn-wt-hr-se-ft-wt, var(--_ctm-dn-wt-hr-se-ft-wt))
606
+ );
607
+ --_sf-hr-ft-se-ic: var(
608
+ --_ctm-mob-dn-wt-hr-se-ft-se-ic,
609
+ var(--_ctm-tab-dn-wt-hr-se-ft-se-ic, var(--_ctm-dn-wt-hr-se-ft-se-ic))
610
+ );
611
+ --_sf-hr-tt-an: var(
612
+ --_ctm-mob-dn-wt-hr-se-tt-an,
613
+ var(--_ctm-tab-dn-wt-hr-se-tt-an, var(--_ctm-dn-wt-hr-se-tt-an))
614
+ );
615
+ --_sf-hr-lr-sg: var(
616
+ --_ctm-mob-dn-wt-hr-se-lr-sg,
617
+ var(--_ctm-tab-dn-wt-hr-se-lr-sg, var(--_ctm-dn-wt-hr-se-lr-sg))
618
+ );
619
+ --_sf-hr-le-ht: var(
620
+ --_ctm-mob-dn-wt-hr-se-le-ht,
621
+ var(--_ctm-tab-dn-wt-hr-se-le-ht, var(--_ctm-dn-wt-hr-se-le-ht))
622
+ );
623
+
624
+ --_sf-hr-in-se: var(
625
+ --_ctm-mob-dn-wt-hr-se-in-se,
626
+ var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
627
+ );
628
+ --_sf-hr-in-se: var(
629
+ --_ctm-mob-dn-wt-hr-se-in-se,
630
+ var(--_ctm-tab-dn-wt-hr-se-in-se, var(--_ctm-dn-wt-hr-se-in-se))
631
+ );
632
+ --_sf-hr-in-c1: var(
633
+ --_ctm-mob-dn-wt-hr-se-in-c1,
634
+ var(--_ctm-tab-dn-wt-hr-se-in-c1, var(--_ctm-dn-wt-hr-se-in-c1))
635
+ );
636
+ --_sf-hr-ue: var(
637
+ --_ctm-mob-dn-wt-hr-se-ue,
638
+ var(--_ctm-tab-dn-wt-hr-se-ue, var(--_ctm-dn-wt-hr-se-ue))
639
+ );
640
+
641
+ // for pading and width
642
+ --_sf-hr-pg: var(
643
+ --_ctm-mob-dn-wt-hr-pg,
644
+ var(--_ctm-tab-dn-wt-hr-pg, var(--_ctm-dn-wt-hr-pg))
645
+ );
646
+ --_sf-hr-wh: var(
647
+ --_ctm-mob-dn-wt-hr-wh,
648
+ var(--_ctm-tab-dn-wt-hr-wh, var(--_ctm-dn-wt-hr-wh))
649
+ );
650
+
651
+ &[data-hover-show-shadow="false"] {
652
+ --_hover-show-shadow: none;
653
+ }
654
+ &[data-hover-show-icon="false"] {
655
+ --_hover-show-icon: none;
656
+ }
657
+ }
658
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-bd-cr));
659
+
660
+ display: flex;
661
+ flex-direction: var(--_sf-fd-bn);
662
+ align-items: center;
663
+
664
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-wt-dt-se-at));
665
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-wt-dt-se-gp));
666
+
667
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-wt-dt-se-pg));
668
+ // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-wh));
669
+ width: 100%;
670
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-rs));
671
+
672
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-ae))
673
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-br))
674
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-sd))
675
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-sw-cr));
676
+
677
+ &[data-show-border="true"] {
678
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-cr));
679
+
680
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-se));
681
+
682
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-wt-dt-se-br-wh));
683
+ }
684
+
685
+ .txt {
686
+ display: flex;
687
+
688
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-wt-dt-se-cr));
689
+
690
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-fy));
691
+
692
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se));
693
+
694
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-wt));
695
+
696
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-wt-dt-se-ft-se-ic));
697
+
698
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-wt-dt-se-tt-an));
699
+
700
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-wt-dt-se-lr-sg));
701
+
702
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-wt-dt-se-le-ht));
703
+
704
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
705
+ }
706
+
707
+ .icon {
708
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
709
+ svg {
710
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
711
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-se));
712
+
713
+ path {
714
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-wt-dt-se-in-c1));
715
+ }
716
+ }
717
+ }
718
+ [data-element-style="Text"] {
719
+ display: inline-block;
720
+ width: 100%;
721
+ }
722
+
723
+ .icon--hover {
724
+ // position: absolute;
725
+ // inset: 0;
726
+ // opacity: 0;
727
+ display: none;
728
+ transition: opacity 0.2s ease;
729
+ }
730
+
731
+ &:hover .icon--hover {
732
+ // opacity: 1;
733
+ display: flex;
734
+ }
735
+
736
+ &:hover .icon--default {
737
+ // opacity: 0;
738
+ display: none;
739
+ }
740
+ }
741
+ .btn__with__text[data-btn-name="compare"] {
742
+ &[data-show-shadow="false"] {
743
+ --_show-shadow: none;
744
+ }
745
+ &[data-icon-position="left"] {
746
+ --_sf-fd-bn: row;
747
+ }
748
+ &[data-icon-position="right"] {
749
+ --_sf-fd-bn: row-reverse;
750
+ }
751
+ &[data-icon-position="center"] {
752
+ --_sf-fd-bn: row;
753
+ }
754
+
755
+ &:hover {
756
+ --_sf-hr-bd-cr: var(
757
+ --_ctm-mob-dn-ce-hr-se-bd-cr,
758
+ var(--_ctm-tab-dn-ce-hr-se-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr))
759
+ );
760
+ --_sf-hr-br-cr: var(
761
+ --_ctm-mob-dn-ce-hr-se-br-cr,
762
+ var(--_ctm-tab-dn-ce-hr-se-br-cr, var(--_ctm-dn-ce-hr-se-br-cr))
763
+ );
764
+ --_sf-hr-br-se: var(
765
+ --_ctm-mob-dn-ce-hr-se-br-se,
766
+ var(--_ctm-tab-dn-ce-hr-se-br-se, var(--_ctm-dn-ce-hr-se-br-se))
767
+ );
768
+ --_sf-hr-br-wh: var(
769
+ --_ctm-mob-dn-ce-hr-se-br-wh,
770
+ var(--_ctm-tab-dn-ce-hr-se-br-wh, var(--_ctm-dn-ce-hr-se-br-wh))
771
+ );
772
+ --_sf-hr-br-rs: var(
773
+ --_ctm-mob-dn-ce-hr-se-br-rs,
774
+ var(--_ctm-tab-dn-ce-hr-se-br-rs, var(--_ctm-dn-ce-hr-se-br-rs))
775
+ );
776
+
777
+ --_sf-hr-at: var(
778
+ --_ctm-mob-dn-ce-hr-se-at,
779
+ var(--_ctm-tab-dn-ce-hr-se-at, var(--_ctm-dn-ce-hr-se-at))
780
+ );
781
+ --_sf-hr-gp: var(
782
+ --_ctm-mob-dn-ce-hr-se-gp,
783
+ var(--_ctm-tab-dn-ce-hr-se-gp, var(--_ctm-dn-ce-hr-se-gp))
784
+ );
785
+
786
+ // for shadow
787
+ --_sf-hr-sw-ae: var(
788
+ --_ctm-mob-dn-ce-hr-se-sw-ae,
789
+ var(--_ctm-tab-dn-ce-hr-se-sw-ae, var(--_ctm-dn-ce-hr-se-sw-ae))
790
+ );
791
+ --_sf-hr-sw-br: var(
792
+ --_ctm-mob-dn-ce-hr-se-sw-br,
793
+ var(--_ctm-tab-dn-ce-hr-se-sw-br, var(--_ctm-dn-ce-hr-se-sw-br))
794
+ );
795
+ --_sf-hr-sw-hr: var(
796
+ --_ctm-mob-dn-ce-hr-se-sw-hr,
797
+ var(--_ctm-tab-dn-ce-hr-se-sw-hr, var(--_ctm-dn-ce-hr-se-sw-hr))
798
+ );
799
+ --_sf-hr-sw-cr: var(
800
+ --_ctm-mob-dn-ce-hr-se-sw-cr,
801
+ var(--_ctm-tab-dn-ce-hr-se-sw-cr, var(--_ctm-dn-ce-hr-se-sw-cr))
802
+ );
803
+
804
+ // for font
805
+
806
+ --_sf-hr-cr: var(
807
+ --_ctm-mob-dn-ce-hr-se-cr,
808
+ var(--_ctm-tab-dn-ce-hr-se-cr, var(--_ctm-dn-ce-hr-se-cr))
809
+ );
810
+ --_sf-hr-ft-fy: var(
811
+ --_ctm-mob-dn-ce-hr-se-ft-fy,
812
+ var(--_ctm-tab-dn-ce-hr-se-ft-fy, var(--_ctm-dn-ce-hr-se-ft-fy))
813
+ );
814
+ --_sf-hr-ft-se: var(
815
+ --_ctm-mob-dn-ce-hr-se-ft-se,
816
+ var(--_ctm-tab-dn-ce-hr-se-ft-se, var(--_ctm-dn-ce-hr-se-ft-se))
817
+ );
818
+ --_sf-hr-ft-wt: var(
819
+ --_ctm-mob-dn-ce-hr-se-ft-wt,
820
+ var(--_ctm-tab-dn-ce-hr-se-ft-wt, var(--_ctm-dn-ce-hr-se-ft-wt))
821
+ );
822
+ --_sf-hr-ft-se-ic: var(
823
+ --_ctm-mob-dn-ce-hr-se-ft-se-ic,
824
+ var(--_ctm-tab-dn-ce-hr-se-ft-se-ic, var(--_ctm-dn-ce-hr-se-ft-se-ic))
825
+ );
826
+ --_sf-hr-tt-an: var(
827
+ --_ctm-mob-dn-ce-hr-se-tt-an,
828
+ var(--_ctm-tab-dn-ce-hr-se-tt-an, var(--_ctm-dn-ce-hr-se-tt-an))
829
+ );
830
+ --_sf-hr-lr-sg: var(
831
+ --_ctm-mob-dn-ce-hr-se-lr-sg,
832
+ var(--_ctm-tab-dn-ce-hr-se-lr-sg, var(--_ctm-dn-ce-hr-se-lr-sg))
833
+ );
834
+ --_sf-hr-le-ht: var(
835
+ --_ctm-mob-dn-ce-hr-se-le-ht,
836
+ var(--_ctm-tab-dn-ce-hr-se-le-ht, var(--_ctm-dn-ce-hr-se-le-ht))
837
+ );
838
+
839
+ --_sf-hr-in-se: var(
840
+ --_ctm-mob-dn-ce-hr-se-in-se,
841
+ var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
842
+ );
843
+ --_sf-hr-in-se: var(
844
+ --_ctm-mob-dn-ce-hr-se-in-se,
845
+ var(--_ctm-tab-dn-ce-hr-se-in-se, var(--_ctm-dn-ce-hr-se-in-se))
846
+ );
847
+ --_sf-hr-in-c1: var(
848
+ --_ctm-mob-dn-ce-hr-se-in-c1,
849
+ var(--_ctm-tab-dn-ce-hr-se-in-c1, var(--_ctm-dn-ce-hr-se-in-c1))
850
+ );
851
+ --_sf-hr-ue: var(
852
+ --_ctm-mob-dn-ce-hr-se-ue,
853
+ var(--_ctm-tab-dn-ce-hr-se-ue, var(--_ctm-dn-ce-hr-se-ue))
854
+ );
855
+
856
+ // for pading and width
857
+ --_sf-hr-pg: var(
858
+ --_ctm-mob-dn-ce-hr-pg,
859
+ var(--_ctm-tab-dn-ce-hr-pg, var(--_ctm-dn-ce-hr-pg))
860
+ );
861
+ --_sf-hr-wh: var(
862
+ --_ctm-mob-dn-ce-hr-wh,
863
+ var(--_ctm-tab-dn-ce-hr-wh, var(--_ctm-dn-ce-hr-wh))
864
+ );
865
+
866
+ &[data-hover-show-shadow="false"] {
867
+ --_hover-show-shadow: none;
868
+ }
869
+ &[data-hover-show-icon="false"] {
870
+ --_hover-show-icon: none;
871
+ }
872
+ }
873
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-bd-cr));
874
+
875
+ display: flex;
876
+ flex-direction: var(--_sf-fd-bn);
877
+ align-items: center;
878
+
879
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ce-dt-se-at));
880
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ce-dt-se-gp));
881
+
882
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ce-dt-se-pg));
883
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-wh));
884
+
885
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-rs));
886
+
887
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-ae))
888
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-br))
889
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-sd))
890
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-sw-cr));
891
+
892
+ &[data-show-border="true"] {
893
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-cr));
894
+
895
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-se));
896
+
897
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ce-dt-se-br-wh));
898
+ }
899
+
900
+ .txt {
901
+ display: flex;
902
+
903
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ce-dt-se-cr));
904
+
905
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-fy));
906
+
907
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se));
908
+
909
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-wt));
910
+
911
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ce-dt-se-ft-se-ic));
912
+
913
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ce-dt-se-tt-an));
914
+
915
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ce-dt-se-lr-sg));
916
+
917
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ce-dt-se-le-ht));
918
+
919
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
920
+ }
921
+
922
+ .icon {
923
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
924
+ svg {
925
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
926
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-se));
927
+
928
+ path {
929
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ce-dt-se-in-c1));
930
+ }
931
+ }
932
+ }
933
+ [data-element-style="Text"] {
934
+ display: inline-block;
935
+ width: 100%;
936
+ }
937
+
938
+ .icon--hover {
939
+ // position: absolute;
940
+ // inset: 0;
941
+ // opacity: 0;
942
+ display: none;
943
+ transition: opacity 0.2s ease;
944
+ }
945
+
946
+ &:hover .icon--hover {
947
+ // opacity: 1;
948
+ display: flex;
949
+ }
950
+
951
+ &:hover .icon--default {
952
+ // opacity: 0;
953
+ display: none;
954
+ }
955
+ }
956
+ .btn__with__text[data-btn-name="addToQuote"] {
957
+ &[data-show-shadow="false"] {
958
+ --_show-shadow: none;
959
+ }
960
+ &[data-icon-position="left"] {
961
+ --_sf-fd-bn: row;
962
+ }
963
+ &[data-icon-position="right"] {
964
+ --_sf-fd-bn: row-reverse;
965
+ }
966
+ &[data-icon-position="center"] {
967
+ --_sf-fd-bn: row;
968
+ }
969
+
970
+ &:hover {
971
+ --_sf-hr-bd-cr: var(
972
+ --_ctm-mob-dn-ad-to-qe-hr-se-bd-cr,
973
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr))
974
+ );
975
+ --_sf-hr-br-cr: var(
976
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-cr,
977
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr))
978
+ );
979
+ --_sf-hr-br-se: var(
980
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-se,
981
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se))
982
+ );
983
+ --_sf-hr-br-wh: var(
984
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-wh,
985
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-wh, var(--_ctm-dn-ad-to-qe-hr-se-br-wh))
986
+ );
987
+ --_sf-hr-br-rs: var(
988
+ --_ctm-mob-dn-ad-to-qe-hr-se-br-rs,
989
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-br-rs, var(--_ctm-dn-ad-to-qe-hr-se-br-rs))
990
+ );
991
+
992
+ --_sf-hr-at: var(
993
+ --_ctm-mob-dn-ad-to-qe-hr-se-at,
994
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-at, var(--_ctm-dn-ad-to-qe-hr-se-at))
995
+ );
996
+ --_sf-hr-gp: var(
997
+ --_ctm-mob-dn-ad-to-qe-hr-se-gp,
998
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-gp, var(--_ctm-dn-ad-to-qe-hr-se-gp))
999
+ );
1000
+
1001
+ // for shadow
1002
+ --_sf-hr-sw-ae: var(
1003
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-ae,
1004
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-ae, var(--_ctm-dn-ad-to-qe-hr-se-sw-ae))
1005
+ );
1006
+ --_sf-hr-sw-br: var(
1007
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-br,
1008
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-br, var(--_ctm-dn-ad-to-qe-hr-se-sw-br))
1009
+ );
1010
+ --_sf-hr-sw-hr: var(
1011
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-hr,
1012
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-hr, var(--_ctm-dn-ad-to-qe-hr-se-sw-hr))
1013
+ );
1014
+ --_sf-hr-sw-cr: var(
1015
+ --_ctm-mob-dn-ad-to-qe-hr-se-sw-cr,
1016
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-sw-cr, var(--_ctm-dn-ad-to-qe-hr-se-sw-cr))
1017
+ );
1018
+
1019
+ // for font
1020
+
1021
+ --_sf-hr-cr: var(
1022
+ --_ctm-mob-dn-ad-to-qe-hr-se-cr,
1023
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-cr, var(--_ctm-dn-ad-to-qe-hr-se-cr))
1024
+ );
1025
+ --_sf-hr-ft-fy: var(
1026
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-fy,
1027
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-fy, var(--_ctm-dn-ad-to-qe-hr-se-ft-fy))
1028
+ );
1029
+ --_sf-hr-ft-se: var(
1030
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-se,
1031
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se, var(--_ctm-dn-ad-to-qe-hr-se-ft-se))
1032
+ );
1033
+ --_sf-hr-ft-wt: var(
1034
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-wt,
1035
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-wt, var(--_ctm-dn-ad-to-qe-hr-se-ft-wt))
1036
+ );
1037
+ --_sf-hr-ft-se-ic: var(
1038
+ --_ctm-mob-dn-ad-to-qe-hr-se-ft-se-ic,
1039
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic))
1040
+ );
1041
+ --_sf-hr-tt-an: var(
1042
+ --_ctm-mob-dn-ad-to-qe-hr-se-tt-an,
1043
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-tt-an, var(--_ctm-dn-ad-to-qe-hr-se-tt-an))
1044
+ );
1045
+ --_sf-hr-lr-sg: var(
1046
+ --_ctm-mob-dn-ad-to-qe-hr-se-lr-sg,
1047
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-lr-sg, var(--_ctm-dn-ad-to-qe-hr-se-lr-sg))
1048
+ );
1049
+ --_sf-hr-le-ht: var(
1050
+ --_ctm-mob-dn-ad-to-qe-hr-se-le-ht,
1051
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-le-ht, var(--_ctm-dn-ad-to-qe-hr-se-le-ht))
1052
+ );
1053
+
1054
+ --_sf-hr-in-se: var(
1055
+ --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1056
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1057
+ );
1058
+ --_sf-hr-in-se: var(
1059
+ --_ctm-mob-dn-ad-to-qe-hr-se-in-se,
1060
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-se, var(--_ctm-dn-ad-to-qe-hr-se-in-se))
1061
+ );
1062
+ --_sf-hr-in-c1: var(
1063
+ --_ctm-mob-dn-ad-to-qe-hr-se-in-c1,
1064
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-in-c1, var(--_ctm-dn-ad-to-qe-hr-se-in-c1))
1065
+ );
1066
+ --_sf-hr-ue: var(
1067
+ --_ctm-mob-dn-ad-to-qe-hr-se-ue,
1068
+ var(--_ctm-tab-dn-ad-to-qe-hr-se-ue, var(--_ctm-dn-ad-to-qe-hr-se-ue))
1069
+ );
1070
+
1071
+ // for pading and width
1072
+ --_sf-hr-pg: var(
1073
+ --_ctm-mob-dn-ad-to-qe-hr-pg,
1074
+ var(--_ctm-tab-dn-ad-to-qe-hr-pg, var(--_ctm-dn-ad-to-qe-hr-pg))
1075
+ );
1076
+ --_sf-hr-wh: var(
1077
+ --_ctm-mob-dn-ad-to-qe-hr-wh,
1078
+ var(--_ctm-tab-dn-ad-to-qe-hr-wh, var(--_ctm-dn-ad-to-qe-hr-wh))
1079
+ );
1080
+
1081
+ &[data-hover-show-shadow="false"] {
1082
+ --_hover-show-shadow: none;
1083
+ }
1084
+ &[data-hover-show-icon="false"] {
1085
+ --_hover-show-icon: none;
1086
+ }
1087
+ }
1088
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-bd-cr));
1089
+
1090
+ display: flex;
1091
+ flex-direction: var(--_sf-fd-bn);
1092
+ align-items: center;
1093
+
1094
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-at));
1095
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-gp));
1096
+
1097
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-pg));
1098
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-wh));
1099
+
1100
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-rs));
1101
+
1102
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-ae))
1103
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-br))
1104
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-sd))
1105
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-sw-cr));
1106
+
1107
+ &[data-show-border="true"] {
1108
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-cr));
1109
+
1110
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-se));
1111
+
1112
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-br-wh));
1113
+ }
1114
+
1115
+ .txt {
1116
+ display: flex;
1117
+
1118
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-cr));
1119
+
1120
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-fy));
1121
+
1122
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se));
1123
+
1124
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-wt));
1125
+
1126
+ font-style: var(
1127
+ --_sf-hr-ft-se-ic,
1128
+ prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic)
1129
+ );
1130
+
1131
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-tt-an));
1132
+
1133
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-lr-sg));
1134
+
1135
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-le-ht));
1136
+
1137
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1138
+ }
1139
+
1140
+ .icon {
1141
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1142
+ svg {
1143
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1144
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-se));
1145
+
1146
+ path {
1147
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-qe-dt-se-in-c1));
1148
+ }
1149
+ }
1150
+ }
1151
+ [data-element-style="Text"] {
1152
+ display: inline-block;
1153
+ width: 100%;
1154
+ }
1155
+
1156
+ .icon--hover {
1157
+ // position: absolute;
1158
+ // inset: 0;
1159
+ // opacity: 0;
1160
+ display: none;
1161
+ transition: opacity 0.2s ease;
1162
+ }
1163
+
1164
+ &:hover .icon--hover {
1165
+ // opacity: 1;
1166
+ display: flex;
1167
+ }
1168
+
1169
+ &:hover .icon--default {
1170
+ // opacity: 0;
1171
+ display: none;
1172
+ }
1173
+ }
1174
+ .btn__with__text[data-btn-name="addToOrderTemplate"] {
1175
+ &[data-show-shadow="false"] {
1176
+ --_show-shadow: none;
1177
+ }
1178
+ &[data-icon-position="left"] {
1179
+ --_sf-fd-bn: row;
1180
+ }
1181
+ &[data-icon-position="right"] {
1182
+ --_sf-fd-bn: row-reverse;
1183
+ }
1184
+ &[data-icon-position="center"] {
1185
+ --_sf-fd-bn: row;
1186
+ }
1187
+
1188
+ &:hover {
1189
+ --_sf-hr-bd-cr: var(
1190
+ --_ctm-mob-dn-ad-to-or-te-hr-se-bd-cr,
1191
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr))
1192
+ );
1193
+ --_sf-hr-br-cr: var(
1194
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-cr,
1195
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr))
1196
+ );
1197
+ --_sf-hr-br-se: var(
1198
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-se,
1199
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se))
1200
+ );
1201
+ --_sf-hr-br-wh: var(
1202
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-wh,
1203
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-wh, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh))
1204
+ );
1205
+ --_sf-hr-br-rs: var(
1206
+ --_ctm-mob-dn-ad-to-or-te-hr-se-br-rs,
1207
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-br-rs, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs))
1208
+ );
1209
+
1210
+ --_sf-hr-at: var(
1211
+ --_ctm-mob-dn-ad-to-or-te-hr-se-at,
1212
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-at, var(--_ctm-dn-ad-to-or-te-hr-se-at))
1213
+ );
1214
+ --_sf-hr-gp: var(
1215
+ --_ctm-mob-dn-ad-to-or-te-hr-se-gp,
1216
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-gp, var(--_ctm-dn-ad-to-or-te-hr-se-gp))
1217
+ );
1218
+
1219
+ // for shadow
1220
+ --_sf-hr-sw-ae: var(
1221
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-ae,
1222
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-ae, var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae))
1223
+ );
1224
+ --_sf-hr-sw-br: var(
1225
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-br,
1226
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-br, var(--_ctm-dn-ad-to-or-te-hr-se-sw-br))
1227
+ );
1228
+ --_sf-hr-sw-hr: var(
1229
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-hr,
1230
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-hr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-hr))
1231
+ );
1232
+ --_sf-hr-sw-cr: var(
1233
+ --_ctm-mob-dn-ad-to-or-te-hr-se-sw-cr,
1234
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-sw-cr, var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr))
1235
+ );
1236
+
1237
+ // for font
1238
+
1239
+ --_sf-hr-cr: var(
1240
+ --_ctm-mob-dn-ad-to-or-te-hr-se-cr,
1241
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-cr, var(--_ctm-dn-ad-to-or-te-hr-se-cr))
1242
+ );
1243
+ --_sf-hr-ft-fy: var(
1244
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-fy,
1245
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-fy, var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy))
1246
+ );
1247
+ --_sf-hr-ft-se: var(
1248
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se,
1249
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se))
1250
+ );
1251
+ --_sf-hr-ft-wt: var(
1252
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-wt,
1253
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-wt, var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt))
1254
+ );
1255
+ --_sf-hr-ft-se-ic: var(
1256
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ft-se-ic,
1257
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ft-se-ic, var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic))
1258
+ );
1259
+ --_sf-hr-tt-an: var(
1260
+ --_ctm-mob-dn-ad-to-or-te-hr-se-tt-an,
1261
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-tt-an, var(--_ctm-dn-ad-to-or-te-hr-se-tt-an))
1262
+ );
1263
+ --_sf-hr-lr-sg: var(
1264
+ --_ctm-mob-dn-ad-to-or-te-hr-se-lr-sg,
1265
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-lr-sg, var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg))
1266
+ );
1267
+ --_sf-hr-le-ht: var(
1268
+ --_ctm-mob-dn-ad-to-or-te-hr-se-le-ht,
1269
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-le-ht, var(--_ctm-dn-ad-to-or-te-hr-se-le-ht))
1270
+ );
1271
+
1272
+ --_sf-hr-in-se: var(
1273
+ --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1274
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1275
+ );
1276
+ --_sf-hr-in-se: var(
1277
+ --_ctm-mob-dn-ad-to-or-te-hr-se-in-se,
1278
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-se, var(--_ctm-dn-ad-to-or-te-hr-se-in-se))
1279
+ );
1280
+ --_sf-hr-in-c1: var(
1281
+ --_ctm-mob-dn-ad-to-or-te-hr-se-in-c1,
1282
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-in-c1, var(--_ctm-dn-ad-to-or-te-hr-se-in-c1))
1283
+ );
1284
+ --_sf-hr-ue: var(
1285
+ --_ctm-mob-dn-ad-to-or-te-hr-se-ue,
1286
+ var(--_ctm-tab-dn-ad-to-or-te-hr-se-ue, var(--_ctm-dn-ad-to-or-te-hr-se-ue))
1287
+ );
1288
+
1289
+ // for pading and width
1290
+ --_sf-hr-pg: var(
1291
+ --_ctm-mob-dn-ad-to-or-te-hr-pg,
1292
+ var(--_ctm-tab-dn-ad-to-or-te-hr-pg, var(--_ctm-dn-ad-to-or-te-hr-pg))
1293
+ );
1294
+ --_sf-hr-wh: var(
1295
+ --_ctm-mob-dn-ad-to-or-te-hr-wh,
1296
+ var(--_ctm-tab-dn-ad-to-or-te-hr-wh, var(--_ctm-dn-ad-to-or-te-hr-wh))
1297
+ );
1298
+ &[data-hover-show-shadow="false"] {
1299
+ --_hover-show-shadow: none;
1300
+ }
1301
+ &[data-hover-show-icon="false"] {
1302
+ --_hover-show-icon: none;
1303
+ }
1304
+ }
1305
+ background-color: var(
1306
+ --_sf-hr-bd-cr,
1307
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-bd-cr)
1308
+ );
1309
+
1310
+ padding: 5px 10px;
1311
+ display: flex;
1312
+ flex-direction: var(--_sf-fd-bn);
1313
+ align-items: center;
1314
+
1315
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-at));
1316
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-gp));
1317
+
1318
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-pg));
1319
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-wh));
1320
+
1321
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-rs));
1322
+
1323
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-ae))
1324
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-br))
1325
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-sd))
1326
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-sw-cr));
1327
+
1328
+ &[data-show-border="true"] {
1329
+ border-color: var(
1330
+ --_sf-hr-br-cr,
1331
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-cr)
1332
+ );
1333
+
1334
+ border-style: var(
1335
+ --_sf-hr-br-se,
1336
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-se)
1337
+ );
1338
+
1339
+ border-width: var(
1340
+ --_sf-hr-br-wh,
1341
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-br-wh)
1342
+ );
1343
+ }
1344
+
1345
+ .txt {
1346
+ display: flex;
1347
+
1348
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-cr));
1349
+
1350
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-fy));
1351
+
1352
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se));
1353
+
1354
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-wt));
1355
+
1356
+ font-style: var(
1357
+ --_sf-hr-ft-se-ic,
1358
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic)
1359
+ );
1360
+
1361
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-tt-an));
1362
+
1363
+ letter-spacing: var(
1364
+ --_sf-hr-lr-sg,
1365
+ prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-lr-sg)
1366
+ );
1367
+
1368
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-le-ht));
1369
+
1370
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1371
+ }
1372
+
1373
+ .icon {
1374
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1375
+ svg {
1376
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1377
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-se));
1378
+
1379
+ path {
1380
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ad-to-or-te-dt-se-in-c1));
1381
+ }
1382
+ }
1383
+ }
1384
+ [data-element-style="Text"] {
1385
+ display: inline-block;
1386
+ width: 100%;
1387
+ }
1388
+
1389
+ .icon--hover {
1390
+ // position: absolute;
1391
+ // inset: 0;
1392
+ // opacity: 0;
1393
+ display: none;
1394
+ transition: opacity 0.2s ease;
1395
+ }
1396
+
1397
+ &:hover .icon--hover {
1398
+ // opacity: 1;
1399
+ display: flex;
1400
+ }
1401
+
1402
+ &:hover .icon--default {
1403
+ // opacity: 0;
1404
+ display: none;
1405
+ }
1406
+ }
1407
+ .btn__with__text[data-btn-name="notifyMe"] {
1408
+ &[data-show-shadow="false"] {
1409
+ --_show-shadow: none;
1410
+ }
1411
+ &[data-icon-position="left"] {
1412
+ --_sf-fd-bn: row;
1413
+ }
1414
+ &[data-icon-position="right"] {
1415
+ --_sf-fd-bn: row-reverse;
1416
+ }
1417
+ &[data-icon-position="center"] {
1418
+ --_sf-fd-bn: row;
1419
+ }
1420
+
1421
+ &:hover {
1422
+ --_sf-hr-bd-cr: var(
1423
+ --_ctm-mob-dn-ny-me-hr-se-bd-cr,
1424
+ var(--_ctm-tab-dn-ny-me-hr-se-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr))
1425
+ );
1426
+ --_sf-hr-br-cr: var(
1427
+ --_ctm-mob-dn-ny-me-hr-se-br-cr,
1428
+ var(--_ctm-tab-dn-ny-me-hr-se-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr))
1429
+ );
1430
+ --_sf-hr-br-se: var(
1431
+ --_ctm-mob-dn-ny-me-hr-se-br-se,
1432
+ var(--_ctm-tab-dn-ny-me-hr-se-br-se, var(--_ctm-dn-ny-me-hr-se-br-se))
1433
+ );
1434
+ --_sf-hr-br-wh: var(
1435
+ --_ctm-mob-dn-ny-me-hr-se-br-wh,
1436
+ var(--_ctm-tab-dn-ny-me-hr-se-br-wh, var(--_ctm-dn-ny-me-hr-se-br-wh))
1437
+ );
1438
+ --_sf-hr-br-rs: var(
1439
+ --_ctm-mob-dn-ny-me-hr-se-br-rs,
1440
+ var(--_ctm-tab-dn-ny-me-hr-se-br-rs, var(--_ctm-dn-ny-me-hr-se-br-rs))
1441
+ );
1442
+ --_sf-hr-at: var(
1443
+ --_ctm-mob-dn-ny-me-hr-se-at,
1444
+ var(--_ctm-tab-dn-ny-me-hr-se-at, var(--_ctm-dn-ny-me-hr-se-at))
1445
+ );
1446
+ --_sf-hr-gp: var(
1447
+ --_ctm-mob-dn-ny-me-hr-se-gp,
1448
+ var(--_ctm-tab-dn-ny-me-hr-se-gp, var(--_ctm-dn-ny-me-hr-se-gp))
1449
+ );
1450
+
1451
+ // for shadow
1452
+ --_sf-hr-sw-ae: var(
1453
+ --_ctm-mob-dn-ny-me-hr-se-sw-ae,
1454
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-ae, var(--_ctm-dn-ny-me-hr-se-sw-ae))
1455
+ );
1456
+ --_sf-hr-sw-br: var(
1457
+ --_ctm-mob-dn-ny-me-hr-se-sw-br,
1458
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-br, var(--_ctm-dn-ny-me-hr-se-sw-br))
1459
+ );
1460
+ --_sf-hr-sw-hr: var(
1461
+ --_ctm-mob-dn-ny-me-hr-se-sw-hr,
1462
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-hr, var(--_ctm-dn-ny-me-hr-se-sw-hr))
1463
+ );
1464
+ --_sf-hr-sw-cr: var(
1465
+ --_ctm-mob-dn-ny-me-hr-se-sw-cr,
1466
+ var(--_ctm-tab-dn-ny-me-hr-se-sw-cr, var(--_ctm-dn-ny-me-hr-se-sw-cr))
1467
+ );
1468
+
1469
+ // for font
1470
+
1471
+ --_sf-hr-cr: var(
1472
+ --_ctm-mob-dn-ny-me-hr-se-cr,
1473
+ var(--_ctm-tab-dn-ny-me-hr-se-cr, var(--_ctm-dn-ny-me-hr-se-cr))
1474
+ );
1475
+ --_sf-hr-ft-fy: var(
1476
+ --_ctm-mob-dn-ny-me-hr-se-ft-fy,
1477
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-fy, var(--_ctm-dn-ny-me-hr-se-ft-fy))
1478
+ );
1479
+ --_sf-hr-ft-se: var(
1480
+ --_ctm-mob-dn-ny-me-hr-se-ft-se,
1481
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se, var(--_ctm-dn-ny-me-hr-se-ft-se))
1482
+ );
1483
+ --_sf-hr-ft-wt: var(
1484
+ --_ctm-mob-dn-ny-me-hr-se-ft-wt,
1485
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-wt, var(--_ctm-dn-ny-me-hr-se-ft-wt))
1486
+ );
1487
+ --_sf-hr-ft-se-ic: var(
1488
+ --_ctm-mob-dn-ny-me-hr-se-ft-se-ic,
1489
+ var(--_ctm-tab-dn-ny-me-hr-se-ft-se-ic, var(--_ctm-dn-ny-me-hr-se-ft-se-ic))
1490
+ );
1491
+ --_sf-hr-tt-an: var(
1492
+ --_ctm-mob-dn-ny-me-hr-se-tt-an,
1493
+ var(--_ctm-tab-dn-ny-me-hr-se-tt-an, var(--_ctm-dn-ny-me-hr-se-tt-an))
1494
+ );
1495
+ --_sf-hr-lr-sg: var(
1496
+ --_ctm-mob-dn-ny-me-hr-se-lr-sg,
1497
+ var(--_ctm-tab-dn-ny-me-hr-se-lr-sg, var(--_ctm-dn-ny-me-hr-se-lr-sg))
1498
+ );
1499
+ --_sf-hr-le-ht: var(
1500
+ --_ctm-mob-dn-ny-me-hr-se-le-ht,
1501
+ var(--_ctm-tab-dn-ny-me-hr-se-le-ht, var(--_ctm-dn-ny-me-hr-se-le-ht))
1502
+ );
1503
+
1504
+ --_sf-hr-in-se: var(
1505
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
1506
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1507
+ );
1508
+ --_sf-hr-in-se: var(
1509
+ --_ctm-mob-dn-ny-me-hr-se-in-se,
1510
+ var(--_ctm-tab-dn-ny-me-hr-se-in-se, var(--_ctm-dn-ny-me-hr-se-in-se))
1511
+ );
1512
+ --_sf-hr-in-c1: var(
1513
+ --_ctm-mob-dn-ny-me-hr-se-in-c1,
1514
+ var(--_ctm-tab-dn-ny-me-hr-se-in-c1, var(--_ctm-dn-ny-me-hr-se-in-c1))
1515
+ );
1516
+ --_sf-hr-ue: var(
1517
+ --_ctm-mob-dn-ny-me-hr-se-ue,
1518
+ var(--_ctm-tab-dn-ny-me-hr-se-ue, var(--_ctm-dn-ny-me-hr-se-ue))
1519
+ );
1520
+
1521
+ // for pading and width
1522
+ --_sf-hr-pg: var(
1523
+ --_ctm-mob-dn-ny-me-hr-pg,
1524
+ var(--_ctm-tab-dn-ny-me-hr-pg, var(--_ctm-dn-ny-me-hr-pg))
1525
+ );
1526
+ --_sf-hr-wh: var(
1527
+ --_ctm-mob-dn-ny-me-hr-wh,
1528
+ var(--_ctm-tab-dn-ny-me-hr-wh, var(--_ctm-dn-ny-me-hr-wh))
1529
+ );
1530
+
1531
+ &[data-hover-show-shadow="false"] {
1532
+ --_hover-show-shadow: none;
1533
+ }
1534
+ &[data-hover-show-icon="false"] {
1535
+ --_hover-show-icon: none;
1536
+ }
1537
+ }
1538
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-bd-cr));
1539
+
1540
+ display: flex;
1541
+ flex-direction: var(--_sf-fd-bn);
1542
+ align-items: center;
1543
+
1544
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-at));
1545
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-gp));
1546
+
1547
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-pg));
1548
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-wh));
1549
+
1550
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-rs));
1551
+
1552
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-ae))
1553
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-br))
1554
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-sd))
1555
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-sw-cr));
1556
+
1557
+ &[data-show-border="true"] {
1558
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-cr));
1559
+
1560
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-se));
1561
+
1562
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-br-wh));
1563
+ }
1564
+
1565
+ .txt {
1566
+ display: flex;
1567
+
1568
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-cr));
1569
+
1570
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-fy));
1571
+
1572
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se));
1573
+
1574
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-wt));
1575
+
1576
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-ft-se-ic));
1577
+
1578
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-tt-an));
1579
+
1580
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-lr-sg));
1581
+
1582
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-le-ht));
1583
+
1584
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1585
+ }
1586
+
1587
+ .icon {
1588
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1589
+ svg {
1590
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1591
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-se));
1592
+
1593
+ path {
1594
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ny-me-dt-se-in-c1));
1595
+ }
1596
+ }
1597
+ }
1598
+ [data-element-style="Text"] {
1599
+ display: inline-block;
1600
+ width: 100%;
1601
+ }
1602
+
1603
+ .icon--hover {
1604
+ // position: absolute;
1605
+ // inset: 0;
1606
+ // opacity: 0;
1607
+ display: none;
1608
+ transition: opacity 0.2s ease;
1609
+ }
1610
+
1611
+ &:hover .icon--hover {
1612
+ // opacity: 1;
1613
+ display: flex;
1614
+ }
1615
+
1616
+ &:hover .icon--default {
1617
+ // opacity: 0;
1618
+ display: none;
1619
+ }
1620
+ }
1621
+ .btn__with__text[data-btn-name="download"] {
1622
+ &[data-show-shadow="false"] {
1623
+ --_show-shadow: none;
1624
+ }
1625
+ &[data-icon-position="left"] {
1626
+ --_sf-fd-bn: row;
1627
+ }
1628
+ &[data-icon-position="right"] {
1629
+ --_sf-fd-bn: row-reverse;
1630
+ }
1631
+ &[data-icon-position="center"] {
1632
+ --_sf-fd-bn: row;
1633
+ }
1634
+
1635
+ &:hover {
1636
+ --_sf-hr-bd-cr: var(
1637
+ --_ctm-mob-dn-dd-hr-se-bd-cr,
1638
+ var(--_ctm-tab-dn-dd-hr-se-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr))
1639
+ );
1640
+ --_sf-hr-br-cr: var(
1641
+ --_ctm-mob-dn-dd-hr-se-br-cr,
1642
+ var(--_ctm-tab-dn-dd-hr-se-br-cr, var(--_ctm-dn-dd-hr-se-br-cr))
1643
+ );
1644
+ --_sf-hr-br-se: var(
1645
+ --_ctm-mob-dn-dd-hr-se-br-se,
1646
+ var(--_ctm-tab-dn-dd-hr-se-br-se, var(--_ctm-dn-dd-hr-se-br-se))
1647
+ );
1648
+ --_sf-hr-br-wh: var(
1649
+ --_ctm-mob-dn-dd-hr-se-br-wh,
1650
+ var(--_ctm-tab-dn-dd-hr-se-br-wh, var(--_ctm-dn-dd-hr-se-br-wh))
1651
+ );
1652
+ --_sf-hr-br-rs: var(
1653
+ --_ctm-mob-dn-dd-hr-se-br-rs,
1654
+ var(--_ctm-tab-dn-dd-hr-se-br-rs, var(--_ctm-dn-dd-hr-se-br-rs))
1655
+ );
1656
+ --_sf-hr-at: var(
1657
+ --_ctm-mob-dn-dd-hr-se-at,
1658
+ var(--_ctm-tab-dn-dd-hr-se-at, var(--_ctm-dn-dd-hr-se-at))
1659
+ );
1660
+ --_sf-hr-gp: var(
1661
+ --_ctm-mob-dn-dd-hr-se-gp,
1662
+ var(--_ctm-tab-dn-dd-hr-se-gp, var(--_ctm-dn-dd-hr-se-gp))
1663
+ );
1664
+
1665
+ // for shadow
1666
+ --_sf-hr-sw-ae: var(
1667
+ --_ctm-mob-dn-dd-hr-se-sw-ae,
1668
+ var(--_ctm-tab-dn-dd-hr-se-sw-ae, var(--_ctm-dn-dd-hr-se-sw-ae))
1669
+ );
1670
+ --_sf-hr-sw-br: var(
1671
+ --_ctm-mob-dn-dd-hr-se-sw-br,
1672
+ var(--_ctm-tab-dn-dd-hr-se-sw-br, var(--_ctm-dn-dd-hr-se-sw-br))
1673
+ );
1674
+ --_sf-hr-sw-hr: var(
1675
+ --_ctm-mob-dn-dd-hr-se-sw-hr,
1676
+ var(--_ctm-tab-dn-dd-hr-se-sw-hr, var(--_ctm-dn-dd-hr-se-sw-hr))
1677
+ );
1678
+ --_sf-hr-sw-cr: var(
1679
+ --_ctm-mob-dn-dd-hr-se-sw-cr,
1680
+ var(--_ctm-tab-dn-dd-hr-se-sw-cr, var(--_ctm-dn-dd-hr-se-sw-cr))
1681
+ );
1682
+
1683
+ // for font
1684
+
1685
+ --_sf-hr-cr: var(
1686
+ --_ctm-mob-dn-dd-hr-se-cr,
1687
+ var(--_ctm-tab-dn-dd-hr-se-cr, var(--_ctm-dn-dd-hr-se-cr))
1688
+ );
1689
+ --_sf-hr-ft-fy: var(
1690
+ --_ctm-mob-dn-dd-hr-se-ft-fy,
1691
+ var(--_ctm-tab-dn-dd-hr-se-ft-fy, var(--_ctm-dn-dd-hr-se-ft-fy))
1692
+ );
1693
+ --_sf-hr-ft-se: var(
1694
+ --_ctm-mob-dn-dd-hr-se-ft-se,
1695
+ var(--_ctm-tab-dn-dd-hr-se-ft-se, var(--_ctm-dn-dd-hr-se-ft-se))
1696
+ );
1697
+ --_sf-hr-ft-wt: var(
1698
+ --_ctm-mob-dn-dd-hr-se-ft-wt,
1699
+ var(--_ctm-tab-dn-dd-hr-se-ft-wt, var(--_ctm-dn-dd-hr-se-ft-wt))
1700
+ );
1701
+ --_sf-hr-ft-se-ic: var(
1702
+ --_ctm-mob-dn-dd-hr-se-ft-se-ic,
1703
+ var(--_ctm-tab-dn-dd-hr-se-ft-se-ic, var(--_ctm-dn-dd-hr-se-ft-se-ic))
1704
+ );
1705
+ --_sf-hr-tt-an: var(
1706
+ --_ctm-mob-dn-dd-hr-se-tt-an,
1707
+ var(--_ctm-tab-dn-dd-hr-se-tt-an, var(--_ctm-dn-dd-hr-se-tt-an))
1708
+ );
1709
+ --_sf-hr-lr-sg: var(
1710
+ --_ctm-mob-dn-dd-hr-se-lr-sg,
1711
+ var(--_ctm-tab-dn-dd-hr-se-lr-sg, var(--_ctm-dn-dd-hr-se-lr-sg))
1712
+ );
1713
+ --_sf-hr-le-ht: var(
1714
+ --_ctm-mob-dn-dd-hr-se-le-ht,
1715
+ var(--_ctm-tab-dn-dd-hr-se-le-ht, var(--_ctm-dn-dd-hr-se-le-ht))
1716
+ );
1717
+
1718
+ --_sf-hr-in-se: var(
1719
+ --_ctm-mob-dn-dd-hr-se-in-se,
1720
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1721
+ );
1722
+ --_sf-hr-in-se: var(
1723
+ --_ctm-mob-dn-dd-hr-se-in-se,
1724
+ var(--_ctm-tab-dn-dd-hr-se-in-se, var(--_ctm-dn-dd-hr-se-in-se))
1725
+ );
1726
+ --_sf-hr-in-c1: var(
1727
+ --_ctm-mob-dn-dd-hr-se-in-c1,
1728
+ var(--_ctm-tab-dn-dd-hr-se-in-c1, var(--_ctm-dn-dd-hr-se-in-c1))
1729
+ );
1730
+ --_sf-hr-ue: var(
1731
+ --_ctm-mob-dn-dd-hr-se-ue,
1732
+ var(--_ctm-tab-dn-dd-hr-se-ue, var(--_ctm-dn-dd-hr-se-ue))
1733
+ );
1734
+
1735
+ // for pading and width
1736
+ --_sf-hr-pg: var(
1737
+ --_ctm-mob-dn-dd-hr-pg,
1738
+ var(--_ctm-tab-dn-dd-hr-pg, var(--_ctm-dn-dd-hr-pg))
1739
+ );
1740
+ --_sf-hr-wh: var(
1741
+ --_ctm-mob-dn-dd-hr-wh,
1742
+ var(--_ctm-tab-dn-dd-hr-wh, var(--_ctm-dn-dd-hr-wh))
1743
+ );
1744
+
1745
+ &[data-hover-show-shadow="false"] {
1746
+ --_hover-show-shadow: none;
1747
+ }
1748
+ &[data-hover-show-icon="false"] {
1749
+ --_hover-show-icon: none;
1750
+ }
1751
+ }
1752
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-bd-cr));
1753
+
1754
+ display: flex;
1755
+ flex-direction: var(--_sf-fd-bn);
1756
+ align-items: center;
1757
+
1758
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-dd-dt-se-at));
1759
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-dd-dt-se-gp));
1760
+
1761
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dd-dt-se-pg));
1762
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-wh));
1763
+
1764
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-rs));
1765
+
1766
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-ae))
1767
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-br))
1768
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-sd))
1769
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-sw-cr));
1770
+
1771
+ &[data-show-border="true"] {
1772
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-cr));
1773
+
1774
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-se));
1775
+
1776
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dd-dt-se-br-wh));
1777
+ }
1778
+
1779
+ .txt {
1780
+ display: flex;
1781
+
1782
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dd-dt-se-cr));
1783
+
1784
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-fy));
1785
+
1786
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se));
1787
+
1788
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-wt));
1789
+
1790
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dd-dt-se-ft-se-ic));
1791
+
1792
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dd-dt-se-tt-an));
1793
+
1794
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dd-dt-se-lr-sg));
1795
+
1796
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dd-dt-se-le-ht));
1797
+
1798
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1799
+ }
1800
+
1801
+ .icon {
1802
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
1803
+ svg {
1804
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1805
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-se));
1806
+
1807
+ path {
1808
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-dd-dt-se-in-c1));
1809
+ }
1810
+ }
1811
+ }
1812
+ [data-element-style="Text"] {
1813
+ display: inline-block;
1814
+ width: 100%;
1815
+ }
1816
+
1817
+ .icon--hover {
1818
+ // position: absolute;
1819
+ // inset: 0;
1820
+ // opacity: 0;
1821
+ display: none;
1822
+ transition: opacity 0.2s ease;
1823
+ }
1824
+
1825
+ &:hover .icon--hover {
1826
+ // opacity: 1;
1827
+ display: flex;
1828
+ }
1829
+
1830
+ &:hover .icon--default {
1831
+ // opacity: 0;
1832
+ display: none;
1833
+ }
1834
+ }
1835
+ .btn__with__text[data-btn-name="more"] {
1836
+ &[data-show-shadow="false"] {
1837
+ --_show-shadow: none;
1838
+ }
1839
+ &[data-icon-position="left"] {
1840
+ --_sf-fd-bn: row;
1841
+ }
1842
+ &[data-icon-position="right"] {
1843
+ --_sf-fd-bn: row-reverse;
1844
+ }
1845
+ &[data-icon-position="center"] {
1846
+ --_sf-fd-bn: row;
1847
+ }
1848
+
1849
+ &:hover {
1850
+ --_sf-hr-bd-cr: var(
1851
+ --_ctm-mob-dn-me-hr-se-bd-cr,
1852
+ var(--_ctm-tab-dn-me-hr-se-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr))
1853
+ );
1854
+ --_sf-hr-br-cr: var(
1855
+ --_ctm-mob-dn-me-hr-se-br-cr,
1856
+ var(--_ctm-tab-dn-me-hr-se-br-cr, var(--_ctm-dn-me-hr-se-br-cr))
1857
+ );
1858
+ --_sf-hr-br-se: var(
1859
+ --_ctm-mob-dn-me-hr-se-br-se,
1860
+ var(--_ctm-tab-dn-me-hr-se-br-se, var(--_ctm-dn-me-hr-se-br-se))
1861
+ );
1862
+ --_sf-hr-br-wh: var(
1863
+ --_ctm-mob-dn-me-hr-se-br-wh,
1864
+ var(--_ctm-tab-dn-me-hr-se-br-wh, var(--_ctm-dn-me-hr-se-br-wh))
1865
+ );
1866
+ --_sf-hr-br-rs: var(
1867
+ --_ctm-mob-dn-me-hr-se-br-rs,
1868
+ var(--_ctm-tab-dn-me-hr-se-br-rs, var(--_ctm-dn-me-hr-se-br-rs))
1869
+ );
1870
+ --_sf-hr-at: var(
1871
+ --_ctm-mob-dn-me-hr-se-at,
1872
+ var(--_ctm-tab-dn-me-hr-se-at, var(--_ctm-dn-me-hr-se-at))
1873
+ );
1874
+ --_sf-hr-gp: var(
1875
+ --_ctm-mob-dn-me-hr-se-gp,
1876
+ var(--_ctm-tab-dn-me-hr-se-gp, var(--_ctm-dn-me-hr-se-gp))
1877
+ );
1878
+
1879
+ // for shadow
1880
+ --_sf-hr-sw-ae: var(
1881
+ --_ctm-mob-dn-me-hr-se-sw-ae,
1882
+ var(--_ctm-tab-dn-me-hr-se-sw-ae, var(--_ctm-dn-me-hr-se-sw-ae))
1883
+ );
1884
+ --_sf-hr-sw-br: var(
1885
+ --_ctm-mob-dn-me-hr-se-sw-br,
1886
+ var(--_ctm-tab-dn-me-hr-se-sw-br, var(--_ctm-dn-me-hr-se-sw-br))
1887
+ );
1888
+ --_sf-hr-sw-hr: var(
1889
+ --_ctm-mob-dn-me-hr-se-sw-hr,
1890
+ var(--_ctm-tab-dn-me-hr-se-sw-hr, var(--_ctm-dn-me-hr-se-sw-hr))
1891
+ );
1892
+ --_sf-hr-sw-cr: var(
1893
+ --_ctm-mob-dn-me-hr-se-sw-cr,
1894
+ var(--_ctm-tab-dn-me-hr-se-sw-cr, var(--_ctm-dn-me-hr-se-sw-cr))
1895
+ );
1896
+
1897
+ // for font
1898
+
1899
+ --_sf-hr-cr: var(
1900
+ --_ctm-mob-dn-me-hr-se-cr,
1901
+ var(--_ctm-tab-dn-me-hr-se-cr, var(--_ctm-dn-me-hr-se-cr))
1902
+ );
1903
+ --_sf-hr-ft-fy: var(
1904
+ --_ctm-mob-dn-me-hr-se-ft-fy,
1905
+ var(--_ctm-tab-dn-me-hr-se-ft-fy, var(--_ctm-dn-me-hr-se-ft-fy))
1906
+ );
1907
+ --_sf-hr-ft-se: var(
1908
+ --_ctm-mob-dn-me-hr-se-ft-se,
1909
+ var(--_ctm-tab-dn-me-hr-se-ft-se, var(--_ctm-dn-me-hr-se-ft-se))
1910
+ );
1911
+ --_sf-hr-ft-wt: var(
1912
+ --_ctm-mob-dn-me-hr-se-ft-wt,
1913
+ var(--_ctm-tab-dn-me-hr-se-ft-wt, var(--_ctm-dn-me-hr-se-ft-wt))
1914
+ );
1915
+ --_sf-hr-ft-se-ic: var(
1916
+ --_ctm-mob-dn-me-hr-se-ft-se-ic,
1917
+ var(--_ctm-tab-dn-me-hr-se-ft-se-ic, var(--_ctm-dn-me-hr-se-ft-se-ic))
1918
+ );
1919
+ --_sf-hr-tt-an: var(
1920
+ --_ctm-mob-dn-me-hr-se-tt-an,
1921
+ var(--_ctm-tab-dn-me-hr-se-tt-an, var(--_ctm-dn-me-hr-se-tt-an))
1922
+ );
1923
+ --_sf-hr-lr-sg: var(
1924
+ --_ctm-mob-dn-me-hr-se-lr-sg,
1925
+ var(--_ctm-tab-dn-me-hr-se-lr-sg, var(--_ctm-dn-me-hr-se-lr-sg))
1926
+ );
1927
+ --_sf-hr-le-ht: var(
1928
+ --_ctm-mob-dn-me-hr-se-le-ht,
1929
+ var(--_ctm-tab-dn-me-hr-se-le-ht, var(--_ctm-dn-me-hr-se-le-ht))
1930
+ );
1931
+
1932
+ --_sf-hr-in-se: var(
1933
+ --_ctm-mob-dn-me-hr-se-in-se,
1934
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1935
+ );
1936
+ --_sf-hr-in-se: var(
1937
+ --_ctm-mob-dn-me-hr-se-in-se,
1938
+ var(--_ctm-tab-dn-me-hr-se-in-se, var(--_ctm-dn-me-hr-se-in-se))
1939
+ );
1940
+ --_sf-hr-in-c1: var(
1941
+ --_ctm-mob-dn-me-hr-se-in-c1,
1942
+ var(--_ctm-tab-dn-me-hr-se-in-c1, var(--_ctm-dn-me-hr-se-in-c1))
1943
+ );
1944
+ --_sf-hr-ue: var(
1945
+ --_ctm-mob-dn-me-hr-se-ue,
1946
+ var(--_ctm-tab-dn-me-hr-se-ue, var(--_ctm-dn-me-hr-se-ue))
1947
+ );
1948
+
1949
+ // for pading and width
1950
+ --_sf-hr-pg: var(
1951
+ --_ctm-mob-dn-me-hr-pg,
1952
+ var(--_ctm-tab-dn-me-hr-pg, var(--_ctm-dn-me-hr-pg))
1953
+ );
1954
+ --_sf-hr-wh: var(
1955
+ --_ctm-mob-dn-me-hr-wh,
1956
+ var(--_ctm-tab-dn-me-hr-wh, var(--_ctm-dn-ad-to-ct-hr-wh))
1957
+ );
1958
+
1959
+ &[data-hover-show-shadow="false"] {
1960
+ --_hover-show-shadow: none;
1961
+ }
1962
+ &[data-hover-show-icon="false"] {
1963
+ --_hover-show-icon: none;
1964
+ }
1965
+ }
1966
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-bd-cr));
1967
+
1968
+ display: flex;
1969
+ flex-direction: var(--_sf-fd-bn);
1970
+ align-items: center;
1971
+
1972
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-me-dt-se-at));
1973
+ gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-me-dt-se-gp));
1974
+
1975
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-me-dt-se-pg));
1976
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-wh));
1977
+ height: 100%;
1978
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-me-dt-se-br-rs));
1979
+
1980
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-ae))
1981
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-br))
1982
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-sd))
1983
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-sw-cr));
1984
+
1985
+ &[data-show-border="true"] {
1986
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-br-cr));
1987
+
1988
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-me-dt-se-br-se));
1989
+
1990
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-me-dt-se-br-wh));
1991
+ }
1992
+
1993
+ .txt {
1994
+ display: flex;
1995
+
1996
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-me-dt-se-cr));
1997
+
1998
+ font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-fy));
1999
+
2000
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se));
2001
+
2002
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-wt));
2003
+
2004
+ font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-me-dt-se-ft-se-ic));
2005
+
2006
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-me-dt-se-tt-an));
2007
+
2008
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-me-dt-se-lr-sg));
2009
+
2010
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-me-dt-se-le-ht));
2011
+
2012
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
2013
+ }
2014
+
2015
+ .icon {
2016
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
2017
+ svg {
2018
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2019
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-me-dt-se-in-se));
2020
+
2021
+ path {
2022
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-me-dt-se-in-c1));
2023
+ }
2024
+ }
2025
+ }
2026
+ [data-element-style="Text"] {
2027
+ display: inline-block;
2028
+ width: 100%;
2029
+ }
2030
+
2031
+ .icon--hover {
2032
+ // position: absolute;
2033
+ // inset: 0;
2034
+ // opacity: 0;
2035
+ display: none;
2036
+ transition: opacity 0.2s ease;
2037
+ }
2038
+
2039
+ &:hover .icon--hover {
2040
+ // opacity: 1;
2041
+ display: flex;
2042
+ }
2043
+
2044
+ &:hover .icon--default {
2045
+ // opacity: 0;
2046
+ display: none;
2047
+ }
2048
+ }
2049
+
2050
+ // .dropdown-menu {
2051
+ // display: block;
2052
+ // position: absolute;
2053
+ // top: 110%;
2054
+
2055
+ // &[data-position="left"] {
2056
+ // left: 0;
2057
+ // }
2058
+ // &[data-position="right"] {
2059
+ // right: 0;
2060
+ // }
2061
+ // &[data-position="center"] {
2062
+ // left: 50%;
2063
+ // transform: translateX(-50%);
2064
+ // }
2065
+ // // top: 78%;
2066
+ // // left: 100%;
2067
+ // // margin-left: 8px;
2068
+
2069
+ // box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2070
+ // min-width: 200px;
2071
+ // z-index: 100;
2072
+ // display: flex;
2073
+ // flex-direction: column;
2074
+ // padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-dn-se-pg));
2075
+
2076
+ // background-color: var(
2077
+ // --_ctm-mob-dn-dn-se-bd-cr,
2078
+ // var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
2079
+ // );
2080
+
2081
+ // border-color: var(
2082
+ // --_ctm-mob-dn-dn-se-br-cr,
2083
+ // var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
2084
+ // );
2085
+
2086
+ // border-style: var(
2087
+ // --_ctm-mob-dn-dn-se-br-se,
2088
+ // var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
2089
+ // );
2090
+
2091
+ // border-width: var(
2092
+ // --_ctm-mob-dn-dn-se-br-wh,
2093
+ // var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
2094
+ // );
2095
+
2096
+ // border-radius: var(
2097
+ // --_ctm-mob-dn-dn-se-br-rs,
2098
+ // var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
2099
+ // );
2100
+
2101
+ // box-shadow: var(
2102
+ // --_show-shadow,
2103
+ // var(--_ctm-mob-dn-dn-se-sw-ae, var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae)))
2104
+ // var(
2105
+ // --_ctm-mob-dn-dn-se-sw-br,
2106
+ // var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
2107
+ // )
2108
+ // var(
2109
+ // --_ctm-mob-dn-dn-se-sw-sd,
2110
+ // var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
2111
+ // )
2112
+ // var(
2113
+ // --_ctm-mob-dn-dn-se-sw-cr,
2114
+ // var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
2115
+ // )
2116
+ // );
2117
+ // }
2118
+ .popover-container {
2119
+ position: relative;
2120
+ display: inline-block;
2121
+ .popover-trigger {
2122
+ cursor: pointer;
2123
+ font-weight: 500;
2124
+ color: #2b6cb0;
2125
+ }
2126
+
2127
+ .popover-box {
2128
+ // position: absolute;
2129
+ // top: calc(100% + 10px);
2130
+ // right: 0;
2131
+ // background: white;
2132
+ // padding: 12px 16px;
2133
+ // box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
2134
+ // border-radius: 8px;
2135
+ // min-width: 150px;
2136
+ // z-index: 10;
2137
+ position: absolute;
2138
+ // border: 1px solid #ccc;
2139
+ // min-width: 150px;
2140
+ max-width: 200px;
2141
+ z-index: 1000;
2142
+ // left: 40px;
2143
+ // top: 0;
2144
+ // right: -125%;
2145
+ padding: 8px;
2146
+ border-radius: 4px;
2147
+ }
2148
+
2149
+ .popover-box {
2150
+ display: flex;
2151
+ flex-direction: column;
2152
+
2153
+ // width: 100%;
2154
+ gap: prepareMediaVariable(--_ctm-dn-pr-se-im-gp);
2155
+ background-color: var(
2156
+ --_ctm-mob-dn-pr-se-bd-cr,
2157
+ var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2158
+ );
2159
+
2160
+ border-color: var(
2161
+ --_ctm-mob-dn-pr-se-br-cr,
2162
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2163
+ );
2164
+
2165
+ border-style: var(
2166
+ --_ctm-mob-dn-pr-se-br-se,
2167
+ var(--_ctm-tab-dn-pr-se-br-se, var(--_ctm-dn-pr-se-br-se))
2168
+ );
2169
+
2170
+ border-width: var(
2171
+ --_ctm-mob-dn-pr-se-br-wh,
2172
+ var(--_ctm-tab-dn-pr-se-br-wh, var(--_ctm-dn-pr-se-br-wh))
2173
+ );
2174
+
2175
+ border-radius: var(
2176
+ --_ctm-mob-dn-pr-se-br-rs,
2177
+ var(--_ctm-tab-dn-pr-se-br-rs, var(--_ctm-dn-pr-se-br-rs))
2178
+ );
2179
+
2180
+ box-shadow: var(
2181
+ --_show-shadow,
2182
+ var(
2183
+ --_ctm-mob-dn-pr-se-sw-ae,
2184
+ var(--_ctm-tab-dn-pr-se-sw-ae, var(--_ctm-dn-pr-se-sw-ae))
2185
+ )
2186
+ var(
2187
+ --_ctm-mob-dn-pr-se-sw-br,
2188
+ var(--_ctm-tab-dn-pr-se-sw-br, var(--_ctm-dn-pr-se-sw-br))
2189
+ )
2190
+ var(
2191
+ --_ctm-mob-dn-pr-se-sw-sd,
2192
+ var(--_ctm-tab-dn-pr-se-sw-sd, var(--_ctm-dn-pr-se-sw-sd))
2193
+ )
2194
+ var(
2195
+ --_ctm-mob-dn-pr-se-sw-cr,
2196
+ var(--_ctm-tab-dn-pr-se-sw-cr, var(--_ctm-dn-pr-se-sw-cr))
2197
+ )
2198
+ );
2199
+
2200
+ padding: var(
2201
+ --_ctm-mob-dn-pr-se-pg,
2202
+ var(--_ctm-tab-dn-pr-se-pg, var(--_ctm-dn-pr-se-pg))
2203
+ );
2204
+ }
2205
+
2206
+ .popover-box strong {
2207
+ display: block;
2208
+ margin-bottom: 6px;
2209
+ font-weight: bold;
2210
+ }
2211
+
2212
+ .popover-arrow {
2213
+ position: absolute;
2214
+ top: 8px;
2215
+ left: -5px;
2216
+ width: 12px;
2217
+ min-height: 12px;
2218
+
2219
+ // background-color: var(
2220
+ // --_ctm-mob-dn-pr-se-bd-cr,
2221
+ // var(--_ctm-tab-dn-pr-se-bd-cr, var(--_ctm-dn-pr-se-bd-cr))
2222
+ // );
2223
+ transform: rotate(-45deg);
2224
+ box-shadow: -1px -1px 0px
2225
+ var(
2226
+ --_ctm-mob-dn-pr-se-br-cr,
2227
+ var(--_ctm-tab-dn-pr-se-br-cr, var(--_ctm-dn-pr-se-br-cr))
2228
+ );
2229
+ }
2230
+
2231
+ .popover_item {
2232
+ // padding-inline: var(--_sf-cd-gp);
2233
+ color: var(--_ctm-mob-dn-pr-se-cr, var(--_ctm-tab-dn-pr-se-cr, var(--_ctm-dn-pr-se-cr)));
2234
+ font-family: var(
2235
+ --_ctm-mob-dn-pr-se-ft-fy,
2236
+ var(--_ctm-tab-dn-pr-se-ft-fy, var(--_ctm-dn-pr-se-ft-fy))
2237
+ );
2238
+ font-size: var(
2239
+ --_ctm-mob-dn-pr-se-ft-se,
2240
+ var(--_ctm-tab-dn-pr-se-ft-se, var(--_ctm-dn-pr-se-ft-se))
2241
+ );
2242
+ font-weight: var(
2243
+ --_ctm-mob-dn-pr-se-ft-wt,
2244
+ var(--_ctm-tab-dn-pr-se-ft-wt, var(--_ctm-dn-pr-se-ft-wt))
2245
+ );
2246
+ font-style: var(
2247
+ --_ctm-mob-dn-pr-se-ft-se-ic,
2248
+ var(--_ctm-tab-dn-pr-se-ft-se-ic, var(--_ctm-dn-pr-se-ft-se-ic))
2249
+ );
2250
+ text-align: var(
2251
+ --_ctm-mob-dn-pr-se-tt-an,
2252
+ var(--_ctm-tab-dn-pr-se-tt-an, var(--_ctm-dn-pr-se-tt-an))
2253
+ );
2254
+ letter-spacing: var(
2255
+ --_ctm-mob-dn-pr-se-lr-sg,
2256
+ var(--_ctm-tab-dn-pr-se-lr-sg, var(--_ctm-dn-pr-se-lr-sg))
2257
+ );
2258
+ line-height: var(
2259
+ --_ctm-mob-dn-pr-se-le-ht,
2260
+ var(--_ctm-tab-dn-pr-se-le-ht, var(--_ctm-dn-pr-se-le-ht-dc))
2261
+ );
2262
+ text-decoration: var(
2263
+ --_ctm-mob-dn-pr-se-ue,
2264
+ var(--_ctm-tab-dn-pr-se-ue, var(--_ctm-dn-pr-se-ue))
2265
+ );
2266
+ // margin-left: 10px;
2267
+ }
2268
+ }
2269
+
2270
+ &[data-display-style="Stack Vertically"] {
2271
+ .popover-box {
2272
+ left: 100%;
2273
+ transform: translate(0%);
2274
+ margin-left: 6px;
2275
+ top: 0;
2276
+ }
2277
+ }
2278
+ &[data-display-style="Stack Horizontally"] {
2279
+ .popover-box {
2280
+ right: 0;
2281
+ margin-top: 6px;
2282
+ }
2283
+ }
2284
+ }
2285
+ }
2286
+ }