@sc-360-v2/storefront-cms-library 0.5.50 → 0.5.52

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