@sc-360-v2/storefront-cms-library 0.2.77 → 0.2.80

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/dist/builder.js +1 -1
  2. package/dist/button.scss +1 -1
  3. package/dist/buy-for-tab-container.scss +89 -0
  4. package/dist/buy-for-tab.scss +579 -0
  5. package/dist/buy-for-tabs-container-item.scss +80 -0
  6. package/dist/buyForHeaders.scss +203 -0
  7. package/dist/buyForPopup.scss +227 -0
  8. package/dist/cart-details.scss +1 -1
  9. package/dist/cart-products-sidebar.scss +201 -0
  10. package/dist/cartDropdownOverlay.scss +34 -27
  11. package/dist/checkout.scss +173 -0
  12. package/dist/code-temp.scss +1 -1
  13. package/dist/container.scss +5 -0
  14. package/dist/functions.js +1 -1
  15. package/dist/icons.js +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/layouter.scss +9 -2
  18. package/dist/light-box-v2.scss +4 -0
  19. package/dist/product-image.scss +4 -0
  20. package/dist/quick-links.scss +249 -194
  21. package/dist/repeater-embla-controls.scss +71 -96
  22. package/dist/repeater.scss +8 -2
  23. package/dist/search.scss +30 -0
  24. package/dist/types/builder/elements/add-order/index.d.ts +1 -1
  25. package/dist/types/builder/elements/buy-for-tab/index.d.ts +46 -0
  26. package/dist/types/builder/elements/buy-for-tab-container/index.d.ts +45 -0
  27. package/dist/types/builder/elements/checkout/index.d.ts +27 -0
  28. package/dist/types/builder/enums/index.d.ts +6 -0
  29. package/dist/types/builder/index.d.ts +4 -1
  30. package/dist/types/builder/tools/element-edit/bundle.d.ts +18 -0
  31. package/dist/types/builder/tools/element-edit/buyForTabContainer.d.ts +9 -0
  32. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +215 -0
  33. package/dist/types/builder/tools/element-edit/checkout.d.ts +343 -0
  34. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  35. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +90 -127
  36. package/dist/types/builder/tools/element-edit/section.d.ts +2 -1
  37. package/dist/types/builder/tools/element-edit/storeLocations.d.ts +2 -1
  38. package/dist/uom-selector.scss +3 -3
  39. package/dist/widget.scss +7 -2
  40. package/package.json +1 -1
  41. package/dist/buyFor.scss +0 -153
package/dist/button.scss CHANGED
@@ -144,7 +144,7 @@
144
144
  var(--_ctm-mob-dn-dt-se-bd-cr, var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr)))
145
145
  );
146
146
  // padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
147
- padding: var(--_sf-element-vt-pd) var(--_sf-element-hr-pd);
147
+ padding: min(8px, var(--_sf-element-vt-pd)) min(15px, var(--_sf-element-hr-pd));
148
148
  display: flex;
149
149
  flex-direction: var(--_sf-fd-bn);
150
150
  align-items: center;
@@ -0,0 +1,89 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ [data-div-type="element"] {
4
+ &[data-element-type="buyForTabsContainer"] {
5
+ // width: var(--_sf-con-nw-wh);
6
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
7
+ // width: calc(1% * var(--_ctm-buyfo-ele-nw-wh-vl, auto));
8
+ // width: 100%;
9
+ // height: var(--_ctm-con-lt-ht);
10
+ // margin: var(--_ctm-buyfo-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
11
+
12
+ // width: 100%;
13
+ // background: var(--_ctm-buyfo-dn-bd-cr);
14
+
15
+ & > div {
16
+ &.wrapper {
17
+ width: 100%;
18
+ height: 100%;
19
+ padding: var(--_ctm-mob-buyfo-lt-pg, var(--_ctm-tab-buyfo-lt-pg, var(--_ctm-buyfo-lt-pg)));
20
+
21
+ background-color: var(
22
+ --_ctm-mob-buyfo-dn-bd-cr,
23
+ var(--_ctm-tab-buyfo-dn-bd-cr, var(--_ctm-buyfo-dn-bd-cr))
24
+ );
25
+ background-image: var(
26
+ --_ctm-mob-buyfo-dn-bd-ie,
27
+ var(--_ctm-tab-buyfo-dn-bd-ie, var(--_ctm-buyfo-dn-bd-ie))
28
+ );
29
+ background-attachment: var(
30
+ --_ctm-mob-buyfo-dn-bd-at,
31
+ var(--_ctm-tab-buyfo-dn-bd-at, var(--_ctm-buyfo-dn-bd-at))
32
+ );
33
+ background-position: var(
34
+ --_ctm-mob-buyfo-dn-bd-pn,
35
+ var(--_ctm-tab-buyfo-dn-bd-pn, var(--_ctm-buyfo-dn-bd-pn))
36
+ );
37
+ background-repeat: var(
38
+ --_ctm-mob-buyfo-dn-bd-rt,
39
+ var(--_ctm-tab-buyfo-dn-bd-rt, var(--_ctm-buyfo-dn-bd-rt))
40
+ );
41
+ background-size: var(
42
+ --_ctm-mob-buyfo-dn-bd-se,
43
+ var(--_ctm-tab-buyfo-dn-bd-se, var(--_ctm-buyfo-dn-bd-se))
44
+ );
45
+ border-radius: var(
46
+ --_ctm-mob-buyfo-dn-br-rs,
47
+ var(--_ctm-tab-buyfo-dn-br-rs, var(--_ctm-buyfo-dn-br-rs))
48
+ );
49
+ border-color: var(
50
+ --_ctm-mob-buyfo-dn-br-cr,
51
+ var(--_ctm-tab-buyfo-dn-br-cr, var(--_ctm-buyfo-dn-br-cr))
52
+ );
53
+ border-style: var(
54
+ --_ctm-mob-buyfo-dn-br-se,
55
+ var(--_ctm-tab-buyfo-dn-br-se, var(--_ctm-buyfo-dn-br-se))
56
+ );
57
+ border-width: var(
58
+ --_ctm-mob-buyfo-dn-br-wh,
59
+ var(--_ctm-tab-buyfo-dn-br-wh, var(--_ctm-buyfo-dn-br-wh))
60
+ );
61
+ box-shadow: var(
62
+ --_hover-show-shadow,
63
+ var(
64
+ --_sf-hr-bx-sw,
65
+ var(
66
+ --_show-shadow,
67
+ var(
68
+ --_ctm-mob-dn-dt-se-sw-ae,
69
+ var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
70
+ )
71
+ var(
72
+ --_ctm-mob-dn-dt-se-sw-br,
73
+ var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
74
+ )
75
+ var(
76
+ --_ctm-mob-dn-dt-se-sw-sd,
77
+ var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
78
+ )
79
+ var(
80
+ --_ctm-mob-dn-dt-se-sw-cr,
81
+ var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
82
+ )
83
+ )
84
+ )
85
+ );
86
+ }
87
+ }
88
+ }
89
+ }
@@ -0,0 +1,579 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ $activeElementSelector: "[data-has-clicked='true']";
4
+ $root: "flex__buy";
5
+ $sfKey: "--_flex-buy-";
6
+ $tabHeader: "#{$root}__header";
7
+ $tabHeaderWrapper: "#{$tabHeader}__wrapper";
8
+ $tabBody: "#{$root}__body";
9
+ $tabBodyWrapper: #{$tabBody}__wrapper;
10
+
11
+ [data-div-type="element"] {
12
+ &[data-element-type="buyForWithTabs"] {
13
+ width: calc(
14
+ 1% *
15
+ var(
16
+ --_ctm-mob-buy-ele-nw-wh-vl,
17
+ var(--_ctm-tab-buy-ele-nw-wh-vl, var(--_ctm-buy-ele-nw-wh-vl, auto))
18
+ )
19
+ );
20
+ margin: var(
21
+ --_ctm-mob-buy-lt-mn,
22
+ var(--_ctm-tab-buy-lt-mn, var(--_ctm-buy-lt-mn, var(--_ctm-lt-mn)))
23
+ );
24
+
25
+ & > div {
26
+ &.wrapper {
27
+ width: 100%;
28
+ padding: var(--_ctm-mob-buy-lt-pg, var(--_ctm-tab-buy-lt-pg, var(--_ctm-buy-lt-pg)));
29
+
30
+ background-color: var(
31
+ --_ctm-mob-buy-dn-tb-cr-bd-cr,
32
+ var(--_ctm-tab-buy-dn-tb-cr-bd-cr, var(--_ctm-buy-dn-tb-cr-bd-cr))
33
+ );
34
+ // background-image: var(
35
+ // --_ctm-mob-buy-dn-bd-ie,
36
+ // var(--_ctm-tab-buy-dn-bd-ie, var(--_ctm-buy-dn-bd-ie))
37
+ // );
38
+ // background-attachment: var(
39
+ // --_ctm-mob-buy-dn-bd-at,
40
+ // var(--_ctm-tab-buy-dn-bd-at, var(--_ctm-buy-dn-bd-at))
41
+ // );
42
+ // background-position: var(
43
+ // --_ctm-mob-buy-dn-bd-pn,
44
+ // var(--_ctm-tab-buy-dn-bd-pn, var(--_ctm-buy-dn-bd-pn))
45
+ // );
46
+ // background-repeat: var(
47
+ // --_ctm-mob-buy-dn-bd-rt,
48
+ // var(--_ctm-tab-buy-dn-bd-rt, var(--_ctm-buy-dn-bd-rt))
49
+ // );
50
+ // background-size: var(
51
+ // --_ctm-mob-buy-dn-bd-se,
52
+ // var(--_ctm-tab-buy-dn-bd-se, var(--_ctm-buy-dn-bd-se))
53
+ // );
54
+ border-radius: var(
55
+ --_hide-buy-own-border,
56
+ var(
57
+ --_ctm-mob-buy-dn-tb-cr-br-rs,
58
+ var(--_ctm-tab-buy-dn-tb-cr-br-rs, var(--_ctm-buy-dn-tb-cr-br-rs))
59
+ )
60
+ );
61
+ border-color: var(
62
+ --_hide-buy-own-border,
63
+ var(
64
+ --_ctm-mob-buy-dn-tb-cr-br-cr,
65
+ var(--_ctm-tab-buy-dn-tb-cr-br-cr, var(--_ctm-buy-dn-tb-cr-br-cr))
66
+ )
67
+ );
68
+ border-style: var(
69
+ --_hide-buy-own-border,
70
+ var(
71
+ --_ctm-mob-buy-dn-tb-cr-br-se,
72
+ var(--_ctm-tab-buy-dn-tb-cr-br-se, var(--_ctm-buy-dn-tb-cr-br-se))
73
+ )
74
+ );
75
+ border-width: var(
76
+ --_hide-buy-own-border,
77
+ var(
78
+ --_ctm-mob-buy-dn-tb-cr-br-wh,
79
+ var(--_ctm-tab-buy-dn-tb-cr-br-wh, var(--_ctm-buy-dn-tb-cr-br-wh))
80
+ )
81
+ );
82
+ box-shadow: var(
83
+ --_hide-buy-own-shadow,
84
+ var(
85
+ --_ctm-mob-buy-dn-tb-cr-sw-ae,
86
+ var(--_ctm-tab-buy-dn-tb-cr-sw-ae, var(--_ctm-buy-dn-tb-cr-sw-ae))
87
+ )
88
+ var(
89
+ --_ctm-mob-buy-dn-tb-cr-sw-br,
90
+ var(--_ctm-tab-buy-dn-tb-cr-sw-br, var(--_ctm-buy-dn-tb-cr-sw-br))
91
+ )
92
+ var(
93
+ --_ctm-mob-buy-dn-tb-cr-sw-sd,
94
+ var(--_ctm-tab-buy-dn-tb-cr-sw-sd, var(--_ctm-buy-dn-tb-cr-sw-sd))
95
+ )
96
+ var(
97
+ --_ctm-mob-buy-dn-tb-cr-sw-cr,
98
+ var(--_ctm-tab-buy-dn-tb-cr-sw-cr, var(--_ctm-buy-dn-tb-cr-sw-cr))
99
+ )
100
+ );
101
+
102
+ display: var(--_d-flex) !important;
103
+ min-height: var(
104
+ --_ctm-mob-buy-lt-ht,
105
+ var(--_ctm-tab-buy-lt-ht, var(--_ctm-buy-lt-ht))
106
+ ) !important;
107
+ flex-direction: var(#{$sfKey}fd, column);
108
+
109
+ &.hrz {
110
+ #{$sfKey}fd: column;
111
+ #{$sfKey}fd-header: row;
112
+ #{$sfKey}fd-jst: var(
113
+ --_ctm-mob-buy-lt-jy-ct,
114
+ var(--_ctm-tab-buy-lt-jy-ct, var(--_ctm-buy-lt-jy-ct))
115
+ );
116
+ }
117
+ &.vtl {
118
+ #{$sfKey}fd: row;
119
+ #{$sfKey}fd-header: column;
120
+ #{$sfKey}fd-algn: var(
121
+ --_ctm-mob-buy-lt-an-is,
122
+ var(--_ctm-tab-buy-lt-an-is, var(--_ctm-buy-lt-an-is))
123
+ );
124
+ }
125
+
126
+ & > div {
127
+ &.#{$tabHeader} {
128
+ display: var(--_d-flex);
129
+
130
+ &[data-hs-br="false"] {
131
+ --_hide-btn-border: none;
132
+ }
133
+ &[data-hs-bs="false"] {
134
+ --_hide-btn-shadow: none;
135
+ }
136
+ &[data-tl-vl="stretched"] {
137
+ --_sf-tl-vl-al: space-between;
138
+ }
139
+ & > .#{$tabHeaderWrapper} {
140
+ --_sf-gap-vl: var(
141
+ --_ctm-mob-buy-lt-tb-sg,
142
+ var(--_ctm-tab-buy-lt-tb-sg, var(--_ctm-buy-lt-tb-sg))
143
+ );
144
+ width: 100%;
145
+ display: var(--_d-flex);
146
+ flex-direction: var(#{$sfKey}fd-header, row);
147
+ &:is(.vtl *) {
148
+ justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-algn));
149
+ row-gap: var(--_sf-gap-vl);
150
+ }
151
+ &:is(.hrz *) {
152
+ justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-jst));
153
+ column-gap: var(--_sf-gap-vl);
154
+
155
+ &[data-ovf-vl="wrap"] {
156
+ flex-wrap: wrap;
157
+ }
158
+ &[data-ovf-vl="no wrap"] {
159
+ overflow-x: auto;
160
+ scrollbar-width: none;
161
+ }
162
+ }
163
+
164
+ & > button {
165
+ display: var(--_d-flex);
166
+ padding-inline: var(
167
+ --_ctm-mob-buy-lt-hl-pg,
168
+ var(--_ctm-tab-buy-lt-hl-pg, var(--_ctm-buy-lt-hl-pg))
169
+ );
170
+ padding-block: var(
171
+ --_ctm-mob-buy-lt-vl-pg,
172
+ var(--_ctm-tab-buy-lt-vl-pg, var(--_ctm-buy-lt-vl-pg))
173
+ );
174
+ background-color: var(
175
+ --_sf-buy-sd-bg-cr,
176
+ var(
177
+ --_sf-buy-hr-bg-cr,
178
+ var(
179
+ --_ctm-mob-buy-dn-ts-dt-se-bd-cr,
180
+ var(--_ctm-tab-buy-dn-ts-dt-se-bd-cr, var(--_ctm-buy-dn-ts-dt-se-bd-cr))
181
+ )
182
+ )
183
+ );
184
+
185
+ border-color: var(
186
+ --_hide-btn-border,
187
+ var(
188
+ --_sf-buy-sd-br-cr,
189
+ var(
190
+ --_sf-buy-hr-br-cr,
191
+ var(
192
+ --_ctm-mob-buy-dn-ts-dt-se-br-cr,
193
+ var(--_ctm-tab-buy-dn-ts-dt-se-br-cr, var(--_ctm-buy-dn-ts-dt-se-br-cr))
194
+ )
195
+ )
196
+ )
197
+ );
198
+ border-style: var(
199
+ --_hide-btn-border,
200
+ var(
201
+ --_sf-buy-sd-br-sty,
202
+ var(
203
+ --_sf-buy-hr-br-sty,
204
+ var(
205
+ --_ctm-mob-buy-dn-ts-dt-se-br-se,
206
+ var(--_ctm-tab-buy-dn-ts-dt-se-br-se, var(--_ctm-buy-dn-ts-dt-se-br-se))
207
+ )
208
+ )
209
+ )
210
+ );
211
+ border-width: var(
212
+ --_hide-btn-border,
213
+ var(
214
+ --_sf-buy-sd-br-wt,
215
+ var(
216
+ --_sf-buy-hr-br-wt,
217
+ var(
218
+ --_ctm-mob-buy-dn-ts-dt-se-br-wh,
219
+ var(--_ctm-tab-buy-dn-ts-dt-se-br-wh, var(--_ctm-buy-dn-ts-dt-se-br-wh))
220
+ )
221
+ )
222
+ )
223
+ );
224
+ border-radius: var(
225
+ --_sf-buy-sd-br-rs,
226
+ var(
227
+ --_sf-buy-hr-br-rs,
228
+ var(
229
+ --_ctm-mob-buy-dn-ts-dt-se-br-rs,
230
+ var(--_ctm-tab-buy-dn-ts-dt-se-br-rs, var(--_ctm-buy-dn-ts-dt-se-br-rs))
231
+ )
232
+ )
233
+ );
234
+
235
+ box-shadow: var(
236
+ --_hide-btn-shadow,
237
+ var(
238
+ --_sf-buy-sd-sw-ae,
239
+ var(
240
+ --_sf-buy-hr-sw-ae,
241
+ var(
242
+ --_ctm-mob-buy-dn-tb-cr-sw-ae,
243
+ var(--_ctm-tab-buy-dn-tb-cr-sw-ae, var(--_ctm-buy-dn-tb-cr-sw-ae))
244
+ )
245
+ )
246
+ )
247
+ var(
248
+ --_sf-buy-sd-sw-br,
249
+ var(
250
+ --_sf-buy-hr-sw-br,
251
+ var(
252
+ --_ctm-mob-buy-dn-tb-cr-sw-br,
253
+ var(--_ctm-tab-buy-dn-tb-cr-sw-br, var(--_ctm-buy-dn-tb-cr-sw-br))
254
+ )
255
+ )
256
+ )
257
+ var(
258
+ --_sf-buy-sd-sw-sd,
259
+ var(
260
+ --_sf-buy-hr-sw-sd,
261
+ var(
262
+ --_ctm-mob-buy-dn-tb-cr-sw-sd,
263
+ var(--_ctm-tab-buy-dn-tb-cr-sw-sd, var(--_ctm-buy-dn-tb-cr-sw-sd))
264
+ )
265
+ )
266
+ )
267
+ var(
268
+ --_sf-buy-sd-sw-cr,
269
+ var(
270
+ --_sf-buy-hr-sw-cr,
271
+ var(
272
+ --_ctm-mob-buy-dn-tb-cr-sw-cr,
273
+ var(--_ctm-tab-buy-dn-tb-cr-sw-cr, var(--_ctm-buy-dn-tb-cr-sw-cr))
274
+ )
275
+ )
276
+ )
277
+ );
278
+
279
+ &.active {
280
+ --_sf-buy-sd-bg-cr: var(
281
+ --_ctm-mob-buy-dn-ts-sd-se-bd-cr,
282
+ var(--_ctm-tab-buy-dn-ts-sd-se-bd-cr, var(--_ctm-buy-dn-ts-sd-se-bd-cr))
283
+ );
284
+
285
+ --_sf-buy-sd-br-cr: var(
286
+ --_ctm-mob-buy-dn-ts-sd-se-br-cr,
287
+ var(--_ctm-tab-buy-dn-ts-sd-se-br-cr, var(--_ctm-buy-dn-ts-sd-se-br-cr))
288
+ );
289
+ --_sf-buy-sd-br-wt: var(
290
+ --_ctm-mob-buy-dn-ts-sd-se-br-wh,
291
+ var(--_ctm-tab-buy-dn-ts-sd-se-br-wh, var(--_ctm-buy-dn-ts-sd-se-br-wh))
292
+ );
293
+ --_sf-buy-sd-br-sty: var(
294
+ --_ctm-mob-buy-dn-ts-sd-se-br-se,
295
+ var(--_ctm-tab-buy-dn-ts-sd-se-br-se, var(--_ctm-buy-dn-ts-sd-se-br-se))
296
+ );
297
+ --_sf-buy-sd-br-rs: var(
298
+ --_ctm-mob-buy-dn-ts-sd-se-br-rs,
299
+ var(--_ctm-tab-buy-dn-ts-sd-se-br-rs, var(--_ctm-buy-dn-ts-sd-se-br-rs))
300
+ );
301
+ --_sf-buy-sd-sw-ae: var(
302
+ --_ctm-mob-buy-dn-ts-sd-se-sw-ae,
303
+ var(--_ctm-tab-buy-dn-ts-sd-se-sw-ae, var(--_ctm-buy-dn-ts-sd-se-sw-ae))
304
+ );
305
+ --_sf-buy-sd-sw-cr: var(
306
+ --_ctm-mob-buy-dn-ts-sd-se-sw-cr,
307
+ var(--_ctm-tab-buy-dn-ts-sd-se-sw-cr, var(--_ctm-buy-dn-ts-sd-se-sw-cr))
308
+ );
309
+ --_sf-buy-sd-sw-sd: var(
310
+ --_ctm-mob-buy-dn-ts-sd-se-sw-sd,
311
+ var(--_ctm-tab-buy-dn-ts-sd-se-sw-sd, var(--_ctm-buy-dn-ts-sd-se-sw-sd))
312
+ );
313
+ --_sf-buy-sd-sw-br: var(
314
+ --_ctm-mob-buy-dn-ts-sd-se-sw-br,
315
+ var(--_ctm-tab-buy-dn-ts-sd-se-sw-br, var(--_ctm-buy-dn-ts-sd-se-sw-br))
316
+ );
317
+
318
+ --_sf-buy-sd-ft-fy: var(
319
+ --_ctm-mob-buy-dn-ts-sd-se-ft-fy,
320
+ var(--_ctm-tab-buy-dn-ts-sd-se-ft-fy, var(--_ctm-buy-dn-ts-sd-se-ft-fy))
321
+ );
322
+ --_sf-buy-sd-ft-sz: var(
323
+ --_ctm-mob-buy-dn-ts-sd-se-ft-se,
324
+ var(--_ctm-tab-buy-dn-ts-sd-se-ft-se, var(--_ctm-buy-dn-ts-sd-se-ft-se))
325
+ );
326
+ --_sf-buy-sd-ft-cr: var(
327
+ --_ctm-mob-buy-dn-ts-sd-se-cr,
328
+ var(--_ctm-tab-buy-dn-ts-sd-se-cr, var(--_ctm-buy-dn-ts-sd-se-cr))
329
+ );
330
+ --_sf-buy-sd-ft-wt: var(
331
+ --_ctm-mob-buy-dn-ts-sd-se-ft-wt,
332
+ var(--_ctm-tab-buy-dn-ts-sd-se-ft-wt, var(--_ctm-buy-dn-ts-sd-se-ft-wt))
333
+ );
334
+ --_sf-buy-sd-ft-sty: var(
335
+ --_ctm-mob-buy-dn-ts-sd-se-ft-se-ic,
336
+ var(--_ctm-tab-buy-dn-ts-sd-se-ft-se-ic, var(--_ctm-buy-dn-ts-sd-se-ft-se-ic))
337
+ );
338
+ --_sf-buy-sd-ft-tdc: var(
339
+ --_ctm-mob-buy-dn-ts-sd-se-ue,
340
+ var(--_ctm-tab-buy-dn-ts-sd-se-ue, var(--_ctm-buy-dn-ts-sd-se-ue))
341
+ );
342
+ --_sf-buy-sd-ft-tln: var(
343
+ --_ctm-mob-buy-dn-ts-sd-se-tt-an,
344
+ var(--_ctm-tab-buy-dn-ts-sd-se-tt-an, var(--_ctm-buy-dn-ts-sd-se-tt-an))
345
+ );
346
+ --_sf-buy-sd-ft-lts: var(
347
+ --_ctm-mob-buy-dn-ts-sd-se-lr-sg,
348
+ var(--_ctm-tab-buy-dn-ts-sd-se-lr-sg, var(--_ctm-buy-dn-ts-sd-se-lr-sg))
349
+ );
350
+ --_sf-buy-sd-ft-lht: var(
351
+ --_ctm-mob-buy-dn-ts-sd-se-le-ht,
352
+ var(--_ctm-tab-buy-dn-ts-sd-se-le-ht, var(--_ctm-buy-dn-ts-sd-se-le-ht))
353
+ );
354
+ }
355
+
356
+ &:not(.active) {
357
+ &:hover {
358
+ --_sf-buy-hr-bg-cr: var(
359
+ --_ctm-mob-buy-dn-ts-hr-se-bd-cr,
360
+ var(--_ctm-tab-buy-dn-ts-hr-se-bd-cr, var(--_ctm-buy-dn-ts-hr-se-bd-cr))
361
+ );
362
+
363
+ --_sf-buy-hr-br-cr: var(
364
+ --_ctm-mob-buy-dn-ts-hr-se-br-cr,
365
+ var(--_ctm-tab-buy-dn-ts-hr-se-br-cr, var(--_ctm-buy-dn-ts-hr-se-br-cr))
366
+ );
367
+ --_sf-buy-hr-br-wt: var(
368
+ --_ctm-mob-buy-dn-ts-hr-se-br-wh,
369
+ var(--_ctm-tab-buy-dn-ts-hr-se-br-wh, var(--_ctm-buy-dn-ts-hr-se-br-wh))
370
+ );
371
+ --_sf-buy-hr-br-sty: var(
372
+ --_ctm-mob-buy-dn-ts-hr-se-br-se,
373
+ var(--_ctm-tab-buy-dn-ts-hr-se-br-se, var(--_ctm-buy-dn-ts-hr-se-br-se))
374
+ );
375
+ --_sf-buy-hr-br-rs: var(
376
+ --_ctm-mob-buy-dn-ts-hr-se-br-rs,
377
+ var(--_ctm-tab-buy-dn-ts-hr-se-br-rs, var(--_ctm-buy-dn-ts-hr-se-br-rs))
378
+ );
379
+ --_sf-buy-hr-sw-ae: var(
380
+ --_ctm-mob-buy-dn-ts-hr-se-sw-ae,
381
+ var(--_ctm-tab-buy-dn-ts-hr-se-sw-ae, var(--_ctm-buy-dn-ts-hr-se-sw-ae))
382
+ );
383
+ --_sf-buy-hr-sw-cr: var(
384
+ --_ctm-mob-buy-dn-ts-hr-se-sw-cr,
385
+ var(--_ctm-tab-buy-dn-ts-hr-se-sw-cr, var(--_ctm-buy-dn-ts-hr-se-sw-cr))
386
+ );
387
+ --_sf-buy-hr-sw-sd: var(
388
+ --_ctm-mob-buy-dn-ts-hr-se-sw-sd,
389
+ var(--_ctm-tab-buy-dn-ts-hr-se-sw-sd, var(--_ctm-buy-dn-ts-hr-se-sw-sd))
390
+ );
391
+ --_sf-buy-hr-sw-br: var(
392
+ --_ctm-mob-buy-dn-ts-hr-se-sw-br,
393
+ var(--_ctm-tab-buy-dn-ts-hr-se-sw-br, var(--_ctm-buy-dn-ts-hr-se-sw-br))
394
+ );
395
+
396
+ --_sf-buy-hr-ft-fy: var(
397
+ --_ctm-mob-buy-dn-ts-hr-se-ft-fy,
398
+ var(--_ctm-tab-buy-dn-ts-hr-se-ft-fy, var(--_ctm-buy-dn-ts-hr-se-ft-fy))
399
+ );
400
+ --_sf-buy-hr-ft-sz: var(
401
+ --_ctm-mob-buy-dn-ts-hr-se-ft-se,
402
+ var(--_ctm-tab-buy-dn-ts-hr-se-ft-se, var(--_ctm-buy-dn-ts-hr-se-ft-se))
403
+ );
404
+ --_sf-buy-hr-ft-cr: var(
405
+ --_ctm-mob-buy-dn-ts-hr-se-cr,
406
+ var(--_ctm-tab-buy-dn-ts-hr-se-cr, var(--_ctm-buy-dn-ts-hr-se-cr))
407
+ );
408
+ --_sf-buy-hr-ft-wt: var(
409
+ --_ctm-mob-buy-dn-ts-hr-se-ft-wt,
410
+ var(--_ctm-tab-buy-dn-ts-hr-se-ft-wt, var(--_ctm-buy-dn-ts-hr-se-ft-wt))
411
+ );
412
+ --_sf-buy-hr-ft-sty: var(
413
+ --_ctm-mob-buy-dn-ts-hr-se-ft-se-ic,
414
+ var(--_ctm-tab-buy-dn-ts-hr-se-ft-se-ic, var(--_ctm-buy-dn-ts-hr-se-ft-se-ic))
415
+ );
416
+ --_sf-buy-hr-ft-tdc: var(
417
+ --_ctm-mob-buy-dn-ts-hr-se-ue,
418
+ var(--_ctm-tab-buy-dn-ts-hr-se-ue, var(--_ctm-buy-dn-ts-hr-se-ue))
419
+ );
420
+ --_sf-buy-hr-ft-tln: var(
421
+ --_ctm-mob-buy-dn-ts-hr-se-tt-an,
422
+ var(--_ctm-tab-buy-dn-ts-hr-se-tt-an, var(--_ctm-buy-dn-ts-hr-se-tt-an))
423
+ );
424
+ --_sf-buy-hr-ft-lts: var(
425
+ --_ctm-mob-buy-dn-ts-hr-se-lr-sg,
426
+ var(--_ctm-tab-buy-dn-ts-hr-se-lr-sg, var(--_ctm-buy-dn-ts-hr-se-lr-sg))
427
+ );
428
+ --_sf-buy-hr-ft-lht: var(
429
+ --_ctm-mob-buy-dn-ts-hr-se-le-ht,
430
+ var(--_ctm-tab-buy-dn-ts-hr-se-le-ht, var(--_ctm-buy-dn-ts-hr-se-le-ht))
431
+ );
432
+ }
433
+ }
434
+
435
+ &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
436
+ flex: 1 0 auto;
437
+ }
438
+
439
+ & > span {
440
+ // display: var(--_d-flex);
441
+ width: 100%;
442
+
443
+ &:is(.vtl *) {
444
+ width: max-content;
445
+ }
446
+ // width: max-content;
447
+
448
+ font-family: var(
449
+ --_sf-buy-sd-ft-fy,
450
+ var(
451
+ --_sf-buy-hr-ft-fy,
452
+ var(
453
+ --_ctm-mob-buy-dn-ts-dt-se-ft-fy,
454
+ var(--_ctm-tab-buy-dn-ts-dt-se-ft-fy, var(--_ctm-buy-dn-ts-dt-se-ft-fy))
455
+ )
456
+ )
457
+ );
458
+ font-size: var(
459
+ --_sf-buy-sd-ft-sz,
460
+ var(
461
+ --_sf-buy-hr-ft-sz,
462
+ var(
463
+ --_ctm-mob-buy-dn-ts-dt-se-ft-se,
464
+ var(--_ctm-tab-buy-dn-ts-dt-se-ft-se, var(--_ctm-buy-dn-ts-dt-se-ft-se))
465
+ )
466
+ )
467
+ );
468
+ color: var(
469
+ --_sf-buy-sd-ft-cr,
470
+ var(
471
+ --_sf-buy-hr-ft-cr,
472
+ var(
473
+ --_ctm-mob-buy-dn-ts-dt-se-cr,
474
+ var(--_ctm-tab-buy-dn-ts-dt-se-cr, var(--_ctm-buy-dn-ts-dt-se-cr))
475
+ )
476
+ )
477
+ );
478
+ font-weight: var(
479
+ --_sf-buy-sd-ft-wt,
480
+ var(
481
+ --_sf-buy-hr-ft-wt,
482
+ var(
483
+ --_ctm--mob-buy-dn-ts-dt-se-ft-wt,
484
+ var(--_ctm-tab-buy-dn-ts-dt-se-ft-wt, var(--_ctm-buy-dn-ts-dt-se-ft-wt))
485
+ )
486
+ )
487
+ );
488
+ font-style: var(
489
+ --_sf-buy-sd-ft-sty,
490
+ var(
491
+ --_sf-buy-hr-ft-sty,
492
+ var(
493
+ --_ctm-mob-buy-dn-ts-dt-se-ft-se-ic,
494
+ var(
495
+ --_ctm-tab-buy-dn-ts-dt-se-ft-se-ic,
496
+ var(--_ctm-buy-dn-ts-dt-se-ft-se-ic, normal)
497
+ )
498
+ )
499
+ )
500
+ );
501
+ text-decoration: var(
502
+ --_sf-buy-sd-ft-tdc,
503
+ var(
504
+ --_sf-buy-hr-ft-tdc,
505
+ var(
506
+ --_ctm-mob-buy-dn-ts-dt-se-ue,
507
+ var(--_ctm-tab-buy-dn-ts-dt-se-ue, var(--_ctm-buy-dn-ts-dt-se-ue))
508
+ )
509
+ )
510
+ );
511
+ text-align: var(
512
+ --_sf-buy-sd-ft-tln,
513
+ var(
514
+ --_sf-buy-hr-ft-tln,
515
+ var(
516
+ --_ctm-mob-buy-dn-ts-dt-se-tt-an,
517
+ var(--_ctm-tab-buy-dn-ts-dt-se-tt-an, var(--_ctm-buy-dn-ts-dt-se-tt-an))
518
+ )
519
+ )
520
+ );
521
+ letter-spacing: var(
522
+ --_sf-buy-sd-ft-lts,
523
+ var(
524
+ --_sf-buy-hr-ft-lts,
525
+ var(
526
+ --_ctm-mob-buy-dn-ts-dt-se-lr-sg,
527
+ var(--_ctm-tab-buy-dn-ts-dt-se-lr-sg, var(--_ctm-buy-dn-ts-dt-se-lr-sg))
528
+ )
529
+ )
530
+ );
531
+ line-height: var(
532
+ --_sf-buy-sd-ft-lht,
533
+ var(
534
+ --_sf-buy-hr-ft-lht,
535
+ var(
536
+ --_ctm-mob-buy-dn-ts-dt-se-le-ht,
537
+ var(--_ctm-tab-buy-dn-ts-dt-se-le-ht, var(--_ctm-buy-dn-ts-dt-se-le-ht))
538
+ )
539
+ )
540
+ );
541
+ }
542
+ }
543
+ }
544
+ }
545
+
546
+ &.#{$tabBody} {
547
+ display: var(--_d-flex);
548
+ flex: 1 1 auto;
549
+
550
+ & > div {
551
+ &.#{$tabBodyWrapper} {
552
+ display: var(--_d-grid);
553
+ grid-template-columns: 100%;
554
+ grid-template-rows: 100%;
555
+ width: 100%;
556
+ }
557
+ }
558
+ }
559
+ }
560
+ }
561
+ }
562
+
563
+ &[data-view-state="full"] {
564
+ width: auto;
565
+ margin: 0;
566
+ justify-self: stretch !important;
567
+ align-self: stretch !important;
568
+ cursor: auto;
569
+ &:is(#{$activeElementSelector}) {
570
+ & > div {
571
+ &[data-div-type="wrapper__layer"] {
572
+ --_sf-vt-zz: visible;
573
+ --_sf-op-zz: 1;
574
+ }
575
+ }
576
+ }
577
+ }
578
+ }
579
+ }