@sc-360-v2/storefront-cms-library 0.1.94 → 0.1.95

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 (41) hide show
  1. package/README.md +12 -12
  2. package/dist/amount-estimator.scss +438 -4
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +725 -19
  5. package/dist/gallery-slider-temp.scss +455 -340
  6. package/dist/globals.scss +94 -94
  7. package/dist/menu.scss +89 -0
  8. package/dist/payment-methods.scss +170 -11
  9. package/dist/pickup-locations.scss +437 -11
  10. package/dist/product-actions.scss +881 -77
  11. package/dist/product-highlights.scss +108 -4
  12. package/dist/product-image.scss +466 -338
  13. package/dist/product-inventory.scss +550 -14
  14. package/dist/product-options.scss +156 -0
  15. package/dist/product-price.scss +686 -284
  16. package/dist/product-promotions.scss +1112 -17
  17. package/dist/product.scss +18 -172
  18. package/dist/quantity-selector.scss +52 -4
  19. package/dist/repeater-item.scss +21 -0
  20. package/dist/repeater.scss +106 -0
  21. package/dist/shipping-estimator.scss +7 -5
  22. package/dist/stack.scss +7 -2
  23. package/dist/store-locations.scss +436 -14
  24. package/dist/tooltip.scss +276 -0
  25. package/dist/types/builder/enums/index.d.ts +9 -2
  26. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +2 -1
  27. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  28. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  29. package/dist/types/builder/tools/element-edit/productDetails.d.ts +6 -31
  30. package/dist/types/builder/tools/element-edit/productDetailsOLd.d.ts +42 -0
  31. package/dist/types/builder/tools/element-edit/productOptions.d.ts +59 -0
  32. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -1
  33. package/dist/uom-selector.scss +495 -4
  34. package/dist/variant-picker.scss +767 -19
  35. package/dist/volume-pricing.scss +468 -19
  36. package/dist/widget.scss +24 -3
  37. package/package.json +1 -1
  38. package/dist/App.scss +0 -31
  39. package/dist/mixin.scss +0 -9
  40. package/dist/modal.module.scss +0 -121
  41. package/dist/range-slider.module.scss +0 -85
@@ -5,54 +5,15 @@
5
5
  &[data-element-type="productActions"] {
6
6
  width: var(--_sf-nw-wh, var(--_tst-lt-wh));
7
7
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
8
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
8
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
9
9
 
10
10
  // & > .wrapper {
11
11
  // // width: 100%;
12
12
  // // height: 100%;
13
13
  // }
14
14
 
15
- &[data-actions-show-shadow="false"] {
16
- --_show-shadow-at: none;
17
- }
18
- &[data-actions-show-icon="false"] {
19
- --_show-icon-at: none;
20
- }
21
-
22
- &:hover {
23
- //Add To Cart
24
- --_sf-at-hr-bd-cr: var(--_ctm-dn-ad-to-ct-hr-se-bd-cr, var(--_tst-dn-hr-se-bd-cr));
25
- --_sf-at-hr-br-cr: var(--_ctm-dn-ad-to-ct-hr-se-br-cr, var(--_tst-dn-hr-se-br-cr));
26
- --_sf-at-hr-br-se: var(--_ctm-dn-ad-to-ct-hr-se-br-se, var(--_tst-dn-hr-se-br-se));
27
- --_sf-at-hr-br-wt: var(--_ctm-dn-ad-to-ct-hr-se-br-wh, var(--_tst-dn-hr-se-br-wh));
28
- --_sf-at-hr-br-br: var(--_ctm-dn-ad-to-ct-hr-se-br-rs, var(--_tst-dn-hr-se-br-rs));
29
- --_sf-at-hr-bx-sw: var(--_ctm-dn-ad-to-ct-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
30
- var(--_ctm-dn-ad-to-ct-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
31
- var(--_ctm-dn-ad-to-ct-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
32
- var(--_ctm-dn-ad-to-ct-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr));
33
-
34
- --_sf-hr-fc: var(--_ctm-dn-hr-se-cr, var(--_tst-dn-hr-se-cr));
35
- --_sf-hr-ff: var(--_ctm-dn-hr-se-ft-fy, var(--_tst-dn-hr-se-ft-fy));
36
- --_sf-hr-fs: var(--_ctm-dn-hr-se-ft-se, var(--_tst-dn-hr-se-ft-se));
37
- --_sf-hr-fw: var(--_ctm-dn-hr-se-ft-wt, var(--_tst-dn-hr-se-ft-wt));
38
- --_sf-hr-ft: var(--_ctm-dn-hr-se-ft-se-ic, var(--_tst-dn-hr-se-ft-se-ic));
39
- --_sf-hr-ta: var(--_ctm-dn-hr-se-tt-an, var(--_tst-dn-hr-se-tt-an));
40
- --_sf-hr-ls: var(--_ctm-dn-hr-se-lr-sg, var(--_tst-dn-hr-se-lr-sg));
41
- --_sf-hr-lh: var(--_ctm-dn-hr-se-le-ht, var(--_tst-dn-hr-se-le-ht));
42
- --_sf-hr-ic-wt: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
43
- --_sf-hr-ic-ht: var(--_ctm-dn-hr-se-in-se, var(--_tst-dn-hr-se-in-se));
44
- --_sf-hr-ic-st: var(--_ctm-dn-hr-se-in-c1, var(--_tst-dn-hr-se-in-c1));
45
- --_sf-hr-tt-dn: var(--_ctm-dn-hr-se-ue, var(--_tst-dn-hr-se-in-c1));
46
-
47
- &[data-actions-hover-show-shadow="false"] {
48
- --_hover-show-shadow: none;
49
- }
50
- &[data-actions-hover-show-icon="false"] {
51
- --_hover-show-icon: none;
52
- }
53
- }
54
-
55
15
  .action__buttons__container {
16
+ padding: var(--_ctm-lt-pg);
56
17
  .action__buttons__wrapper {
57
18
  display: flex;
58
19
  gap: var(--_ctm-lt-im-sg);
@@ -64,12 +25,25 @@
64
25
  }
65
26
  &[data-actions-display-style="false"] {
66
27
  flex-direction: row;
28
+ row-gap: var(--_ctm-lt-im-vl-sg);
67
29
  }
68
30
  .action__button {
69
31
  display: flex;
70
32
  align-items: center;
71
33
  height: 40px;
72
34
  cursor: pointer;
35
+ .btn__container {
36
+ display: flex;
37
+ align-items: center;
38
+ justify-content: center;
39
+ gap: 10px;
40
+ height: 100%;
41
+ width: 100%;
42
+ padding: 16px;
43
+ .btn__with__text {
44
+ height: 2.5rem;
45
+ }
46
+ }
73
47
  &.addToCart {
74
48
  background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ad-to-ct-dt-se-bd-cr));
75
49
  border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ad-to-ct-dt-se-br-cr));
@@ -89,10 +63,7 @@
89
63
  )
90
64
  )
91
65
  );
92
- color: #fff;
93
66
  .btn__container {
94
- // background-color: #ff6d00;
95
- color: #fff;
96
67
  gap: var(--_ctm-dn-ad-to-ct-dt-se-in-ad-tt-sg);
97
68
  &[data-actions-icon-position="left"],
98
69
  &[data-actions-icon-position="center"] {
@@ -101,62 +72,895 @@
101
72
  &[data-actions-icon-position="right"] {
102
73
  flex-direction: row-reverse;
103
74
  }
75
+ span {
76
+ svg {
77
+ width: var(--_ctm-dn-ad-to-ct-dt-se-in-se);
78
+ height: var(--_ctm-dn-ad-to-ct-dt-se-in-se);
79
+ path {
80
+ stroke: var(--_ctm-dn-ad-to-ct-dt-se-in-c1);
81
+ }
82
+ }
83
+ }
84
+ .btn__with__text {
85
+ color: var(--_ctm-dn-ad-to-ct-dt-se-cr);
86
+ font-family: var(--_ctm-dn-ad-to-ct-dt-se-ft-fy), sans-serif;
87
+ font-size: var(--_ctm-dn-ad-to-ct-dt-se-ft-se);
88
+ font-weight: var(--_ctm-dn-ad-to-ct-dt-se-ft-wt);
89
+ font-style: var(--_ctm-dn-ad-to-ct-dt-se-ft-se-ic);
90
+ text-align: var(--_ctm-dn-ad-to-ct-dt-se-tt-an);
91
+ letter-spacing: var(--_ctm-dn-ad-to-ct-dt-se-lr-sg);
92
+ line-height: var(--_ctm-dn-ad-to-ct-dt-se-le-ht);
93
+ text-decoration: var(--_ctm-dn-ad-to-ct-dt-se-ue);
94
+ }
104
95
  &:hover {
105
- // background-color: #ff3b30;
106
- gap: var(--_ctm-dn-ad-to-ct-hr-se-in-ad-tt-sg);
107
- &[data-actions-icon-position-hover="left"],
108
- &[data-actions-icon-position-hover="center"] {
109
- flex-direction: row;
110
- }
111
- &[data-actions-icon-position-hover="right"] {
112
- flex-direction: row-reverse;
113
- }
114
- span {
115
- svg {
116
- path {
117
- stroke: #0a0ef3;
96
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ad-to-ct-hr-se-bd-cr));
97
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ad-to-ct-hr-se-br-cr));
98
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ad-to-ct-hr-se-br-se));
99
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ad-to-ct-hr-se-br-wh));
100
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ad-to-ct-hr-se-br-rs));
101
+ box-shadow: var(
102
+ --_hover-show-shadow,
103
+ var(
104
+ --_sf-at-hr-bx-sw,
105
+ var(
106
+ --_show-shadow,
107
+ var(--_ctm-dn-ad-to-ct-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
108
+ var(--_ctm-dn-ad-to-ct-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
109
+ var(--_ctm-dn-ad-to-ct-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
110
+ var(--_ctm-dn-ad-to-ct-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
111
+ )
112
+ )
113
+ );
114
+ .btn__container {
115
+ gap: var(--_ctm-dn-ad-to-ct-hr-se-in-ad-tt-sg);
116
+ &[data-actions-icon-position-hover="left"],
117
+ &[data-actions-icon-position-hover="center"] {
118
+ flex-direction: row;
119
+ }
120
+ &[data-actions-icon-position-hover="right"] {
121
+ flex-direction: row-reverse;
122
+ }
123
+ span {
124
+ svg {
125
+ width: var(--_ctm-dn-ad-to-ct-hr-se-in-se);
126
+ height: var(--_ctm-dn-ad-to-ct-hr-se-in-se);
127
+ path {
128
+ stroke: var(--_ctm-dn-ad-to-ct-hr-se-in-c1);
129
+ }
118
130
  }
119
131
  }
132
+ .btn__with__text {
133
+ color: var(--_ctm-dn-ad-to-ct-hr-se-cr);
134
+ font-family: var(--_ctm-dn-ad-to-ct-hr-se-ft-fy), sans-serif;
135
+ font-size: var(--_ctm-dn-ad-to-ct-hr-se-ft-se);
136
+ font-weight: var(--_ctm-dn-ad-to-ct-hr-se-ft-wt);
137
+ font-style: var(--_ctm-dn-ad-to-ct-hr-se-ft-se-ic);
138
+ text-align: var(--_ctm-dn-ad-to-ct-hr-se-tt-an);
139
+ letter-spacing: var(--_ctm-dn-ad-to-ct-hr-se-lr-sg);
140
+ line-height: var(--_ctm-dn-ad-to-ct-hr-se-le-ht);
141
+ text-decoration: var(--_ctm-dn-ad-to-ct-hr-se-ue);
142
+ }
120
143
  }
121
144
  }
145
+ }
146
+ }
147
+ &.buyNow {
148
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-by-nw-dt-se-bd-cr));
149
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-by-nw-dt-se-br-cr));
150
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-by-nw-dt-se-br-se));
151
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-by-nw-dt-se-br-wh));
152
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-by-nw-dt-se-br-rs));
153
+ box-shadow: var(
154
+ --_hover-show-shadow,
155
+ var(
156
+ --_sf-at-hr-bx-sw,
157
+ var(
158
+ --_show-shadow,
159
+ var(--_ctm-dn-by-nw-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
160
+ var(--_ctm-dn-by-nw-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
161
+ var(--_ctm-dn-by-nw-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
162
+ var(--_ctm-dn-by-nw-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
163
+ )
164
+ )
165
+ );
166
+ .btn__container {
167
+ gap: var(--_ctm-dn-by-nw-dt-se-in-ad-tt-sg);
168
+ &[data-actions-icon-position="left"],
169
+ &[data-actions-icon-position="center"] {
170
+ flex-direction: row;
171
+ }
172
+ &[data-actions-icon-position="right"] {
173
+ flex-direction: row-reverse;
174
+ }
122
175
  span {
123
176
  svg {
177
+ width: var(--_ctm-dn-by-nw-dt-se-in-se);
178
+ height: var(--_ctm-dn-by-nw-dt-se-in-se);
124
179
  path {
125
- stroke: #0af350;
180
+ stroke: var(--_ctm-dn-by-nw-dt-se-in-c1);
181
+ }
182
+ }
183
+ }
184
+ .btn__with__text {
185
+ color: var(--_ctm-dn-by-nw-dt-se-cr);
186
+ font-family: var(--_ctm-dn-by-nw-dt-se-ft-fy), sans-serif;
187
+ font-size: var(--_ctm-dn-by-nw-dt-se-ft-se);
188
+ font-weight: var(--_ctm-dn-by-nw-dt-se-ft-wt);
189
+ font-style: var(--_ctm-dn-by-nw-dt-se-ft-se-ic);
190
+ text-align: var(--_ctm-dn-by-nw-dt-se-tt-an);
191
+ letter-spacing: var(--_ctm-dn-by-nw-dt-se-lr-sg);
192
+ line-height: var(--_ctm-dn-by-nw-dt-se-le-ht);
193
+ text-decoration: var(--_ctm-dn-by-nw-dt-se-ue);
194
+ }
195
+ &:hover {
196
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-by-nw-hr-se-bd-cr));
197
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-by-nw-hr-se-br-cr));
198
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-by-nw-hr-se-br-se));
199
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-by-nw-hr-se-br-wh));
200
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-by-nw-hr-se-br-rs));
201
+ box-shadow: var(
202
+ --_hover-show-shadow,
203
+ var(
204
+ --_sf-at-hr-bx-sw,
205
+ var(
206
+ --_show-shadow,
207
+ var(--_ctm-dn-by-nw-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
208
+ var(--_ctm-dn-by-nw-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
209
+ var(--_ctm-dn-by-nw-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
210
+ var(--_ctm-dn-by-nw-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
211
+ )
212
+ )
213
+ );
214
+ .btn__container {
215
+ gap: var(--_ctm-dn-by-nw-hr-se-in-ad-tt-sg);
216
+ &[data-actions-icon-position-hover="left"],
217
+ &[data-actions-icon-position-hover="center"] {
218
+ flex-direction: row;
219
+ }
220
+ &[data-actions-icon-position-hover="right"] {
221
+ flex-direction: row-reverse;
222
+ }
223
+ span {
224
+ svg {
225
+ width: var(--_ctm-dn-by-nw-hr-se-in-se);
226
+ height: var(--_ctm-dn-by-nw-hr-se-in-se);
227
+ path {
228
+ stroke: var(--_ctm-dn-by-nw-hr-se-in-c1);
229
+ }
230
+ }
231
+ }
232
+ .btn__with__text {
233
+ color: var(--_ctm-dn-by-nw-hr-se-cr);
234
+ font-family: var(--_ctm-dn-by-nw-hr-se-ft-fy), sans-serif;
235
+ font-size: var(--_ctm-dn-by-nw-hr-se-ft-se);
236
+ font-weight: var(--_ctm-dn-by-nw-hr-se-ft-wt);
237
+ font-style: var(--_ctm-dn-by-nw-hr-se-ft-se-ic);
238
+ text-align: var(--_ctm-dn-by-nw-hr-se-tt-an);
239
+ letter-spacing: var(--_ctm-dn-by-nw-hr-se-lr-sg);
240
+ line-height: var(--_ctm-dn-by-nw-hr-se-le-ht);
241
+ text-decoration: var(--_ctm-dn-by-nw-hr-se-ue);
126
242
  }
127
243
  }
128
244
  }
129
245
  }
130
246
  }
131
- .btn__container {
247
+ &.wishlist {
248
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-wt-dt-se-bd-cr));
249
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-wt-dt-se-br-cr));
250
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-wt-dt-se-br-se));
251
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-wt-dt-se-br-wh));
252
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-wt-dt-se-br-rs));
253
+ box-shadow: var(
254
+ --_hover-show-shadow,
255
+ var(
256
+ --_sf-at-hr-bx-sw,
257
+ var(
258
+ --_show-shadow,
259
+ var(--_ctm-dn-wt-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
260
+ var(--_ctm-dn-wt-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
261
+ var(--_ctm-dn-wt-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
262
+ var(--_ctm-dn-wt-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
263
+ )
264
+ )
265
+ );
266
+ .btn__container {
267
+ gap: var(--_ctm-dn-wt-dt-se-in-ad-tt-sg);
268
+ &[data-actions-icon-position="left"],
269
+ &[data-actions-icon-position="center"] {
270
+ flex-direction: row;
271
+ }
272
+ &[data-actions-icon-position="right"] {
273
+ flex-direction: row-reverse;
274
+ }
275
+ span {
276
+ svg {
277
+ width: var(--_ctm-dn-wt-dt-se-in-se);
278
+ height: var(--_ctm-dn-wt-dt-se-in-se);
279
+ path {
280
+ stroke: var(--_ctm-dn-wt-dt-se-in-c1);
281
+ }
282
+ }
283
+ }
284
+ .btn__with__text {
285
+ color: var(--_ctm-dn-wt-dt-se-cr);
286
+ font-family: var(--_ctm-dn-wt-dt-se-ft-fy), sans-serif;
287
+ font-size: var(--_ctm-dn-wt-dt-se-ft-se);
288
+ font-weight: var(--_ctm-dn-wt-dt-se-ft-wt);
289
+ font-style: var(--_ctm-dn-wt-dt-se-ft-se-ic);
290
+ text-align: var(--_ctm-dn-wt-dt-se-tt-an);
291
+ letter-spacing: var(--_ctm-dn-wt-dt-se-lr-sg);
292
+ line-height: var(--_ctm-dn-wt-dt-se-le-ht);
293
+ text-decoration: var(--_ctm-dn-wt-dt-se-ue);
294
+ }
295
+ &:hover {
296
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-wt-hr-se-bd-cr));
297
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-wt-hr-se-br-cr));
298
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-wt-hr-se-br-se));
299
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-wt-hr-se-br-wh));
300
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-wt-hr-se-br-rs));
301
+ box-shadow: var(
302
+ --_hover-show-shadow,
303
+ var(
304
+ --_sf-at-hr-bx-sw,
305
+ var(
306
+ --_show-shadow,
307
+ var(--_ctm-dn-wt-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
308
+ var(--_ctm-dn-wt-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
309
+ var(--_ctm-dn-wt-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
310
+ var(--_ctm-dn-wt-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
311
+ )
312
+ )
313
+ );
314
+ .btn__container {
315
+ gap: var(--_ctm-dn-wt-hr-se-in-ad-tt-sg);
316
+ &[data-actions-icon-position-hover="left"],
317
+ &[data-actions-icon-position-hover="center"] {
318
+ flex-direction: row;
319
+ }
320
+ &[data-actions-icon-position-hover="right"] {
321
+ flex-direction: row-reverse;
322
+ }
323
+ span {
324
+ svg {
325
+ width: var(--_ctm-dn-wt-hr-se-in-se);
326
+ height: var(--_ctm-dn-wt-hr-se-in-se);
327
+ path {
328
+ stroke: var(--_ctm-dn-wt-hr-se-in-c1);
329
+ }
330
+ }
331
+ }
332
+ .btn__with__text {
333
+ color: var(--_ctm-dn-wt-hr-se-cr);
334
+ font-family: var(--_ctm-dn-wt-hr-se-ft-fy), sans-serif;
335
+ font-size: var(--_ctm-dn-wt-hr-se-ft-se);
336
+ font-weight: var(--_ctm-dn-wt-hr-se-ft-wt);
337
+ font-style: var(--_ctm-dn-wt-hr-se-ft-se-ic);
338
+ text-align: var(--_ctm-dn-wt-hr-se-tt-an);
339
+ letter-spacing: var(--_ctm-dn-wt-hr-se-lr-sg);
340
+ line-height: var(--_ctm-dn-wt-hr-se-le-ht);
341
+ text-decoration: var(--_ctm-dn-wt-hr-se-ue);
342
+ }
343
+ }
344
+ }
345
+ }
346
+ }
347
+ &.compareProduct {
348
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ce-dt-se-bd-cr));
349
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ce-dt-se-br-cr));
350
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ce-dt-se-br-se));
351
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ce-dt-se-br-wh));
352
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ce-dt-se-br-rs));
353
+ box-shadow: var(
354
+ --_hover-show-shadow,
355
+ var(
356
+ --_sf-at-hr-bx-sw,
357
+ var(
358
+ --_show-shadow,
359
+ var(--_ctm-dn-ce-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
360
+ var(--_ctm-dn-ce-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
361
+ var(--_ctm-dn-ce-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
362
+ var(--_ctm-dn-ce-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
363
+ )
364
+ )
365
+ );
366
+ .btn__container {
367
+ gap: var(--_ctm-dn-ce-dt-se-in-ad-tt-sg);
368
+ &[data-actions-icon-position="left"],
369
+ &[data-actions-icon-position="center"] {
370
+ flex-direction: row;
371
+ }
372
+ &[data-actions-icon-position="right"] {
373
+ flex-direction: row-reverse;
374
+ }
375
+ span {
376
+ svg {
377
+ width: var(--_ctm-dn-ce-dt-se-in-se);
378
+ height: var(--_ctm-dn-ce-dt-se-in-se);
379
+ path {
380
+ stroke: var(--_ctm-dn-ce-dt-se-in-c1);
381
+ }
382
+ }
383
+ }
384
+ .btn__with__text {
385
+ color: var(--_ctm-dn-ce-dt-se-cr);
386
+ font-family: var(--_ctm-dn-ce-dt-se-ft-fy), sans-serif;
387
+ font-size: var(--_ctm-dn-ce-dt-se-ft-se);
388
+ font-weight: var(--_ctm-dn-ce-dt-se-ft-wt);
389
+ font-style: var(--_ctm-dn-ce-dt-se-ft-se-ic);
390
+ text-align: var(--_ctm-dn-ce-dt-se-tt-an);
391
+ letter-spacing: var(--_ctm-dn-ce-dt-se-lr-sg);
392
+ line-height: var(--_ctm-dn-ce-dt-se-le-ht);
393
+ text-decoration: var(--_ctm-dn-ce-dt-se-ue);
394
+ }
395
+ &:hover {
396
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ce-hr-se-bd-cr));
397
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ce-hr-se-br-cr));
398
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ce-hr-se-br-se));
399
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ce-hr-se-br-wh));
400
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ce-hr-se-br-rs));
401
+ box-shadow: var(
402
+ --_hover-show-shadow,
403
+ var(
404
+ --_sf-at-hr-bx-sw,
405
+ var(
406
+ --_show-shadow,
407
+ var(--_ctm-dn-ce-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
408
+ var(--_ctm-dn-ce-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
409
+ var(--_ctm-dn-ce-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
410
+ var(--_ctm-dn-ce-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
411
+ )
412
+ )
413
+ );
414
+ .btn__container {
415
+ gap: var(--_ctm-dn-ce-hr-se-in-ad-tt-sg);
416
+ &[data-actions-icon-position-hover="left"],
417
+ &[data-actions-icon-position-hover="center"] {
418
+ flex-direction: row;
419
+ }
420
+ &[data-actions-icon-position-hover="right"] {
421
+ flex-direction: row-reverse;
422
+ }
423
+ span {
424
+ svg {
425
+ width: var(--_ctm-dn-ce-hr-se-in-se);
426
+ height: var(--_ctm-dn-ce-hr-se-in-se);
427
+ path {
428
+ stroke: var(--_ctm-dn-ce-hr-se-in-c1);
429
+ }
430
+ }
431
+ }
432
+ .btn__with__text {
433
+ color: var(--_ctm-dn-ce-hr-se-cr);
434
+ font-family: var(--_ctm-dn-ce-hr-se-ft-fy), sans-serif;
435
+ font-size: var(--_ctm-dn-ce-hr-se-ft-se);
436
+ font-weight: var(--_ctm-dn-ce-hr-se-ft-wt);
437
+ font-style: var(--_ctm-dn-ce-hr-se-ft-se-ic);
438
+ text-align: var(--_ctm-dn-ce-hr-se-tt-an);
439
+ letter-spacing: var(--_ctm-dn-ce-hr-se-lr-sg);
440
+ line-height: var(--_ctm-dn-ce-hr-se-le-ht);
441
+ text-decoration: var(--_ctm-dn-ce-hr-se-ue);
442
+ }
443
+ }
444
+ }
445
+ }
446
+ }
447
+ &.addToQuote {
448
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ad-to-qe-dt-se-bd-cr));
449
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ad-to-qe-dt-se-br-cr));
450
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ad-to-qe-dt-se-br-se));
451
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ad-to-qe-dt-se-br-wh));
452
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ad-to-qe-dt-se-br-rs));
453
+ box-shadow: var(
454
+ --_hover-show-shadow,
455
+ var(
456
+ --_sf-at-hr-bx-sw,
457
+ var(
458
+ --_show-shadow,
459
+ var(--_ctm-dn-ad-to-qe-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
460
+ var(--_ctm-dn-ad-to-qe-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
461
+ var(--_ctm-dn-ad-to-qe-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
462
+ var(--_ctm-dn-ad-to-qe-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
463
+ )
464
+ )
465
+ );
466
+ .btn__container {
467
+ gap: var(--_ctm-dn-ad-to-qe-dt-se-in-ad-tt-sg);
468
+ &[data-actions-icon-position="left"],
469
+ &[data-actions-icon-position="center"] {
470
+ flex-direction: row;
471
+ }
472
+ &[data-actions-icon-position="right"] {
473
+ flex-direction: row-reverse;
474
+ }
475
+ span {
476
+ svg {
477
+ width: var(--_ctm-dn-ad-to-qe-dt-se-in-se);
478
+ height: var(--_ctm-dn-ad-to-qe-dt-se-in-se);
479
+ path {
480
+ stroke: var(--_ctm-dn-ad-to-qe-dt-se-in-c1);
481
+ }
482
+ }
483
+ }
484
+ .btn__with__text {
485
+ color: var(--_ctm-dn-ad-to-qe-dt-se-cr);
486
+ font-family: var(--_ctm-dn-ad-to-qe-dt-se-ft-fy), sans-serif;
487
+ font-size: var(--_ctm-dn-ad-to-qe-dt-se-ft-se);
488
+ font-weight: var(--_ctm-dn-ad-to-qe-dt-se-ft-wt);
489
+ font-style: var(--_ctm-dn-ad-to-qe-dt-se-ft-se-ic);
490
+ text-align: var(--_ctm-dn-ad-to-qe-dt-se-tt-an);
491
+ letter-spacing: var(--_ctm-dn-ad-to-qe-dt-se-lr-sg);
492
+ line-height: var(--_ctm-dn-ad-to-qe-dt-se-le-ht);
493
+ text-decoration: var(--_ctm-dn-ad-to-qe-dt-se-ue);
494
+ }
495
+ &:hover {
496
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ad-to-qe-hr-se-bd-cr));
497
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ad-to-qe-hr-se-br-cr));
498
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ad-to-qe-hr-se-br-se));
499
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ad-to-qe-hr-se-br-wh));
500
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ad-to-qe-hr-se-br-rs));
501
+ box-shadow: var(
502
+ --_hover-show-shadow,
503
+ var(
504
+ --_sf-at-hr-bx-sw,
505
+ var(
506
+ --_show-shadow,
507
+ var(--_ctm-dn-ad-to-qe-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
508
+ var(--_ctm-dn-ad-to-qe-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
509
+ var(--_ctm-dn-ad-to-qe-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
510
+ var(--_ctm-dn-ad-to-qe-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
511
+ )
512
+ )
513
+ );
514
+ .btn__container {
515
+ gap: var(--_ctm-dn-ad-to-qe-hr-se-in-ad-tt-sg);
516
+ &[data-actions-icon-position-hover="left"],
517
+ &[data-actions-icon-position-hover="center"] {
518
+ flex-direction: row;
519
+ }
520
+ &[data-actions-icon-position-hover="right"] {
521
+ flex-direction: row-reverse;
522
+ }
523
+ span {
524
+ svg {
525
+ width: var(--_ctm-dn-ad-to-qe-hr-se-in-se);
526
+ height: var(--_ctm-dn-ad-to-qe-hr-se-in-se);
527
+ path {
528
+ stroke: var(--_ctm-dn-ad-to-qe-hr-se-in-c1);
529
+ }
530
+ }
531
+ }
532
+ .btn__with__text {
533
+ color: var(--_ctm-dn-ad-to-qe-hr-se-cr);
534
+ font-family: var(--_ctm-dn-ad-to-qe-hr-se-ft-fy), sans-serif;
535
+ font-size: var(--_ctm-dn-ad-to-qe-hr-se-ft-se);
536
+ font-weight: var(--_ctm-dn-ad-to-qe-hr-se-ft-wt);
537
+ font-style: var(--_ctm-dn-ad-to-qe-hr-se-ft-se-ic);
538
+ text-align: var(--_ctm-dn-ad-to-qe-hr-se-tt-an);
539
+ letter-spacing: var(--_ctm-dn-ad-to-qe-hr-se-lr-sg);
540
+ line-height: var(--_ctm-dn-ad-to-qe-hr-se-le-ht);
541
+ text-decoration: var(--_ctm-dn-ad-to-qe-hr-se-ue);
542
+ }
543
+ }
544
+ }
545
+ }
546
+ }
547
+ &.addToOrderTemplate {
548
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ad-to-or-te-dt-se-bd-cr));
549
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ad-to-or-te-dt-se-br-cr));
550
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ad-to-or-te-dt-se-br-se));
551
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ad-to-or-te-dt-se-br-wh));
552
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ad-to-or-te-dt-se-br-rs));
553
+ box-shadow: var(
554
+ --_hover-show-shadow,
555
+ var(
556
+ --_sf-at-hr-bx-sw,
557
+ var(
558
+ --_show-shadow,
559
+ var(--_ctm-dn-ad-to-or-te-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
560
+ var(--_ctm-dn-ad-to-or-te-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
561
+ var(--_ctm-dn-ad-to-or-te-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
562
+ var(--_ctm-dn-ad-to-or-te-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
563
+ )
564
+ )
565
+ );
566
+ .btn__container {
567
+ gap: var(--_ctm-dn-ad-to-or-te-dt-se-in-ad-tt-sg);
568
+ &[data-actions-icon-position="left"],
569
+ &[data-actions-icon-position="center"] {
570
+ flex-direction: row;
571
+ }
572
+ &[data-actions-icon-position="right"] {
573
+ flex-direction: row-reverse;
574
+ }
575
+ span {
576
+ svg {
577
+ width: var(--_ctm-dn-ad-to-or-te-dt-se-in-se);
578
+ height: var(--_ctm-dn-ad-to-or-te-dt-se-in-se);
579
+ path {
580
+ stroke: var(--_ctm-dn-ad-to-or-te-dt-se-in-c1);
581
+ }
582
+ }
583
+ }
584
+ .btn__with__text {
585
+ color: var(--_ctm-dn-ad-to-or-te-dt-se-cr);
586
+ font-family: var(--_ctm-dn-ad-to-or-te-dt-se-ft-fy), sans-serif;
587
+ font-size: var(--_ctm-dn-ad-to-or-te-dt-se-ft-se);
588
+ font-weight: var(--_ctm-dn-ad-to-or-te-dt-se-ft-wt);
589
+ font-style: var(--_ctm-dn-ad-to-or-te-dt-se-ft-se-ic);
590
+ text-align: var(--_ctm-dn-ad-to-or-te-dt-se-tt-an);
591
+ letter-spacing: var(--_ctm-dn-ad-to-or-te-dt-se-lr-sg);
592
+ line-height: var(--_ctm-dn-ad-to-or-te-dt-se-le-ht);
593
+ text-decoration: var(--_ctm-dn-ad-to-or-te-dt-se-ue);
594
+ }
595
+ &:hover {
596
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ad-to-or-te-hr-se-bd-cr));
597
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ad-to-or-te-hr-se-br-cr));
598
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ad-to-or-te-hr-se-br-se));
599
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ad-to-or-te-hr-se-br-wh));
600
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ad-to-or-te-hr-se-br-rs));
601
+ box-shadow: var(
602
+ --_hover-show-shadow,
603
+ var(
604
+ --_sf-at-hr-bx-sw,
605
+ var(
606
+ --_show-shadow,
607
+ var(--_ctm-dn-ad-to-or-te-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
608
+ var(--_ctm-dn-ad-to-or-te-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
609
+ var(--_ctm-dn-ad-to-or-te-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
610
+ var(--_ctm-dn-ad-to-or-te-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
611
+ )
612
+ )
613
+ );
614
+ .btn__container {
615
+ gap: var(--_ctm-dn-ad-to-or-te-hr-se-in-ad-tt-sg);
616
+ &[data-actions-icon-position-hover="left"],
617
+ &[data-actions-icon-position-hover="center"] {
618
+ flex-direction: row;
619
+ }
620
+ &[data-actions-icon-position-hover="right"] {
621
+ flex-direction: row-reverse;
622
+ }
623
+ span {
624
+ svg {
625
+ width: var(--_ctm-dn-ad-to-or-te-hr-se-in-se);
626
+ height: var(--_ctm-dn-ad-to-or-te-hr-se-in-se);
627
+ path {
628
+ stroke: var(--_ctm-dn-ad-to-or-te-hr-se-in-c1);
629
+ }
630
+ }
631
+ }
632
+ .btn__with__text {
633
+ color: var(--_ctm-dn-ad-to-or-te-hr-se-cr);
634
+ font-family: var(--_ctm-dn-ad-to-or-te-hr-se-ft-fy), sans-serif;
635
+ font-size: var(--_ctm-dn-ad-to-or-te-hr-se-ft-se);
636
+ font-weight: var(--_ctm-dn-ad-to-or-te-hr-se-ft-wt);
637
+ font-style: var(--_ctm-dn-ad-to-or-te-hr-se-ft-se-ic);
638
+ text-align: var(--_ctm-dn-ad-to-or-te-hr-se-tt-an);
639
+ letter-spacing: var(--_ctm-dn-ad-to-or-te-hr-se-lr-sg);
640
+ line-height: var(--_ctm-dn-ad-to-or-te-hr-se-le-ht);
641
+ text-decoration: var(--_ctm-dn-ad-to-or-te-hr-se-ue);
642
+ }
643
+ }
644
+ }
645
+ }
646
+ }
647
+ &.notifyMeInventoryNotifications {
648
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ny-me-dt-se-bd-cr));
649
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ny-me-dt-se-br-cr));
650
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ny-me-dt-se-br-se));
651
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ny-me-dt-se-br-wh));
652
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ny-me-dt-se-br-rs));
653
+ box-shadow: var(
654
+ --_hover-show-shadow,
655
+ var(
656
+ --_sf-at-hr-bx-sw,
657
+ var(
658
+ --_show-shadow,
659
+ var(--_ctm-dn-ny-me-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
660
+ var(--_ctm-dn-ny-me-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
661
+ var(--_ctm-dn-ny-me-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
662
+ var(--_ctm-dn-ny-me-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
663
+ )
664
+ )
665
+ );
666
+ .btn__container {
667
+ gap: var(--_ctm-dn-ny-me-dt-se-in-ad-tt-sg);
668
+ &[data-actions-icon-position="left"],
669
+ &[data-actions-icon-position="center"] {
670
+ flex-direction: row;
671
+ }
672
+ &[data-actions-icon-position="right"] {
673
+ flex-direction: row-reverse;
674
+ }
675
+ span {
676
+ svg {
677
+ width: var(--_ctm-dn-ny-me-dt-se-in-se);
678
+ height: var(--_ctm-dn-ny-me-dt-se-in-se);
679
+ path {
680
+ stroke: var(--_ctm-dn-ny-me-dt-se-in-c1);
681
+ }
682
+ }
683
+ }
684
+ .btn__with__text {
685
+ color: var(--_ctm-dn-ny-me-dt-se-cr);
686
+ font-family: var(--_ctm-dn-ny-me-dt-se-ft-fy), sans-serif;
687
+ font-size: var(--_ctm-dn-ny-me-dt-se-ft-se);
688
+ font-weight: var(--_ctm-dn-ny-me-dt-se-ft-wt);
689
+ font-style: var(--_ctm-dn-ny-me-dt-se-ft-se-ic);
690
+ text-align: var(--_ctm-dn-ny-me-dt-se-tt-an);
691
+ letter-spacing: var(--_ctm-dn-ny-me-dt-se-lr-sg);
692
+ line-height: var(--_ctm-dn-ny-me-dt-se-le-ht);
693
+ text-decoration: var(--_ctm-dn-ny-me-dt-se-ue);
694
+ }
695
+ &:hover {
696
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-ny-me-hr-se-bd-cr));
697
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-ny-me-hr-se-br-cr));
698
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-ny-me-hr-se-br-se));
699
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-ny-me-hr-se-br-wh));
700
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-ny-me-hr-se-br-rs));
701
+ box-shadow: var(
702
+ --_hover-show-shadow,
703
+ var(
704
+ --_sf-at-hr-bx-sw,
705
+ var(
706
+ --_show-shadow,
707
+ var(--_ctm-dn-ny-me-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
708
+ var(--_ctm-dn-ny-me-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
709
+ var(--_ctm-dn-ny-me-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
710
+ var(--_ctm-dn-ny-me-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
711
+ )
712
+ )
713
+ );
714
+ .btn__container {
715
+ gap: var(--_ctm-dn-ny-me-hr-se-in-ad-tt-sg);
716
+ &[data-actions-icon-position-hover="left"],
717
+ &[data-actions-icon-position-hover="center"] {
718
+ flex-direction: row;
719
+ }
720
+ &[data-actions-icon-position-hover="right"] {
721
+ flex-direction: row-reverse;
722
+ }
723
+ span {
724
+ svg {
725
+ width: var(--_ctm-dn-ny-me-hr-se-in-se);
726
+ height: var(--_ctm-dn-ny-me-hr-se-in-se);
727
+ path {
728
+ stroke: var(--_ctm-dn-ny-me-hr-se-in-c1);
729
+ }
730
+ }
731
+ }
732
+ .btn__with__text {
733
+ color: var(--_ctm-dn-ny-me-hr-se-cr);
734
+ font-family: var(--_ctm-dn-ny-me-hr-se-ft-fy), sans-serif;
735
+ font-size: var(--_ctm-dn-ny-me-hr-se-ft-se);
736
+ font-weight: var(--_ctm-dn-ny-me-hr-se-ft-wt);
737
+ font-style: var(--_ctm-dn-ny-me-hr-se-ft-se-ic);
738
+ text-align: var(--_ctm-dn-ny-me-hr-se-tt-an);
739
+ letter-spacing: var(--_ctm-dn-ny-me-hr-se-lr-sg);
740
+ line-height: var(--_ctm-dn-ny-me-hr-se-le-ht);
741
+ text-decoration: var(--_ctm-dn-ny-me-hr-se-ue);
742
+ }
743
+ }
744
+ }
745
+ }
746
+ }
747
+ &.downloadProductInformation {
748
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-dd-dt-se-bd-cr));
749
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-dd-dt-se-br-cr));
750
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-dd-dt-se-br-se));
751
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-dd-dt-se-br-wh));
752
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-dd-dt-se-br-rs));
753
+ box-shadow: var(
754
+ --_hover-show-shadow,
755
+ var(
756
+ --_sf-at-hr-bx-sw,
757
+ var(
758
+ --_show-shadow,
759
+ var(--_ctm-dn-dd-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
760
+ var(--_ctm-dn-dd-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
761
+ var(--_ctm-dn-dd-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
762
+ var(--_ctm-dn-dd-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
763
+ )
764
+ )
765
+ );
766
+ .btn__container {
767
+ gap: var(--_ctm-dn-dd-dt-se-in-ad-tt-sg);
768
+ &[data-actions-icon-position="left"],
769
+ &[data-actions-icon-position="center"] {
770
+ flex-direction: row;
771
+ }
772
+ &[data-actions-icon-position="right"] {
773
+ flex-direction: row-reverse;
774
+ }
775
+ span {
776
+ svg {
777
+ width: var(--_ctm-dn-dd-dt-se-in-se);
778
+ height: var(--_ctm-dn-dd-dt-se-in-se);
779
+ path {
780
+ stroke: var(--_ctm-dn-dd-dt-se-in-c1);
781
+ }
782
+ }
783
+ }
784
+ .btn__with__text {
785
+ color: var(--_ctm-dn-dd-dt-se-cr);
786
+ font-family: var(--_ctm-dn-dd-dt-se-ft-fy), sans-serif;
787
+ font-size: var(--_ctm-dn-dd-dt-se-ft-se);
788
+ font-weight: var(--_ctm-dn-dd-dt-se-ft-wt);
789
+ font-style: var(--_ctm-dn-dd-dt-se-ft-se-ic);
790
+ text-align: var(--_ctm-dn-dd-dt-se-tt-an);
791
+ letter-spacing: var(--_ctm-dn-dd-dt-se-lr-sg);
792
+ line-height: var(--_ctm-dn-dd-dt-se-le-ht);
793
+ text-decoration: var(--_ctm-dn-dd-dt-se-ue);
794
+ }
795
+ &:hover {
796
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-dd-hr-se-bd-cr));
797
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-dd-hr-se-br-cr));
798
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-dd-hr-se-br-se));
799
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-dd-hr-se-br-wh));
800
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-dd-hr-se-br-rs));
801
+ box-shadow: var(
802
+ --_hover-show-shadow,
803
+ var(
804
+ --_sf-at-hr-bx-sw,
805
+ var(
806
+ --_show-shadow,
807
+ var(--_ctm-dn-dd-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
808
+ var(--_ctm-dn-dd-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
809
+ var(--_ctm-dn-dd-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
810
+ var(--_ctm-dn-dd-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
811
+ )
812
+ )
813
+ );
814
+ .btn__container {
815
+ gap: var(--_ctm-dn-dd-hr-se-in-ad-tt-sg);
816
+ &[data-actions-icon-position-hover="left"],
817
+ &[data-actions-icon-position-hover="center"] {
818
+ flex-direction: row;
819
+ }
820
+ &[data-actions-icon-position-hover="right"] {
821
+ flex-direction: row-reverse;
822
+ }
823
+ span {
824
+ svg {
825
+ width: var(--_ctm-dn-dd-hr-se-in-se);
826
+ height: var(--_ctm-dn-dd-hr-se-in-se);
827
+ path {
828
+ stroke: var(--_ctm-dn-dd-hr-se-in-c1);
829
+ }
830
+ }
831
+ }
832
+ .btn__with__text {
833
+ color: var(--_ctm-dn-dd-hr-se-cr);
834
+ font-family: var(--_ctm-dn-dd-hr-se-ft-fy), sans-serif;
835
+ font-size: var(--_ctm-dn-dd-hr-se-ft-se);
836
+ font-weight: var(--_ctm-dn-dd-hr-se-ft-wt);
837
+ font-style: var(--_ctm-dn-dd-hr-se-ft-se-ic);
838
+ text-align: var(--_ctm-dn-dd-hr-se-tt-an);
839
+ letter-spacing: var(--_ctm-dn-dd-hr-se-lr-sg);
840
+ line-height: var(--_ctm-dn-dd-hr-se-le-ht);
841
+ text-decoration: var(--_ctm-dn-dd-hr-se-ue);
842
+ }
843
+ }
844
+ }
845
+ }
846
+ }
847
+ }
848
+ .button_options {
849
+ position: relative;
850
+ .more__button {
851
+ padding: 0.45rem;
852
+ min-width: 50px;
853
+ cursor: pointer;
132
854
  display: flex;
133
855
  align-items: center;
134
- justify-content: flex-start;
135
- height: 100%;
136
- width: 100%;
137
- gap: 1rem;
856
+ justify-content: center;
857
+ gap: var(--_ctm-dn-me-dt-se-in-ad-tt-sg);
858
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-me-dt-se-bd-cr));
859
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-me-dt-se-br-cr));
860
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-me-dt-se-br-se));
861
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-me-dt-se-br-wh));
862
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-me-dt-se-br-rs));
863
+ box-shadow: var(
864
+ --_hover-show-shadow,
865
+ var(
866
+ --_sf-at-hr-bx-sw,
867
+ var(
868
+ --_show-shadow,
869
+ var(--_ctm-dn-me-dt-se-sw-ae, var(--_tst-dn-dt-se-sw-ae))
870
+ var(--_ctm-dn-me-dt-se-sw-br, var(--_tst-dn-dt-se-sw-br))
871
+ var(--_ctm-dn-me-dt-se-sw-sd, var(--_tst-dn-dt-se-sw-sd))
872
+ var(--_ctm-dn-me-dt-se-sw-cr, var(--_tst-dn-dt-se-sw-cr))
873
+ )
874
+ )
875
+ );
876
+ .btn__with__text {
877
+ color: var(--_ctm-dn-me-dt-se-cr);
878
+ font-family: var(--_ctm-dn-me-dt-se-ft-fy), sans-serif;
879
+ font-size: var(--_ctm-dn-me-dt-se-ft-se);
880
+ font-weight: var(--_ctm-dn-me-dt-se-ft-wt);
881
+ font-style: var(--_ctm-dn-me-dt-se-ft-se-ic);
882
+ text-align: var(--_ctm-dn-me-dt-se-tt-an);
883
+ letter-spacing: var(--_ctm-dn-me-dt-se-lr-sg);
884
+ line-height: var(--_ctm-dn-me-dt-se-le-ht);
885
+ text-decoration: var(--_ctm-dn-me-dt-se-ue);
886
+ }
138
887
  span {
139
888
  svg {
889
+ width: var(--_ctm-dn-me-dt-se-in-se);
890
+ height: var(--_ctm-dn-me-dt-se-in-se);
140
891
  path {
141
- stroke: #000;
892
+ stroke: var(--_ctm-dn-me-dt-se-in-c1);
142
893
  }
143
894
  }
144
895
  }
145
- .btn__with__text {
146
- color: #000;
147
- height: 2.5rem;
896
+ &:hover {
897
+ background-color: var(--_sf-at-hr-bd-cr, var(--_ctm-dn-me-hr-se-bd-cr));
898
+ border-color: var(--_sf-at-hr-br-cr, var(--_ctm-dn-me-hr-se-br-cr));
899
+ border-style: var(--_sf-at-hr-br-se, var(--_ctm-dn-me-hr-se-br-se));
900
+ border-width: var(--_sf-at-hr-br-wt, var(--_ctm-dn-me-hr-se-br-wh));
901
+ border-radius: var(--_sf-at-hr-br-br, var(--_ctm-dn-me-hr-se-br-rs));
902
+ box-shadow: var(
903
+ --_hover-show-shadow,
904
+ var(
905
+ --_sf-at-hr-bx-sw,
906
+ var(
907
+ --_show-shadow,
908
+ var(--_ctm-dn-me-hr-se-sw-ae, var(--_tst-dn-hr-se-sw-ae))
909
+ var(--_ctm-dn-me-hr-se-sw-br, var(--_tst-dn-hr-se-sw-br))
910
+ var(--_ctm-dn-me-hr-se-sw-sd, var(--_tst-dn-hr-se-sw-sd))
911
+ var(--_ctm-dn-me-hr-se-sw-cr, var(--_tst-dn-hr-se-sw-cr))
912
+ )
913
+ )
914
+ );
915
+ .btn__with__text {
916
+ color: var(--_ctm-dn-me-hr-se-cr);
917
+ font-family: var(--_ctm-dn-me-hr-se-ft-fy), sans-serif;
918
+ font-size: var(--_ctm-dn-me-hr-se-ft-se);
919
+ font-weight: var(--_ctm-dn-me-hr-se-ft-wt);
920
+ font-style: var(--_ctm-dn-me-hr-se-ft-se-ic);
921
+ text-align: var(--_ctm-dn-me-hr-se-tt-an);
922
+ letter-spacing: var(--_ctm-dn-me-hr-se-lr-sg);
923
+ line-height: var(--_ctm-dn-me-hr-se-le-ht);
924
+ text-decoration: var(--_ctm-dn-me-hr-se-ue);
925
+ }
926
+ span {
927
+ svg {
928
+ width: var(--_ctm-dn-me-hr-se-in-se);
929
+ height: var(--_ctm-dn-me-hr-se-in-se);
930
+ path {
931
+ stroke: var(--_ctm-dn-me-hr-se-in-c1);
932
+ }
933
+ }
934
+ }
148
935
  }
149
936
  }
150
- }
151
- .more__button {
152
- padding: 0.5rem 1rem;
153
- background-color: rgb(221, 221, 221);
154
- width: 30%;
155
- cursor: pointer;
156
- span {
157
- svg {
158
- width: 1.5rem;
159
- height: 1.5rem;
937
+ .dropdown_buttons {
938
+ position: absolute;
939
+ min-width: 150px;
940
+ width: 80%;
941
+ top: 100%;
942
+ right: 0px;
943
+ border: 1px solid var(--_gray-200);
944
+ border-radius: 8px;
945
+ overflow: hidden;
946
+ margin-top: 2px;
947
+ ul {
948
+ list-style: none;
949
+ max-height: 200px;
950
+ overflow-y: auto;
951
+ li {
952
+ background-color: var(--_base-white);
953
+ padding: 5px;
954
+ color: var(--_gray-700);
955
+ font-size: 14px;
956
+ font-weight: 500;
957
+ cursor: pointer;
958
+ &:hover {
959
+ background-color: var(--_primary-25);
960
+ color: var(--_primary-400);
961
+ cursor: pointer;
962
+ }
963
+ }
160
964
  }
161
965
  }
162
966
  }