@sc-360-v2/storefront-cms-library 0.4.96 → 0.4.98

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 (4) hide show
  1. package/dist/product-actions.scss +2339 -2339
  2. package/dist/types/upload-media/types.d.ts +2 -0
  3. package/dist/uploadMedia.js +1 -1
  4. package/package.json +1 -1
package/dist/product-actions.scss CHANGED
@@ -1,2339 +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 {
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
- }
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
+ }