@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

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 (48) hide show
  1. package/dist/brand-basic-elements.scss +109 -46
  2. package/dist/brand.scss +6 -0
  3. package/dist/breadcrumbs.scss +144 -51
  4. package/dist/builder.js +1 -1
  5. package/dist/bundle.scss +74 -48
  6. package/dist/bundleDetails.scss +1360 -275
  7. package/dist/button copy.scss +271 -271
  8. package/dist/cart.scss +85 -4
  9. package/dist/category.scss +25 -4
  10. package/dist/container.scss +20 -17
  11. package/dist/embed-temp.scss +2 -2
  12. package/dist/hotspot.scss +12 -3
  13. package/dist/language-selector.scss +42 -0
  14. package/dist/line.scss +54 -36
  15. package/dist/login.scss +225 -69
  16. package/dist/map.scss +354 -147
  17. package/dist/marchandiserSets.scss +34 -0
  18. package/dist/product-actions.scss +53 -0
  19. package/dist/product-basic-elements.scss +50 -4
  20. package/dist/productDetails.scss +33 -0
  21. package/dist/quick-links.scss +23 -2
  22. package/dist/repeater copy.scss +635 -635
  23. package/dist/repeater-grid-toggle.scss +93 -3
  24. package/dist/repeater-item.scss +5 -1
  25. package/dist/review-cart.scss +7 -1
  26. package/dist/search.scss +45 -5
  27. package/dist/styles.css +1 -1
  28. package/dist/tab-v2.scss +724 -583
  29. package/dist/text-temp-v2.scss +7 -1
  30. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +26 -0
  31. package/dist/types/builder/tools/element-edit/bundle.d.ts +104 -4
  32. package/dist/types/builder/tools/element-edit/cart.d.ts +7 -0
  33. package/dist/types/builder/tools/element-edit/map.d.ts +0 -1
  34. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +6 -0
  35. package/dist/types/builder/tools/element-edit/search.d.ts +4 -61
  36. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +110 -1
  37. package/dist/upload-media.scss +14 -2
  38. package/package.json +1 -1
  39. package/dist/add-products-tab copy.scss +0 -1122
  40. package/dist/allocationDetails copy.scss +0 -757
  41. package/dist/bulk-variant-picker copy.scss +0 -1121
  42. package/dist/bundleDetails copy.scss +0 -1431
  43. package/dist/product-actions copy.scss +0 -2765
  44. package/dist/product-highlights copy.scss +0 -217
  45. package/dist/product-image copy.scss +0 -787
  46. package/dist/user-elements copy.scss +0 -1437
  47. package/dist/volume-pricing copy 2.scss +0 -1468
  48. package/dist/volume-pricing copy.scss +0 -1076
package/dist/tab-v2.scss CHANGED
@@ -1,583 +1,724 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- $activeElementSelector: "[data-has-clicked='true']";
5
- $root: "flex__tbs";
6
- $sfKey: "--_flex-tbs-";
7
- $tabHeader: "#{$root}__header";
8
- $tabHeaderWrapper: "#{$tabHeader}__wrapper";
9
- $tabBody: "#{$root}__body";
10
- $tabBodyWrapper: #{$tabBody}__wrapper;
11
-
12
- [data-div-type="element"] {
13
- &[data-element-type="tbs-v2"] {
14
- width: calc(
15
- 1% *
16
- var(
17
- --_ctm-mob-tbs-ele-nw-wh-vl,
18
- var(--_ctm-tab-tbs-ele-nw-wh-vl, var(--_ctm-tbs-ele-nw-wh-vl, auto))
19
- )
20
- );
21
- margin: var(
22
- --_ctm-mob-tbs-lt-mn,
23
- var(--_ctm-tab-tbs-lt-mn, var(--_ctm-tbs-lt-mn, var(--_ctm-lt-mn)))
24
- );
25
-
26
- & > div {
27
- &.wrapper {
28
- width: 100%;
29
- padding: var(--_ctm-mob-tbs-lt-pg, var(--_ctm-tab-tbs-lt-pg, var(--_ctm-tbs-lt-pg)));
30
-
31
- background-color: var(
32
- --_ctm-mob-tbs-dn-tb-cr-bd-cr,
33
- var(--_ctm-tab-tbs-dn-tb-cr-bd-cr, var(--_ctm-tbs-dn-tb-cr-bd-cr))
34
- );
35
- // background-image: var(
36
- // --_ctm-mob-tbs-dn-bd-ie,
37
- // var(--_ctm-tab-tbs-dn-bd-ie, var(--_ctm-tbs-dn-bd-ie))
38
- // );
39
- // background-attachment: var(
40
- // --_ctm-mob-tbs-dn-bd-at,
41
- // var(--_ctm-tab-tbs-dn-bd-at, var(--_ctm-tbs-dn-bd-at))
42
- // );
43
- // background-position: var(
44
- // --_ctm-mob-tbs-dn-bd-pn,
45
- // var(--_ctm-tab-tbs-dn-bd-pn, var(--_ctm-tbs-dn-bd-pn))
46
- // );
47
- // background-repeat: var(
48
- // --_ctm-mob-tbs-dn-bd-rt,
49
- // var(--_ctm-tab-tbs-dn-bd-rt, var(--_ctm-tbs-dn-bd-rt))
50
- // );
51
- // background-size: var(
52
- // --_ctm-mob-tbs-dn-bd-se,
53
- // var(--_ctm-tab-tbs-dn-bd-se, var(--_ctm-tbs-dn-bd-se))
54
- // );
55
- border-radius: var(
56
- --_hide-tbs-own-border,
57
- var(
58
- --_ctm-mob-tbs-dn-tb-cr-br-rs,
59
- var(--_ctm-tab-tbs-dn-tb-cr-br-rs, var(--_ctm-tbs-dn-tb-cr-br-rs))
60
- )
61
- );
62
- border-color: var(
63
- --_hide-tbs-own-border,
64
- var(
65
- --_ctm-mob-tbs-dn-tb-cr-br-cr,
66
- var(--_ctm-tab-tbs-dn-tb-cr-br-cr, var(--_ctm-tbs-dn-tb-cr-br-cr))
67
- )
68
- );
69
- border-style: var(
70
- --_hide-tbs-own-border,
71
- var(
72
- --_ctm-mob-tbs-dn-tb-cr-br-se,
73
- var(--_ctm-tab-tbs-dn-tb-cr-br-se, var(--_ctm-tbs-dn-tb-cr-br-se))
74
- )
75
- );
76
- border-width: var(
77
- --_hide-tbs-own-border,
78
- var(
79
- --_ctm-mob-tbs-dn-tb-cr-br-wh,
80
- var(--_ctm-tab-tbs-dn-tb-cr-br-wh, var(--_ctm-tbs-dn-tb-cr-br-wh))
81
- )
82
- );
83
- box-shadow: var(
84
- --_hide-tbs-own-shadow,
85
- var(
86
- --_ctm-mob-tbs-dn-tb-cr-sw-ae,
87
- var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
88
- )
89
- var(
90
- --_ctm-mob-tbs-dn-tb-cr-sw-br,
91
- var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
92
- )
93
- var(
94
- --_ctm-mob-tbs-dn-tb-cr-sw-sd,
95
- var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
96
- )
97
- var(
98
- --_ctm-mob-tbs-dn-tb-cr-sw-cr,
99
- var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
100
- )
101
- );
102
-
103
- display: var(--_d-flex) !important;
104
- min-height: var(
105
- --_ctm-mob-tbs-lt-ht,
106
- var(--_ctm-tab-tbs-lt-ht, var(--_ctm-tbs-lt-ht))
107
- ) !important;
108
- flex-direction: var(#{$sfKey}fd, column);
109
-
110
- &.hrz {
111
- #{$sfKey}fd: column;
112
- #{$sfKey}fd-header: row;
113
- #{$sfKey}fd-jst: var(
114
- --_ctm-mob-tbs-lt-jy-ct,
115
- var(--_ctm-tab-tbs-lt-jy-ct, var(--_ctm-tbs-lt-jy-ct))
116
- );
117
- }
118
- &.vtl {
119
- #{$sfKey}fd: row;
120
- #{$sfKey}fd-header: column;
121
- #{$sfKey}fd-algn: var(
122
- --_ctm-mob-tbs-lt-an-is,
123
- var(--_ctm-tab-tbs-lt-an-is, var(--_ctm-tbs-lt-an-is))
124
- );
125
- }
126
-
127
- & > div {
128
- &.#{$tabHeader} {
129
- display: var(--_d-flex);
130
-
131
- &[data-hs-br="false"] {
132
- --_hide-btn-border: none;
133
- }
134
- &[data-hs-bs="false"] {
135
- --_hide-btn-shadow: none;
136
- }
137
- &[data-tl-vl="stretched"] {
138
- --_sf-tl-vl-al: space-between;
139
- }
140
- & > .#{$tabHeaderWrapper} {
141
- --_sf-gap-vl: var(
142
- --_ctm-mob-tbs-lt-tb-sg,
143
- var(--_ctm-tab-tbs-lt-tb-sg, var(--_ctm-tbs-lt-tb-sg))
144
- );
145
- // width: 100%;
146
- width: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-wh, 100%);
147
- min-height: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-mn-ht, auto);
148
- padding: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-pg, 0px);
149
- display: var(--_d-flex);
150
- flex-direction: var(#{$sfKey}fd-header, row);
151
- &:is(.vtl *) {
152
- justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-algn));
153
- row-gap: var(--_sf-gap-vl);
154
- }
155
- &:is(.hrz *) {
156
- justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-jst));
157
- column-gap: var(--_sf-gap-vl);
158
-
159
- &[data-ovf-vl="wrap"] {
160
- flex-wrap: wrap;
161
- }
162
- &[data-ovf-vl="no wrap"] {
163
- overflow-x: auto;
164
- scrollbar-width: none;
165
- }
166
- }
167
-
168
- & > button {
169
- display: var(--_d-flex);
170
- padding-inline: var(
171
- --_ctm-mob-tbs-lt-hl-pg,
172
- var(--_ctm-tab-tbs-lt-hl-pg, var(--_ctm-tbs-lt-hl-pg))
173
- );
174
- padding-block: var(
175
- --_ctm-mob-tbs-lt-vl-pg,
176
- var(--_ctm-tab-tbs-lt-vl-pg, var(--_ctm-tbs-lt-vl-pg))
177
- );
178
- background-color: var(
179
- --_sf-tbs-sd-bg-cr,
180
- var(
181
- --_sf-tbs-hr-bg-cr,
182
- var(
183
- --_ctm-mob-tbs-dn-ts-dt-se-bd-cr,
184
- var(--_ctm-tab-tbs-dn-ts-dt-se-bd-cr, var(--_ctm-tbs-dn-ts-dt-se-bd-cr))
185
- )
186
- )
187
- );
188
-
189
- border-color: var(
190
- --_hide-btn-border,
191
- var(
192
- --_sf-tbs-sd-br-cr,
193
- var(
194
- --_sf-tbs-hr-br-cr,
195
- var(
196
- --_ctm-mob-tbs-dn-ts-dt-se-br-cr,
197
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-cr, var(--_ctm-tbs-dn-ts-dt-se-br-cr))
198
- )
199
- )
200
- )
201
- );
202
- border-style: var(
203
- --_hide-btn-border,
204
- var(
205
- --_sf-tbs-sd-br-sty,
206
- var(
207
- --_sf-tbs-hr-br-sty,
208
- var(
209
- --_ctm-mob-tbs-dn-ts-dt-se-br-se,
210
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-se, var(--_ctm-tbs-dn-ts-dt-se-br-se))
211
- )
212
- )
213
- )
214
- );
215
- border-width: var(
216
- --_hide-btn-border,
217
- var(
218
- --_sf-tbs-sd-br-wt,
219
- var(
220
- --_sf-tbs-hr-br-wt,
221
- var(
222
- --_ctm-mob-tbs-dn-ts-dt-se-br-wh,
223
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-wh, var(--_ctm-tbs-dn-ts-dt-se-br-wh))
224
- )
225
- )
226
- )
227
- );
228
- border-radius: var(
229
- --_sf-tbs-sd-br-rs,
230
- var(
231
- --_sf-tbs-hr-br-rs,
232
- var(
233
- --_ctm-mob-tbs-dn-ts-dt-se-br-rs,
234
- var(--_ctm-tab-tbs-dn-ts-dt-se-br-rs, var(--_ctm-tbs-dn-ts-dt-se-br-rs))
235
- )
236
- )
237
- );
238
-
239
- box-shadow: var(
240
- --_hide-btn-shadow,
241
- var(
242
- --_sf-tbs-sd-sw-ae,
243
- var(
244
- --_sf-tbs-hr-sw-ae,
245
- var(
246
- --_ctm-mob-tbs-dn-tb-cr-sw-ae,
247
- var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
248
- )
249
- )
250
- )
251
- var(
252
- --_sf-tbs-sd-sw-br,
253
- var(
254
- --_sf-tbs-hr-sw-br,
255
- var(
256
- --_ctm-mob-tbs-dn-tb-cr-sw-br,
257
- var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
258
- )
259
- )
260
- )
261
- var(
262
- --_sf-tbs-sd-sw-sd,
263
- var(
264
- --_sf-tbs-hr-sw-sd,
265
- var(
266
- --_ctm-mob-tbs-dn-tb-cr-sw-sd,
267
- var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
268
- )
269
- )
270
- )
271
- var(
272
- --_sf-tbs-sd-sw-cr,
273
- var(
274
- --_sf-tbs-hr-sw-cr,
275
- var(
276
- --_ctm-mob-tbs-dn-tb-cr-sw-cr,
277
- var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
278
- )
279
- )
280
- )
281
- );
282
-
283
- &.active {
284
- --_sf-tbs-sd-bg-cr: var(
285
- --_ctm-mob-tbs-dn-ts-sd-se-bd-cr,
286
- var(--_ctm-tab-tbs-dn-ts-sd-se-bd-cr, var(--_ctm-tbs-dn-ts-sd-se-bd-cr))
287
- );
288
-
289
- --_sf-tbs-sd-br-cr: var(
290
- --_ctm-mob-tbs-dn-ts-sd-se-br-cr,
291
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-cr, var(--_ctm-tbs-dn-ts-sd-se-br-cr))
292
- );
293
- --_sf-tbs-sd-br-wt: var(
294
- --_ctm-mob-tbs-dn-ts-sd-se-br-wh,
295
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-wh, var(--_ctm-tbs-dn-ts-sd-se-br-wh))
296
- );
297
- --_sf-tbs-sd-br-sty: var(
298
- --_ctm-mob-tbs-dn-ts-sd-se-br-se,
299
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-se, var(--_ctm-tbs-dn-ts-sd-se-br-se))
300
- );
301
- --_sf-tbs-sd-br-rs: var(
302
- --_ctm-mob-tbs-dn-ts-sd-se-br-rs,
303
- var(--_ctm-tab-tbs-dn-ts-sd-se-br-rs, var(--_ctm-tbs-dn-ts-sd-se-br-rs))
304
- );
305
- --_sf-tbs-sd-sw-ae: var(
306
- --_ctm-mob-tbs-dn-ts-sd-se-sw-ae,
307
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-ae, var(--_ctm-tbs-dn-ts-sd-se-sw-ae))
308
- );
309
- --_sf-tbs-sd-sw-cr: var(
310
- --_ctm-mob-tbs-dn-ts-sd-se-sw-cr,
311
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-cr, var(--_ctm-tbs-dn-ts-sd-se-sw-cr))
312
- );
313
- --_sf-tbs-sd-sw-sd: var(
314
- --_ctm-mob-tbs-dn-ts-sd-se-sw-sd,
315
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-sd, var(--_ctm-tbs-dn-ts-sd-se-sw-sd))
316
- );
317
- --_sf-tbs-sd-sw-br: var(
318
- --_ctm-mob-tbs-dn-ts-sd-se-sw-br,
319
- var(--_ctm-tab-tbs-dn-ts-sd-se-sw-br, var(--_ctm-tbs-dn-ts-sd-se-sw-br))
320
- );
321
-
322
- --_sf-tbs-sd-ft-fy: var(
323
- --_ctm-mob-tbs-dn-ts-sd-se-ft-fy,
324
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-fy, var(--_ctm-tbs-dn-ts-sd-se-ft-fy))
325
- );
326
- --_sf-tbs-sd-ft-sz: var(
327
- --_ctm-mob-tbs-dn-ts-sd-se-ft-se,
328
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se, var(--_ctm-tbs-dn-ts-sd-se-ft-se))
329
- );
330
- --_sf-tbs-sd-ft-cr: var(
331
- --_ctm-mob-tbs-dn-ts-sd-se-cr,
332
- var(--_ctm-tab-tbs-dn-ts-sd-se-cr, var(--_ctm-tbs-dn-ts-sd-se-cr))
333
- );
334
- --_sf-tbs-sd-ft-wt: var(
335
- --_ctm-mob-tbs-dn-ts-sd-se-ft-wt,
336
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-wt, var(--_ctm-tbs-dn-ts-sd-se-ft-wt))
337
- );
338
- --_sf-tbs-sd-ft-sty: var(
339
- --_ctm-mob-tbs-dn-ts-sd-se-ft-se-ic,
340
- var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tbs-dn-ts-sd-se-ft-se-ic))
341
- );
342
- --_sf-tbs-sd-ft-tdc: var(
343
- --_ctm-mob-tbs-dn-ts-sd-se-ue,
344
- var(--_ctm-tab-tbs-dn-ts-sd-se-ue, var(--_ctm-tbs-dn-ts-sd-se-ue))
345
- );
346
- --_sf-tbs-sd-ft-tln: var(
347
- --_ctm-mob-tbs-dn-ts-sd-se-tt-an,
348
- var(--_ctm-tab-tbs-dn-ts-sd-se-tt-an, var(--_ctm-tbs-dn-ts-sd-se-tt-an))
349
- );
350
- --_sf-tbs-sd-ft-lts: var(
351
- --_ctm-mob-tbs-dn-ts-sd-se-lr-sg,
352
- var(--_ctm-tab-tbs-dn-ts-sd-se-lr-sg, var(--_ctm-tbs-dn-ts-sd-se-lr-sg))
353
- );
354
- --_sf-tbs-sd-ft-lht: var(
355
- --_ctm-mob-tbs-dn-ts-sd-se-le-ht,
356
- var(--_ctm-tab-tbs-dn-ts-sd-se-le-ht, var(--_ctm-tbs-dn-ts-sd-se-le-ht))
357
- );
358
- }
359
-
360
- &:not(.active) {
361
- &:hover {
362
- --_sf-tbs-hr-bg-cr: var(
363
- --_ctm-mob-tbs-dn-ts-hr-se-bd-cr,
364
- var(--_ctm-tab-tbs-dn-ts-hr-se-bd-cr, var(--_ctm-tbs-dn-ts-hr-se-bd-cr))
365
- );
366
-
367
- --_sf-tbs-hr-br-cr: var(
368
- --_ctm-mob-tbs-dn-ts-hr-se-br-cr,
369
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-cr, var(--_ctm-tbs-dn-ts-hr-se-br-cr))
370
- );
371
- --_sf-tbs-hr-br-wt: var(
372
- --_ctm-mob-tbs-dn-ts-hr-se-br-wh,
373
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-wh, var(--_ctm-tbs-dn-ts-hr-se-br-wh))
374
- );
375
- --_sf-tbs-hr-br-sty: var(
376
- --_ctm-mob-tbs-dn-ts-hr-se-br-se,
377
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-se, var(--_ctm-tbs-dn-ts-hr-se-br-se))
378
- );
379
- --_sf-tbs-hr-br-rs: var(
380
- --_ctm-mob-tbs-dn-ts-hr-se-br-rs,
381
- var(--_ctm-tab-tbs-dn-ts-hr-se-br-rs, var(--_ctm-tbs-dn-ts-hr-se-br-rs))
382
- );
383
- --_sf-tbs-hr-sw-ae: var(
384
- --_ctm-mob-tbs-dn-ts-hr-se-sw-ae,
385
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-ae, var(--_ctm-tbs-dn-ts-hr-se-sw-ae))
386
- );
387
- --_sf-tbs-hr-sw-cr: var(
388
- --_ctm-mob-tbs-dn-ts-hr-se-sw-cr,
389
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-cr, var(--_ctm-tbs-dn-ts-hr-se-sw-cr))
390
- );
391
- --_sf-tbs-hr-sw-sd: var(
392
- --_ctm-mob-tbs-dn-ts-hr-se-sw-sd,
393
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-sd, var(--_ctm-tbs-dn-ts-hr-se-sw-sd))
394
- );
395
- --_sf-tbs-hr-sw-br: var(
396
- --_ctm-mob-tbs-dn-ts-hr-se-sw-br,
397
- var(--_ctm-tab-tbs-dn-ts-hr-se-sw-br, var(--_ctm-tbs-dn-ts-hr-se-sw-br))
398
- );
399
-
400
- --_sf-tbs-hr-ft-fy: var(
401
- --_ctm-mob-tbs-dn-ts-hr-se-ft-fy,
402
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-fy, var(--_ctm-tbs-dn-ts-hr-se-ft-fy))
403
- );
404
- --_sf-tbs-hr-ft-sz: var(
405
- --_ctm-mob-tbs-dn-ts-hr-se-ft-se,
406
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se, var(--_ctm-tbs-dn-ts-hr-se-ft-se))
407
- );
408
- --_sf-tbs-hr-ft-cr: var(
409
- --_ctm-mob-tbs-dn-ts-hr-se-cr,
410
- var(--_ctm-tab-tbs-dn-ts-hr-se-cr, var(--_ctm-tbs-dn-ts-hr-se-cr))
411
- );
412
- --_sf-tbs-hr-ft-wt: var(
413
- --_ctm-mob-tbs-dn-ts-hr-se-ft-wt,
414
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-wt, var(--_ctm-tbs-dn-ts-hr-se-ft-wt))
415
- );
416
- --_sf-tbs-hr-ft-sty: var(
417
- --_ctm-mob-tbs-dn-ts-hr-se-ft-se-ic,
418
- var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tbs-dn-ts-hr-se-ft-se-ic))
419
- );
420
- --_sf-tbs-hr-ft-tdc: var(
421
- --_ctm-mob-tbs-dn-ts-hr-se-ue,
422
- var(--_ctm-tab-tbs-dn-ts-hr-se-ue, var(--_ctm-tbs-dn-ts-hr-se-ue))
423
- );
424
- --_sf-tbs-hr-ft-tln: var(
425
- --_ctm-mob-tbs-dn-ts-hr-se-tt-an,
426
- var(--_ctm-tab-tbs-dn-ts-hr-se-tt-an, var(--_ctm-tbs-dn-ts-hr-se-tt-an))
427
- );
428
- --_sf-tbs-hr-ft-lts: var(
429
- --_ctm-mob-tbs-dn-ts-hr-se-lr-sg,
430
- var(--_ctm-tab-tbs-dn-ts-hr-se-lr-sg, var(--_ctm-tbs-dn-ts-hr-se-lr-sg))
431
- );
432
- --_sf-tbs-hr-ft-lht: var(
433
- --_ctm-mob-tbs-dn-ts-hr-se-le-ht,
434
- var(--_ctm-tab-tbs-dn-ts-hr-se-le-ht, var(--_ctm-tbs-dn-ts-hr-se-le-ht))
435
- );
436
- }
437
- }
438
-
439
- &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
440
- flex: 1 0 auto;
441
- }
442
-
443
- & > span {
444
- // display: var(--_d-flex);
445
- width: 100%;
446
-
447
- &:is(.vtl *) {
448
- width: max-content;
449
- }
450
- // width: max-content;
451
-
452
- font-family: var(
453
- --_sf-tbs-sd-ft-fy,
454
- var(
455
- --_sf-tbs-hr-ft-fy,
456
- var(
457
- --_ctm-mob-tbs-dn-ts-dt-se-ft-fy,
458
- var(--_ctm-tab-tbs-dn-ts-dt-se-ft-fy, var(--_ctm-tbs-dn-ts-dt-se-ft-fy))
459
- )
460
- )
461
- );
462
- font-size: var(
463
- --_sf-tbs-sd-ft-sz,
464
- var(
465
- --_sf-tbs-hr-ft-sz,
466
- var(
467
- --_ctm-mob-tbs-dn-ts-dt-se-ft-se,
468
- var(--_ctm-tab-tbs-dn-ts-dt-se-ft-se, var(--_ctm-tbs-dn-ts-dt-se-ft-se))
469
- )
470
- )
471
- );
472
- color: var(
473
- --_sf-tbs-sd-ft-cr,
474
- var(
475
- --_sf-tbs-hr-ft-cr,
476
- var(
477
- --_ctm-mob-tbs-dn-ts-dt-se-cr,
478
- var(--_ctm-tab-tbs-dn-ts-dt-se-cr, var(--_ctm-tbs-dn-ts-dt-se-cr))
479
- )
480
- )
481
- );
482
- font-weight: var(
483
- --_sf-tbs-sd-ft-wt,
484
- var(
485
- --_sf-tbs-hr-ft-wt,
486
- var(
487
- --_ctm--mob-tbs-dn-ts-dt-se-ft-wt,
488
- var(--_ctm-tab-tbs-dn-ts-dt-se-ft-wt, var(--_ctm-tbs-dn-ts-dt-se-ft-wt))
489
- )
490
- )
491
- );
492
- font-style: var(
493
- --_sf-tbs-sd-ft-sty,
494
- var(
495
- --_sf-tbs-hr-ft-sty,
496
- var(
497
- --_ctm-mob-tbs-dn-ts-dt-se-ft-se-ic,
498
- var(
499
- --_ctm-tab-tbs-dn-ts-dt-se-ft-se-ic,
500
- var(--_ctm-tbs-dn-ts-dt-se-ft-se-ic, normal)
501
- )
502
- )
503
- )
504
- );
505
- text-decoration: var(
506
- --_sf-tbs-sd-ft-tdc,
507
- var(
508
- --_sf-tbs-hr-ft-tdc,
509
- var(
510
- --_ctm-mob-tbs-dn-ts-dt-se-ue,
511
- var(--_ctm-tab-tbs-dn-ts-dt-se-ue, var(--_ctm-tbs-dn-ts-dt-se-ue))
512
- )
513
- )
514
- );
515
- text-align: var(
516
- --_sf-tbs-sd-ft-tln,
517
- var(
518
- --_sf-tbs-hr-ft-tln,
519
- var(
520
- --_ctm-mob-tbs-dn-ts-dt-se-tt-an,
521
- var(--_ctm-tab-tbs-dn-ts-dt-se-tt-an, var(--_ctm-tbs-dn-ts-dt-se-tt-an))
522
- )
523
- )
524
- );
525
- letter-spacing: var(
526
- --_sf-tbs-sd-ft-lts,
527
- var(
528
- --_sf-tbs-hr-ft-lts,
529
- var(
530
- --_ctm-mob-tbs-dn-ts-dt-se-lr-sg,
531
- var(--_ctm-tab-tbs-dn-ts-dt-se-lr-sg, var(--_ctm-tbs-dn-ts-dt-se-lr-sg))
532
- )
533
- )
534
- );
535
- line-height: var(
536
- --_sf-tbs-sd-ft-lht,
537
- var(
538
- --_sf-tbs-hr-ft-lht,
539
- var(
540
- --_ctm-mob-tbs-dn-ts-dt-se-le-ht,
541
- var(--_ctm-tab-tbs-dn-ts-dt-se-le-ht, var(--_ctm-tbs-dn-ts-dt-se-le-ht))
542
- )
543
- )
544
- );
545
- }
546
- }
547
- }
548
- }
549
-
550
- &.#{$tabBody} {
551
- display: var(--_d-flex);
552
- flex: 1 1 auto;
553
-
554
- & > div {
555
- &.#{$tabBodyWrapper} {
556
- display: var(--_d-grid);
557
- grid-template-columns: 100%;
558
- grid-template-rows: 100%;
559
- width: 100%;
560
- }
561
- }
562
- }
563
- }
564
- }
565
- }
566
-
567
- // &[data-view-state="full"] {
568
- // width: auto;
569
- // margin: 0;
570
- // justify-self: stretch !important;
571
- // align-self: stretch !important;
572
- // cursor: auto;
573
- // &:is(#{$activeElementSelector}) {
574
- // & > div {
575
- // &[data-div-type="wrapper__layer"] {
576
- // --_sf-vt-zz: visible;
577
- // --_sf-op-zz: 1;
578
- // }
579
- // }
580
- // }
581
- // }
582
- }
583
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $activeElementSelector: "[data-has-clicked='true']";
5
+ $root: "flex__tbs";
6
+ $sfKey: "--_flex-tbs-";
7
+ $tabHeader: "#{$root}__header";
8
+ $tabHeaderWrapper: "#{$tabHeader}__wrapper";
9
+ $tabBody: "#{$root}__body";
10
+ $tabBodyWrapper: #{$tabBody}__wrapper;
11
+
12
+ [data-div-type="element"] {
13
+ &[data-element-type="tbs-v2"] {
14
+ width: calc(
15
+ 1% *
16
+ var(
17
+ --_ctm-mob-tbs-ele-nw-wh-vl,
18
+ var(--_ctm-tab-tbs-ele-nw-wh-vl, var(--_ctm-tbs-ele-nw-wh-vl, auto))
19
+ )
20
+ );
21
+ margin: var(
22
+ --_ctm-mob-tbs-lt-mn,
23
+ var(--_ctm-tab-tbs-lt-mn, var(--_ctm-tbs-lt-mn, var(--_ctm-lt-mn)))
24
+ );
25
+
26
+ & > div {
27
+ &.wrapper {
28
+ width: 100%;
29
+ padding: var(--_ctm-mob-tbs-lt-pg, var(--_ctm-tab-tbs-lt-pg, var(--_ctm-tbs-lt-pg)));
30
+
31
+ background-color: var(
32
+ --_ctm-mob-tbs-dn-tb-cr-bd-cr,
33
+ var(--_ctm-tab-tbs-dn-tb-cr-bd-cr, var(--_ctm-tbs-dn-tb-cr-bd-cr))
34
+ );
35
+ // background-image: var(
36
+ // --_ctm-mob-tbs-dn-bd-ie,
37
+ // var(--_ctm-tab-tbs-dn-bd-ie, var(--_ctm-tbs-dn-bd-ie))
38
+ // );
39
+ // background-attachment: var(
40
+ // --_ctm-mob-tbs-dn-bd-at,
41
+ // var(--_ctm-tab-tbs-dn-bd-at, var(--_ctm-tbs-dn-bd-at))
42
+ // );
43
+ // background-position: var(
44
+ // --_ctm-mob-tbs-dn-bd-pn,
45
+ // var(--_ctm-tab-tbs-dn-bd-pn, var(--_ctm-tbs-dn-bd-pn))
46
+ // );
47
+ // background-repeat: var(
48
+ // --_ctm-mob-tbs-dn-bd-rt,
49
+ // var(--_ctm-tab-tbs-dn-bd-rt, var(--_ctm-tbs-dn-bd-rt))
50
+ // );
51
+ // background-size: var(
52
+ // --_ctm-mob-tbs-dn-bd-se,
53
+ // var(--_ctm-tab-tbs-dn-bd-se, var(--_ctm-tbs-dn-bd-se))
54
+ // );
55
+ border-radius: var(
56
+ --_hide-tbs-own-border,
57
+ var(
58
+ --_ctm-mob-tbs-dn-tb-cr-br-rs,
59
+ var(--_ctm-tab-tbs-dn-tb-cr-br-rs, var(--_ctm-tbs-dn-tb-cr-br-rs))
60
+ )
61
+ );
62
+ border-color: var(
63
+ --_hide-tbs-own-border,
64
+ var(
65
+ --_ctm-mob-tbs-dn-tb-cr-br-cr,
66
+ var(--_ctm-tab-tbs-dn-tb-cr-br-cr, var(--_ctm-tbs-dn-tb-cr-br-cr))
67
+ )
68
+ );
69
+ border-style: var(
70
+ --_hide-tbs-own-border,
71
+ var(
72
+ --_ctm-mob-tbs-dn-tb-cr-br-se,
73
+ var(--_ctm-tab-tbs-dn-tb-cr-br-se, var(--_ctm-tbs-dn-tb-cr-br-se))
74
+ )
75
+ );
76
+ border-width: var(
77
+ --_hide-tbs-own-border,
78
+ var(
79
+ --_ctm-mob-tbs-dn-tb-cr-br-wh,
80
+ var(--_ctm-tab-tbs-dn-tb-cr-br-wh, var(--_ctm-tbs-dn-tb-cr-br-wh))
81
+ )
82
+ );
83
+ box-shadow: var(
84
+ --_hide-tbs-own-shadow,
85
+ var(
86
+ --_ctm-mob-tbs-dn-tb-cr-sw-ae,
87
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
88
+ )
89
+ var(
90
+ --_ctm-mob-tbs-dn-tb-cr-sw-br,
91
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
92
+ )
93
+ var(
94
+ --_ctm-mob-tbs-dn-tb-cr-sw-sd,
95
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
96
+ )
97
+ var(
98
+ --_ctm-mob-tbs-dn-tb-cr-sw-cr,
99
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
100
+ )
101
+ );
102
+
103
+ display: var(--_d-flex) !important;
104
+ min-height: var(
105
+ --_ctm-mob-tbs-lt-ht,
106
+ var(--_ctm-tab-tbs-lt-ht, var(--_ctm-tbs-lt-ht))
107
+ ) !important;
108
+ flex-direction: var(#{$sfKey}fd, column);
109
+
110
+ &.hrz {
111
+ #{$sfKey}fd: column;
112
+ #{$sfKey}fd-header: row;
113
+ #{$sfKey}fd-jst: var(
114
+ --_ctm-mob-tbs-lt-jy-ct,
115
+ var(--_ctm-tab-tbs-lt-jy-ct, var(--_ctm-tbs-lt-jy-ct))
116
+ );
117
+ }
118
+
119
+ &.vtl {
120
+ #{$sfKey}fd: row;
121
+ #{$sfKey}fd-header: column;
122
+ #{$sfKey}fd-algn: var(
123
+ --_ctm-mob-tbs-lt-an-is,
124
+ var(--_ctm-tab-tbs-lt-an-is, var(--_ctm-tbs-lt-an-is))
125
+ );
126
+ }
127
+
128
+ & > div {
129
+ &.#{$tabHeader} {
130
+ display: var(--_d-flex);
131
+
132
+ &[data-hs-br="false"] {
133
+ --_hide-btn-border: none;
134
+ }
135
+
136
+ &[data-hs-bs="false"] {
137
+ --_hide-btn-shadow: none;
138
+ }
139
+
140
+ &[data-hs-in="false"] {
141
+ --_hide-tbs-icon: none;
142
+ }
143
+
144
+ &[data-dp-md="textOnly"] {
145
+ & > .#{$tabHeaderWrapper} > button > span.icon {
146
+ display: none;
147
+ }
148
+ }
149
+
150
+ &[data-dp-md="iconOnly"] {
151
+ & > .#{$tabHeaderWrapper} > button > span:not(.icon) {
152
+ display: none;
153
+ }
154
+ }
155
+
156
+ &[data-tl-vl="stretched"] {
157
+ --_sf-tl-vl-al: space-between;
158
+ }
159
+
160
+ &[data-layout-alignment="horizontal"] {
161
+ & > .#{$tabHeaderWrapper} > button {
162
+ flex-direction: row;
163
+ }
164
+ }
165
+
166
+ &[data-layout-alignment="vertical"] {
167
+ & > .#{$tabHeaderWrapper} > button {
168
+ flex-direction: column;
169
+ }
170
+ }
171
+
172
+ & > .#{$tabHeaderWrapper} {
173
+ --_sf-gap-vl: var(
174
+ --_ctm-mob-tbs-lt-tb-sg,
175
+ var(--_ctm-tab-tbs-lt-tb-sg, var(--_ctm-tbs-lt-tb-sg))
176
+ );
177
+ // width: 100%;
178
+ width: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-wh, 100%);
179
+ min-height: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-mn-ht, auto);
180
+ padding: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-pg, 0px);
181
+ display: var(--_d-flex);
182
+ flex-direction: var(#{$sfKey}fd-header, row);
183
+
184
+ &:is(.vtl *) {
185
+ justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-algn));
186
+ row-gap: var(--_sf-gap-vl);
187
+ }
188
+
189
+ &:is(.hrz *) {
190
+ justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-jst));
191
+ column-gap: var(--_sf-gap-vl);
192
+
193
+ &[data-ovf-vl="wrap"] {
194
+ flex-wrap: wrap;
195
+ }
196
+
197
+ &[data-ovf-vl="no wrap"] {
198
+ overflow-x: auto;
199
+ scrollbar-width: none;
200
+ }
201
+ }
202
+
203
+ & > button {
204
+ display: flex;
205
+ padding-inline: var(
206
+ --_ctm-mob-tbs-lt-hl-pg,
207
+ var(--_ctm-tab-tbs-lt-hl-pg, var(--_ctm-tbs-lt-hl-pg))
208
+ );
209
+ padding-block: var(
210
+ --_ctm-mob-tbs-lt-vl-pg,
211
+ var(--_ctm-tab-tbs-lt-vl-pg, var(--_ctm-tbs-lt-vl-pg))
212
+ );
213
+ gap: var(
214
+ --_sf-tbs-sd-in-gp,
215
+ var(
216
+ --_sf-tbs-hr-in-gp,
217
+ var(
218
+ --_ctm-mob-tbs-dn-ts-dt-se-in-gp,
219
+ var(--_ctm-tab-tbs-dn-ts-dt-se-in-gp, var(--_ctm-tbs-dn-ts-dt-se-in-gp))
220
+ )
221
+ )
222
+ );
223
+ background-color: var(
224
+ --_sf-tbs-sd-bg-cr,
225
+ var(
226
+ --_sf-tbs-hr-bg-cr,
227
+ var(
228
+ --_ctm-mob-tbs-dn-ts-dt-se-bd-cr,
229
+ var(--_ctm-tab-tbs-dn-ts-dt-se-bd-cr, var(--_ctm-tbs-dn-ts-dt-se-bd-cr))
230
+ )
231
+ )
232
+ );
233
+
234
+ border-color: var(
235
+ --_hide-btn-border,
236
+ var(
237
+ --_sf-tbs-sd-br-cr,
238
+ var(
239
+ --_sf-tbs-hr-br-cr,
240
+ var(
241
+ --_ctm-mob-tbs-dn-ts-dt-se-br-cr,
242
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-cr, var(--_ctm-tbs-dn-ts-dt-se-br-cr))
243
+ )
244
+ )
245
+ )
246
+ );
247
+ border-style: var(
248
+ --_hide-btn-border,
249
+ var(
250
+ --_sf-tbs-sd-br-sty,
251
+ var(
252
+ --_sf-tbs-hr-br-sty,
253
+ var(
254
+ --_ctm-mob-tbs-dn-ts-dt-se-br-se,
255
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-se, var(--_ctm-tbs-dn-ts-dt-se-br-se))
256
+ )
257
+ )
258
+ )
259
+ );
260
+ border-width: var(
261
+ --_hide-btn-border,
262
+ var(
263
+ --_sf-tbs-sd-br-wt,
264
+ var(
265
+ --_sf-tbs-hr-br-wt,
266
+ var(
267
+ --_ctm-mob-tbs-dn-ts-dt-se-br-wh,
268
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-wh, var(--_ctm-tbs-dn-ts-dt-se-br-wh))
269
+ )
270
+ )
271
+ )
272
+ );
273
+ border-radius: var(
274
+ --_sf-tbs-sd-br-rs,
275
+ var(
276
+ --_sf-tbs-hr-br-rs,
277
+ var(
278
+ --_ctm-mob-tbs-dn-ts-dt-se-br-rs,
279
+ var(--_ctm-tab-tbs-dn-ts-dt-se-br-rs, var(--_ctm-tbs-dn-ts-dt-se-br-rs))
280
+ )
281
+ )
282
+ );
283
+
284
+ box-shadow: var(
285
+ --_hide-btn-shadow,
286
+ var(
287
+ --_sf-tbs-sd-sw-ae,
288
+ var(
289
+ --_sf-tbs-hr-sw-ae,
290
+ var(
291
+ --_ctm-mob-tbs-dn-tb-cr-sw-ae,
292
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))
293
+ )
294
+ )
295
+ )
296
+ var(
297
+ --_sf-tbs-sd-sw-br,
298
+ var(
299
+ --_sf-tbs-hr-sw-br,
300
+ var(
301
+ --_ctm-mob-tbs-dn-tb-cr-sw-br,
302
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))
303
+ )
304
+ )
305
+ )
306
+ var(
307
+ --_sf-tbs-sd-sw-sd,
308
+ var(
309
+ --_sf-tbs-hr-sw-sd,
310
+ var(
311
+ --_ctm-mob-tbs-dn-tb-cr-sw-sd,
312
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))
313
+ )
314
+ )
315
+ )
316
+ var(
317
+ --_sf-tbs-sd-sw-cr,
318
+ var(
319
+ --_sf-tbs-hr-sw-cr,
320
+ var(
321
+ --_ctm-mob-tbs-dn-tb-cr-sw-cr,
322
+ var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))
323
+ )
324
+ )
325
+ )
326
+ );
327
+
328
+ &.active {
329
+ --_sf-tbs-sd-bg-cr: var(
330
+ --_ctm-mob-tbs-dn-ts-sd-se-bd-cr,
331
+ var(--_ctm-tab-tbs-dn-ts-sd-se-bd-cr, var(--_ctm-tbs-dn-ts-sd-se-bd-cr))
332
+ );
333
+
334
+ --_sf-tbs-sd-br-cr: var(
335
+ --_ctm-mob-tbs-dn-ts-sd-se-br-cr,
336
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-cr, var(--_ctm-tbs-dn-ts-sd-se-br-cr))
337
+ );
338
+ --_sf-tbs-sd-br-wt: var(
339
+ --_ctm-mob-tbs-dn-ts-sd-se-br-wh,
340
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-wh, var(--_ctm-tbs-dn-ts-sd-se-br-wh))
341
+ );
342
+ --_sf-tbs-sd-br-sty: var(
343
+ --_ctm-mob-tbs-dn-ts-sd-se-br-se,
344
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-se, var(--_ctm-tbs-dn-ts-sd-se-br-se))
345
+ );
346
+ --_sf-tbs-sd-br-rs: var(
347
+ --_ctm-mob-tbs-dn-ts-sd-se-br-rs,
348
+ var(--_ctm-tab-tbs-dn-ts-sd-se-br-rs, var(--_ctm-tbs-dn-ts-sd-se-br-rs))
349
+ );
350
+ --_sf-tbs-sd-sw-ae: var(
351
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-ae,
352
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-ae, var(--_ctm-tbs-dn-ts-sd-se-sw-ae))
353
+ );
354
+ --_sf-tbs-sd-sw-cr: var(
355
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-cr,
356
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-cr, var(--_ctm-tbs-dn-ts-sd-se-sw-cr))
357
+ );
358
+ --_sf-tbs-sd-sw-sd: var(
359
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-sd,
360
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-sd, var(--_ctm-tbs-dn-ts-sd-se-sw-sd))
361
+ );
362
+ --_sf-tbs-sd-sw-br: var(
363
+ --_ctm-mob-tbs-dn-ts-sd-se-sw-br,
364
+ var(--_ctm-tab-tbs-dn-ts-sd-se-sw-br, var(--_ctm-tbs-dn-ts-sd-se-sw-br))
365
+ );
366
+
367
+ --_sf-tbs-sd-ft-fy: var(
368
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-fy,
369
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-fy, var(--_ctm-tbs-dn-ts-sd-se-ft-fy))
370
+ );
371
+ --_sf-tbs-sd-ft-sz: var(
372
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-se,
373
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se, var(--_ctm-tbs-dn-ts-sd-se-ft-se))
374
+ );
375
+ --_sf-tbs-sd-ft-cr: var(
376
+ --_ctm-mob-tbs-dn-ts-sd-se-cr,
377
+ var(--_ctm-tab-tbs-dn-ts-sd-se-cr, var(--_ctm-tbs-dn-ts-sd-se-cr))
378
+ );
379
+ --_sf-tbs-sd-ft-wt: var(
380
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-wt,
381
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-wt, var(--_ctm-tbs-dn-ts-sd-se-ft-wt))
382
+ );
383
+ --_sf-tbs-sd-ft-sty: var(
384
+ --_ctm-mob-tbs-dn-ts-sd-se-ft-se-ic,
385
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tbs-dn-ts-sd-se-ft-se-ic))
386
+ );
387
+ --_sf-tbs-sd-ft-tdc: var(
388
+ --_ctm-mob-tbs-dn-ts-sd-se-ue,
389
+ var(--_ctm-tab-tbs-dn-ts-sd-se-ue, var(--_ctm-tbs-dn-ts-sd-se-ue))
390
+ );
391
+ --_sf-tbs-sd-ft-tln: var(
392
+ --_ctm-mob-tbs-dn-ts-sd-se-tt-an,
393
+ var(--_ctm-tab-tbs-dn-ts-sd-se-tt-an, var(--_ctm-tbs-dn-ts-sd-se-tt-an))
394
+ );
395
+ --_sf-tbs-sd-ft-lts: var(
396
+ --_ctm-mob-tbs-dn-ts-sd-se-lr-sg,
397
+ var(--_ctm-tab-tbs-dn-ts-sd-se-lr-sg, var(--_ctm-tbs-dn-ts-sd-se-lr-sg))
398
+ );
399
+ --_sf-tbs-sd-ft-lht: var(
400
+ --_ctm-mob-tbs-dn-ts-sd-se-le-ht,
401
+ var(--_ctm-tab-tbs-dn-ts-sd-se-le-ht, var(--_ctm-tbs-dn-ts-sd-se-le-ht))
402
+ );
403
+
404
+ --_sf-tbs-sd-in-gp: var(
405
+ --_ctm-mob-tbs-dn-ts-sd-se-in-gp,
406
+ var(--_ctm-tab-tbs-dn-ts-sd-se-in-gp, var(--_ctm-tbs-dn-ts-sd-se-in-gp))
407
+ );
408
+ --_sf-tbs-sd-in-sz: var(
409
+ --_ctm-mob-tbs-dn-ts-sd-se-in-se,
410
+ var(--_ctm-tab-tbs-dn-ts-sd-se-in-se, var(--_ctm-tbs-dn-ts-sd-se-in-se))
411
+ );
412
+ --_sf-tbs-sd-in-cr: var(
413
+ --_ctm-mob-tbs-dn-ts-sd-se-in-cr,
414
+ var(--_ctm-tab-tbs-dn-ts-sd-se-in-cr, var(--_ctm-tbs-dn-ts-sd-se-in-cr))
415
+ );
416
+ --_sf-tbs-sd-in-al: var(
417
+ --_ctm-mob-tbs-dn-ts-sd-se-vl-at,
418
+ var(--_ctm-tab-tbs-dn-ts-sd-se-vl-at, var(--_ctm-tbs-dn-ts-sd-se-vl-at))
419
+ );
420
+ }
421
+
422
+ &:not(.active) {
423
+ &:hover {
424
+ --_sf-tbs-hr-bg-cr: var(
425
+ --_ctm-mob-tbs-dn-ts-hr-se-bd-cr,
426
+ var(--_ctm-tab-tbs-dn-ts-hr-se-bd-cr, var(--_ctm-tbs-dn-ts-hr-se-bd-cr))
427
+ );
428
+
429
+ --_sf-tbs-hr-br-cr: var(
430
+ --_ctm-mob-tbs-dn-ts-hr-se-br-cr,
431
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-cr, var(--_ctm-tbs-dn-ts-hr-se-br-cr))
432
+ );
433
+ --_sf-tbs-hr-br-wt: var(
434
+ --_ctm-mob-tbs-dn-ts-hr-se-br-wh,
435
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-wh, var(--_ctm-tbs-dn-ts-hr-se-br-wh))
436
+ );
437
+ --_sf-tbs-hr-br-sty: var(
438
+ --_ctm-mob-tbs-dn-ts-hr-se-br-se,
439
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-se, var(--_ctm-tbs-dn-ts-hr-se-br-se))
440
+ );
441
+ --_sf-tbs-hr-br-rs: var(
442
+ --_ctm-mob-tbs-dn-ts-hr-se-br-rs,
443
+ var(--_ctm-tab-tbs-dn-ts-hr-se-br-rs, var(--_ctm-tbs-dn-ts-hr-se-br-rs))
444
+ );
445
+ --_sf-tbs-hr-sw-ae: var(
446
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-ae,
447
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-ae, var(--_ctm-tbs-dn-ts-hr-se-sw-ae))
448
+ );
449
+ --_sf-tbs-hr-sw-cr: var(
450
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-cr,
451
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-cr, var(--_ctm-tbs-dn-ts-hr-se-sw-cr))
452
+ );
453
+ --_sf-tbs-hr-sw-sd: var(
454
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-sd,
455
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-sd, var(--_ctm-tbs-dn-ts-hr-se-sw-sd))
456
+ );
457
+ --_sf-tbs-hr-sw-br: var(
458
+ --_ctm-mob-tbs-dn-ts-hr-se-sw-br,
459
+ var(--_ctm-tab-tbs-dn-ts-hr-se-sw-br, var(--_ctm-tbs-dn-ts-hr-se-sw-br))
460
+ );
461
+
462
+ --_sf-tbs-hr-ft-fy: var(
463
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-fy,
464
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-fy, var(--_ctm-tbs-dn-ts-hr-se-ft-fy))
465
+ );
466
+ --_sf-tbs-hr-ft-sz: var(
467
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-se,
468
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se, var(--_ctm-tbs-dn-ts-hr-se-ft-se))
469
+ );
470
+ --_sf-tbs-hr-ft-cr: var(
471
+ --_ctm-mob-tbs-dn-ts-hr-se-cr,
472
+ var(--_ctm-tab-tbs-dn-ts-hr-se-cr, var(--_ctm-tbs-dn-ts-hr-se-cr))
473
+ );
474
+ --_sf-tbs-hr-ft-wt: var(
475
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-wt,
476
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-wt, var(--_ctm-tbs-dn-ts-hr-se-ft-wt))
477
+ );
478
+ --_sf-tbs-hr-ft-sty: var(
479
+ --_ctm-mob-tbs-dn-ts-hr-se-ft-se-ic,
480
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tbs-dn-ts-hr-se-ft-se-ic))
481
+ );
482
+ --_sf-tbs-hr-ft-tdc: var(
483
+ --_ctm-mob-tbs-dn-ts-hr-se-ue,
484
+ var(--_ctm-tab-tbs-dn-ts-hr-se-ue, var(--_ctm-tbs-dn-ts-hr-se-ue))
485
+ );
486
+ --_sf-tbs-hr-ft-tln: var(
487
+ --_ctm-mob-tbs-dn-ts-hr-se-tt-an,
488
+ var(--_ctm-tab-tbs-dn-ts-hr-se-tt-an, var(--_ctm-tbs-dn-ts-hr-se-tt-an))
489
+ );
490
+ --_sf-tbs-hr-ft-lts: var(
491
+ --_ctm-mob-tbs-dn-ts-hr-se-lr-sg,
492
+ var(--_ctm-tab-tbs-dn-ts-hr-se-lr-sg, var(--_ctm-tbs-dn-ts-hr-se-lr-sg))
493
+ );
494
+ --_sf-tbs-hr-ft-lht: var(
495
+ --_ctm-mob-tbs-dn-ts-hr-se-le-ht,
496
+ var(--_ctm-tab-tbs-dn-ts-hr-se-le-ht, var(--_ctm-tbs-dn-ts-hr-se-le-ht))
497
+ );
498
+
499
+ --_sf-tbs-hr-in-gp: var(
500
+ --_ctm-mob-tbs-dn-ts-hr-se-in-gp,
501
+ var(--_ctm-tab-tbs-dn-ts-hr-se-in-gp, var(--_ctm-tbs-dn-ts-hr-se-in-gp))
502
+ );
503
+ --_sf-tbs-hr-in-sz: var(
504
+ --_ctm-mob-tbs-dn-ts-hr-se-in-se,
505
+ var(--_ctm-tab-tbs-dn-ts-hr-se-in-se, var(--_ctm-tbs-dn-ts-hr-se-in-se))
506
+ );
507
+ --_sf-tbs-hr-in-cr: var(
508
+ --_ctm-mob-tbs-dn-ts-hr-se-in-c1,
509
+ var(--_ctm-tab-tbs-dn-ts-hr-se-in-c1, var(--_ctm-tbs-dn-ts-hr-se-in-c1))
510
+ );
511
+ --_sf-tbs-hr-in-al: var(
512
+ --_ctm-mob-tbs-dn-ts-hr-se-vl-at,
513
+ var(--_ctm-tab-tbs-dn-ts-hr-se-vl-at, var(--_ctm-tbs-dn-ts-hr-se-vl-at))
514
+ );
515
+ }
516
+ }
517
+
518
+ &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
519
+ flex: 1 0 auto;
520
+ }
521
+
522
+ & > span {
523
+ // display: var(--_d-flex);
524
+ width: 100%;
525
+
526
+ &:is(.vtl *) {
527
+ width: max-content;
528
+ }
529
+
530
+ // width: max-content;
531
+
532
+ font-family: var(
533
+ --_sf-tbs-sd-ft-fy,
534
+ var(
535
+ --_sf-tbs-hr-ft-fy,
536
+ var(
537
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-fy,
538
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ft-fy, var(--_ctm-tbs-dn-ts-dt-se-ft-fy))
539
+ )
540
+ )
541
+ );
542
+ font-size: var(
543
+ --_sf-tbs-sd-ft-sz,
544
+ var(
545
+ --_sf-tbs-hr-ft-sz,
546
+ var(
547
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-se,
548
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ft-se, var(--_ctm-tbs-dn-ts-dt-se-ft-se))
549
+ )
550
+ )
551
+ );
552
+ color: var(
553
+ --_sf-tbs-sd-ft-cr,
554
+ var(
555
+ --_sf-tbs-hr-ft-cr,
556
+ var(
557
+ --_ctm-mob-tbs-dn-ts-dt-se-cr,
558
+ var(--_ctm-tab-tbs-dn-ts-dt-se-cr, var(--_ctm-tbs-dn-ts-dt-se-cr))
559
+ )
560
+ )
561
+ );
562
+ font-weight: var(
563
+ --_sf-tbs-sd-ft-wt,
564
+ var(
565
+ --_sf-tbs-hr-ft-wt,
566
+ var(
567
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-wt,
568
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ft-wt, var(--_ctm-tbs-dn-ts-dt-se-ft-wt))
569
+ )
570
+ )
571
+ );
572
+ font-style: var(
573
+ --_sf-tbs-sd-ft-sty,
574
+ var(
575
+ --_sf-tbs-hr-ft-sty,
576
+ var(
577
+ --_ctm-mob-tbs-dn-ts-dt-se-ft-se-ic,
578
+ var(
579
+ --_ctm-tab-tbs-dn-ts-dt-se-ft-se-ic,
580
+ var(--_ctm-tbs-dn-ts-dt-se-ft-se-ic, normal)
581
+ )
582
+ )
583
+ )
584
+ );
585
+ text-decoration: var(
586
+ --_sf-tbs-sd-ft-tdc,
587
+ var(
588
+ --_sf-tbs-hr-ft-tdc,
589
+ var(
590
+ --_ctm-mob-tbs-dn-ts-dt-se-ue,
591
+ var(--_ctm-tab-tbs-dn-ts-dt-se-ue, var(--_ctm-tbs-dn-ts-dt-se-ue))
592
+ )
593
+ )
594
+ );
595
+ text-align: var(
596
+ --_sf-tbs-sd-ft-tln,
597
+ var(
598
+ --_sf-tbs-hr-ft-tln,
599
+ var(
600
+ --_ctm-mob-tbs-dn-ts-dt-se-tt-an,
601
+ var(--_ctm-tab-tbs-dn-ts-dt-se-tt-an, var(--_ctm-tbs-dn-ts-dt-se-tt-an))
602
+ )
603
+ )
604
+ );
605
+ letter-spacing: var(
606
+ --_sf-tbs-sd-ft-lts,
607
+ var(
608
+ --_sf-tbs-hr-ft-lts,
609
+ var(
610
+ --_ctm-mob-tbs-dn-ts-dt-se-lr-sg,
611
+ var(--_ctm-tab-tbs-dn-ts-dt-se-lr-sg, var(--_ctm-tbs-dn-ts-dt-se-lr-sg))
612
+ )
613
+ )
614
+ );
615
+ line-height: var(
616
+ --_sf-tbs-sd-ft-lht,
617
+ var(
618
+ --_sf-tbs-hr-ft-lht,
619
+ var(
620
+ --_ctm-mob-tbs-dn-ts-dt-se-le-ht,
621
+ var(--_ctm-tab-tbs-dn-ts-dt-se-le-ht, var(--_ctm-tbs-dn-ts-dt-se-le-ht))
622
+ )
623
+ )
624
+ );
625
+ white-space: nowrap;
626
+ }
627
+
628
+ & > span.icon {
629
+ display: var(--_hide-tbs-icon, var(--_d-flex));
630
+ width: auto;
631
+ flex: 0 0 auto;
632
+ align-self: var(
633
+ --_sf-tbs-sd-in-al,
634
+ var(
635
+ --_sf-tbs-hr-in-al,
636
+ var(
637
+ --_ctm-mob-tbs-dn-ts-dt-se-vl-at,
638
+ var(--_ctm-tab-tbs-dn-ts-dt-se-vl-at, var(--_ctm-tbs-dn-ts-dt-se-vl-at))
639
+ )
640
+ )
641
+ );
642
+
643
+ & > svg {
644
+ width: var(
645
+ --_sf-tbs-sd-in-sz,
646
+ var(
647
+ --_sf-tbs-hr-in-sz,
648
+ var(
649
+ --_ctm-mob-tbs-dn-ts-dt-se-in-se,
650
+ var(--_ctm-tab-tbs-dn-ts-dt-se-in-se, var(--_ctm-tbs-dn-ts-dt-se-in-se))
651
+ )
652
+ )
653
+ );
654
+ height: var(
655
+ --_sf-tbs-sd-in-sz,
656
+ var(
657
+ --_sf-tbs-hr-in-sz,
658
+ var(
659
+ --_ctm-mob-tbs-dn-ts-dt-se-in-se,
660
+ var(--_ctm-tab-tbs-dn-ts-dt-se-in-se, var(--_ctm-tbs-dn-ts-dt-se-in-se))
661
+ )
662
+ )
663
+ );
664
+
665
+ path {
666
+ stroke: var(
667
+ --_sf-tbs-sd-in-cr,
668
+ var(
669
+ --_sf-tbs-hr-in-cr,
670
+ var(
671
+ --_ctm-mob-tbs-dn-ts-dt-se-in-c1,
672
+ var(--_ctm-tab-tbs-dn-ts-dt-se-in-c1, var(--_ctm-tbs-dn-ts-dt-se-in-c1))
673
+ )
674
+ )
675
+ );
676
+ }
677
+ }
678
+ }
679
+ }
680
+ }
681
+ }
682
+
683
+ &.#{$tabBody} {
684
+ display: var(--_d-flex);
685
+ flex: 1 1 auto;
686
+
687
+ &:is(.hrz *) {
688
+ margin-block-start: prepareMediaVariable(--_ctm-tbs-lt-tb-cr-gp, 0px);
689
+ }
690
+
691
+ &:is(.vtl *) {
692
+ margin-inline-start: prepareMediaVariable(--_ctm-tbs-lt-tb-cr-gp, 0px);
693
+ }
694
+
695
+ & > div {
696
+ &.#{$tabBodyWrapper} {
697
+ display: var(--_d-grid);
698
+ grid-template-columns: 100%;
699
+ grid-template-rows: 100%;
700
+ width: 100%;
701
+ }
702
+ }
703
+ }
704
+ }
705
+ }
706
+ }
707
+
708
+ // &[data-view-state="full"] {
709
+ // width: auto;
710
+ // margin: 0;
711
+ // justify-self: stretch !important;
712
+ // align-self: stretch !important;
713
+ // cursor: auto;
714
+ // &:is(#{$activeElementSelector}) {
715
+ // & > div {
716
+ // &[data-div-type="wrapper__layer"] {
717
+ // --_sf-vt-zz: visible;
718
+ // --_sf-op-zz: 1;
719
+ // }
720
+ // }
721
+ // }
722
+ // }
723
+ }
724
+ }