@sc-360-v2/storefront-cms-library 0.4.95 → 0.4.97

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