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

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