@sc-360-v2/storefront-cms-library 0.5.73 → 0.5.75

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 (141) hide show
  1. package/dist/add-existing-form.scss +5 -13
  2. package/dist/add-order.scss +236 -126
  3. package/dist/add-products-tab-details.scss +2097 -1048
  4. package/dist/add-products-tab.scss +1204 -666
  5. package/dist/allocation-header-quota-details.scss +407 -189
  6. package/dist/allocationDetails.scss +2143 -1661
  7. package/dist/allocations-quota-details.scss +323 -159
  8. package/dist/allocations.scss +793 -475
  9. package/dist/amount-estimator.scss +743 -405
  10. package/dist/badge.scss +18 -43
  11. package/dist/brand-basic-elements.scss +124 -76
  12. package/dist/brand.scss +55 -28
  13. package/dist/breadcrumbs.scss +718 -356
  14. package/dist/builder.js +1 -1
  15. package/dist/builderLite.js +1 -1
  16. package/dist/bulk-variant-picker.scss +2027 -1128
  17. package/dist/bundle.scss +1477 -841
  18. package/dist/bundleDetails.scss +5072 -3774
  19. package/dist/button.scss +103 -79
  20. package/dist/buy-for-tab-container.scss +106 -77
  21. package/dist/buyForHeaders.scss +2976 -1722
  22. package/dist/cart-details.scss +1012 -481
  23. package/dist/cart-summary.scss +1149 -557
  24. package/dist/cart-wrapper.scss +79 -37
  25. package/dist/cart.scss +225 -117
  26. package/dist/cartAttributes.scss +735 -416
  27. package/dist/category-groups-element.scss +108 -127
  28. package/dist/category-groups-product-grid.scss +147 -120
  29. package/dist/category-groups-product-image.scss +1457 -1162
  30. package/dist/category-groups-product-options.scss +680 -613
  31. package/dist/category-groups-product-price.scss +3244 -1966
  32. package/dist/category-groups-quota-details.scss +464 -210
  33. package/dist/category.scss +50 -26
  34. package/dist/checkout.scss +16 -24
  35. package/dist/confirm-modal.scss +2 -22
  36. package/dist/container.scss +54 -32
  37. package/dist/countdown.scss +443 -255
  38. package/dist/coupon.scss +710 -351
  39. package/dist/default-dropdown.scss +1 -12
  40. package/dist/embroider-template-1-v2.scss +172 -123
  41. package/dist/embroider-template-1.scss +104 -68
  42. package/dist/embroidery.scss +31 -30
  43. package/dist/employee-bulk-order.scss +142 -418
  44. package/dist/faq.scss +408 -228
  45. package/dist/filter-results.scss +265 -125
  46. package/dist/filters.scss +1797 -900
  47. package/dist/gallery-slider-temp.scss +750 -432
  48. package/dist/global-styles.scss +7 -23
  49. package/dist/grid.scss +33 -25
  50. package/dist/hotspot.scss +115 -68
  51. package/dist/icons-builder.js +1 -1
  52. package/dist/icons-website.js +1 -1
  53. package/dist/icons.js +1 -1
  54. package/dist/image-temp.scss +20 -21
  55. package/dist/index.js +1 -1
  56. package/dist/item-stock.scss +16 -9
  57. package/dist/kitDetails.scss +4301 -2721
  58. package/dist/kits.scss +19 -24
  59. package/dist/language-selector.scss +361 -211
  60. package/dist/last-x-orders.scss +174 -95
  61. package/dist/layouter-item.scss +103 -75
  62. package/dist/layouter-pro-item.scss +95 -89
  63. package/dist/layouter-pro.scss +92 -87
  64. package/dist/layouter.scss +445 -383
  65. package/dist/light-box-v2.scss +104 -89
  66. package/dist/login.scss +566 -287
  67. package/dist/map.scss +368 -221
  68. package/dist/marchandiserSets.scss +104 -95
  69. package/dist/mega-menu-container.scss +109 -96
  70. package/dist/mega-menu.scss +731 -624
  71. package/dist/menu-item.scss +2 -2
  72. package/dist/menu-v2.scss +619 -507
  73. package/dist/multi-select-dropdown.scss +3 -27
  74. package/dist/my-templates.scss +9 -38
  75. package/dist/option-bar.scss +375 -215
  76. package/dist/option-families.scss +252 -0
  77. package/dist/order-status.scss +1117 -646
  78. package/dist/overflow-module.scss +7 -6
  79. package/dist/past-orders.scss +149 -118
  80. package/dist/payment-methods.scss +30 -46
  81. package/dist/pickup-locations.scss +1118 -558
  82. package/dist/position-module.scss +17 -20
  83. package/dist/prefix-list.scss +10 -21
  84. package/dist/product-actions.scss +2425 -1625
  85. package/dist/product-basic-elements.scss +169 -108
  86. package/dist/product-highlights.scss +152 -107
  87. package/dist/product-image-bundles.scss +642 -337
  88. package/dist/product-inventory.scss +1357 -673
  89. package/dist/product-labels.scss +105 -84
  90. package/dist/product-options.scss +1274 -1117
  91. package/dist/product-price.scss +2561 -1283
  92. package/dist/product-promotions.scss +2830 -1388
  93. package/dist/product-sizechart.scss +905 -516
  94. package/dist/product.scss +61 -28
  95. package/dist/productDetails.scss +39 -19
  96. package/dist/profile.scss +447 -207
  97. package/dist/quantity-selector.scss +550 -313
  98. package/dist/quick-inventory-check.scss +174 -95
  99. package/dist/quick-links.scss +133 -55
  100. package/dist/quick-order-pad.scss +271 -218
  101. package/dist/quota-details.scss +282 -152
  102. package/dist/quotes.scss +122 -89
  103. package/dist/repeater-embla-controls.scss +15 -35
  104. package/dist/repeater-grid-toggle.scss +166 -156
  105. package/dist/repeater-item.scss +64 -41
  106. package/dist/repeater.scss +814 -671
  107. package/dist/request-for-quotes.scss +16 -66
  108. package/dist/responsive-behaviour.scss +1 -3
  109. package/dist/rfqs.scss +181 -118
  110. package/dist/scroll.scss +172 -93
  111. package/dist/search.scss +326 -179
  112. package/dist/section.scss +51 -27
  113. package/dist/shipping-payments.scss +58 -198
  114. package/dist/simple-list.scss +164 -74
  115. package/dist/social.scss +145 -80
  116. package/dist/sort.scss +19 -11
  117. package/dist/stack.scss +34 -23
  118. package/dist/static-global.scss +26 -44
  119. package/dist/stockStatus.scss +19 -11
  120. package/dist/store-locations.scss +1105 -577
  121. package/dist/tab-container.scss +108 -81
  122. package/dist/table-common.scss +408 -217
  123. package/dist/table.scss +502 -271
  124. package/dist/text-temp.scss +7 -8
  125. package/dist/theme-classes.scss +13 -17
  126. package/dist/types/builder/enums/data-connectors.d.ts +3 -1
  127. package/dist/types/builder/enums/index.d.ts +3 -1
  128. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  129. package/dist/types/builder/tools/element-edit/optionFamilies.d.ts +20 -0
  130. package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -0
  131. package/dist/types/website/constants/data-connector-souces.d.ts +40 -8
  132. package/dist/types/website/constants/data-connectors.d.ts +12 -1
  133. package/dist/types/website/helper/ssr-functions.d.ts +8 -0
  134. package/dist/uom-selector.scss +949 -489
  135. package/dist/uploadMedia.js +1 -1
  136. package/dist/user-elements.scss +837 -529
  137. package/dist/variant-picker.scss +2555 -1281
  138. package/dist/volume-pricing.scss +1037 -541
  139. package/dist/website.js +1 -1
  140. package/dist/widget.scss +1 -0
  141. package/package.json +1 -1
package/dist/bundle.scss CHANGED
@@ -9,100 +9,79 @@ $resizeActive: '[data-cms-element-resizer="true"]';
9
9
 
10
10
  @mixin NAVIGATION_STYLES($type: 1) {
11
11
  $TYPE: "cy";
12
-
13
- @if ($type ==2) {
12
+ @if ($type == 2) {
14
13
  $TYPE: "pt";
15
14
  }
16
-
17
- $size: var(--_sf-icn-size,
18
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)
19
- });
20
- $clr: var(--_sf-icn-clr,
21
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)
22
- });
23
- $perc: 1.75;
24
- display: var(--_d-flex);
25
- align-items: center;
26
- justify-content: center;
27
- width: calc(#{$size} * #{$perc});
28
- height: calc(#{$size} * #{$perc});
29
- background: var(--_sf-icn-bg,
30
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)
31
- });
32
- border-radius: var(--_sf-icn-brs,
33
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)
34
- });
35
-
36
- // Border is only drawn when the "Show Border" toggle is on. The renderer emits
37
- // data-show-border="false" when the toggle is off; an absent/"true" value keeps
38
- // the border (so existing arrows that don't set the attribute are unaffected).
39
- &:not([data-show-border="false"]) {
40
- border-color: var(--_sf-icn-br,
41
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)
42
- });
43
- border-width: var(--_sf-icn-bw,
44
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)
45
- });
46
- border-style: var(--_sf-icn-bs,
47
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)
48
- });
49
- }
50
-
51
- // Hide the arrow glyph when the "Show Icon" toggle is off.
52
- &[data-show-icon="false"]>span {
53
- display: none;
54
- }
55
-
56
- &:disabled {
57
- opacity: 0.65;
58
- cursor: no-drop;
59
- }
60
-
61
- &:hover {
62
- --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)
63
- }
64
-
65
- ;
66
- --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)
67
- }
68
-
69
- ;
70
- --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)
71
- }
72
-
73
- ;
74
- --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)
75
- }
76
-
77
- ;
78
- --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)
79
- }
80
-
81
- ;
82
- --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)
83
- }
84
-
85
- ;
86
- --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)
87
- }
88
-
89
- ;
90
- }
91
-
92
- &>span {
15
+ $size: var(
16
+ --_sf-icn-size,
17
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-se, 16px)}
18
+ );
19
+ $clr: var(
20
+ --_sf-icn-clr,
21
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-in-c1, #000)}
22
+ );
23
+ $perc: 1.75;
93
24
  display: var(--_d-flex);
25
+ align-items: center;
26
+ justify-content: center;
27
+ width: calc(#{$size} * #{$perc});
28
+ height: calc(#{$size} * #{$perc});
29
+ background: var(
30
+ --_sf-icn-bg,
31
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)}
32
+ );
33
+ border-radius: var(
34
+ --_sf-icn-brs,
35
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)}
36
+ );
37
+ // Border is only drawn when the "Show Border" toggle is on. The renderer emits
38
+ // data-show-border="false" when the toggle is off; an absent/"true" value keeps
39
+ // the border (so existing arrows that don't set the attribute are unaffected).
40
+ &:not([data-show-border="false"]) {
41
+ border-color: var(
42
+ --_sf-icn-br,
43
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
44
+ );
45
+ border-width: var(
46
+ --_sf-icn-bw,
47
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
48
+ );
49
+ border-style: var(
50
+ --_sf-icn-bs,
51
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
52
+ );
53
+ }
54
+ // Hide the arrow glyph when the "Show Icon" toggle is off.
55
+ &[data-show-icon="false"] > span {
56
+ display: none;
57
+ }
58
+ &:disabled {
59
+ opacity: 0.65;
60
+ cursor: no-drop;
61
+ }
62
+
63
+ &:hover {
64
+ --_sf-icn-size: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-se)};
65
+ --_sf-icn-clr: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-in-c1)};
66
+ --_sf-icn-bg: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-bd-cr)};
67
+ --_sf-icn-br: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-cr)};
68
+ --_sf-icn-bw: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-wh)};
69
+ --_sf-icn-bs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-se)};
70
+ --_sf-icn-brs: #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-hr-se-br-rs)};
71
+ }
72
+ & > span {
73
+ display: var(--_d-flex);
94
74
 
95
- svg {
96
- width: #{$size};
97
- height: #{$size};
75
+ svg {
76
+ width: #{$size};
77
+ height: #{$size};
98
78
 
99
- path {
100
- stroke: #{$clr};
79
+ path {
80
+ stroke: #{$clr};
81
+ }
101
82
  }
102
83
  }
103
84
  }
104
- }
105
-
106
85
  [data-div-type="element"] {
107
86
  &[data-element-type="bundle"] {
108
87
  // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
@@ -124,8 +103,12 @@ border-style: var(--_sf-icn-bs,
124
103
  // )
125
104
  // )
126
105
  // );
127
- width: var(--_sf-el-wh-st-mx,
128
- calc(1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))));
106
+ width: var(
107
+ --_sf-el-wh-st-mx,
108
+ calc(
109
+ 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
110
+ )
111
+ );
129
112
  // min-height: var();
130
113
  // height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
131
114
 
@@ -163,11 +146,10 @@ border-style: var(--_sf-icn-bs,
163
146
  // min-height: 100px !important;
164
147
  // }
165
148
 
166
- &>.wrapper {
149
+ & > .wrapper {
167
150
  width: 100%;
168
151
  // height: 100%;
169
152
  }
170
-
171
153
  .embla {
172
154
  width: 100%;
173
155
  // height: 100%;
@@ -191,26 +173,61 @@ border-style: var(--_sf-icn-bs,
191
173
  display: grid;
192
174
  grid-template-rows: 100%;
193
175
 
194
- grid-template-columns: repeat(var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
195
- calc((100% - (var(--_ctm-mob-lt-is-pr-se,
196
- var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) - 1) * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))) / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))));
176
+ grid-template-columns: repeat(
177
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
178
+ calc(
179
+ (
180
+ 100% -
181
+ (
182
+ var(
183
+ --_ctm-mob-lt-is-pr-se,
184
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
185
+ ) -
186
+ 1
187
+ ) *
188
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
189
+ ) /
190
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
191
+ )
192
+ );
197
193
 
198
194
  grid-auto-flow: column;
199
195
  gap: var(--_ctm-mob-lt-im-gp, var(--_ctm-tab-lt-im-gp, var(--_ctm-lt-im-gp)));
200
196
 
201
197
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
202
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-as-aw-se,
203
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) + 10px));
198
+ height: calc(
199
+ 100% - calc(
200
+ var(
201
+ --_ctm-mob-dn-pn-as-aw-se,
202
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
203
+ ) +
204
+ 10px
205
+ )
206
+ );
204
207
  }
205
208
 
206
209
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
207
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-le-le-ht,
208
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))) + 20px));
210
+ height: calc(
211
+ 100% - calc(
212
+ var(
213
+ --_ctm-mob-dn-pn-le-le-ht,
214
+ var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
215
+ ) +
216
+ 20px
217
+ )
218
+ );
209
219
  }
210
220
 
211
221
  &[data-control-type="Bottom"][data-slider-control="Dots"] {
212
- height: calc(100% - calc(var(--_ctm-mob-dn-pn-ds-dt-se,
213
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))) + 20px));
222
+ height: calc(
223
+ 100% - calc(
224
+ var(
225
+ --_ctm-mob-dn-pn-ds-dt-se,
226
+ var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
227
+ ) +
228
+ 20px
229
+ )
230
+ );
214
231
  }
215
232
 
216
233
  .embla__slide {
@@ -219,11 +236,22 @@ border-style: var(--_sf-icn-bs,
219
236
  }
220
237
  }
221
238
  }
222
-
223
239
  &:not([data-display-style="Column"]) {
224
240
  .embla__container {
225
- grid-auto-columns: calc((100% - (var(--_ctm-mob-lt-is-pr-se,
226
- var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))) - 1) * var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))) / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))));
241
+ grid-auto-columns: calc(
242
+ (
243
+ 100% -
244
+ (
245
+ var(
246
+ --_ctm-mob-lt-is-pr-se,
247
+ var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))
248
+ ) -
249
+ 1
250
+ ) *
251
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)))
252
+ ) /
253
+ var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
254
+ );
227
255
  }
228
256
  }
229
257
 
@@ -233,7 +261,6 @@ border-style: var(--_sf-icn-bs,
233
261
  .embla__viewport {
234
262
  .embla__container {
235
263
  display: flex;
236
-
237
264
  .embla__slide {
238
265
  width: unset;
239
266
  height: 100%;
@@ -251,25 +278,20 @@ border-style: var(--_sf-icn-bs,
251
278
  width: 100%;
252
279
  justify-content: space-between;
253
280
  transform: translate(-50%, -50%);
254
-
255
281
  // padding-left: 20px;
256
282
  &[data-control-type="Side"] {
257
-
258
283
  .left-button,
259
284
  .right-button {
260
285
  background-color: transparent;
261
286
  }
262
287
  }
263
-
264
288
  &[data-background-shape="Round"] {
265
-
266
289
  .left-button,
267
290
  .right-button {
268
291
  background-color: #f2f5f5;
269
292
  box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
270
293
  }
271
294
  }
272
-
273
295
  &[data-control-type="Bottom-Overflow"] {
274
296
  transform: translateX(-50%);
275
297
  width: 100%;
@@ -278,7 +300,6 @@ border-style: var(--_sf-icn-bs,
278
300
  top: unset;
279
301
  bottom: 6px;
280
302
  }
281
-
282
303
  &[data-control-type="Bottom"] {
283
304
  transform: unset;
284
305
  position: static;
@@ -287,15 +308,18 @@ border-style: var(--_sf-icn-bs,
287
308
  gap: 12px;
288
309
  margin-top: 10px;
289
310
  }
290
-
291
311
  .left-button {
292
312
  padding: 10px;
293
313
  border-radius: 50%;
294
314
  border: none;
295
- width: var(--_ctm-mob-dn-pn-as-aw-se,
296
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
297
- height: var(--_ctm-mob-dn-pn-as-aw-se,
298
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
315
+ width: var(
316
+ --_ctm-mob-dn-pn-as-aw-se,
317
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
318
+ );
319
+ height: var(
320
+ --_ctm-mob-dn-pn-as-aw-se,
321
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
322
+ );
299
323
 
300
324
  display: flex;
301
325
  align-items: center;
@@ -303,7 +327,6 @@ border-style: var(--_sf-icn-bs,
303
327
  cursor: pointer;
304
328
  outline: none;
305
329
  margin-left: 12px;
306
-
307
330
  &:disabled {
308
331
  & svg {
309
332
  path {
@@ -312,14 +335,17 @@ border-style: var(--_sf-icn-bs,
312
335
  }
313
336
  }
314
337
  }
315
-
316
338
  .right-button {
317
339
  border-radius: 50%;
318
340
  border: none;
319
- width: var(--_ctm-mob-dn-pn-as-aw-se,
320
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
321
- height: var(--_ctm-mob-dn-pn-as-aw-se,
322
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se)));
341
+ width: var(
342
+ --_ctm-mob-dn-pn-as-aw-se,
343
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
344
+ );
345
+ height: var(
346
+ --_ctm-mob-dn-pn-as-aw-se,
347
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
348
+ );
323
349
 
324
350
  display: flex;
325
351
  align-items: center;
@@ -337,19 +363,30 @@ border-style: var(--_sf-icn-bs,
337
363
  }
338
364
  }
339
365
  }
340
-
341
366
  .icon {
342
367
  display: flex;
343
368
 
344
369
  svg {
345
- width: calc(var(--_ctm-mob-dn-pn-as-aw-se,
346
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
347
- height: calc(var(--_ctm-mob-dn-pn-as-aw-se,
348
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))) * 0.5);
370
+ width: calc(
371
+ var(
372
+ --_ctm-mob-dn-pn-as-aw-se,
373
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
374
+ ) *
375
+ 0.5
376
+ );
377
+ height: calc(
378
+ var(
379
+ --_ctm-mob-dn-pn-as-aw-se,
380
+ var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
381
+ ) *
382
+ 0.5
383
+ );
349
384
 
350
385
  path {
351
- stroke: var(--_ctm-mob-dn-pn-as-aw-cr,
352
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr)));
386
+ stroke: var(
387
+ --_ctm-mob-dn-pn-as-aw-cr,
388
+ var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
389
+ );
353
390
  }
354
391
  }
355
392
  }
@@ -365,7 +402,6 @@ border-style: var(--_sf-icn-bs,
365
402
  width: calc(100% - 120px);
366
403
  margin-inline: auto;
367
404
  }
368
-
369
405
  .left-button {
370
406
  position: absolute;
371
407
  left: 0;
@@ -375,7 +411,6 @@ border-style: var(--_sf-icn-bs,
375
411
 
376
412
  @include NAVIGATION_STYLES(1);
377
413
  }
378
-
379
414
  .right-button {
380
415
  position: absolute;
381
416
  z-index: 2;
@@ -394,11 +429,9 @@ border-style: var(--_sf-icn-bs,
394
429
  &[data-thumbnail-placement="top"] {
395
430
  flex-direction: column-reverse;
396
431
  }
397
-
398
432
  &[data-thumbnail-placement="bottom"] {
399
433
  flex-direction: column;
400
434
  }
401
-
402
435
  &[data-thumbnail-placement="left"] {
403
436
  flex-direction: row-reverse;
404
437
 
@@ -412,10 +445,8 @@ border-style: var(--_sf-icn-bs,
412
445
  }
413
446
  }
414
447
  }
415
-
416
448
  &[data-thumbnail-placement="right"] {
417
449
  flex-direction: row;
418
-
419
450
  .embla__thumbs {
420
451
  width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
421
452
 
@@ -428,26 +459,40 @@ border-style: var(--_sf-icn-bs,
428
459
  }
429
460
  }
430
461
  }
431
-
432
462
  .bundle__element__container {
433
463
  // height: 100%;
434
- background-color: var(--_ctm-mob-dn-wt-se-bd-cr,
435
- var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr)));
436
-
437
- border-color: var(--_ctm-mob-dn-wt-se-br-cr,
438
- var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr)));
439
-
440
- border-style: var(--_ctm-mob-dn-wt-se-br-se,
441
- var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se)));
442
-
443
- border-width: var(--_ctm-mob-dn-wt-se-br-wh,
444
- var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh)));
445
-
446
- border-radius: var(--_ctm-mob-dn-wt-se-br-rs,
447
- var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs)));
448
-
449
- box-shadow: var(--_show-shadow,
450
- var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae))) var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br))) var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd))) var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr))));
464
+ background-color: var(
465
+ --_ctm-mob-dn-wt-se-bd-cr,
466
+ var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
467
+ );
468
+
469
+ border-color: var(
470
+ --_ctm-mob-dn-wt-se-br-cr,
471
+ var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
472
+ );
473
+
474
+ border-style: var(
475
+ --_ctm-mob-dn-wt-se-br-se,
476
+ var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
477
+ );
478
+
479
+ border-width: var(
480
+ --_ctm-mob-dn-wt-se-br-wh,
481
+ var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
482
+ );
483
+
484
+ border-radius: var(
485
+ --_ctm-mob-dn-wt-se-br-rs,
486
+ var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
487
+ );
488
+
489
+ box-shadow: var(
490
+ --_show-shadow,
491
+ var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
492
+ var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
493
+ var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
494
+ var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
495
+ );
451
496
 
452
497
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
453
498
  display: flex;
@@ -456,134 +501,214 @@ border-style: var(--_sf-icn-bs,
456
501
 
457
502
  .bundle__tabs {
458
503
  width: 100%;
459
- background-color: var(--_ctm-mob-dn-be-ts-wt-se-bd-cr,
460
- var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr)));
504
+ background-color: var(
505
+ --_ctm-mob-dn-be-ts-wt-se-bd-cr,
506
+ var(--_ctm-tab-dn-be-ts-wt-se-bd-cr, var(--_ctm-dn-be-ts-wt-se-bd-cr))
507
+ );
461
508
  // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
462
509
  display: flex;
463
510
  flex-direction: column;
464
- --_sf-gp: var(--_ctm-mob-lt-im-sg,
465
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
511
+ --_sf-gp: var(
512
+ --_ctm-mob-lt-im-sg,
513
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
514
+ );
466
515
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
467
516
  row-gap: var(--_sf-gp);
468
517
  width: 100%;
469
-
470
518
  // height: 100%;
471
519
  // Border only drawn when the widget's "Show Border" toggle is on. The
472
520
  // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
473
521
  &[data-show-border="true"] {
474
- border-color: var(--_ctm-mob-dn-be-ts-wt-se-br-cr,
475
- var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr)));
476
- border-style: var(--_ctm-mob-dn-be-ts-wt-se-br-se,
477
- var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se)));
478
- border-width: var(--_ctm-mob-dn-be-ts-wt-se-br-wh,
479
- var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh)));
522
+ border-color: var(
523
+ --_ctm-mob-dn-be-ts-wt-se-br-cr,
524
+ var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
525
+ );
526
+ border-style: var(
527
+ --_ctm-mob-dn-be-ts-wt-se-br-se,
528
+ var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
529
+ );
530
+ border-width: var(
531
+ --_ctm-mob-dn-be-ts-wt-se-br-wh,
532
+ var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
533
+ );
480
534
  }
481
-
482
- border-radius: var(--_ctm-mob-dn-be-ts-wt-se-br-rs,
483
- var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs)));
484
- box-shadow: var(--_show-shadow,
485
- var(--_ctm-mob-dn-be-ts-wt-se-sw-ae,
486
- var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))) var(--_ctm-mob-dn-be-ts-wt-se-sw-br,
487
- var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))) var(--_ctm-mob-dn-be-ts-wt-se-sw-sd,
488
- var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))) var(--_ctm-mob-dn-be-ts-wt-se-sw-cr,
489
- var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))));
490
-
535
+ border-radius: var(
536
+ --_ctm-mob-dn-be-ts-wt-se-br-rs,
537
+ var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs))
538
+ );
539
+ box-shadow: var(
540
+ --_show-shadow,
541
+ var(
542
+ --_ctm-mob-dn-be-ts-wt-se-sw-ae,
543
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-ae, var(--_ctm-dn-be-ts-wt-se-sw-ae))
544
+ )
545
+ var(
546
+ --_ctm-mob-dn-be-ts-wt-se-sw-br,
547
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-br, var(--_ctm-dn-be-ts-wt-se-sw-br))
548
+ )
549
+ var(
550
+ --_ctm-mob-dn-be-ts-wt-se-sw-sd,
551
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-sd, var(--_ctm-dn-be-ts-wt-se-sw-sd))
552
+ )
553
+ var(
554
+ --_ctm-mob-dn-be-ts-wt-se-sw-cr,
555
+ var(--_ctm-tab-dn-be-ts-wt-se-sw-cr, var(--_ctm-dn-be-ts-wt-se-sw-cr))
556
+ )
557
+ );
491
558
  .profile__button {
492
559
  &[data-show-shadow="false"] {
493
560
  --_show-shadow: none;
494
561
  }
495
-
496
562
  &[data-icon-position="left"] {
497
563
  --_sf-fd-bn: row;
498
564
  }
499
-
500
565
  &[data-icon-position="right"] {
501
566
  --_sf-fd-bn: row-reverse;
502
567
  }
503
-
504
568
  &[data-icon-position="center"] {
505
569
  --_sf-fd-bn: row;
506
570
  }
507
571
 
508
572
  &:hover {
509
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
510
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr)));
511
- --_sf-hr-br-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
512
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr)));
513
- --_sf-hr-br-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
514
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se)));
515
- --_sf-hr-br-wh: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
516
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh)));
517
- --_sf-hr-br-rs: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
518
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs)));
519
- --_sf-hr-at: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-at,
520
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at)));
521
- --_sf-hr-in-ad-tt-sg: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
522
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
523
- var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)));
573
+ --_sf-hr-bd-cr: var(
574
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-bd-cr,
575
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-bd-cr))
576
+ );
577
+ --_sf-hr-br-cr: var(
578
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-cr,
579
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-br-cr))
580
+ );
581
+ --_sf-hr-br-se: var(
582
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-se,
583
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-se, var(--_ctm-dn-be-ts-be-tb-hr-se-br-se))
584
+ );
585
+ --_sf-hr-br-wh: var(
586
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-wh,
587
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-br-wh))
588
+ );
589
+ --_sf-hr-br-rs: var(
590
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-br-rs,
591
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-br-rs, var(--_ctm-dn-be-ts-be-tb-hr-se-br-rs))
592
+ );
593
+ --_sf-hr-at: var(
594
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-at,
595
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-at, var(--_ctm-dn-be-ts-be-tb-hr-se-at))
596
+ );
597
+ --_sf-hr-in-ad-tt-sg: var(
598
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
599
+ var(
600
+ --_ctm-tab-dn-be-ts-be-tb-hr-se-in-ad-tt-sg,
601
+ var(--_ctm-dn-be-ts-be-tb-hr-se-in-ad-tt-sg)
602
+ )
603
+ );
524
604
 
525
605
  // for shadow
526
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
527
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae)));
528
- --_sf-hr-sw-br: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
529
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br)));
530
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
531
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr)));
532
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
533
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr)));
606
+ --_sf-hr-sw-ae: var(
607
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-ae,
608
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-ae))
609
+ );
610
+ --_sf-hr-sw-br: var(
611
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-br,
612
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-br, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-br))
613
+ );
614
+ --_sf-hr-sw-hr: var(
615
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-hr,
616
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-hr))
617
+ );
618
+ --_sf-hr-sw-cr: var(
619
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-sw-cr,
620
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-sw-cr))
621
+ );
534
622
 
535
623
  // for font
536
624
 
537
- --_sf-hr-cr: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
538
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr)));
539
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
540
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy)));
541
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-tt-tm,
542
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-tm)));
543
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-wd-wp,
544
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-wp)));
545
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-wd-bk,
546
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-bk)));
547
- --_sf-hr-ft-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
548
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se)));
549
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
550
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt)));
551
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
552
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
553
- var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)));
554
- --_sf-hr-tt-an: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
555
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an)));
556
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
557
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg)));
558
- --_sf-hr-le-ht: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
559
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht)));
560
-
561
- --_sf-hr-in-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
562
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se)));
563
- --_sf-hr-in-se: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
564
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se)));
565
- --_sf-hr-in-c1: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
566
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1)));
567
- --_sf-hr-ue: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
568
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue)));
625
+ --_sf-hr-cr: var(
626
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-cr,
627
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-cr, var(--_ctm-dn-be-ts-be-tb-hr-se-cr))
628
+ );
629
+ --_sf-hr-ft-fy: var(
630
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-fy,
631
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-fy))
632
+ );
633
+ --_sf-hr-tt-tm: var(
634
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-tm,
635
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-tm))
636
+ );
637
+ --_sf-hr-wd-wp: var(
638
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-wp,
639
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-wp))
640
+ );
641
+ --_sf-hr-wd-bk: var(
642
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-wd-bk,
643
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-hr-se-wd-bk))
644
+ );
645
+ --_sf-hr-ft-se: var(
646
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se,
647
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se))
648
+ );
649
+ --_sf-hr-ft-wt: var(
650
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-wt,
651
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-hr-se-ft-wt))
652
+ );
653
+ --_sf-hr-ft-se-ic: var(
654
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ft-se-ic,
655
+ var(
656
+ --_ctm-tab-dn-be-ts-be-tb-hr-se-ft-se-ic,
657
+ var(--_ctm-dn-be-ts-be-tb-hr-se-ft-se-ic)
658
+ )
659
+ );
660
+ --_sf-hr-tt-an: var(
661
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-tt-an,
662
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-tt-an, var(--_ctm-dn-be-ts-be-tb-hr-se-tt-an))
663
+ );
664
+ --_sf-hr-lr-sg: var(
665
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-lr-sg,
666
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-hr-se-lr-sg))
667
+ );
668
+ --_sf-hr-le-ht: var(
669
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-le-ht,
670
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-le-ht, var(--_ctm-dn-be-ts-be-tb-hr-se-le-ht))
671
+ );
672
+
673
+ --_sf-hr-in-se: var(
674
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
675
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
676
+ );
677
+ --_sf-hr-in-se: var(
678
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-se,
679
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-se, var(--_ctm-dn-be-ts-be-tb-hr-se-in-se))
680
+ );
681
+ --_sf-hr-in-c1: var(
682
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-in-c1,
683
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-in-c1, var(--_ctm-dn-be-ts-be-tb-hr-se-in-c1))
684
+ );
685
+ --_sf-hr-ue: var(
686
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-ue,
687
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-ue, var(--_ctm-dn-be-ts-be-tb-hr-se-ue))
688
+ );
569
689
 
570
690
  // for pading and width
571
- --_sf-hr-pg: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
572
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg)));
573
- --_sf-hr-wh: var(--_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
574
- var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh)));
691
+ --_sf-hr-pg: var(
692
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-pg,
693
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-pg, var(--_ctm-dn-be-ts-be-tb-hr-se-pg))
694
+ );
695
+ --_sf-hr-wh: var(
696
+ --_ctm-mob-dn-be-ts-be-tb-hr-se-wh,
697
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-se-wh, var(--_ctm-dn-be-ts-be-tb-hr-se-wh))
698
+ );
575
699
 
576
700
  &[data-hover-show-shadow="false"] {
577
701
  --_hover-show-shadow: none;
578
702
  }
579
-
580
703
  &[data-hover-show-icon="false"] {
581
704
  --_hover-show-icon: none;
582
705
  }
583
706
  }
584
707
 
585
- background-color: var(--_sf-hr-bd-cr,
586
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr));
708
+ background-color: var(
709
+ --_sf-hr-bd-cr,
710
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
711
+ );
587
712
 
588
713
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
589
714
  display: flex;
@@ -591,23 +716,36 @@ border-style: var(--_sf-icn-bs,
591
716
  align-items: center;
592
717
 
593
718
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
594
- gap: var(--_sf-hr-in-ad-tt-sg,
595
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg));
719
+ gap: var(
720
+ --_sf-hr-in-ad-tt-sg,
721
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
722
+ );
596
723
 
597
- border-radius: var(--_sf-hr-br-rs,
598
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs));
724
+ border-radius: var(
725
+ --_sf-hr-br-rs,
726
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
727
+ );
599
728
 
600
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
729
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
730
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
731
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
732
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
601
733
 
602
734
  &[data-show-border="true"] {
603
- border-color: var(--_sf-hr-br-cr,
604
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr));
605
-
606
- border-style: var(--_sf-hr-br-se,
607
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se));
608
-
609
- border-width: var(--_sf-hr-br-wh,
610
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh));
735
+ border-color: var(
736
+ --_sf-hr-br-cr,
737
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
738
+ );
739
+
740
+ border-style: var(
741
+ --_sf-hr-br-se,
742
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
743
+ );
744
+
745
+ border-width: var(
746
+ --_sf-hr-br-wh,
747
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
748
+ );
611
749
  }
612
750
 
613
751
  // text styles
@@ -618,7 +756,6 @@ border-style: var(--_sf-icn-bs,
618
756
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm));
619
757
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
620
758
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk));
621
-
622
759
  &.flex__overflow {
623
760
  white-space: normal;
624
761
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -628,13 +765,17 @@ border-style: var(--_sf-icn-bs,
628
765
 
629
766
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
630
767
 
631
- font-style: var(--_sf-hr-ft-se-ic,
632
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic));
768
+ font-style: var(
769
+ --_sf-hr-ft-se-ic,
770
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
771
+ );
633
772
 
634
773
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
635
774
 
636
- letter-spacing: var(--_sf-hr-lr-sg,
637
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg));
775
+ letter-spacing: var(
776
+ --_sf-hr-lr-sg,
777
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
778
+ );
638
779
 
639
780
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
640
781
 
@@ -646,83 +787,144 @@ border-style: var(--_sf-icn-bs,
646
787
  }
647
788
 
648
789
  &[data-is-selected="true"] {
649
- --_sf-sd-bd-cr: var(--_ctm-mob-dn-me-sd-se-bd-cr,
650
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr)));
651
- --_sf-sd-br-cr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
652
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr)));
653
- --_sf-sd-br-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
654
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se)));
655
- --_sf-sd-br-wh: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
656
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh)));
657
- --_sf-sd-br-rs: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
658
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs)));
659
- --_sf-sd-at: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-at,
660
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at)));
661
- --_sf-sd-in-ad-tt-sg: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
662
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
663
- var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)));
790
+ --_sf-sd-bd-cr: var(
791
+ --_ctm-mob-dn-me-sd-se-bd-cr,
792
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-bd-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-bd-cr))
793
+ );
794
+ --_sf-sd-br-cr: var(
795
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-cr,
796
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-br-cr))
797
+ );
798
+ --_sf-sd-br-se: var(
799
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-se,
800
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-se, var(--_ctm-dn-be-ts-be-tb-sd-se-br-se))
801
+ );
802
+ --_sf-sd-br-wh: var(
803
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-wh,
804
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-br-wh))
805
+ );
806
+ --_sf-sd-br-rs: var(
807
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-br-rs,
808
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-br-rs, var(--_ctm-dn-be-ts-be-tb-sd-se-br-rs))
809
+ );
810
+ --_sf-sd-at: var(
811
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-at,
812
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-at, var(--_ctm-dn-be-ts-be-tb-sd-se-at))
813
+ );
814
+ --_sf-sd-in-ad-tt-sg: var(
815
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
816
+ var(
817
+ --_ctm-tab-dn-be-ts-be-tb-sd-se-in-ad-tt-sg,
818
+ var(--_ctm-dn-be-ts-be-tb-sd-se-in-ad-tt-sg)
819
+ )
820
+ );
664
821
 
665
822
  // for shadow
666
- --_sf-sd-sw-ae: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
667
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae)));
668
- --_sf-sd-sw-br: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
669
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br)));
670
- --_sf-sd-sw-hr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
671
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr)));
672
- --_sf-sd-sw-cr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
673
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr)));
823
+ --_sf-sd-sw-ae: var(
824
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-ae,
825
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-ae, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-ae))
826
+ );
827
+ --_sf-sd-sw-br: var(
828
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-br,
829
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-br, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-br))
830
+ );
831
+ --_sf-sd-sw-hr: var(
832
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-hr,
833
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-hr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-hr))
834
+ );
835
+ --_sf-sd-sw-cr: var(
836
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-sw-cr,
837
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-sw-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-sw-cr))
838
+ );
674
839
 
675
840
  // for font
676
841
 
677
- --_sf-sd-cr: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
678
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr)));
679
- --_sf-sd-ft-fy: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
680
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy)));
681
- --_sf-sd-tt-tm: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-tt-tm,
682
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-tm)));
683
- --_sf-sd-wd-wp: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-wd-wp,
684
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-wp)));
685
- --_sf-sd-wd-bk: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-wd-bk,
686
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-bk)));
687
- --_sf-sd-ft-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
688
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se)));
689
- --_sf-sd-ft-wt: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
690
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt)));
691
- --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
692
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
693
- var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)));
694
- --_sf-sd-tt-an: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
695
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an)));
696
- --_sf-sd-lr-sg: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
697
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg)));
698
- --_sf-sd-le-ht: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
699
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht)));
700
-
701
- --_sf-sd-in-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
702
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se)));
703
- --_sf-sd-in-se: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
704
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se)));
705
- --_sf-sd-in-c1: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
706
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1)));
707
- --_sf-sd-ue: var(--_ctm-mob-dn-be-ts-be-tb-hr-ue,
708
- var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue)));
842
+ --_sf-sd-cr: var(
843
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-cr,
844
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-cr, var(--_ctm-dn-be-ts-be-tb-sd-se-cr))
845
+ );
846
+ --_sf-sd-ft-fy: var(
847
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-fy,
848
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-fy, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-fy))
849
+ );
850
+ --_sf-sd-tt-tm: var(
851
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-tm,
852
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-tm, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-tm))
853
+ );
854
+ --_sf-sd-wd-wp: var(
855
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-wp,
856
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-wp, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-wp))
857
+ );
858
+ --_sf-sd-wd-bk: var(
859
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-wd-bk,
860
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wd-bk, var(--_ctm-dn-be-ts-be-tb-sd-se-wd-bk))
861
+ );
862
+ --_sf-sd-ft-se: var(
863
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se,
864
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se))
865
+ );
866
+ --_sf-sd-ft-wt: var(
867
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-wt,
868
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-ft-wt, var(--_ctm-dn-be-ts-be-tb-sd-se-ft-wt))
869
+ );
870
+ --_sf-sd-ft-se-ic: var(
871
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-ft-se-ic,
872
+ var(
873
+ --_ctm-tab-dn-be-ts-be-tb-sd-se-ft-se-ic,
874
+ var(--_ctm-dn-be-ts-be-tb-sd-se-ft-se-ic)
875
+ )
876
+ );
877
+ --_sf-sd-tt-an: var(
878
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-tt-an,
879
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-tt-an, var(--_ctm-dn-be-ts-be-tb-sd-se-tt-an))
880
+ );
881
+ --_sf-sd-lr-sg: var(
882
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-lr-sg,
883
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-lr-sg, var(--_ctm-dn-be-ts-be-tb-sd-se-lr-sg))
884
+ );
885
+ --_sf-sd-le-ht: var(
886
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-le-ht,
887
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-le-ht, var(--_ctm-dn-be-ts-be-tb-sd-se-le-ht))
888
+ );
889
+
890
+ --_sf-sd-in-se: var(
891
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
892
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
893
+ );
894
+ --_sf-sd-in-se: var(
895
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-se,
896
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-se, var(--_ctm-dn-be-ts-be-tb-sd-se-in-se))
897
+ );
898
+ --_sf-sd-in-c1: var(
899
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-in-c1,
900
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-in-c1, var(--_ctm-dn-be-ts-be-tb-sd-se-in-c1))
901
+ );
902
+ --_sf-sd-ue: var(
903
+ --_ctm-mob-dn-be-ts-be-tb-hr-ue,
904
+ var(--_ctm-tab-dn-be-ts-be-tb-hr-ue, var(--_ctm-dn-be-ts-be-tb-hr-ue))
905
+ );
709
906
 
710
907
  // for pading and width
711
- --_sf-sd-pg: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
712
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg)));
713
- --_sf-sd-wh: var(--_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
714
- var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh)));
908
+ --_sf-sd-pg: var(
909
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-pg,
910
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-pg, var(--_ctm-dn-be-ts-be-tb-sd-se-pg))
911
+ );
912
+ --_sf-sd-wh: var(
913
+ --_ctm-mob-dn-be-ts-be-tb-sd-se-wh,
914
+ var(--_ctm-tab-dn-be-ts-be-tb-sd-se-wh, var(--_ctm-dn-be-ts-be-tb-sd-se-wh))
915
+ );
715
916
 
716
917
  &[data-hover-show-shadow="false"] {
717
918
  --_hover-show-shadow: none;
718
919
  }
719
-
720
920
  &[data-hover-show-icon="false"] {
721
921
  --_hover-show-icon: none;
722
922
  }
723
923
 
724
- background-color: var(--_sf-sd-bd-cr,
725
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr));
924
+ background-color: var(
925
+ --_sf-sd-bd-cr,
926
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-bd-cr)
927
+ );
726
928
 
727
929
  padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-pg));
728
930
  display: flex;
@@ -730,38 +932,58 @@ border-style: var(--_sf-icn-bs,
730
932
  align-items: center;
731
933
 
732
934
  justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-at));
733
- gap: var(--_sf-sd-in-ad-tt-sg,
734
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg));
935
+ gap: var(
936
+ --_sf-sd-in-ad-tt-sg,
937
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-in-ad-tt-sg)
938
+ );
735
939
 
736
- border-radius: var(--_sf-sd-br-rs,
737
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs));
940
+ border-radius: var(
941
+ --_sf-sd-br-rs,
942
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-rs)
943
+ );
738
944
 
739
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
945
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-ae))
946
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-br))
947
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-sd))
948
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-sw-cr));
740
949
 
741
950
  &[data-show-border="true"] {
742
- border-color: var(--_sf-sd-br-cr,
743
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr));
744
-
745
- border-style: var(--_sf-sd-br-se,
746
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se));
747
-
748
- border-width: var(--_sf-sd-br-wh,
749
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh));
951
+ border-color: var(
952
+ --_sf-sd-br-cr,
953
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-cr)
954
+ );
955
+
956
+ border-style: var(
957
+ --_sf-sd-br-se,
958
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-se)
959
+ );
960
+
961
+ border-width: var(
962
+ --_sf-sd-br-wh,
963
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-br-wh)
964
+ );
750
965
  }
751
966
 
752
967
  // text styles
753
968
 
754
969
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-cr));
755
970
 
756
- font-family: var(--_sf-sd-ft-fy,
757
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy));
758
- text-transform: var(--_sf-sd-tt-tm,
759
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm));
760
- word-wrap: var(--_sf-sd-wd-wp,
761
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp));
762
- word-break: var(--_sf-sd-wd-bk,
763
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk));
764
-
971
+ font-family: var(
972
+ --_sf-sd-ft-fy,
973
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-fy)
974
+ );
975
+ text-transform: var(
976
+ --_sf-sd-tt-tm,
977
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-tm)
978
+ );
979
+ word-wrap: var(
980
+ --_sf-sd-wd-wp,
981
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-wp)
982
+ );
983
+ word-break: var(
984
+ --_sf-sd-wd-bk,
985
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-wd-bk)
986
+ );
765
987
  &.flex__overflow {
766
988
  white-space: normal;
767
989
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -769,20 +991,30 @@ border-style: var(--_sf-icn-bs,
769
991
 
770
992
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se));
771
993
 
772
- font-weight: var(--_sf-sd-ft-wt,
773
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt));
994
+ font-weight: var(
995
+ --_sf-sd-ft-wt,
996
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-wt)
997
+ );
774
998
 
775
- font-style: var(--_sf-sd-ft-se-ic,
776
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic));
999
+ font-style: var(
1000
+ --_sf-sd-ft-se-ic,
1001
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-ft-se-ic)
1002
+ );
777
1003
 
778
- text-align: var(--_sf-sd-tt-an,
779
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an));
1004
+ text-align: var(
1005
+ --_sf-sd-tt-an,
1006
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-tt-an)
1007
+ );
780
1008
 
781
- letter-spacing: var(--_sf-sd-lr-sg,
782
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg));
1009
+ letter-spacing: var(
1010
+ --_sf-sd-lr-sg,
1011
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-lr-sg)
1012
+ );
783
1013
 
784
- line-height: var(--_sf-sd-le-ht,
785
- prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht));
1014
+ line-height: var(
1015
+ --_sf-sd-le-ht,
1016
+ prepareMediaVariable(--_ctm-dn-be-ts-be-tb-dt-se-le-ht)
1017
+ );
786
1018
 
787
1019
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
788
1020
 
@@ -792,15 +1024,12 @@ border-style: var(--_sf-icn-bs,
792
1024
  }
793
1025
  }
794
1026
  }
795
-
796
1027
  .embla {
797
1028
  height: auto;
798
-
799
1029
  .embla__viewport {
800
1030
  .embla__container {
801
1031
  display: flex;
802
1032
  gap: prepareMediaVariable(--_ctm-dn-be-ts-wt-se-im-gp);
803
-
804
1033
  .embla__slide {
805
1034
  width: unset;
806
1035
  }
@@ -808,137 +1037,216 @@ border-style: var(--_sf-icn-bs,
808
1037
  }
809
1038
  }
810
1039
  }
811
-
812
1040
  .category__tabs {
813
1041
  width: 100%;
814
- background-color: var(--_ctm-mob-dn-cy-ts-wt-se-bd-cr,
815
- var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr)));
1042
+ background-color: var(
1043
+ --_ctm-mob-dn-cy-ts-wt-se-bd-cr,
1044
+ var(--_ctm-tab-dn-cy-ts-wt-se-bd-cr, var(--_ctm-dn-cy-ts-wt-se-bd-cr))
1045
+ );
816
1046
  // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
817
1047
  display: flex;
818
1048
  flex-direction: column;
819
- --_sf-gp: var(--_ctm-mob-lt-im-sg,
820
- var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px)));
1049
+ --_sf-gp: var(
1050
+ --_ctm-mob-lt-im-sg,
1051
+ var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
1052
+ );
821
1053
  --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
822
1054
  row-gap: var(--_sf-gp);
823
1055
  width: 100%;
824
-
825
1056
  // height: 100%;
826
1057
  // Border only drawn when the widget's "Show Border" toggle is on. The
827
1058
  // renderer emits data-show-border="true"/"" on the .category__tabs container.
828
1059
  &[data-show-border="true"] {
829
- border-color: var(--_ctm-mob-dn-cy-ts-wt-se-br-cr,
830
- var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr)));
831
- border-style: var(--_ctm-mob-dn-cy-ts-wt-se-br-se,
832
- var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se)));
833
- border-width: var(--_ctm-mob-dn-cy-ts-wt-se-br-wh,
834
- var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh)));
1060
+ border-color: var(
1061
+ --_ctm-mob-dn-cy-ts-wt-se-br-cr,
1062
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
1063
+ );
1064
+ border-style: var(
1065
+ --_ctm-mob-dn-cy-ts-wt-se-br-se,
1066
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
1067
+ );
1068
+ border-width: var(
1069
+ --_ctm-mob-dn-cy-ts-wt-se-br-wh,
1070
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
1071
+ );
835
1072
  }
836
-
837
- border-radius: var(--_ctm-mob-dn-cy-ts-wt-se-br-rs,
838
- var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs)));
839
- box-shadow: var(--_show-shadow,
840
- var(--_ctm-mob-dn-cy-ts-wt-se-sw-ae,
841
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))) var(--_ctm-mob-dn-cy-ts-wt-se-sw-br,
842
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))) var(--_ctm-mob-dn-cy-ts-wt-se-sw-sd,
843
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))) var(--_ctm-mob-dn-cy-ts-wt-se-sw-cr,
844
- var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))));
845
-
1073
+ border-radius: var(
1074
+ --_ctm-mob-dn-cy-ts-wt-se-br-rs,
1075
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs))
1076
+ );
1077
+ box-shadow: var(
1078
+ --_show-shadow,
1079
+ var(
1080
+ --_ctm-mob-dn-cy-ts-wt-se-sw-ae,
1081
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-ae, var(--_ctm-dn-cy-ts-wt-se-sw-ae))
1082
+ )
1083
+ var(
1084
+ --_ctm-mob-dn-cy-ts-wt-se-sw-br,
1085
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-br, var(--_ctm-dn-cy-ts-wt-se-sw-br))
1086
+ )
1087
+ var(
1088
+ --_ctm-mob-dn-cy-ts-wt-se-sw-sd,
1089
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-sd, var(--_ctm-dn-cy-ts-wt-se-sw-sd))
1090
+ )
1091
+ var(
1092
+ --_ctm-mob-dn-cy-ts-wt-se-sw-cr,
1093
+ var(--_ctm-tab-dn-cy-ts-wt-se-sw-cr, var(--_ctm-dn-cy-ts-wt-se-sw-cr))
1094
+ )
1095
+ );
846
1096
  .profile__button {
847
1097
  &[data-show-shadow="false"] {
848
1098
  --_show-shadow: none;
849
1099
  }
850
-
851
1100
  &[data-icon-position="left"] {
852
1101
  --_sf-fd-bn: row;
853
1102
  }
854
-
855
1103
  &[data-icon-position="right"] {
856
1104
  --_sf-fd-bn: row-reverse;
857
1105
  }
858
-
859
1106
  &[data-icon-position="center"] {
860
1107
  --_sf-fd-bn: row;
861
1108
  }
862
1109
 
863
1110
  &:hover {
864
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
865
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr)));
866
- --_sf-hr-br-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
867
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr)));
868
- --_sf-hr-br-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
869
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se)));
870
- --_sf-hr-br-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
871
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh)));
872
- --_sf-hr-br-rs: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
873
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs)));
874
- --_sf-hr-at: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
875
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at)));
876
- --_sf-hr-in-ad-tt-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
877
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
878
- var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)));
1111
+ --_sf-hr-bd-cr: var(
1112
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-bd-cr,
1113
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-bd-cr))
1114
+ );
1115
+ --_sf-hr-br-cr: var(
1116
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-cr,
1117
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-cr))
1118
+ );
1119
+ --_sf-hr-br-se: var(
1120
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-se,
1121
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-se))
1122
+ );
1123
+ --_sf-hr-br-wh: var(
1124
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-wh,
1125
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-wh))
1126
+ );
1127
+ --_sf-hr-br-rs: var(
1128
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-br-rs,
1129
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-hr-se-br-rs))
1130
+ );
1131
+ --_sf-hr-at: var(
1132
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-at,
1133
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-at, var(--_ctm-dn-cy-ts-cy-tb-hr-se-at))
1134
+ );
1135
+ --_sf-hr-in-ad-tt-sg: var(
1136
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1137
+ var(
1138
+ --_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg,
1139
+ var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-ad-tt-sg)
1140
+ )
1141
+ );
879
1142
 
880
1143
  // for shadow
881
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
882
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae)));
883
- --_sf-hr-sw-br: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
884
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br)));
885
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
886
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr)));
887
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
888
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr)));
1144
+ --_sf-hr-sw-ae: var(
1145
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-ae,
1146
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-ae))
1147
+ );
1148
+ --_sf-hr-sw-br: var(
1149
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-br,
1150
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-br))
1151
+ );
1152
+ --_sf-hr-sw-hr: var(
1153
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-hr,
1154
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-hr))
1155
+ );
1156
+ --_sf-hr-sw-cr: var(
1157
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-sw-cr,
1158
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-sw-cr))
1159
+ );
889
1160
 
890
1161
  // for font
891
1162
 
892
- --_sf-hr-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
893
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr)));
894
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
895
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy)));
896
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-tm,
897
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-tm)));
898
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-wp,
899
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-wp)));
900
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-bk,
901
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-bk)));
902
- --_sf-hr-ft-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
903
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se)));
904
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
905
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt)));
906
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
907
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
908
- var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)));
909
- --_sf-hr-tt-an: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
910
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an)));
911
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
912
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg)));
913
- --_sf-hr-le-ht: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
914
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht)));
915
-
916
- --_sf-hr-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
917
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se)));
918
- --_sf-hr-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
919
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se)));
920
- --_sf-hr-in-c1: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
921
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1)));
922
- --_sf-hr-ue: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
923
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue)));
1163
+ --_sf-hr-cr: var(
1164
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-cr,
1165
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-cr, var(--_ctm-dn-cy-ts-cy-tb-hr-se-cr))
1166
+ );
1167
+ --_sf-hr-ft-fy: var(
1168
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-fy,
1169
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-fy))
1170
+ );
1171
+ --_sf-hr-tt-tm: var(
1172
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-tm,
1173
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-tm))
1174
+ );
1175
+ --_sf-hr-wd-wp: var(
1176
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-wp,
1177
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-wp))
1178
+ );
1179
+ --_sf-hr-wd-bk: var(
1180
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wd-bk,
1181
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wd-bk))
1182
+ );
1183
+ --_sf-hr-ft-se: var(
1184
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se,
1185
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se))
1186
+ );
1187
+ --_sf-hr-ft-wt: var(
1188
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-wt,
1189
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-wt))
1190
+ );
1191
+ --_sf-hr-ft-se-ic: var(
1192
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1193
+ var(
1194
+ --_ctm-tab-dn-cy-ts-cy-tb-hr-se-ft-se-ic,
1195
+ var(--_ctm-dn-cy-ts-cy-tb-hr-se-ft-se-ic)
1196
+ )
1197
+ );
1198
+ --_sf-hr-tt-an: var(
1199
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-tt-an,
1200
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-hr-se-tt-an))
1201
+ );
1202
+ --_sf-hr-lr-sg: var(
1203
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-lr-sg,
1204
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-lr-sg))
1205
+ );
1206
+ --_sf-hr-le-ht: var(
1207
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-le-ht,
1208
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-hr-se-le-ht))
1209
+ );
1210
+
1211
+ --_sf-hr-in-se: var(
1212
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1213
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1214
+ );
1215
+ --_sf-hr-in-se: var(
1216
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-se,
1217
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-se))
1218
+ );
1219
+ --_sf-hr-in-c1: var(
1220
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-in-c1,
1221
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-hr-se-in-c1))
1222
+ );
1223
+ --_sf-hr-ue: var(
1224
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-ue,
1225
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-se-ue))
1226
+ );
924
1227
 
925
1228
  // for pading and width
926
- --_sf-hr-pg: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
927
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg)));
928
- --_sf-hr-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
929
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh)));
1229
+ --_sf-hr-pg: var(
1230
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-pg,
1231
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-pg, var(--_ctm-dn-cy-ts-cy-tb-hr-se-pg))
1232
+ );
1233
+ --_sf-hr-wh: var(
1234
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-se-wh,
1235
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-se-wh, var(--_ctm-dn-cy-ts-cy-tb-hr-se-wh))
1236
+ );
930
1237
 
931
1238
  &[data-hover-show-shadow="false"] {
932
1239
  --_hover-show-shadow: none;
933
1240
  }
934
-
935
1241
  &[data-hover-show-icon="false"] {
936
1242
  --_hover-show-icon: none;
937
1243
  }
938
1244
  }
939
1245
 
940
- background-color: var(--_sf-hr-bd-cr,
941
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr));
1246
+ background-color: var(
1247
+ --_sf-hr-bd-cr,
1248
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1249
+ );
942
1250
 
943
1251
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
944
1252
  display: flex;
@@ -946,23 +1254,36 @@ border-style: var(--_sf-icn-bs,
946
1254
  align-items: center;
947
1255
 
948
1256
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
949
- gap: var(--_sf-hr-in-ad-tt-sg,
950
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg));
1257
+ gap: var(
1258
+ --_sf-hr-in-ad-tt-sg,
1259
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1260
+ );
951
1261
 
952
- border-radius: var(--_sf-hr-br-rs,
953
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs));
1262
+ border-radius: var(
1263
+ --_sf-hr-br-rs,
1264
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1265
+ );
954
1266
 
955
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1267
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1268
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1269
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1270
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
956
1271
 
957
1272
  &[data-show-border="true"] {
958
- border-color: var(--_sf-hr-br-cr,
959
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr));
960
-
961
- border-style: var(--_sf-hr-br-se,
962
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se));
963
-
964
- border-width: var(--_sf-hr-br-wh,
965
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh));
1273
+ border-color: var(
1274
+ --_sf-hr-br-cr,
1275
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1276
+ );
1277
+
1278
+ border-style: var(
1279
+ --_sf-hr-br-se,
1280
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1281
+ );
1282
+
1283
+ border-width: var(
1284
+ --_sf-hr-br-wh,
1285
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1286
+ );
966
1287
  }
967
1288
 
968
1289
  // text styles
@@ -973,7 +1294,6 @@ border-style: var(--_sf-icn-bs,
973
1294
  text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm));
974
1295
  word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
975
1296
  word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk));
976
-
977
1297
  &.flex__overflow {
978
1298
  white-space: normal;
979
1299
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -983,13 +1303,17 @@ border-style: var(--_sf-icn-bs,
983
1303
 
984
1304
  font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
985
1305
 
986
- font-style: var(--_sf-hr-ft-se-ic,
987
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic));
1306
+ font-style: var(
1307
+ --_sf-hr-ft-se-ic,
1308
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1309
+ );
988
1310
 
989
1311
  text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
990
1312
 
991
- letter-spacing: var(--_sf-hr-lr-sg,
992
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg));
1313
+ letter-spacing: var(
1314
+ --_sf-hr-lr-sg,
1315
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1316
+ );
993
1317
 
994
1318
  line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
995
1319
 
@@ -1001,83 +1325,144 @@ border-style: var(--_sf-icn-bs,
1001
1325
  }
1002
1326
 
1003
1327
  &[data-is-selected="true"] {
1004
- --_sf-sd-bd-cr: var(--_ctm-mob-dn-me-sd-se-bd-cr,
1005
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr)));
1006
- --_sf-sd-br-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
1007
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr)));
1008
- --_sf-sd-br-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
1009
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se)));
1010
- --_sf-sd-br-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
1011
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh)));
1012
- --_sf-sd-br-rs: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
1013
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs)));
1014
- --_sf-sd-at: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
1015
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at)));
1016
- --_sf-sd-in-ad-tt-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1017
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1018
- var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)));
1328
+ --_sf-sd-bd-cr: var(
1329
+ --_ctm-mob-dn-me-sd-se-bd-cr,
1330
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-bd-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-bd-cr))
1331
+ );
1332
+ --_sf-sd-br-cr: var(
1333
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-cr,
1334
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-cr))
1335
+ );
1336
+ --_sf-sd-br-se: var(
1337
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-se,
1338
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-se))
1339
+ );
1340
+ --_sf-sd-br-wh: var(
1341
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-wh,
1342
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-wh))
1343
+ );
1344
+ --_sf-sd-br-rs: var(
1345
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-br-rs,
1346
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-br-rs, var(--_ctm-dn-cy-ts-cy-tb-sd-se-br-rs))
1347
+ );
1348
+ --_sf-sd-at: var(
1349
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-at,
1350
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-at, var(--_ctm-dn-cy-ts-cy-tb-sd-se-at))
1351
+ );
1352
+ --_sf-sd-in-ad-tt-sg: var(
1353
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1354
+ var(
1355
+ --_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg,
1356
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-ad-tt-sg)
1357
+ )
1358
+ );
1019
1359
 
1020
1360
  // for shadow
1021
- --_sf-sd-sw-ae: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
1022
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae)));
1023
- --_sf-sd-sw-br: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
1024
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br)));
1025
- --_sf-sd-sw-hr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
1026
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr)));
1027
- --_sf-sd-sw-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
1028
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr)));
1361
+ --_sf-sd-sw-ae: var(
1362
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-ae,
1363
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-ae, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-ae))
1364
+ );
1365
+ --_sf-sd-sw-br: var(
1366
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-br,
1367
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-br, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-br))
1368
+ );
1369
+ --_sf-sd-sw-hr: var(
1370
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-hr,
1371
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-hr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-hr))
1372
+ );
1373
+ --_sf-sd-sw-cr: var(
1374
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-sw-cr,
1375
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-sw-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-sw-cr))
1376
+ );
1029
1377
 
1030
1378
  // for font
1031
1379
 
1032
- --_sf-sd-cr: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
1033
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr)));
1034
- --_sf-sd-ft-fy: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
1035
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy)));
1036
- --_sf-sd-tt-tm: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-tm,
1037
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-tm)));
1038
- --_sf-sd-wd-wp: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-wp,
1039
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-wp)));
1040
- --_sf-sd-wd-bk: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-bk,
1041
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-bk)));
1042
- --_sf-sd-ft-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
1043
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se)));
1044
- --_sf-sd-ft-wt: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
1045
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt)));
1046
- --_sf-sd-ft-se-ic: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1047
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1048
- var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)));
1049
- --_sf-sd-tt-an: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
1050
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an)));
1051
- --_sf-sd-lr-sg: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
1052
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg)));
1053
- --_sf-sd-le-ht: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
1054
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht)));
1055
-
1056
- --_sf-sd-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1057
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se)));
1058
- --_sf-sd-in-se: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1059
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se)));
1060
- --_sf-sd-in-c1: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
1061
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1)));
1062
- --_sf-sd-ue: var(--_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
1063
- var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue)));
1380
+ --_sf-sd-cr: var(
1381
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-cr,
1382
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-cr, var(--_ctm-dn-cy-ts-cy-tb-sd-se-cr))
1383
+ );
1384
+ --_sf-sd-ft-fy: var(
1385
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-fy,
1386
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-fy, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-fy))
1387
+ );
1388
+ --_sf-sd-tt-tm: var(
1389
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-tm,
1390
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-tm, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-tm))
1391
+ );
1392
+ --_sf-sd-wd-wp: var(
1393
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-wp,
1394
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-wp, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-wp))
1395
+ );
1396
+ --_sf-sd-wd-bk: var(
1397
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wd-bk,
1398
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wd-bk, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wd-bk))
1399
+ );
1400
+ --_sf-sd-ft-se: var(
1401
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se,
1402
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se))
1403
+ );
1404
+ --_sf-sd-ft-wt: var(
1405
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-wt,
1406
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-wt, var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-wt))
1407
+ );
1408
+ --_sf-sd-ft-se-ic: var(
1409
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1410
+ var(
1411
+ --_ctm-tab-dn-cy-ts-cy-tb-sd-se-ft-se-ic,
1412
+ var(--_ctm-dn-cy-ts-cy-tb-sd-se-ft-se-ic)
1413
+ )
1414
+ );
1415
+ --_sf-sd-tt-an: var(
1416
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-tt-an,
1417
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-tt-an, var(--_ctm-dn-cy-ts-cy-tb-sd-se-tt-an))
1418
+ );
1419
+ --_sf-sd-lr-sg: var(
1420
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-lr-sg,
1421
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-lr-sg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-lr-sg))
1422
+ );
1423
+ --_sf-sd-le-ht: var(
1424
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-le-ht,
1425
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-le-ht, var(--_ctm-dn-cy-ts-cy-tb-sd-se-le-ht))
1426
+ );
1427
+
1428
+ --_sf-sd-in-se: var(
1429
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1430
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1431
+ );
1432
+ --_sf-sd-in-se: var(
1433
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-se,
1434
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-se, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-se))
1435
+ );
1436
+ --_sf-sd-in-c1: var(
1437
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-in-c1,
1438
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-in-c1, var(--_ctm-dn-cy-ts-cy-tb-sd-se-in-c1))
1439
+ );
1440
+ --_sf-sd-ue: var(
1441
+ --_ctm-mob-dn-cy-ts-cy-tb-hr-ue,
1442
+ var(--_ctm-tab-dn-cy-ts-cy-tb-hr-ue, var(--_ctm-dn-cy-ts-cy-tb-hr-ue))
1443
+ );
1064
1444
 
1065
1445
  // for pading and width
1066
- --_sf-sd-pg: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
1067
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg)));
1068
- --_sf-sd-wh: var(--_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
1069
- var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh)));
1446
+ --_sf-sd-pg: var(
1447
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-pg,
1448
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-pg, var(--_ctm-dn-cy-ts-cy-tb-sd-se-pg))
1449
+ );
1450
+ --_sf-sd-wh: var(
1451
+ --_ctm-mob-dn-cy-ts-cy-tb-sd-se-wh,
1452
+ var(--_ctm-tab-dn-cy-ts-cy-tb-sd-se-wh, var(--_ctm-dn-cy-ts-cy-tb-sd-se-wh))
1453
+ );
1070
1454
 
1071
1455
  &[data-hover-show-shadow="false"] {
1072
1456
  --_hover-show-shadow: none;
1073
1457
  }
1074
-
1075
1458
  &[data-hover-show-icon="false"] {
1076
1459
  --_hover-show-icon: none;
1077
1460
  }
1078
1461
 
1079
- background-color: var(--_sf-sd-bd-cr,
1080
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr));
1462
+ background-color: var(
1463
+ --_sf-sd-bd-cr,
1464
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-bd-cr)
1465
+ );
1081
1466
 
1082
1467
  padding: var(--_sf-sd-pg, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-pg));
1083
1468
  display: flex;
@@ -1085,38 +1470,58 @@ border-style: var(--_sf-icn-bs,
1085
1470
  align-items: center;
1086
1471
 
1087
1472
  justify-content: var(--_sf-sd-at, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-at));
1088
- gap: var(--_sf-sd-in-ad-tt-sg,
1089
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg));
1473
+ gap: var(
1474
+ --_sf-sd-in-ad-tt-sg,
1475
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-in-ad-tt-sg)
1476
+ );
1090
1477
 
1091
- border-radius: var(--_sf-sd-br-rs,
1092
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs));
1478
+ border-radius: var(
1479
+ --_sf-sd-br-rs,
1480
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-rs)
1481
+ );
1093
1482
 
1094
- box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae)) var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br)) var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd)) var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1483
+ box-shadow: var(--_sf-sd-sw-ae, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-ae))
1484
+ var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-br))
1485
+ var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-sd))
1486
+ var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-sw-cr));
1095
1487
 
1096
1488
  &[data-show-border="true"] {
1097
- border-color: var(--_sf-sd-br-cr,
1098
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr));
1099
-
1100
- border-style: var(--_sf-sd-br-se,
1101
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se));
1102
-
1103
- border-width: var(--_sf-sd-br-wh,
1104
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh));
1489
+ border-color: var(
1490
+ --_sf-sd-br-cr,
1491
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-cr)
1492
+ );
1493
+
1494
+ border-style: var(
1495
+ --_sf-sd-br-se,
1496
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-se)
1497
+ );
1498
+
1499
+ border-width: var(
1500
+ --_sf-sd-br-wh,
1501
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-br-wh)
1502
+ );
1105
1503
  }
1106
1504
 
1107
1505
  // text styles
1108
1506
 
1109
1507
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-cr));
1110
1508
 
1111
- font-family: var(--_sf-sd-ft-fy,
1112
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy));
1113
- text-transform: var(--_sf-sd-tt-tm,
1114
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm));
1115
- word-wrap: var(--_sf-sd-wd-wp,
1116
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp));
1117
- word-break: var(--_sf-sd-wd-bk,
1118
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk));
1119
-
1509
+ font-family: var(
1510
+ --_sf-sd-ft-fy,
1511
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-fy)
1512
+ );
1513
+ text-transform: var(
1514
+ --_sf-sd-tt-tm,
1515
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-tm)
1516
+ );
1517
+ word-wrap: var(
1518
+ --_sf-sd-wd-wp,
1519
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-wp)
1520
+ );
1521
+ word-break: var(
1522
+ --_sf-sd-wd-bk,
1523
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-wd-bk)
1524
+ );
1120
1525
  &.flex__overflow {
1121
1526
  white-space: normal;
1122
1527
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1124,20 +1529,30 @@ border-style: var(--_sf-icn-bs,
1124
1529
 
1125
1530
  font-size: var(--_sf-sd-ft-se, prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se));
1126
1531
 
1127
- font-weight: var(--_sf-sd-ft-wt,
1128
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt));
1532
+ font-weight: var(
1533
+ --_sf-sd-ft-wt,
1534
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-wt)
1535
+ );
1129
1536
 
1130
- font-style: var(--_sf-sd-ft-se-ic,
1131
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic));
1537
+ font-style: var(
1538
+ --_sf-sd-ft-se-ic,
1539
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-ft-se-ic)
1540
+ );
1132
1541
 
1133
- text-align: var(--_sf-sd-tt-an,
1134
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an));
1542
+ text-align: var(
1543
+ --_sf-sd-tt-an,
1544
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-tt-an)
1545
+ );
1135
1546
 
1136
- letter-spacing: var(--_sf-sd-lr-sg,
1137
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg));
1547
+ letter-spacing: var(
1548
+ --_sf-sd-lr-sg,
1549
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-lr-sg)
1550
+ );
1138
1551
 
1139
- line-height: var(--_sf-sd-le-ht,
1140
- prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht));
1552
+ line-height: var(
1553
+ --_sf-sd-le-ht,
1554
+ prepareMediaVariable(--_ctm-dn-cy-ts-cy-tb-dt-se-le-ht)
1555
+ );
1141
1556
 
1142
1557
  text-decoration: var(--_sf-sd-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1143
1558
 
@@ -1147,15 +1562,12 @@ border-style: var(--_sf-icn-bs,
1147
1562
  }
1148
1563
  }
1149
1564
  }
1150
-
1151
1565
  .embla {
1152
1566
  height: auto;
1153
-
1154
1567
  .embla__viewport {
1155
1568
  .embla__container {
1156
1569
  display: flex;
1157
1570
  gap: prepareMediaVariable(--_ctm-dn-cy-ts-wt-se-im-gp);
1158
-
1159
1571
  .embla__slide {
1160
1572
  width: unset;
1161
1573
  }
@@ -1163,7 +1575,6 @@ border-style: var(--_sf-icn-bs,
1163
1575
  }
1164
1576
  }
1165
1577
  }
1166
-
1167
1578
  .single__bundle_container {
1168
1579
  display: flex;
1169
1580
  flex-direction: column;
@@ -1194,7 +1605,10 @@ border-style: var(--_sf-icn-bs,
1194
1605
  border-color: prepareMediaVariable(--_ctm-dn-hg-dn-br-cr);
1195
1606
  border-style: prepareMediaVariable(--_ctm-dn-hg-dn-br-se);
1196
1607
  border-radius: prepareMediaVariable(--_ctm-dn-hg-dn-br-rs);
1197
- box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae) prepareMediaVariable(--_ctm-dn-hg-dn-sw-br) prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd) prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1608
+ box-shadow: prepareMediaVariable(--_ctm-dn-hg-dn-sw-ae)
1609
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-br)
1610
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-sd)
1611
+ prepareMediaVariable(--_ctm-dn-hg-dn-sw-cr);
1198
1612
  }
1199
1613
 
1200
1614
  .bundle__description {
@@ -1215,132 +1629,229 @@ border-style: var(--_sf-icn-bs,
1215
1629
  border-color: prepareMediaVariable(--_ctm-dn-dn-dn-br-cr);
1216
1630
  border-style: prepareMediaVariable(--_ctm-dn-dn-dn-br-se);
1217
1631
  border-radius: prepareMediaVariable(--_ctm-dn-dn-dn-br-rs);
1218
- box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-dn-dn-sw-br) prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1632
+ box-shadow: prepareMediaVariable(--_ctm-dn-dn-dn-sw-ae)
1633
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-br)
1634
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-sd)
1635
+ prepareMediaVariable(--_ctm-dn-dn-dn-sw-cr);
1219
1636
  }
1220
-
1221
1637
  .button__items {
1222
1638
  display: flex;
1223
1639
  align-items: center;
1224
1640
  }
1225
-
1226
1641
  .btn__with__text[data-btn-name="bundleDetailPageButton"] {
1227
1642
  justify-content: center;
1228
-
1229
1643
  &[data-show-shadow="false"] {
1230
1644
  --_show-shadow: none;
1231
1645
  }
1232
-
1233
1646
  &[data-icon-position="left"] {
1234
1647
  --_sf-fd-bn: row;
1235
1648
  }
1236
-
1237
1649
  &[data-icon-position="right"] {
1238
1650
  --_sf-fd-bn: row-reverse;
1239
1651
  }
1240
-
1241
1652
  &[data-icon-position="center"] {
1242
1653
  --_sf-fd-bn: row;
1243
1654
  }
1244
1655
 
1245
1656
  &:hover {
1246
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1247
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1248
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)));
1249
- --_sf-hr-br-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1250
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1251
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)));
1252
- --_sf-hr-br-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1253
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1254
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)));
1255
- --_sf-hr-br-wh: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1256
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1257
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)));
1258
- --_sf-hr-br-rs: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1259
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1260
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)));
1261
- --_sf-hr-at: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1262
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at)));
1263
- --_sf-hr-gp: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1264
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp)));
1657
+ --_sf-hr-bd-cr: var(
1658
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1659
+ var(
1660
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-bd-cr,
1661
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-bd-cr)
1662
+ )
1663
+ );
1664
+ --_sf-hr-br-cr: var(
1665
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1666
+ var(
1667
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-cr,
1668
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-cr)
1669
+ )
1670
+ );
1671
+ --_sf-hr-br-se: var(
1672
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-se,
1673
+ var(
1674
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-se,
1675
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-se)
1676
+ )
1677
+ );
1678
+ --_sf-hr-br-wh: var(
1679
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1680
+ var(
1681
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-wh,
1682
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-wh)
1683
+ )
1684
+ );
1685
+ --_sf-hr-br-rs: var(
1686
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1687
+ var(
1688
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-br-rs,
1689
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-br-rs)
1690
+ )
1691
+ );
1692
+ --_sf-hr-at: var(
1693
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-at,
1694
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-at, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-at))
1695
+ );
1696
+ --_sf-hr-gp: var(
1697
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-gp,
1698
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-gp, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-gp))
1699
+ );
1265
1700
 
1266
1701
  // for shadow
1267
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1268
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1269
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)));
1270
- --_sf-hr-sw-br: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1271
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1272
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)));
1273
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1274
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1275
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)));
1276
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1277
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1278
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)));
1702
+ --_sf-hr-sw-ae: var(
1703
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1704
+ var(
1705
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-ae,
1706
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-ae)
1707
+ )
1708
+ );
1709
+ --_sf-hr-sw-br: var(
1710
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1711
+ var(
1712
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-br,
1713
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-br)
1714
+ )
1715
+ );
1716
+ --_sf-hr-sw-hr: var(
1717
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1718
+ var(
1719
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-hr,
1720
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-hr)
1721
+ )
1722
+ );
1723
+ --_sf-hr-sw-cr: var(
1724
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1725
+ var(
1726
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-sw-cr,
1727
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-sw-cr)
1728
+ )
1729
+ );
1279
1730
 
1280
1731
  // for font
1281
1732
 
1282
- --_sf-hr-cr: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1283
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr)));
1284
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1285
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1286
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)));
1287
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
1288
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
1289
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-tm)));
1290
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
1291
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
1292
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-wp)));
1293
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
1294
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
1295
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-bk)));
1296
- --_sf-hr-ft-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1297
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1298
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)));
1299
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1300
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1301
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)));
1302
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1303
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1304
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)));
1305
- --_sf-hr-tt-an: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1306
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1307
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)));
1308
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1309
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1310
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)));
1311
- --_sf-hr-le-ht: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1312
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1313
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)));
1314
-
1315
- --_sf-hr-in-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1316
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1317
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)));
1318
- --_sf-hr-in-se: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1319
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1320
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)));
1321
- --_sf-hr-in-c1: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1322
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1323
- var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)));
1324
- --_sf-hr-ue: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1325
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue)));
1733
+ --_sf-hr-cr: var(
1734
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-cr,
1735
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-cr, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-cr))
1736
+ );
1737
+ --_sf-hr-ft-fy: var(
1738
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1739
+ var(
1740
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-fy,
1741
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-fy)
1742
+ )
1743
+ );
1744
+ --_sf-hr-tt-tm: var(
1745
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
1746
+ var(
1747
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-tm,
1748
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-tm)
1749
+ )
1750
+ );
1751
+ --_sf-hr-wd-wp: var(
1752
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
1753
+ var(
1754
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-wp,
1755
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-wp)
1756
+ )
1757
+ );
1758
+ --_sf-hr-wd-bk: var(
1759
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
1760
+ var(
1761
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-wd-bk,
1762
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-wd-bk)
1763
+ )
1764
+ );
1765
+ --_sf-hr-ft-se: var(
1766
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1767
+ var(
1768
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se,
1769
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se)
1770
+ )
1771
+ );
1772
+ --_sf-hr-ft-wt: var(
1773
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1774
+ var(
1775
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-wt,
1776
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-wt)
1777
+ )
1778
+ );
1779
+ --_sf-hr-ft-se-ic: var(
1780
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1781
+ var(
1782
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic,
1783
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ft-se-ic)
1784
+ )
1785
+ );
1786
+ --_sf-hr-tt-an: var(
1787
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1788
+ var(
1789
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-tt-an,
1790
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-tt-an)
1791
+ )
1792
+ );
1793
+ --_sf-hr-lr-sg: var(
1794
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1795
+ var(
1796
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-lr-sg,
1797
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-lr-sg)
1798
+ )
1799
+ );
1800
+ --_sf-hr-le-ht: var(
1801
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1802
+ var(
1803
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-le-ht,
1804
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-le-ht)
1805
+ )
1806
+ );
1807
+
1808
+ --_sf-hr-in-se: var(
1809
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1810
+ var(
1811
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1812
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1813
+ )
1814
+ );
1815
+ --_sf-hr-in-se: var(
1816
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-se,
1817
+ var(
1818
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-se,
1819
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-se)
1820
+ )
1821
+ );
1822
+ --_sf-hr-in-c1: var(
1823
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1824
+ var(
1825
+ --_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-in-c1,
1826
+ var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-in-c1)
1827
+ )
1828
+ );
1829
+ --_sf-hr-ue: var(
1830
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-se-ue,
1831
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-se-ue, var(--_ctm-dn-be-ds-pe-bn-dn-hr-se-ue))
1832
+ );
1326
1833
 
1327
1834
  // for pading and width
1328
- --_sf-hr-pg: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1329
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg)));
1330
- --_sf-hr-wh: var(--_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1331
- var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh)));
1835
+ --_sf-hr-pg: var(
1836
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-pg,
1837
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-pg, var(--_ctm-dn-be-ds-pe-bn-dn-hr-pg))
1838
+ );
1839
+ --_sf-hr-wh: var(
1840
+ --_ctm-mob-dn-be-ds-pe-bn-dn-hr-wh,
1841
+ var(--_ctm-tab-dn-be-ds-pe-bn-dn-hr-wh, var(--_ctm-dn-be-ds-pe-bn-dn-hr-wh))
1842
+ );
1332
1843
 
1333
1844
  &[data-hover-show-shadow="false"] {
1334
1845
  --_hover-show-shadow: none;
1335
1846
  }
1336
-
1337
1847
  &[data-hover-show-icon="false"] {
1338
1848
  --_hover-show-icon: none;
1339
1849
  }
1340
1850
  }
1341
-
1342
- background-color: var(--_sf-hr-bd-cr,
1343
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr));
1851
+ background-color: var(
1852
+ --_sf-hr-bd-cr,
1853
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-bd-cr)
1854
+ );
1344
1855
 
1345
1856
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-pg));
1346
1857
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wh));
@@ -1348,25 +1859,40 @@ border-style: var(--_sf-icn-bs,
1348
1859
  flex-direction: var(--_sf-fd-bn);
1349
1860
  align-items: center;
1350
1861
 
1351
- justify-content: var(--_sf-hr-at,
1352
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at));
1862
+ justify-content: var(
1863
+ --_sf-hr-at,
1864
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-at)
1865
+ );
1353
1866
  gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-gp));
1354
1867
 
1355
- border-radius: var(--_sf-hr-br-rs,
1356
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs));
1868
+ border-radius: var(
1869
+ --_sf-hr-br-rs,
1870
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-rs)
1871
+ );
1357
1872
 
1358
- box-shadow: var(--_sf-hr-sw-ae,
1359
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1873
+ box-shadow: var(
1874
+ --_sf-hr-sw-ae,
1875
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-ae)
1876
+ )
1877
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-br))
1878
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-sd))
1879
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-sw-cr));
1360
1880
 
1361
1881
  &[data-show-border="true"] {
1362
- border-color: var(--_sf-hr-br-cr,
1363
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr));
1364
-
1365
- border-style: var(--_sf-hr-br-se,
1366
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se));
1367
-
1368
- border-width: var(--_sf-hr-br-wh,
1369
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh));
1882
+ border-color: var(
1883
+ --_sf-hr-br-cr,
1884
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-cr)
1885
+ );
1886
+
1887
+ border-style: var(
1888
+ --_sf-hr-br-se,
1889
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-se)
1890
+ );
1891
+
1892
+ border-width: var(
1893
+ --_sf-hr-br-wh,
1894
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-br-wh)
1895
+ );
1370
1896
  }
1371
1897
 
1372
1898
  .txt {
@@ -1374,59 +1900,82 @@ border-style: var(--_sf-icn-bs,
1374
1900
 
1375
1901
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-cr));
1376
1902
 
1377
- font-family: var(--_sf-hr-ft-fy,
1378
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy));
1379
- text-transform: var(--_sf-hr-tt-tm,
1380
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-tm));
1381
- word-wrap: var(--_sf-hr-wd-wp,
1382
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-wp));
1383
- word-break: var(--_sf-hr-wd-bk,
1384
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-bk));
1385
-
1903
+ font-family: var(
1904
+ --_sf-hr-ft-fy,
1905
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-fy)
1906
+ );
1907
+ text-transform: var(
1908
+ --_sf-hr-tt-tm,
1909
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-tm)
1910
+ );
1911
+ word-wrap: var(
1912
+ --_sf-hr-wd-wp,
1913
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-wp)
1914
+ );
1915
+ word-break: var(
1916
+ --_sf-hr-wd-bk,
1917
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-wd-bk)
1918
+ );
1386
1919
  &.flex__overflow {
1387
1920
  white-space: normal;
1388
1921
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1389
1922
  }
1390
1923
 
1391
- font-size: var(--_sf-hr-ft-se,
1392
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se));
1924
+ font-size: var(
1925
+ --_sf-hr-ft-se,
1926
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se)
1927
+ );
1393
1928
 
1394
- font-weight: var(--_sf-hr-ft-wt,
1395
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt));
1929
+ font-weight: var(
1930
+ --_sf-hr-ft-wt,
1931
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-wt)
1932
+ );
1396
1933
 
1397
- font-style: var(--_sf-hr-ft-se-ic,
1398
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic));
1934
+ font-style: var(
1935
+ --_sf-hr-ft-se-ic,
1936
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-ft-se-ic)
1937
+ );
1399
1938
 
1400
- text-align: var(--_sf-hr-tt-an,
1401
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an));
1939
+ text-align: var(
1940
+ --_sf-hr-tt-an,
1941
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-tt-an)
1942
+ );
1402
1943
 
1403
- letter-spacing: var(--_sf-hr-lr-sg,
1404
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg));
1944
+ letter-spacing: var(
1945
+ --_sf-hr-lr-sg,
1946
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-lr-sg)
1947
+ );
1405
1948
 
1406
- line-height: var(--_sf-hr-le-ht,
1407
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht));
1949
+ line-height: var(
1950
+ --_sf-hr-le-ht,
1951
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-le-ht)
1952
+ );
1408
1953
 
1409
1954
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1410
1955
  }
1411
1956
 
1412
1957
  .icon {
1413
1958
  display: var(--_hover-show-icon, var(--_show-icon, flex));
1414
-
1415
1959
  svg {
1416
- width: var(--_sf-hr-in-se,
1417
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se));
1418
- height: var(--_sf-hr-in-se,
1419
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se));
1960
+ width: var(
1961
+ --_sf-hr-in-se,
1962
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1963
+ );
1964
+ height: var(
1965
+ --_sf-hr-in-se,
1966
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-se)
1967
+ );
1420
1968
 
1421
1969
  path {
1422
- stroke: var(--_sf-hr-in-c1,
1423
- prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1));
1970
+ stroke: var(
1971
+ --_sf-hr-in-c1,
1972
+ prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-in-c1)
1973
+ );
1424
1974
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1425
1975
  stroke-width: prepareMediaVariable(--_ctm-dn-be-ds-pe-bn-dn-dt-se-se-wh, 1.25);
1426
1976
  }
1427
1977
  }
1428
1978
  }
1429
-
1430
1979
  [data-element-style="Text"] {
1431
1980
  display: inline-block;
1432
1981
  width: 100%;
@@ -1451,16 +2000,17 @@ border-style: var(--_sf-icn-bs,
1451
2000
  }
1452
2001
  }
1453
2002
  }
1454
-
1455
2003
  .divider {
1456
2004
  border: none;
1457
- height: var(--_ctm-mob-dr-dr-wt,
1458
- var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt)));
1459
- /* Set thickness */
1460
- background-color: var(--_ctm-mob-dr-dr-cr,
1461
- var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr)));
2005
+ height: var(
2006
+ --_ctm-mob-dr-dr-wt,
2007
+ var(--_ctm-tab-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
2008
+ ); /* Set thickness */
2009
+ background-color: var(
2010
+ --_ctm-mob-dr-dr-cr,
2011
+ var(--_ctm-tab-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
2012
+ );
1462
2013
  }
1463
-
1464
2014
  .single__bundle_slider {
1465
2015
  display: flex;
1466
2016
  flex-direction: column;
@@ -1468,7 +2018,6 @@ border-style: var(--_sf-icn-bs,
1468
2018
  align-items: flex-start;
1469
2019
  flex: 1;
1470
2020
  min-height: 0;
1471
-
1472
2021
  // height: 100%;
1473
2022
  // & > div {
1474
2023
  // height: 100%;
@@ -1479,7 +2028,6 @@ border-style: var(--_sf-icn-bs,
1479
2028
  min-height: 0;
1480
2029
  width: 100%;
1481
2030
  }
1482
-
1483
2031
  .items__warper {
1484
2032
  display: flex;
1485
2033
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
@@ -1491,14 +2039,12 @@ border-style: var(--_sf-icn-bs,
1491
2039
  width: 100%;
1492
2040
  // align-items: center;
1493
2041
  --items-per-row: #{prepareMediaVariable(--_ctm-lt-is-pr-rw)};
1494
-
1495
2042
  .bundle-image-container,
1496
2043
  .tiles-grid-view {
1497
2044
  flex: 0 0 calc((100% / var(--items-per-row)) - var(--_ctm-lt-im-sg));
1498
2045
  height: unset;
1499
2046
  }
1500
2047
  }
1501
-
1502
2048
  .bundle-image-container {
1503
2049
  height: 100%;
1504
2050
  background-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-bd-cr);
@@ -1506,7 +2052,10 @@ border-style: var(--_sf-icn-bs,
1506
2052
  border-style: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-se);
1507
2053
  border-color: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-cr);
1508
2054
  border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-dn-br-rs);
1509
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae) prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br) prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd) prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
2055
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-ae)
2056
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-br)
2057
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-sd)
2058
+ prepareMediaVariable(--_ctm-dn-pt-cd-dn-sw-cr);
1510
2059
  width: 100%;
1511
2060
  display: flex;
1512
2061
  flex-direction: column;
@@ -1523,7 +2072,6 @@ border-style: var(--_sf-icn-bs,
1523
2072
  min-height: 100px;
1524
2073
  width: 100%;
1525
2074
  max-height: prepareMediaVariable(--_ctm-lt-ie-ht);
1526
-
1527
2075
  img {
1528
2076
  max-width: 100%;
1529
2077
  // max-height: 100%;
@@ -1533,7 +2081,6 @@ border-style: var(--_sf-icn-bs,
1533
2081
  height: prepareMediaVariable(--_ctm-lt-ie-ht);
1534
2082
  }
1535
2083
  }
1536
-
1537
2084
  .img-title {
1538
2085
  // padding: 12px;
1539
2086
  font-family: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-fy);
@@ -1553,117 +2100,171 @@ border-style: var(--_sf-icn-bs,
1553
2100
  border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1554
2101
  border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1555
2102
  text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1556
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1557
-
2103
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
2104
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
2105
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
2106
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1558
2107
  &#{$overflowSelector} {
1559
2108
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1560
2109
  }
1561
2110
  }
1562
2111
  }
1563
-
1564
2112
  .bundle__navigation_btn_wrapper {
1565
2113
  display: flex;
1566
2114
  width: 100%;
1567
2115
  justify-content: center;
1568
2116
  }
1569
-
1570
2117
  .btn__with__text[data-btn-name="bundle_navigation_button"] {
1571
2118
  justify-content: center;
1572
-
1573
2119
  &[data-show-shadow="false"] {
1574
2120
  --_show-shadow: none;
1575
2121
  }
1576
-
1577
2122
  &[data-icon-position="left"] {
1578
2123
  --_sf-fd-bn: row;
1579
2124
  }
1580
-
1581
2125
  &[data-icon-position="right"] {
1582
2126
  --_sf-fd-bn: row-reverse;
1583
2127
  }
1584
-
1585
2128
  &[data-icon-position="center"] {
1586
2129
  --_sf-fd-bn: row;
1587
2130
  }
1588
2131
 
1589
2132
  &:hover {
1590
- --_sf-hr-bd-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
1591
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr)));
1592
- --_sf-hr-br-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
1593
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr)));
1594
- --_sf-hr-br-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
1595
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se)));
1596
- --_sf-hr-br-wh: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
1597
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh)));
1598
- --_sf-hr-br-rs: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
1599
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs)));
1600
- --_sf-hr-at: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
1601
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at)));
1602
- --_sf-hr-gp: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
1603
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp)));
2133
+ --_sf-hr-bd-cr: var(
2134
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-bd-cr,
2135
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-bd-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-bd-cr))
2136
+ );
2137
+ --_sf-hr-br-cr: var(
2138
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-cr,
2139
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-cr))
2140
+ );
2141
+ --_sf-hr-br-se: var(
2142
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-se,
2143
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-se))
2144
+ );
2145
+ --_sf-hr-br-wh: var(
2146
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-wh,
2147
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-wh, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-wh))
2148
+ );
2149
+ --_sf-hr-br-rs: var(
2150
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-br-rs,
2151
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-br-rs, var(--_ctm-dn-be-nn-bn-dn-hr-se-br-rs))
2152
+ );
2153
+ --_sf-hr-at: var(
2154
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-at,
2155
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-at, var(--_ctm-dn-be-nn-bn-dn-hr-se-at))
2156
+ );
2157
+ --_sf-hr-gp: var(
2158
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-gp,
2159
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-gp, var(--_ctm-dn-be-nn-bn-dn-hr-se-gp))
2160
+ );
1604
2161
 
1605
2162
  // for shadow
1606
- --_sf-hr-sw-ae: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
1607
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae)));
1608
- --_sf-hr-sw-br: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
1609
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br)));
1610
- --_sf-hr-sw-hr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
1611
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr)));
1612
- --_sf-hr-sw-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
1613
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr)));
2163
+ --_sf-hr-sw-ae: var(
2164
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-ae,
2165
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-ae, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-ae))
2166
+ );
2167
+ --_sf-hr-sw-br: var(
2168
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-br,
2169
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-br, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-br))
2170
+ );
2171
+ --_sf-hr-sw-hr: var(
2172
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-hr,
2173
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-hr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-hr))
2174
+ );
2175
+ --_sf-hr-sw-cr: var(
2176
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-sw-cr,
2177
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-sw-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-sw-cr))
2178
+ );
1614
2179
 
1615
2180
  // for font
1616
2181
 
1617
- --_sf-hr-cr: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
1618
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr)));
1619
- --_sf-hr-ft-fy: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
1620
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy)));
1621
- --_sf-hr-tt-tm: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-tm,
1622
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-tm, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-tm)));
1623
- --_sf-hr-wd-wp: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-wp,
1624
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-wp, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-wp)));
1625
- --_sf-hr-wd-bk: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-bk,
1626
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-bk, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-bk)));
1627
- --_sf-hr-ft-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
1628
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se)));
1629
- --_sf-hr-ft-wt: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
1630
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt)));
1631
- --_sf-hr-ft-se-ic: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
1632
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
1633
- var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)));
1634
- --_sf-hr-tt-an: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
1635
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an)));
1636
- --_sf-hr-lr-sg: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
1637
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg)));
1638
- --_sf-hr-le-ht: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
1639
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht)));
1640
-
1641
- --_sf-hr-in-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
1642
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se)));
1643
- --_sf-hr-in-se: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
1644
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se)));
1645
- --_sf-hr-in-c1: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
1646
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1)));
1647
- --_sf-hr-ue: var(--_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
1648
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue)));
2182
+ --_sf-hr-cr: var(
2183
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-cr,
2184
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-cr, var(--_ctm-dn-be-nn-bn-dn-hr-se-cr))
2185
+ );
2186
+ --_sf-hr-ft-fy: var(
2187
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-fy,
2188
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-fy, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-fy))
2189
+ );
2190
+ --_sf-hr-tt-tm: var(
2191
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-tm,
2192
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-tm, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-tm))
2193
+ );
2194
+ --_sf-hr-wd-wp: var(
2195
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-wp,
2196
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-wp, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-wp))
2197
+ );
2198
+ --_sf-hr-wd-bk: var(
2199
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-wd-bk,
2200
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-wd-bk, var(--_ctm-dn-be-nn-bn-dn-hr-se-wd-bk))
2201
+ );
2202
+ --_sf-hr-ft-se: var(
2203
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se,
2204
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se))
2205
+ );
2206
+ --_sf-hr-ft-wt: var(
2207
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-wt,
2208
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-wt, var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-wt))
2209
+ );
2210
+ --_sf-hr-ft-se-ic: var(
2211
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2212
+ var(
2213
+ --_ctm-tab-dn-be-nn-bn-dn-hr-se-ft-se-ic,
2214
+ var(--_ctm-dn-be-nn-bn-dn-hr-se-ft-se-ic)
2215
+ )
2216
+ );
2217
+ --_sf-hr-tt-an: var(
2218
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-tt-an,
2219
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-tt-an, var(--_ctm-dn-be-nn-bn-dn-hr-se-tt-an))
2220
+ );
2221
+ --_sf-hr-lr-sg: var(
2222
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-lr-sg,
2223
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-lr-sg, var(--_ctm-dn-be-nn-bn-dn-hr-se-lr-sg))
2224
+ );
2225
+ --_sf-hr-le-ht: var(
2226
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-le-ht,
2227
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-le-ht, var(--_ctm-dn-be-nn-bn-dn-hr-se-le-ht))
2228
+ );
2229
+
2230
+ --_sf-hr-in-se: var(
2231
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2232
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2233
+ );
2234
+ --_sf-hr-in-se: var(
2235
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-se,
2236
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-se, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-se))
2237
+ );
2238
+ --_sf-hr-in-c1: var(
2239
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-in-c1,
2240
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-in-c1, var(--_ctm-dn-be-nn-bn-dn-hr-se-in-c1))
2241
+ );
2242
+ --_sf-hr-ue: var(
2243
+ --_ctm-mob-dn-be-nn-bn-dn-hr-se-ue,
2244
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-se-ue, var(--_ctm-dn-be-nn-bn-dn-hr-se-ue))
2245
+ );
1649
2246
 
1650
2247
  // for pading and width
1651
- --_sf-hr-pg: var(--_ctm-mob-dn-be-nn-bn-dn-hr-pg,
1652
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg)));
1653
- --_sf-hr-wh: var(--_ctm-mob-dn-be-nn-bn-dn-hr-wh,
1654
- var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh)));
2248
+ --_sf-hr-pg: var(
2249
+ --_ctm-mob-dn-be-nn-bn-dn-hr-pg,
2250
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-pg, var(--_ctm-dn-be-nn-bn-dn-hr-pg))
2251
+ );
2252
+ --_sf-hr-wh: var(
2253
+ --_ctm-mob-dn-be-nn-bn-dn-hr-wh,
2254
+ var(--_ctm-tab-dn-be-nn-bn-dn-hr-wh, var(--_ctm-dn-be-nn-bn-dn-hr-wh))
2255
+ );
1655
2256
 
1656
2257
  &[data-hover-show-shadow="false"] {
1657
2258
  --_hover-show-shadow: none;
1658
2259
  }
1659
-
1660
2260
  &[data-hover-show-icon="false"] {
1661
2261
  --_hover-show-icon: none;
1662
2262
  }
1663
2263
  }
1664
-
1665
- background-color: var(--_sf-hr-bd-cr,
1666
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr));
2264
+ background-color: var(
2265
+ --_sf-hr-bd-cr,
2266
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-bd-cr)
2267
+ );
1667
2268
 
1668
2269
  padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-pg));
1669
2270
  width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wh));
@@ -1674,20 +2275,31 @@ border-style: var(--_sf-icn-bs,
1674
2275
  justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-at));
1675
2276
  gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-gp));
1676
2277
 
1677
- border-radius: var(--_sf-hr-br-rs,
1678
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs));
2278
+ border-radius: var(
2279
+ --_sf-hr-br-rs,
2280
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-rs)
2281
+ );
1679
2282
 
1680
- box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
2283
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-ae))
2284
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-br))
2285
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-sd))
2286
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-sw-cr));
1681
2287
 
1682
2288
  &[data-show-border="true"] {
1683
- border-color: var(--_sf-hr-br-cr,
1684
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr));
1685
-
1686
- border-style: var(--_sf-hr-br-se,
1687
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se));
1688
-
1689
- border-width: var(--_sf-hr-br-wh,
1690
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh));
2289
+ border-color: var(
2290
+ --_sf-hr-br-cr,
2291
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-cr)
2292
+ );
2293
+
2294
+ border-style: var(
2295
+ --_sf-hr-br-se,
2296
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-se)
2297
+ );
2298
+
2299
+ border-width: var(
2300
+ --_sf-hr-br-wh,
2301
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-br-wh)
2302
+ );
1691
2303
  }
1692
2304
 
1693
2305
  .txt {
@@ -1695,58 +2307,79 @@ border-style: var(--_sf-icn-bs,
1695
2307
 
1696
2308
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-cr));
1697
2309
 
1698
- font-family: var(--_sf-hr-ft-fy,
1699
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy));
1700
- text-transform: var(--_sf-hr-tt-tm,
1701
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-tm));
1702
- word-wrap: var(--_sf-hr-wd-wp,
1703
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-wp));
1704
- word-break: var(--_sf-hr-wd-bk,
1705
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-bk));
1706
-
2310
+ font-family: var(
2311
+ --_sf-hr-ft-fy,
2312
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-fy)
2313
+ );
2314
+ text-transform: var(
2315
+ --_sf-hr-tt-tm,
2316
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-tm)
2317
+ );
2318
+ word-wrap: var(
2319
+ --_sf-hr-wd-wp,
2320
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-wp)
2321
+ );
2322
+ word-break: var(
2323
+ --_sf-hr-wd-bk,
2324
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-wd-bk)
2325
+ );
1707
2326
  &.flex__overflow {
1708
2327
  white-space: normal;
1709
2328
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1710
2329
  }
1711
2330
 
1712
- font-size: var(--_sf-hr-ft-se,
1713
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se));
2331
+ font-size: var(
2332
+ --_sf-hr-ft-se,
2333
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se)
2334
+ );
1714
2335
 
1715
- font-weight: var(--_sf-hr-ft-wt,
1716
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt));
2336
+ font-weight: var(
2337
+ --_sf-hr-ft-wt,
2338
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-wt)
2339
+ );
1717
2340
 
1718
- font-style: var(--_sf-hr-ft-se-ic,
1719
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic));
2341
+ font-style: var(
2342
+ --_sf-hr-ft-se-ic,
2343
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-ft-se-ic)
2344
+ );
1720
2345
 
1721
- text-align: var(--_sf-hr-tt-an,
1722
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an));
2346
+ text-align: var(
2347
+ --_sf-hr-tt-an,
2348
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-tt-an)
2349
+ );
1723
2350
 
1724
- letter-spacing: var(--_sf-hr-lr-sg,
1725
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg));
2351
+ letter-spacing: var(
2352
+ --_sf-hr-lr-sg,
2353
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-lr-sg)
2354
+ );
1726
2355
 
1727
- line-height: var(--_sf-hr-le-ht,
1728
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht));
2356
+ line-height: var(
2357
+ --_sf-hr-le-ht,
2358
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-le-ht)
2359
+ );
1729
2360
 
1730
2361
  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
1731
2362
  }
1732
2363
 
1733
2364
  .icon {
1734
2365
  display: var(--_hover-show-icon, var(--_show-icon, flex));
1735
-
1736
2366
  svg {
1737
2367
  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
1738
- height: var(--_sf-hr-in-se,
1739
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se));
2368
+ height: var(
2369
+ --_sf-hr-in-se,
2370
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-se)
2371
+ );
1740
2372
 
1741
2373
  path {
1742
- stroke: var(--_sf-hr-in-c1,
1743
- prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1));
2374
+ stroke: var(
2375
+ --_sf-hr-in-c1,
2376
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-in-c1)
2377
+ );
1744
2378
  // Overrides the stroke-width presentation attribute baked into the icon markup.
1745
2379
  stroke-width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-dt-se-se-wh, 1.25);
1746
2380
  }
1747
2381
  }
1748
2382
  }
1749
-
1750
2383
  [data-element-style="Text"] {
1751
2384
  display: inline-block;
1752
2385
  width: 100%;
@@ -1788,12 +2421,10 @@ border-style: var(--_sf-icn-bs,
1788
2421
  text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
1789
2422
  word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
1790
2423
  word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
1791
-
1792
2424
  &.flex__overflow {
1793
2425
  white-space: normal;
1794
2426
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1795
2427
  }
1796
-
1797
2428
  font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
1798
2429
  color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
1799
2430
  font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
@@ -1807,13 +2438,15 @@ border-style: var(--_sf-icn-bs,
1807
2438
  border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
1808
2439
  border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
1809
2440
  border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
1810
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2441
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2442
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2443
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2444
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
1811
2445
 
1812
2446
  .icon {
1813
2447
  svg {
1814
2448
  width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
1815
2449
  height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
1816
-
1817
2450
  path {
1818
2451
  stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
1819
2452
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -1859,16 +2492,17 @@ border-style: var(--_sf-icn-bs,
1859
2492
  gap: prepareMediaVariable(--_ctm-lt-im-gp);
1860
2493
  justify-content: space-between;
1861
2494
  background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
1862
-
1863
2495
  // Border only drawn when the tile card's "Show Border" toggle is on.
1864
2496
  &[data-show-border="true"] {
1865
2497
  border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
1866
2498
  border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
1867
2499
  border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
1868
2500
  }
1869
-
1870
2501
  border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
1871
- box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae) prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br) prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd) prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
2502
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
2503
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
2504
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-sd)
2505
+ prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-cr);
1872
2506
 
1873
2507
  .tile-content {
1874
2508
  display: flex;
@@ -1877,7 +2511,6 @@ border-style: var(--_sf-icn-bs,
1877
2511
  align-items: flex-start;
1878
2512
  height: 100%;
1879
2513
  width: 100%;
1880
-
1881
2514
  .tile_bundle_name {
1882
2515
  display: flex;
1883
2516
  align-items: flex-start;
@@ -1890,12 +2523,10 @@ border-style: var(--_sf-icn-bs,
1890
2523
  text-transform: prepareMediaVariable(--_ctm-dn-pt-ne-dn-tt-tm);
1891
2524
  word-wrap: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-wp);
1892
2525
  word-break: prepareMediaVariable(--_ctm-dn-pt-ne-dn-wd-bk);
1893
-
1894
2526
  &.flex__overflow {
1895
2527
  white-space: normal;
1896
2528
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
1897
2529
  }
1898
-
1899
2530
  font-size: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-se);
1900
2531
  color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-cr);
1901
2532
  font-weight: prepareMediaVariable(--_ctm-dn-pt-ne-dn-ft-wt);
@@ -1909,7 +2540,10 @@ border-style: var(--_sf-icn-bs,
1909
2540
  border-color: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-cr);
1910
2541
  border-style: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-se);
1911
2542
  border-radius: prepareMediaVariable(--_ctm-dn-pt-ne-dn-br-rs);
1912
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd) prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
2543
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-ae)
2544
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-br)
2545
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-sd)
2546
+ prepareMediaVariable(--_ctm-dn-pt-ne-dn-sw-cr);
1913
2547
 
1914
2548
  &#{$overflowSelector} {
1915
2549
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
@@ -1934,8 +2568,13 @@ border-style: var(--_sf-icn-bs,
1934
2568
  // Rows next to a category slider also reserve the arrow button
1935
2569
  // box — same sizing NAVIGATION_STYLES gives those buttons.
1936
2570
  &[data-reserve-nav-height="true"] {
1937
- min-height: calc(var(--_sf-icn-size,
1938
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}) * 1.75);
2571
+ min-height: calc(
2572
+ var(
2573
+ --_sf-icn-size,
2574
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-cy-sr-dt-se-in-se, 16px)}
2575
+ ) *
2576
+ 1.75
2577
+ );
1939
2578
  }
1940
2579
  }
1941
2580
 
@@ -1980,7 +2619,6 @@ border-style: var(--_sf-icn-bs,
1980
2619
  }
1981
2620
 
1982
2621
  &.animate-flip {
1983
-
1984
2622
  // Padding cells hold no image, so they sit the animation out.
1985
2623
  .product-image-wrapper:not(.empty-image-slot) {
1986
2624
  animation: flip 0.6s ease-in-out;
@@ -1990,7 +2628,6 @@ border-style: var(--_sf-icn-bs,
1990
2628
  0% {
1991
2629
  transform: rotateY(0deg);
1992
2630
  }
1993
-
1994
2631
  100% {
1995
2632
  transform: rotateY(180deg);
1996
2633
  }
@@ -2005,16 +2642,17 @@ border-style: var(--_sf-icn-bs,
2005
2642
  justify-content: center;
2006
2643
  align-items: center;
2007
2644
  background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
2008
-
2009
2645
  // Border only drawn when the tile card image's "Show Border" toggle is on.
2010
2646
  &[data-show-border="true"] {
2011
2647
  border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2012
2648
  border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2013
2649
  border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2014
2650
  }
2015
-
2016
2651
  border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2017
- box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae) prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br) prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd) prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2652
+ box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
2653
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)
2654
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-sd)
2655
+ prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-cr);
2018
2656
 
2019
2657
  img {
2020
2658
  // max-height: 135px;
@@ -2038,12 +2676,10 @@ border-style: var(--_sf-icn-bs,
2038
2676
  text-transform: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-tt-tm);
2039
2677
  word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
2040
2678
  word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
2041
-
2042
2679
  &.flex__overflow {
2043
2680
  white-space: normal;
2044
2681
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2045
2682
  }
2046
-
2047
2683
  font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2048
2684
  color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2049
2685
  font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
@@ -2057,13 +2693,15 @@ border-style: var(--_sf-icn-bs,
2057
2693
  border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2058
2694
  border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2059
2695
  border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2060
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2696
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2697
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2698
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2699
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2061
2700
 
2062
2701
  .icon {
2063
2702
  svg {
2064
2703
  width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2065
2704
  height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2066
-
2067
2705
  path {
2068
2706
  stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2069
2707
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -2090,12 +2728,10 @@ border-style: var(--_sf-icn-bs,
2090
2728
  font-family: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-fy);
2091
2729
  word-wrap: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-wp);
2092
2730
  word-break: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-wd-bk);
2093
-
2094
2731
  &.flex__overflow {
2095
2732
  white-space: normal;
2096
2733
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
2097
2734
  }
2098
-
2099
2735
  font-size: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-se);
2100
2736
  color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-cr);
2101
2737
  font-weight: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-ft-wt);
@@ -2109,13 +2745,15 @@ border-style: var(--_sf-icn-bs,
2109
2745
  border-color: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-cr);
2110
2746
  border-style: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-se);
2111
2747
  border-radius: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-br-rs);
2112
- box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd) prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2748
+ box-shadow: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-ae)
2749
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-br)
2750
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-sd)
2751
+ prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-sw-cr);
2113
2752
 
2114
2753
  .icon {
2115
2754
  svg {
2116
2755
  width: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2117
2756
  height: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-se);
2118
-
2119
2757
  path {
2120
2758
  stroke: prepareMediaVariable(--_ctm-dn-be-nn-bn-dn-in-c1);
2121
2759
  // Overrides the stroke-width presentation attribute baked into the icon markup.
@@ -2128,12 +2766,10 @@ border-style: var(--_sf-icn-bs,
2128
2766
  }
2129
2767
  }
2130
2768
  }
2131
-
2132
2769
  .embla__container {
2133
2770
  gap: prepareMediaVariable(--_ctm-lt-im-sg);
2134
2771
  }
2135
2772
  }
2136
-
2137
2773
  .arrow-navigation-categories {
2138
2774
  display: flex;
2139
2775
  flex-direction: row;
@@ -2141,7 +2777,7 @@ border-style: var(--_sf-icn-bs,
2141
2777
  justify-content: space-between;
2142
2778
  gap: 4px;
2143
2779
 
2144
- &>button {
2780
+ & > button {
2145
2781
  // display: var(--_d-flex);
2146
2782
  // align-items: center;
2147
2783
  // justify-content: center;
@@ -2151,4 +2787,4 @@ border-style: var(--_sf-icn-bs,
2151
2787
  }
2152
2788
  }
2153
2789
  }
2154
- }
2790
+ }