@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.72

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 +68 -68
  2. package/dist/add-products-tab-details.scss +4071 -4071
  3. package/dist/add-products-tab-uom-details.scss +1106 -1106
  4. package/dist/add-products-tab.scss +2377 -2377
  5. package/dist/allocation-header-quota-details.scss +609 -609
  6. package/dist/allocations-quota-details.scss +525 -525
  7. package/dist/amount-estimator.scss +1192 -1192
  8. package/dist/animation-control.scss +23 -23
  9. package/dist/badge.scss +408 -408
  10. package/dist/brand-basic-elements.scss +387 -387
  11. package/dist/brand.scss +142 -142
  12. package/dist/breadcrumbs.scss +966 -966
  13. package/dist/builder.js +1 -1
  14. package/dist/bulk-order-pad.scss +692 -692
  15. package/dist/bundleDetails.scss +6189 -6189
  16. package/dist/buy-for-tab-container.scss +141 -141
  17. package/dist/buy-for-tab.scss +649 -649
  18. package/dist/buy-for-tabs-container-item.scss +80 -80
  19. package/dist/buyForPopup.scss +339 -339
  20. package/dist/cart-details.scss +3986 -3986
  21. package/dist/cart-products-sidebar.scss +211 -211
  22. package/dist/cart-wrapper.scss +127 -127
  23. package/dist/cartDropdownOverlay.scss +653 -653
  24. package/dist/cartGrouping.scss +89 -89
  25. package/dist/category-groups-element.scss +739 -739
  26. package/dist/category-groups-quota-details.scss +626 -626
  27. package/dist/category.scss +137 -137
  28. package/dist/categoryDetails.scss +61 -61
  29. package/dist/categoryWidget.scss +34 -34
  30. package/dist/checkbox-radio.scss +124 -124
  31. package/dist/code-temp.scss +59 -59
  32. package/dist/colorpicker_v2.scss +62 -62
  33. package/dist/common-element.scss +35 -35
  34. package/dist/confirm-modal.scss +370 -370
  35. package/dist/confirmationModal.scss +139 -139
  36. package/dist/contact-us.scss +105 -105
  37. package/dist/container.scss +168 -168
  38. package/dist/custom-fonts.scss +100 -100
  39. package/dist/customization-tree.scss +162 -162
  40. package/dist/default-dropdown.scss +259 -259
  41. package/dist/dropdownTemplate.scss +699 -699
  42. package/dist/editCartItem.scss +110 -110
  43. package/dist/embed-temp.scss +73 -73
  44. package/dist/embroider-preview-element.scss +94 -94
  45. package/dist/embroider-template-1-v2.scss +1105 -1105
  46. package/dist/embroider-template-1.scss +501 -501
  47. package/dist/embroidery.scss +247 -247
  48. package/dist/employee-bulk-order.scss +4060 -4060
  49. package/dist/emtpy-templates.scss +165 -165
  50. package/dist/faq.scss +696 -696
  51. package/dist/fb-dropdown.scss +135 -135
  52. package/dist/filter-results.scss +361 -361
  53. package/dist/flex-text-editor.scss +271 -271
  54. package/dist/form-preview.scss +530 -530
  55. package/dist/global-styles.scss +198 -198
  56. package/dist/grid.scss +169 -169
  57. package/dist/icon-library.scss +78 -78
  58. package/dist/image-for-product.scss +21 -21
  59. package/dist/image-temp.scss +203 -203
  60. package/dist/item-stock.scss +93 -93
  61. package/dist/kitDetails.scss +5739 -5739
  62. package/dist/kits.scss +305 -305
  63. package/dist/language-selector.scss +948 -948
  64. package/dist/last-x-orders.scss +285 -285
  65. package/dist/layouter-item.scss +141 -141
  66. package/dist/layouter-pro-item.scss +139 -139
  67. package/dist/layouter-pro.scss +134 -134
  68. package/dist/layouter.scss +491 -491
  69. package/dist/light-box-v2.scss +155 -155
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/loader.scss +37 -37
  72. package/dist/login.scss +29 -11
  73. package/dist/marchandiserSets.scss +141 -141
  74. package/dist/mega-menu-container.scss +152 -152
  75. package/dist/menu-item.scss +19 -19
  76. package/dist/menu-v2.scss +999 -999
  77. package/dist/menu.scss +174 -174
  78. package/dist/multi-select-dropdown.scss +316 -316
  79. package/dist/my-templates.scss +477 -477
  80. package/dist/my-wishlist.scss +27 -27
  81. package/dist/option-bar.scss +886 -886
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/order-status.scss +74 -0
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +1039 -1039
  86. package/dist/payment-methods.scss +307 -307
  87. package/dist/phone-input.scss +208 -208
  88. package/dist/pickup-locations.scss +1359 -1359
  89. package/dist/position-module.scss +95 -95
  90. package/dist/prefix-list.scss +86 -86
  91. package/dist/product-actions.scss +2872 -2872
  92. package/dist/product-basic-elements.scss +600 -600
  93. package/dist/product-customizations.scss +155 -155
  94. package/dist/product-inventory.scss +1621 -1621
  95. package/dist/product-labels.scss +265 -265
  96. package/dist/product-price.scss +3392 -3392
  97. package/dist/product-promotions.scss +3224 -3224
  98. package/dist/product-sizechart.scss +1921 -1921
  99. package/dist/product.scss +140 -140
  100. package/dist/profile.scss +824 -824
  101. package/dist/quantity-selector.scss +1074 -1074
  102. package/dist/quick-inventory-check.scss +285 -285
  103. package/dist/quick-links.scss +627 -627
  104. package/dist/quota-details.scss +526 -526
  105. package/dist/repeater-embla-controls.scss +211 -211
  106. package/dist/repeater-grid-toggle.scss +206 -206
  107. package/dist/repeater-item.scss +152 -152
  108. package/dist/repeater.scss +946 -946
  109. package/dist/request-for-quotes.scss +841 -841
  110. package/dist/responsive-behaviour.scss +29 -29
  111. package/dist/rfqs.scss +861 -861
  112. package/dist/scroll.scss +414 -414
  113. package/dist/search.scss +689 -689
  114. package/dist/section.scss +276 -276
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2518 -2518
  118. package/dist/simple-list.scss +338 -338
  119. package/dist/skeleton.scss +64 -64
  120. package/dist/sort.scss +176 -176
  121. package/dist/spotlight.scss +1706 -1706
  122. package/dist/stack.scss +171 -171
  123. package/dist/static-global.scss +292 -292
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +70 -70
  126. package/dist/store-locations.scss +1592 -1592
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +141 -141
  131. package/dist/table.scss +9 -0
  132. package/dist/tabs.scss +440 -440
  133. package/dist/text-temp.scss +109 -109
  134. package/dist/theme-classes.scss +421 -421
  135. package/dist/toaster.scss +392 -392
  136. package/dist/toggle-button.scss +32 -32
  137. package/dist/transform-properties-module.scss +20 -20
  138. package/dist/types/builder/tools/element-edit/login.d.ts +1 -0
  139. package/dist/types/builder/tools/element-edit/resetPassword.d.ts +1 -0
  140. package/dist/wishlist-overlay.scss +48 -48
  141. package/package.json +1 -1
package/dist/breadcrumbs.scss CHANGED
@@ -1,966 +1,966 @@
1
- @use "./functions.scss" as *;
2
- @use "sass:map";
3
- @use "sass:list";
4
-
5
- $resizerId: "[data-cms-tool='cms-element-resizer']";
6
- $resizeActive: '[data-cms-element-resizer="true"]';
7
- [data-div-type="element"] {
8
- &[data-element-type="breadcrumbs"] {
9
- width: var(
10
- --_sf-el-wh-st-mx,
11
- calc(
12
- 1% *
13
- var(
14
- --_ctm-mob-ele-nw-wh-vl,
15
- var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
- )
17
- )
18
- );
19
- min-width: 200px !important;
20
-
21
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
22
-
23
- & > div {
24
- &.wrapper {
25
- min-width: 200px !important;
26
- width: 100%;
27
- background-color: var(
28
- --_ctm-mob-dn-bd-ad-fl-bd-cr,
29
- var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
30
- );
31
- border-style: var(
32
- --_ctm-mob-dn-bd-ad-fl-br-se,
33
- var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
34
- );
35
- border-width: var(
36
- --_ctm-mob-dn-bd-ad-fl-br-wh,
37
- var(--_ctm-tab-dn-bd-ad-fl-br-wh, var(--_ctm-dn-bd-ad-fl-br-wh))
38
- );
39
- border-color: var(
40
- --_ctm-mob-dn-bd-ad-fl-br-cr,
41
- var(--_ctm-tab-dn-bd-ad-fl-br-cr, var(--_ctm-dn-bd-ad-fl-br-cr))
42
- );
43
- border-radius: var(
44
- --_ctm-mob-dn-bd-ad-fl-br-rs,
45
- var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
46
- );
47
-
48
- box-shadow: var(
49
- --_show-shadow,
50
- var(
51
- --_ctm-mob-dn-bd-ad-fl-sw-ae,
52
- var(--_ctm-tab-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
53
- )
54
- var(
55
- --_ctm-mob-dn-bd-ad-fl-sw-br,
56
- var(--_ctm-tab-dn-bd-ad-fl-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
57
- )
58
- var(
59
- --_ctm-mob-dn-bd-ad-fl-sw-sd,
60
- var(--_ctm-tab-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
61
- )
62
- var(
63
- --_ctm-mob-dn-bd-ad-fl-sw-cr,
64
- var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
65
- )
66
- );
67
- }
68
-
69
- .breadcrumb_item {
70
- &[data-show-cursor="true"] {
71
- cursor: pointer;
72
- }
73
- }
74
-
75
- .horizontal_breadcrumb_wrapper {
76
- display: inline-flex;
77
- align-items: center;
78
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
79
-
80
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
81
-
82
- &[overflow-item="Scroll"],
83
- &[overflow-item="Show More"],
84
- &[overflow-item="Collapsed"] {
85
- overflow-x: auto;
86
- width: inherit;
87
- }
88
-
89
- &[overflow-item="Wrap"] {
90
- flex-wrap: wrap;
91
- row-gap: var(
92
- --_ctm-mob-lt-im-vl-sg,
93
- var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
94
- );
95
- column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
96
- }
97
-
98
- .breadcrumb_item {
99
- padding: 0px 4px;
100
- display: flex;
101
- gap: 8px;
102
- white-space: nowrap;
103
- align-items: center;
104
-
105
- padding: var(
106
- --_ctm-mob-dn-or-im-se-pg,
107
- var(--_ctm-tab-dn-or-im-se-pg, var(--_ctm-dn-or-im-se-pg))
108
- );
109
- gap: var(
110
- --_ctm-mob-dn-or-im-se-im-gp,
111
- var(--_ctm-tab-dn-or-im-se-im-gp, var(--_ctm-dn-or-im-se-im-gp))
112
- );
113
-
114
- background-color: var(
115
- --_ctm-mob-dn-or-im-se-bd-cr,
116
- var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
117
- );
118
- border-color: var(
119
- --_ctm-mob-dn-or-im-se-br-cr,
120
- var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
121
- );
122
- border-radius: var(
123
- --_ctm-mob-dn-or-im-se-br-rs,
124
- var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
125
- );
126
- border-style: var(
127
- --_ctm-mob-dn-or-im-se-br-se,
128
- var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
129
- );
130
- border-width: var(
131
- --_ctm-mob-dn-or-im-se-br-wh,
132
- var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
133
- );
134
- color: var(
135
- --_ctm-mob-dn-or-im-se-cr,
136
- var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
137
- );
138
- font-family: var(
139
- --_ctm-mob-dn-or-im-se-ft-fy,
140
- var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
141
- );
142
- &.flex__overflow {
143
- white-space: normal;
144
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
145
- }
146
- font-size: var(
147
- --_ctm-mob-dn-or-im-se-ft-se,
148
- var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
149
- );
150
- font-style: var(
151
- --_ctm-mob-dn-or-im-se-ft-se-ic,
152
- var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
153
- );
154
- font-weight: var(
155
- --_ctm-mob-dn-or-im-se-ft-wt,
156
- var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
157
- );
158
- line-height: var(
159
- --_ctm-mob-dn-or-im-se-le-ht,
160
- var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
161
- );
162
- letter-spacing: var(
163
- --_ctm-mob-dn-or-im-se-lr-sg,
164
- var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
165
- );
166
- text-align: var(
167
- --_ctm-mob-dn-or-im-se-tt-an,
168
- var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
169
- );
170
- text-decoration: var(
171
- --_ctm-mob-dn-or-im-se-ue,
172
- var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
173
- );
174
- text-transform: var(
175
- --_ctm-mob-dn-or-im-se-tt-tm,
176
- var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
177
- );
178
- word-wrap: var(
179
- --_ctm-mob-dn-or-im-se-wd-wp,
180
- var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
181
- );
182
- word-break: var(
183
- --_ctm-mob-dn-or-im-se-wd-bk,
184
- var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
185
- );
186
- box-shadow: var(
187
- --_ctm-mob-dn-or-im-se-sw-ae,
188
- var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
189
- )
190
- var(
191
- --_ctm-mob-dn-or-im-se-sw-br,
192
- var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
193
- )
194
- var(
195
- --_ctm-mob-dn-or-im-se-sw-sd,
196
- var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
197
- )
198
- var(
199
- --_ctm-mob-dn-or-im-se-sw-cr,
200
- var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
201
- );
202
-
203
- .icon {
204
- svg {
205
- width: var(
206
- --_ctm-mob-dn-or-im-se-in-se,
207
- var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
208
- );
209
- height: var(
210
- --_ctm-mob-dn-or-im-se-in-se,
211
- var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
212
- );
213
- path {
214
- stroke: var(
215
- --_ctm-mob-dn-or-im-se-in-c1,
216
- var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
217
- );
218
- // Overrides the stroke-width presentation attribute baked into the icon markup.
219
- stroke-width: prepareMediaVariable(--_ctm-dn-or-im-se-se-wh, 1.25);
220
- }
221
- }
222
- }
223
-
224
- &:first-of-type {
225
- padding: var(
226
- --_ctm-mob-dn-he-pe-im-se-pg,
227
- var(--_ctm-tab-dn-he-pe-im-se-pg, var(--_ctm-dn-he-pe-im-se-pg))
228
- );
229
- gap: var(
230
- --_ctm-mob-dn-he-pe-im-se-im-gp,
231
- var(--_ctm-tab-dn-he-pe-im-se-im-gp, var(--_ctm-dn-he-pe-im-se-im-gp))
232
- );
233
- background-color: var(
234
- --_ctm-mob-dn-he-pe-im-se-bd-cr,
235
- var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
236
- );
237
- border-color: var(
238
- --_ctm-mob-dn-he-pe-im-se-br-cr,
239
- var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
240
- );
241
- border-radius: var(
242
- --_ctm-mob-dn-he-pe-im-se-br-rs,
243
- var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
244
- );
245
- border-style: var(
246
- --_ctm-mob-dn-he-pe-im-se-br-se,
247
- var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
248
- );
249
- border-width: var(
250
- --_ctm-mob-dn-he-pe-im-se-br-wh,
251
- var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
252
- );
253
- color: var(
254
- --_ctm-mob-dn-he-pe-im-se-cr,
255
- var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
256
- );
257
- font-family: var(
258
- --_ctm-mob-dn-he-pe-im-se-ft-fy,
259
- var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
260
- );
261
- font-size: var(
262
- --_ctm-mob-dn-he-pe-im-se-ft-se,
263
- var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
264
- );
265
- font-style: var(
266
- --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
267
- var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
268
- );
269
- font-weight: var(
270
- --_ctm-mob-dn-he-pe-im-se-ft-wt,
271
- var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
272
- );
273
- line-height: var(
274
- --_ctm-mob-dn-he-pe-im-se-le-ht,
275
- var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
276
- );
277
- letter-spacing: var(
278
- --_ctm-mob-dn-he-pe-im-se-lr-sg,
279
- var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
280
- );
281
- text-align: var(
282
- --_ctm-mob-dn-he-pe-im-se-tt-an,
283
- var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
284
- );
285
- text-decoration: var(
286
- --_ctm-mob-dn-he-pe-im-se-ue,
287
- var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
288
- );
289
- text-transform: var(
290
- --_ctm-mob-dn-he-pe-im-se-tt-tm,
291
- var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
292
- );
293
- word-wrap: var(
294
- --_ctm-mob-dn-he-pe-im-se-wd-wp,
295
- var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
296
- );
297
- word-break: var(
298
- --_ctm-mob-dn-he-pe-im-se-wd-bk,
299
- var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
300
- );
301
- box-shadow: var(
302
- --_ctm-mob-dn-he-pe-im-se-sw-ae,
303
- var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
304
- )
305
- var(
306
- --_ctm-mob-dn-he-pe-im-se-sw-br,
307
- var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
308
- )
309
- var(
310
- --_ctm-mob-dn-he-pe-im-se-sw-sd,
311
- var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
312
- )
313
- var(
314
- --_ctm-mob-dn-he-pe-im-se-sw-cr,
315
- var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
316
- );
317
-
318
- .icon {
319
- svg {
320
- width: var(
321
- --_ctm-mob-dn-he-pe-im-se-in-se,
322
- var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
323
- );
324
- height: var(
325
- --_ctm-mob-dn-he-pe-im-se-in-se,
326
- var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
327
- );
328
- path {
329
- stroke: var(
330
- --_ctm-mob-dn-he-pe-im-se-in-c1,
331
- var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
332
- );
333
- // Overrides the stroke-width presentation attribute baked into the icon markup.
334
- stroke-width: prepareMediaVariable(--_ctm-dn-he-pe-im-se-se-wh, 1.25);
335
- }
336
- }
337
- }
338
- }
339
-
340
- &:last-of-type {
341
- padding: var(
342
- --_ctm-mob-dn-ct-pe-im-se-pg,
343
- var(--_ctm-tab-dn-ct-pe-im-se-pg, var(--_ctm-dn-ct-pe-im-se-pg))
344
- );
345
- gap: var(
346
- --_ctm-mob-dn-ct-pe-im-se-im-gp,
347
- var(--_ctm-tab-dn-ct-pe-im-se-im-gp, var(--_ctm-dn-ct-pe-im-se-im-gp))
348
- );
349
- background-color: var(
350
- --_ctm-mob-dn-ct-pe-im-se-bd-cr,
351
- var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
352
- );
353
- border-color: var(
354
- --_ctm-mob-dn-ct-pe-im-se-br-cr,
355
- var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
356
- );
357
- border-radius: var(
358
- --_ctm-mob-dn-ct-pe-im-se-br-rs,
359
- var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
360
- );
361
- border-style: var(
362
- --_ctm-mob-dn-ct-pe-im-se-br-se,
363
- var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
364
- );
365
- border-width: var(
366
- --_ctm-mob-dn-ct-pe-im-se-br-wh,
367
- var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
368
- );
369
- color: var(
370
- --_ctm-mob-dn-ct-pe-im-se-cr,
371
- var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
372
- );
373
- font-family: var(
374
- --_ctm-mob-dn-ct-pe-im-se-ft-fy,
375
- var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
376
- );
377
- font-size: var(
378
- --_ctm-mob-dn-ct-pe-im-se-ft-se,
379
- var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
380
- );
381
- font-style: var(
382
- --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
383
- var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
384
- );
385
- font-weight: var(
386
- --_ctm-mob-dn-ct-pe-im-se-ft-wt,
387
- var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
388
- );
389
- line-height: var(
390
- --_ctm-mob-dn-ct-pe-im-se-le-ht,
391
- var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
392
- );
393
- letter-spacing: var(
394
- --_ctm-mob-dn-ct-pe-im-se-lr-sg,
395
- var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
396
- );
397
- text-align: var(
398
- --_ctm-mob-dn-ct-pe-im-se-tt-an,
399
- var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
400
- );
401
- text-decoration: var(
402
- --_ctm-mob-dn-ct-pe-im-se-ue,
403
- var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
404
- );
405
- text-transform: var(
406
- --_ctm-mob-dn-ct-pe-im-se-tt-tm,
407
- var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
408
- );
409
- word-wrap: var(
410
- --_ctm-mob-dn-ct-pe-im-se-wd-wp,
411
- var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
412
- );
413
- word-break: var(
414
- --_ctm-mob-dn-ct-pe-im-se-wd-bk,
415
- var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
416
- );
417
- box-shadow: var(
418
- --_ctm-mob-dn-ct-pe-im-se-sw-ae,
419
- var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
420
- )
421
- var(
422
- --_ctm-mob-dn-ct-pe-im-se-sw-sd,
423
- var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
424
- )
425
- var(
426
- --_ctm-mob-dn-he-pe-im-se-sw-sd,
427
- var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
428
- )
429
- var(
430
- --_ctm-mob-dn-ct-pe-im-se-sw-cr,
431
- var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
432
- );
433
-
434
- .icon {
435
- svg {
436
- width: var(
437
- --_ctm-mob-dn-ct-pe-im-se-in-se,
438
- var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
439
- );
440
- height: var(
441
- --_ctm-mob-dn-ct-pe-im-se-in-se,
442
- var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
443
- );
444
- path {
445
- stroke: var(
446
- --_ctm-mob-dn-ct-pe-im-se-in-c1,
447
- var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
448
- );
449
- // Overrides the stroke-width presentation attribute baked into the icon markup.
450
- stroke-width: prepareMediaVariable(--_ctm-dn-ct-pe-im-se-se-wh, 1.25);
451
- }
452
- }
453
- }
454
- }
455
- }
456
- }
457
- .vertical_breadcrumb_wrapper {
458
- display: flex;
459
- align-items: flex-start;
460
- flex-direction: column;
461
- height: 120px;
462
-
463
- // Background & Fill's border and shadow are painted once, on .wrapper above,
464
- // which encloses both the horizontal and the vertical trail. They used to be
465
- // repeated here as well, so the vertical layout drew the section's border and
466
- // shadow twice — once around the whole widget and again around the inner list.
467
- background-color: var(
468
- --_ctm-mob-dn-bd-ad-fl-bd-cr,
469
- var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
470
- );
471
- padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
472
-
473
- &[overflow-item="Scroll"],
474
- &[overflow-item="Show More"],
475
- &[overflow-item="Collapsed"] {
476
- overflow-y: auto;
477
- gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
478
- }
479
-
480
- &[overflow-item="Wrap"] {
481
- flex-wrap: wrap;
482
- row-gap: var(
483
- --_ctm-mob-lt-im-vl-sg,
484
- var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
485
- );
486
- column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
487
- }
488
-
489
- .item_wrapper {
490
- display: flex;
491
- gap: 6px;
492
-
493
- &:first-of-type {
494
- .breadcrumb_item {
495
- padding: 0px 4px;
496
- display: flex;
497
- gap: 8px;
498
- white-space: nowrap;
499
- align-items: center;
500
-
501
- background-color: var(
502
- --_ctm-mob-dn-he-pe-im-se-bd-cr,
503
- var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
504
- );
505
- border-color: var(
506
- --_ctm-mob-dn-he-pe-im-se-br-cr,
507
- var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
508
- );
509
- border-radius: var(
510
- --_ctm-mob-dn-he-pe-im-se-br-rs,
511
- var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
512
- );
513
- border-style: var(
514
- --_ctm-mob-dn-he-pe-im-se-br-se,
515
- var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
516
- );
517
- border-width: var(
518
- --_ctm-mob-dn-he-pe-im-se-br-wh,
519
- var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
520
- );
521
- color: var(
522
- --_ctm-mob-dn-he-pe-im-se-cr,
523
- var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
524
- );
525
- font-family: var(
526
- --_ctm-mob-dn-he-pe-im-se-ft-fy,
527
- var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
528
- );
529
- &.flex__overflow {
530
- white-space: normal;
531
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
532
- }
533
- font-size: var(
534
- --_ctm-mob-dn-he-pe-im-se-ft-se,
535
- var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
536
- );
537
- font-style: var(
538
- --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
539
- var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
540
- );
541
- font-weight: var(
542
- --_ctm-mob-dn-he-pe-im-se-ft-wt,
543
- var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
544
- );
545
- line-height: var(
546
- --_ctm-mob-dn-he-pe-im-se-le-ht,
547
- var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
548
- );
549
- letter-spacing: var(
550
- --_ctm-mob-dn-he-pe-im-se-lr-sg,
551
- var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
552
- );
553
- text-align: var(
554
- --_ctm-mob-dn-he-pe-im-se-tt-an,
555
- var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
556
- );
557
- text-decoration: var(
558
- --_ctm-mob-dn-he-pe-im-se-ue,
559
- var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
560
- );
561
- text-transform: var(
562
- --_ctm-mob-dn-he-pe-im-se-tt-tm,
563
- var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
564
- );
565
- word-wrap: var(
566
- --_ctm-mob-dn-he-pe-im-se-wd-wp,
567
- var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
568
- );
569
- word-break: var(
570
- --_ctm-mob-dn-he-pe-im-se-wd-bk,
571
- var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
572
- );
573
- box-shadow: var(
574
- --_ctm-mob-dn-he-pe-im-se-sw-ae,
575
- var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
576
- )
577
- var(
578
- --_ctm-mob-dn-he-pe-im-se-sw-br,
579
- var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
580
- )
581
- var(
582
- --_ctm-mob-dn-he-pe-im-se-sw-sd,
583
- var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
584
- )
585
- var(
586
- --_ctm-mob-dn-he-pe-im-se-sw-cr,
587
- var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
588
- );
589
-
590
- .icon {
591
- svg {
592
- width: var(
593
- --_ctm-mob-dn-he-pe-im-se-in-se,
594
- var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
595
- );
596
- height: var(
597
- --_ctm-mob-dn-he-pe-im-se-in-se,
598
- var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
599
- );
600
- path {
601
- stroke: var(
602
- --_ctm-mob-dn-he-pe-im-se-in-c1,
603
- var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
604
- );
605
- // Overrides the stroke-width presentation attribute baked into the icon markup.
606
- stroke-width: prepareMediaVariable(--_ctm-dn-he-pe-im-se-se-wh, 1.25);
607
- }
608
- }
609
- }
610
- }
611
- }
612
-
613
- .breadcrumb_item {
614
- padding: 0px 4px;
615
- display: flex;
616
- gap: 8px;
617
- white-space: nowrap;
618
- align-items: center;
619
-
620
- background-color: var(
621
- --_ctm-mob-dn-or-im-se-bd-cr,
622
- var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
623
- );
624
- border-color: var(
625
- --_ctm-mob-dn-or-im-se-br-cr,
626
- var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
627
- );
628
- border-radius: var(
629
- --_ctm-mob-dn-or-im-se-br-rs,
630
- var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
631
- );
632
- border-style: var(
633
- --_ctm-mob-dn-or-im-se-br-se,
634
- var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
635
- );
636
- border-width: var(
637
- --_ctm-mob-dn-or-im-se-br-wh,
638
- var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
639
- );
640
- color: var(
641
- --_ctm-mob-dn-or-im-se-cr,
642
- var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
643
- );
644
- font-family: var(
645
- --_ctm-mob-dn-or-im-se-ft-fy,
646
- var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
647
- );
648
- &.flex__overflow {
649
- white-space: normal;
650
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
651
- }
652
- font-size: var(
653
- --_ctm-mob-dn-or-im-se-ft-se,
654
- var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
655
- );
656
- font-style: var(
657
- --_ctm-mob-dn-or-im-se-ft-se-ic,
658
- var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
659
- );
660
- font-weight: var(
661
- --_ctm-mob-dn-or-im-se-ft-wt,
662
- var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
663
- );
664
- line-height: var(
665
- --_ctm-mob-dn-or-im-se-le-ht,
666
- var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
667
- );
668
- letter-spacing: var(
669
- --_ctm-mob-dn-or-im-se-lr-sg,
670
- var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
671
- );
672
- text-align: var(
673
- --_ctm-mob-dn-or-im-se-tt-an,
674
- var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
675
- );
676
- text-decoration: var(
677
- --_ctm-mob-dn-or-im-se-ue,
678
- var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
679
- );
680
- text-transform: var(
681
- --_ctm-mob-dn-or-im-se-tt-tm,
682
- var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
683
- );
684
- word-wrap: var(
685
- --_ctm-mob-dn-or-im-se-wd-wp,
686
- var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
687
- );
688
- word-break: var(
689
- --_ctm-mob-dn-or-im-se-wd-bk,
690
- var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
691
- );
692
- box-shadow: var(
693
- --_ctm-mob-dn-or-im-se-sw-ae,
694
- var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
695
- )
696
- var(
697
- --_ctm-mob-dn-or-im-se-sw-br,
698
- var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
699
- )
700
- var(
701
- --_ctm-mob-dn-or-im-se-sw-sd,
702
- var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
703
- )
704
- var(
705
- --_ctm-mob-dn-or-im-se-sw-cr,
706
- var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
707
- );
708
-
709
- .icon {
710
- svg {
711
- width: var(
712
- --_ctm-mob-dn-or-im-se-in-se,
713
- var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
714
- );
715
- height: var(
716
- --_ctm-mob-dn-or-im-se-in-se,
717
- var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
718
- );
719
- path {
720
- stroke: var(
721
- --_ctm-mob-dn-or-im-se-in-c1,
722
- var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
723
- );
724
- // Overrides the stroke-width presentation attribute baked into the icon markup.
725
- stroke-width: prepareMediaVariable(--_ctm-dn-or-im-se-se-wh, 1.25);
726
- }
727
- }
728
- }
729
- }
730
-
731
- &:last-of-type {
732
- .breadcrumb_item {
733
- padding: 0px 4px;
734
- display: flex;
735
- gap: 8px;
736
- white-space: nowrap;
737
- align-items: center;
738
-
739
- background-color: var(
740
- --_ctm-mob-dn-ct-pe-im-se-bd-cr,
741
- var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
742
- );
743
- border-color: var(
744
- --_ctm-mob-dn-ct-pe-im-se-br-cr,
745
- var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
746
- );
747
- border-radius: var(
748
- --_ctm-mob-dn-ct-pe-im-se-br-rs,
749
- var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
750
- );
751
- border-style: var(
752
- --_ctm-mob-dn-ct-pe-im-se-br-se,
753
- var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
754
- );
755
- border-width: var(
756
- --_ctm-mob-dn-ct-pe-im-se-br-wh,
757
- var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
758
- );
759
- color: var(
760
- --_ctm-mob-dn-ct-pe-im-se-cr,
761
- var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
762
- );
763
- font-family: var(
764
- --_ctm-mob-dn-ct-pe-im-se-ft-fy,
765
- var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
766
- );
767
- &.flex__overflow {
768
- white-space: normal;
769
- @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
770
- }
771
- font-size: var(
772
- --_ctm-mob-dn-ct-pe-im-se-ft-se,
773
- var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
774
- );
775
- font-style: var(
776
- --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
777
- var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
778
- );
779
- font-weight: var(
780
- --_ctm-mob-dn-ct-pe-im-se-ft-wt,
781
- var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
782
- );
783
- line-height: var(
784
- --_ctm-mob-dn-ct-pe-im-se-le-ht,
785
- var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
786
- );
787
- letter-spacing: var(
788
- --_ctm-mob-dn-ct-pe-im-se-lr-sg,
789
- var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
790
- );
791
- text-align: var(
792
- --_ctm-mob-dn-ct-pe-im-se-tt-an,
793
- var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
794
- );
795
- text-decoration: var(
796
- --_ctm-mob-dn-ct-pe-im-se-ue,
797
- var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
798
- );
799
- text-transform: var(
800
- --_ctm-mob-dn-ct-pe-im-se-tt-tm,
801
- var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
802
- );
803
- word-wrap: var(
804
- --_ctm-mob-dn-ct-pe-im-se-wd-wp,
805
- var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
806
- );
807
- word-break: var(
808
- --_ctm-mob-dn-ct-pe-im-se-wd-bk,
809
- var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
810
- );
811
- box-shadow: var(
812
- --_ctm-mob-dn-ct-pe-im-se-sw-ae,
813
- var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
814
- )
815
- var(
816
- --_ctm-mob-dn-ct-pe-im-se-sw-sd,
817
- var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
818
- )
819
- var(
820
- --_ctm-mob-dn-he-pe-im-se-sw-sd,
821
- var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
822
- )
823
- var(
824
- --_ctm-mob-dn-ct-pe-im-se-sw-cr,
825
- var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
826
- );
827
-
828
- .icon {
829
- svg {
830
- width: var(
831
- --_ctm-mob-dn-ct-pe-im-se-in-se,
832
- var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
833
- );
834
- height: var(
835
- --_ctm-mob-dn-ct-pe-im-se-in-se,
836
- var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
837
- );
838
- path {
839
- stroke: var(
840
- --_ctm-mob-dn-ct-pe-im-se-in-c1,
841
- var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
842
- );
843
- // Overrides the stroke-width presentation attribute baked into the icon markup.
844
- stroke-width: prepareMediaVariable(--_ctm-dn-ct-pe-im-se-se-wh, 1.25);
845
- }
846
- }
847
- }
848
- }
849
- }
850
- }
851
- }
852
-
853
- .separator {
854
- .icon {
855
- display: flex;
856
- svg {
857
- width: var(
858
- --_ctm-mob-dn-im-sr-in-se,
859
- var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
860
- );
861
- height: var(
862
- --_ctm-mob-dn-im-sr-in-se,
863
- var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
864
- );
865
- path {
866
- stroke: var(
867
- --_ctm-mob-dn-im-sr-in-c1,
868
- var(--_ctm-tab-dn-im-sr-in-c1, var(--_ctm-dn-im-sr-in-c1))
869
- );
870
- // Overrides the stroke-width presentation attribute baked into the icon markup.
871
- stroke-width: prepareMediaVariable(--_ctm-dn-im-sr-se-wh, 1.25);
872
- }
873
- }
874
- }
875
- }
876
-
877
- // The Collapsed layout's expand/collapse toggle had no rules at all, so the Expand
878
- // Icon design section had nothing to paint and the toggle rendered as an unsized,
879
- // uncoloured, non-clickable box. It takes the same `ed-in` (expand icon) variables
880
- // the Show More button already uses.
881
- .collapse_btn,
882
- .show_more_btn {
883
- white-space: nowrap;
884
- background-color: var(
885
- --_ctm-mob-dn-ed-in-bd-cr,
886
- var(--_ctm-tab-dn-ed-in-bd-cr, var(--_ctm-dn-ed-in-bd-cr))
887
- );
888
- .icon {
889
- display: flex;
890
- svg {
891
- width: var(
892
- --_ctm-mob-dn-ed-in-in-se,
893
- var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
894
- );
895
- height: var(
896
- --_ctm-mob-dn-ed-in-in-se,
897
- var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
898
- );
899
- path {
900
- stroke: var(
901
- --_ctm-mob-dn-ed-in-in-c1,
902
- var(--_ctm-tab-dn-ed-in-in-c1, var(--_ctm-dn-ed-in-in-c1))
903
- );
904
- // Overrides the stroke-width presentation attribute baked into the icon markup.
905
- stroke-width: prepareMediaVariable(--_ctm-dn-ed-in-se-wh, 1.25);
906
- }
907
- }
908
- }
909
- }
910
-
911
- .collapse_btn {
912
- display: flex;
913
- align-items: center;
914
- flex-shrink: 0;
915
- cursor: pointer;
916
- }
917
- }
918
-
919
- // "Show Border" switches. Each design section paints its border from CSS variables,
920
- // so the switch reaches the stylesheet as a data attribute and the matching
921
- // border-width is zeroed here. Kept at the end of the block and matched to the same
922
- // selector depth as the rules above — anywhere earlier and the section rules would
923
- // win the tie on source order. The item gates carry :not(:first-of-type)
924
- // /:not(:last-of-type) so switching "Other Item Style" off doesn't also strip the
925
- // home and current items, which have their own borders and their own switches.
926
- // Background & Fill's border lives on .wrapper, which is where both trail layouts
927
- // now take it from — so the switch has to target that, not the inner trail wrappers.
928
- &[data-trail-border="false"] > div.wrapper {
929
- border-width: 0;
930
- border-style: none;
931
- }
932
- &[data-other-border="false"]
933
- > div
934
- .horizontal_breadcrumb_wrapper
935
- .breadcrumb_item:not(:first-of-type):not(:last-of-type),
936
- &[data-other-border="false"]
937
- > div
938
- .vertical_breadcrumb_wrapper
939
- .item_wrapper:not(:first-of-type):not(:last-of-type)
940
- .breadcrumb_item {
941
- border-width: 0;
942
- border-style: none;
943
- }
944
- &[data-home-border="false"] > div .horizontal_breadcrumb_wrapper .breadcrumb_item:first-of-type,
945
- &[data-home-border="false"]
946
- > div
947
- .vertical_breadcrumb_wrapper
948
- .item_wrapper:first-of-type
949
- .breadcrumb_item {
950
- border-width: 0;
951
- border-style: none;
952
- }
953
- &[data-current-border="false"]
954
- > div
955
- .horizontal_breadcrumb_wrapper
956
- .breadcrumb_item:last-of-type,
957
- &[data-current-border="false"]
958
- > div
959
- .vertical_breadcrumb_wrapper
960
- .item_wrapper:last-of-type
961
- .breadcrumb_item {
962
- border-width: 0;
963
- border-style: none;
964
- }
965
- }
966
- }
1
+ @use "./functions.scss" as *;
2
+ @use "sass:map";
3
+ @use "sass:list";
4
+
5
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
6
+ $resizeActive: '[data-cms-element-resizer="true"]';
7
+ [data-div-type="element"] {
8
+ &[data-element-type="breadcrumbs"] {
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ min-width: 200px !important;
20
+
21
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
22
+
23
+ & > div {
24
+ &.wrapper {
25
+ min-width: 200px !important;
26
+ width: 100%;
27
+ background-color: var(
28
+ --_ctm-mob-dn-bd-ad-fl-bd-cr,
29
+ var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
30
+ );
31
+ border-style: var(
32
+ --_ctm-mob-dn-bd-ad-fl-br-se,
33
+ var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
34
+ );
35
+ border-width: var(
36
+ --_ctm-mob-dn-bd-ad-fl-br-wh,
37
+ var(--_ctm-tab-dn-bd-ad-fl-br-wh, var(--_ctm-dn-bd-ad-fl-br-wh))
38
+ );
39
+ border-color: var(
40
+ --_ctm-mob-dn-bd-ad-fl-br-cr,
41
+ var(--_ctm-tab-dn-bd-ad-fl-br-cr, var(--_ctm-dn-bd-ad-fl-br-cr))
42
+ );
43
+ border-radius: var(
44
+ --_ctm-mob-dn-bd-ad-fl-br-rs,
45
+ var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
46
+ );
47
+
48
+ box-shadow: var(
49
+ --_show-shadow,
50
+ var(
51
+ --_ctm-mob-dn-bd-ad-fl-sw-ae,
52
+ var(--_ctm-tab-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
53
+ )
54
+ var(
55
+ --_ctm-mob-dn-bd-ad-fl-sw-br,
56
+ var(--_ctm-tab-dn-bd-ad-fl-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
57
+ )
58
+ var(
59
+ --_ctm-mob-dn-bd-ad-fl-sw-sd,
60
+ var(--_ctm-tab-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
61
+ )
62
+ var(
63
+ --_ctm-mob-dn-bd-ad-fl-sw-cr,
64
+ var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
65
+ )
66
+ );
67
+ }
68
+
69
+ .breadcrumb_item {
70
+ &[data-show-cursor="true"] {
71
+ cursor: pointer;
72
+ }
73
+ }
74
+
75
+ .horizontal_breadcrumb_wrapper {
76
+ display: inline-flex;
77
+ align-items: center;
78
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
79
+
80
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
81
+
82
+ &[overflow-item="Scroll"],
83
+ &[overflow-item="Show More"],
84
+ &[overflow-item="Collapsed"] {
85
+ overflow-x: auto;
86
+ width: inherit;
87
+ }
88
+
89
+ &[overflow-item="Wrap"] {
90
+ flex-wrap: wrap;
91
+ row-gap: var(
92
+ --_ctm-mob-lt-im-vl-sg,
93
+ var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
94
+ );
95
+ column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
96
+ }
97
+
98
+ .breadcrumb_item {
99
+ padding: 0px 4px;
100
+ display: flex;
101
+ gap: 8px;
102
+ white-space: nowrap;
103
+ align-items: center;
104
+
105
+ padding: var(
106
+ --_ctm-mob-dn-or-im-se-pg,
107
+ var(--_ctm-tab-dn-or-im-se-pg, var(--_ctm-dn-or-im-se-pg))
108
+ );
109
+ gap: var(
110
+ --_ctm-mob-dn-or-im-se-im-gp,
111
+ var(--_ctm-tab-dn-or-im-se-im-gp, var(--_ctm-dn-or-im-se-im-gp))
112
+ );
113
+
114
+ background-color: var(
115
+ --_ctm-mob-dn-or-im-se-bd-cr,
116
+ var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
117
+ );
118
+ border-color: var(
119
+ --_ctm-mob-dn-or-im-se-br-cr,
120
+ var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
121
+ );
122
+ border-radius: var(
123
+ --_ctm-mob-dn-or-im-se-br-rs,
124
+ var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
125
+ );
126
+ border-style: var(
127
+ --_ctm-mob-dn-or-im-se-br-se,
128
+ var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
129
+ );
130
+ border-width: var(
131
+ --_ctm-mob-dn-or-im-se-br-wh,
132
+ var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
133
+ );
134
+ color: var(
135
+ --_ctm-mob-dn-or-im-se-cr,
136
+ var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
137
+ );
138
+ font-family: var(
139
+ --_ctm-mob-dn-or-im-se-ft-fy,
140
+ var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
141
+ );
142
+ &.flex__overflow {
143
+ white-space: normal;
144
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
145
+ }
146
+ font-size: var(
147
+ --_ctm-mob-dn-or-im-se-ft-se,
148
+ var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
149
+ );
150
+ font-style: var(
151
+ --_ctm-mob-dn-or-im-se-ft-se-ic,
152
+ var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
153
+ );
154
+ font-weight: var(
155
+ --_ctm-mob-dn-or-im-se-ft-wt,
156
+ var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
157
+ );
158
+ line-height: var(
159
+ --_ctm-mob-dn-or-im-se-le-ht,
160
+ var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
161
+ );
162
+ letter-spacing: var(
163
+ --_ctm-mob-dn-or-im-se-lr-sg,
164
+ var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
165
+ );
166
+ text-align: var(
167
+ --_ctm-mob-dn-or-im-se-tt-an,
168
+ var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
169
+ );
170
+ text-decoration: var(
171
+ --_ctm-mob-dn-or-im-se-ue,
172
+ var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
173
+ );
174
+ text-transform: var(
175
+ --_ctm-mob-dn-or-im-se-tt-tm,
176
+ var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
177
+ );
178
+ word-wrap: var(
179
+ --_ctm-mob-dn-or-im-se-wd-wp,
180
+ var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
181
+ );
182
+ word-break: var(
183
+ --_ctm-mob-dn-or-im-se-wd-bk,
184
+ var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
185
+ );
186
+ box-shadow: var(
187
+ --_ctm-mob-dn-or-im-se-sw-ae,
188
+ var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
189
+ )
190
+ var(
191
+ --_ctm-mob-dn-or-im-se-sw-br,
192
+ var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
193
+ )
194
+ var(
195
+ --_ctm-mob-dn-or-im-se-sw-sd,
196
+ var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
197
+ )
198
+ var(
199
+ --_ctm-mob-dn-or-im-se-sw-cr,
200
+ var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
201
+ );
202
+
203
+ .icon {
204
+ svg {
205
+ width: var(
206
+ --_ctm-mob-dn-or-im-se-in-se,
207
+ var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
208
+ );
209
+ height: var(
210
+ --_ctm-mob-dn-or-im-se-in-se,
211
+ var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
212
+ );
213
+ path {
214
+ stroke: var(
215
+ --_ctm-mob-dn-or-im-se-in-c1,
216
+ var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
217
+ );
218
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
219
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-im-se-se-wh, 1.25);
220
+ }
221
+ }
222
+ }
223
+
224
+ &:first-of-type {
225
+ padding: var(
226
+ --_ctm-mob-dn-he-pe-im-se-pg,
227
+ var(--_ctm-tab-dn-he-pe-im-se-pg, var(--_ctm-dn-he-pe-im-se-pg))
228
+ );
229
+ gap: var(
230
+ --_ctm-mob-dn-he-pe-im-se-im-gp,
231
+ var(--_ctm-tab-dn-he-pe-im-se-im-gp, var(--_ctm-dn-he-pe-im-se-im-gp))
232
+ );
233
+ background-color: var(
234
+ --_ctm-mob-dn-he-pe-im-se-bd-cr,
235
+ var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
236
+ );
237
+ border-color: var(
238
+ --_ctm-mob-dn-he-pe-im-se-br-cr,
239
+ var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
240
+ );
241
+ border-radius: var(
242
+ --_ctm-mob-dn-he-pe-im-se-br-rs,
243
+ var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
244
+ );
245
+ border-style: var(
246
+ --_ctm-mob-dn-he-pe-im-se-br-se,
247
+ var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
248
+ );
249
+ border-width: var(
250
+ --_ctm-mob-dn-he-pe-im-se-br-wh,
251
+ var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
252
+ );
253
+ color: var(
254
+ --_ctm-mob-dn-he-pe-im-se-cr,
255
+ var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
256
+ );
257
+ font-family: var(
258
+ --_ctm-mob-dn-he-pe-im-se-ft-fy,
259
+ var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
260
+ );
261
+ font-size: var(
262
+ --_ctm-mob-dn-he-pe-im-se-ft-se,
263
+ var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
264
+ );
265
+ font-style: var(
266
+ --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
267
+ var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
268
+ );
269
+ font-weight: var(
270
+ --_ctm-mob-dn-he-pe-im-se-ft-wt,
271
+ var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
272
+ );
273
+ line-height: var(
274
+ --_ctm-mob-dn-he-pe-im-se-le-ht,
275
+ var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
276
+ );
277
+ letter-spacing: var(
278
+ --_ctm-mob-dn-he-pe-im-se-lr-sg,
279
+ var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
280
+ );
281
+ text-align: var(
282
+ --_ctm-mob-dn-he-pe-im-se-tt-an,
283
+ var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
284
+ );
285
+ text-decoration: var(
286
+ --_ctm-mob-dn-he-pe-im-se-ue,
287
+ var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
288
+ );
289
+ text-transform: var(
290
+ --_ctm-mob-dn-he-pe-im-se-tt-tm,
291
+ var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
292
+ );
293
+ word-wrap: var(
294
+ --_ctm-mob-dn-he-pe-im-se-wd-wp,
295
+ var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
296
+ );
297
+ word-break: var(
298
+ --_ctm-mob-dn-he-pe-im-se-wd-bk,
299
+ var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
300
+ );
301
+ box-shadow: var(
302
+ --_ctm-mob-dn-he-pe-im-se-sw-ae,
303
+ var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
304
+ )
305
+ var(
306
+ --_ctm-mob-dn-he-pe-im-se-sw-br,
307
+ var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
308
+ )
309
+ var(
310
+ --_ctm-mob-dn-he-pe-im-se-sw-sd,
311
+ var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
312
+ )
313
+ var(
314
+ --_ctm-mob-dn-he-pe-im-se-sw-cr,
315
+ var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
316
+ );
317
+
318
+ .icon {
319
+ svg {
320
+ width: var(
321
+ --_ctm-mob-dn-he-pe-im-se-in-se,
322
+ var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
323
+ );
324
+ height: var(
325
+ --_ctm-mob-dn-he-pe-im-se-in-se,
326
+ var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
327
+ );
328
+ path {
329
+ stroke: var(
330
+ --_ctm-mob-dn-he-pe-im-se-in-c1,
331
+ var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
332
+ );
333
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
334
+ stroke-width: prepareMediaVariable(--_ctm-dn-he-pe-im-se-se-wh, 1.25);
335
+ }
336
+ }
337
+ }
338
+ }
339
+
340
+ &:last-of-type {
341
+ padding: var(
342
+ --_ctm-mob-dn-ct-pe-im-se-pg,
343
+ var(--_ctm-tab-dn-ct-pe-im-se-pg, var(--_ctm-dn-ct-pe-im-se-pg))
344
+ );
345
+ gap: var(
346
+ --_ctm-mob-dn-ct-pe-im-se-im-gp,
347
+ var(--_ctm-tab-dn-ct-pe-im-se-im-gp, var(--_ctm-dn-ct-pe-im-se-im-gp))
348
+ );
349
+ background-color: var(
350
+ --_ctm-mob-dn-ct-pe-im-se-bd-cr,
351
+ var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
352
+ );
353
+ border-color: var(
354
+ --_ctm-mob-dn-ct-pe-im-se-br-cr,
355
+ var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
356
+ );
357
+ border-radius: var(
358
+ --_ctm-mob-dn-ct-pe-im-se-br-rs,
359
+ var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
360
+ );
361
+ border-style: var(
362
+ --_ctm-mob-dn-ct-pe-im-se-br-se,
363
+ var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
364
+ );
365
+ border-width: var(
366
+ --_ctm-mob-dn-ct-pe-im-se-br-wh,
367
+ var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
368
+ );
369
+ color: var(
370
+ --_ctm-mob-dn-ct-pe-im-se-cr,
371
+ var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
372
+ );
373
+ font-family: var(
374
+ --_ctm-mob-dn-ct-pe-im-se-ft-fy,
375
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
376
+ );
377
+ font-size: var(
378
+ --_ctm-mob-dn-ct-pe-im-se-ft-se,
379
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
380
+ );
381
+ font-style: var(
382
+ --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
383
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
384
+ );
385
+ font-weight: var(
386
+ --_ctm-mob-dn-ct-pe-im-se-ft-wt,
387
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
388
+ );
389
+ line-height: var(
390
+ --_ctm-mob-dn-ct-pe-im-se-le-ht,
391
+ var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
392
+ );
393
+ letter-spacing: var(
394
+ --_ctm-mob-dn-ct-pe-im-se-lr-sg,
395
+ var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
396
+ );
397
+ text-align: var(
398
+ --_ctm-mob-dn-ct-pe-im-se-tt-an,
399
+ var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
400
+ );
401
+ text-decoration: var(
402
+ --_ctm-mob-dn-ct-pe-im-se-ue,
403
+ var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
404
+ );
405
+ text-transform: var(
406
+ --_ctm-mob-dn-ct-pe-im-se-tt-tm,
407
+ var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
408
+ );
409
+ word-wrap: var(
410
+ --_ctm-mob-dn-ct-pe-im-se-wd-wp,
411
+ var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
412
+ );
413
+ word-break: var(
414
+ --_ctm-mob-dn-ct-pe-im-se-wd-bk,
415
+ var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
416
+ );
417
+ box-shadow: var(
418
+ --_ctm-mob-dn-ct-pe-im-se-sw-ae,
419
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
420
+ )
421
+ var(
422
+ --_ctm-mob-dn-ct-pe-im-se-sw-sd,
423
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
424
+ )
425
+ var(
426
+ --_ctm-mob-dn-he-pe-im-se-sw-sd,
427
+ var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
428
+ )
429
+ var(
430
+ --_ctm-mob-dn-ct-pe-im-se-sw-cr,
431
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
432
+ );
433
+
434
+ .icon {
435
+ svg {
436
+ width: var(
437
+ --_ctm-mob-dn-ct-pe-im-se-in-se,
438
+ var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
439
+ );
440
+ height: var(
441
+ --_ctm-mob-dn-ct-pe-im-se-in-se,
442
+ var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
443
+ );
444
+ path {
445
+ stroke: var(
446
+ --_ctm-mob-dn-ct-pe-im-se-in-c1,
447
+ var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
448
+ );
449
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
450
+ stroke-width: prepareMediaVariable(--_ctm-dn-ct-pe-im-se-se-wh, 1.25);
451
+ }
452
+ }
453
+ }
454
+ }
455
+ }
456
+ }
457
+ .vertical_breadcrumb_wrapper {
458
+ display: flex;
459
+ align-items: flex-start;
460
+ flex-direction: column;
461
+ height: 120px;
462
+
463
+ // Background & Fill's border and shadow are painted once, on .wrapper above,
464
+ // which encloses both the horizontal and the vertical trail. They used to be
465
+ // repeated here as well, so the vertical layout drew the section's border and
466
+ // shadow twice — once around the whole widget and again around the inner list.
467
+ background-color: var(
468
+ --_ctm-mob-dn-bd-ad-fl-bd-cr,
469
+ var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
470
+ );
471
+ padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
472
+
473
+ &[overflow-item="Scroll"],
474
+ &[overflow-item="Show More"],
475
+ &[overflow-item="Collapsed"] {
476
+ overflow-y: auto;
477
+ gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
478
+ }
479
+
480
+ &[overflow-item="Wrap"] {
481
+ flex-wrap: wrap;
482
+ row-gap: var(
483
+ --_ctm-mob-lt-im-vl-sg,
484
+ var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
485
+ );
486
+ column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
487
+ }
488
+
489
+ .item_wrapper {
490
+ display: flex;
491
+ gap: 6px;
492
+
493
+ &:first-of-type {
494
+ .breadcrumb_item {
495
+ padding: 0px 4px;
496
+ display: flex;
497
+ gap: 8px;
498
+ white-space: nowrap;
499
+ align-items: center;
500
+
501
+ background-color: var(
502
+ --_ctm-mob-dn-he-pe-im-se-bd-cr,
503
+ var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
504
+ );
505
+ border-color: var(
506
+ --_ctm-mob-dn-he-pe-im-se-br-cr,
507
+ var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
508
+ );
509
+ border-radius: var(
510
+ --_ctm-mob-dn-he-pe-im-se-br-rs,
511
+ var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
512
+ );
513
+ border-style: var(
514
+ --_ctm-mob-dn-he-pe-im-se-br-se,
515
+ var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
516
+ );
517
+ border-width: var(
518
+ --_ctm-mob-dn-he-pe-im-se-br-wh,
519
+ var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
520
+ );
521
+ color: var(
522
+ --_ctm-mob-dn-he-pe-im-se-cr,
523
+ var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
524
+ );
525
+ font-family: var(
526
+ --_ctm-mob-dn-he-pe-im-se-ft-fy,
527
+ var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
528
+ );
529
+ &.flex__overflow {
530
+ white-space: normal;
531
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
532
+ }
533
+ font-size: var(
534
+ --_ctm-mob-dn-he-pe-im-se-ft-se,
535
+ var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
536
+ );
537
+ font-style: var(
538
+ --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
539
+ var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
540
+ );
541
+ font-weight: var(
542
+ --_ctm-mob-dn-he-pe-im-se-ft-wt,
543
+ var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
544
+ );
545
+ line-height: var(
546
+ --_ctm-mob-dn-he-pe-im-se-le-ht,
547
+ var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
548
+ );
549
+ letter-spacing: var(
550
+ --_ctm-mob-dn-he-pe-im-se-lr-sg,
551
+ var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
552
+ );
553
+ text-align: var(
554
+ --_ctm-mob-dn-he-pe-im-se-tt-an,
555
+ var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
556
+ );
557
+ text-decoration: var(
558
+ --_ctm-mob-dn-he-pe-im-se-ue,
559
+ var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
560
+ );
561
+ text-transform: var(
562
+ --_ctm-mob-dn-he-pe-im-se-tt-tm,
563
+ var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
564
+ );
565
+ word-wrap: var(
566
+ --_ctm-mob-dn-he-pe-im-se-wd-wp,
567
+ var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
568
+ );
569
+ word-break: var(
570
+ --_ctm-mob-dn-he-pe-im-se-wd-bk,
571
+ var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
572
+ );
573
+ box-shadow: var(
574
+ --_ctm-mob-dn-he-pe-im-se-sw-ae,
575
+ var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
576
+ )
577
+ var(
578
+ --_ctm-mob-dn-he-pe-im-se-sw-br,
579
+ var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
580
+ )
581
+ var(
582
+ --_ctm-mob-dn-he-pe-im-se-sw-sd,
583
+ var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
584
+ )
585
+ var(
586
+ --_ctm-mob-dn-he-pe-im-se-sw-cr,
587
+ var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
588
+ );
589
+
590
+ .icon {
591
+ svg {
592
+ width: var(
593
+ --_ctm-mob-dn-he-pe-im-se-in-se,
594
+ var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
595
+ );
596
+ height: var(
597
+ --_ctm-mob-dn-he-pe-im-se-in-se,
598
+ var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
599
+ );
600
+ path {
601
+ stroke: var(
602
+ --_ctm-mob-dn-he-pe-im-se-in-c1,
603
+ var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
604
+ );
605
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
606
+ stroke-width: prepareMediaVariable(--_ctm-dn-he-pe-im-se-se-wh, 1.25);
607
+ }
608
+ }
609
+ }
610
+ }
611
+ }
612
+
613
+ .breadcrumb_item {
614
+ padding: 0px 4px;
615
+ display: flex;
616
+ gap: 8px;
617
+ white-space: nowrap;
618
+ align-items: center;
619
+
620
+ background-color: var(
621
+ --_ctm-mob-dn-or-im-se-bd-cr,
622
+ var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
623
+ );
624
+ border-color: var(
625
+ --_ctm-mob-dn-or-im-se-br-cr,
626
+ var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
627
+ );
628
+ border-radius: var(
629
+ --_ctm-mob-dn-or-im-se-br-rs,
630
+ var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
631
+ );
632
+ border-style: var(
633
+ --_ctm-mob-dn-or-im-se-br-se,
634
+ var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
635
+ );
636
+ border-width: var(
637
+ --_ctm-mob-dn-or-im-se-br-wh,
638
+ var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
639
+ );
640
+ color: var(
641
+ --_ctm-mob-dn-or-im-se-cr,
642
+ var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
643
+ );
644
+ font-family: var(
645
+ --_ctm-mob-dn-or-im-se-ft-fy,
646
+ var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
647
+ );
648
+ &.flex__overflow {
649
+ white-space: normal;
650
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
651
+ }
652
+ font-size: var(
653
+ --_ctm-mob-dn-or-im-se-ft-se,
654
+ var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
655
+ );
656
+ font-style: var(
657
+ --_ctm-mob-dn-or-im-se-ft-se-ic,
658
+ var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
659
+ );
660
+ font-weight: var(
661
+ --_ctm-mob-dn-or-im-se-ft-wt,
662
+ var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
663
+ );
664
+ line-height: var(
665
+ --_ctm-mob-dn-or-im-se-le-ht,
666
+ var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
667
+ );
668
+ letter-spacing: var(
669
+ --_ctm-mob-dn-or-im-se-lr-sg,
670
+ var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
671
+ );
672
+ text-align: var(
673
+ --_ctm-mob-dn-or-im-se-tt-an,
674
+ var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
675
+ );
676
+ text-decoration: var(
677
+ --_ctm-mob-dn-or-im-se-ue,
678
+ var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
679
+ );
680
+ text-transform: var(
681
+ --_ctm-mob-dn-or-im-se-tt-tm,
682
+ var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
683
+ );
684
+ word-wrap: var(
685
+ --_ctm-mob-dn-or-im-se-wd-wp,
686
+ var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
687
+ );
688
+ word-break: var(
689
+ --_ctm-mob-dn-or-im-se-wd-bk,
690
+ var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
691
+ );
692
+ box-shadow: var(
693
+ --_ctm-mob-dn-or-im-se-sw-ae,
694
+ var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
695
+ )
696
+ var(
697
+ --_ctm-mob-dn-or-im-se-sw-br,
698
+ var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
699
+ )
700
+ var(
701
+ --_ctm-mob-dn-or-im-se-sw-sd,
702
+ var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
703
+ )
704
+ var(
705
+ --_ctm-mob-dn-or-im-se-sw-cr,
706
+ var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
707
+ );
708
+
709
+ .icon {
710
+ svg {
711
+ width: var(
712
+ --_ctm-mob-dn-or-im-se-in-se,
713
+ var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
714
+ );
715
+ height: var(
716
+ --_ctm-mob-dn-or-im-se-in-se,
717
+ var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
718
+ );
719
+ path {
720
+ stroke: var(
721
+ --_ctm-mob-dn-or-im-se-in-c1,
722
+ var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
723
+ );
724
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
725
+ stroke-width: prepareMediaVariable(--_ctm-dn-or-im-se-se-wh, 1.25);
726
+ }
727
+ }
728
+ }
729
+ }
730
+
731
+ &:last-of-type {
732
+ .breadcrumb_item {
733
+ padding: 0px 4px;
734
+ display: flex;
735
+ gap: 8px;
736
+ white-space: nowrap;
737
+ align-items: center;
738
+
739
+ background-color: var(
740
+ --_ctm-mob-dn-ct-pe-im-se-bd-cr,
741
+ var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
742
+ );
743
+ border-color: var(
744
+ --_ctm-mob-dn-ct-pe-im-se-br-cr,
745
+ var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
746
+ );
747
+ border-radius: var(
748
+ --_ctm-mob-dn-ct-pe-im-se-br-rs,
749
+ var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
750
+ );
751
+ border-style: var(
752
+ --_ctm-mob-dn-ct-pe-im-se-br-se,
753
+ var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
754
+ );
755
+ border-width: var(
756
+ --_ctm-mob-dn-ct-pe-im-se-br-wh,
757
+ var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
758
+ );
759
+ color: var(
760
+ --_ctm-mob-dn-ct-pe-im-se-cr,
761
+ var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
762
+ );
763
+ font-family: var(
764
+ --_ctm-mob-dn-ct-pe-im-se-ft-fy,
765
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
766
+ );
767
+ &.flex__overflow {
768
+ white-space: normal;
769
+ @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
770
+ }
771
+ font-size: var(
772
+ --_ctm-mob-dn-ct-pe-im-se-ft-se,
773
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
774
+ );
775
+ font-style: var(
776
+ --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
777
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
778
+ );
779
+ font-weight: var(
780
+ --_ctm-mob-dn-ct-pe-im-se-ft-wt,
781
+ var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
782
+ );
783
+ line-height: var(
784
+ --_ctm-mob-dn-ct-pe-im-se-le-ht,
785
+ var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
786
+ );
787
+ letter-spacing: var(
788
+ --_ctm-mob-dn-ct-pe-im-se-lr-sg,
789
+ var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
790
+ );
791
+ text-align: var(
792
+ --_ctm-mob-dn-ct-pe-im-se-tt-an,
793
+ var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
794
+ );
795
+ text-decoration: var(
796
+ --_ctm-mob-dn-ct-pe-im-se-ue,
797
+ var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
798
+ );
799
+ text-transform: var(
800
+ --_ctm-mob-dn-ct-pe-im-se-tt-tm,
801
+ var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
802
+ );
803
+ word-wrap: var(
804
+ --_ctm-mob-dn-ct-pe-im-se-wd-wp,
805
+ var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
806
+ );
807
+ word-break: var(
808
+ --_ctm-mob-dn-ct-pe-im-se-wd-bk,
809
+ var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
810
+ );
811
+ box-shadow: var(
812
+ --_ctm-mob-dn-ct-pe-im-se-sw-ae,
813
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
814
+ )
815
+ var(
816
+ --_ctm-mob-dn-ct-pe-im-se-sw-sd,
817
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
818
+ )
819
+ var(
820
+ --_ctm-mob-dn-he-pe-im-se-sw-sd,
821
+ var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
822
+ )
823
+ var(
824
+ --_ctm-mob-dn-ct-pe-im-se-sw-cr,
825
+ var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
826
+ );
827
+
828
+ .icon {
829
+ svg {
830
+ width: var(
831
+ --_ctm-mob-dn-ct-pe-im-se-in-se,
832
+ var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
833
+ );
834
+ height: var(
835
+ --_ctm-mob-dn-ct-pe-im-se-in-se,
836
+ var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
837
+ );
838
+ path {
839
+ stroke: var(
840
+ --_ctm-mob-dn-ct-pe-im-se-in-c1,
841
+ var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
842
+ );
843
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
844
+ stroke-width: prepareMediaVariable(--_ctm-dn-ct-pe-im-se-se-wh, 1.25);
845
+ }
846
+ }
847
+ }
848
+ }
849
+ }
850
+ }
851
+ }
852
+
853
+ .separator {
854
+ .icon {
855
+ display: flex;
856
+ svg {
857
+ width: var(
858
+ --_ctm-mob-dn-im-sr-in-se,
859
+ var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
860
+ );
861
+ height: var(
862
+ --_ctm-mob-dn-im-sr-in-se,
863
+ var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
864
+ );
865
+ path {
866
+ stroke: var(
867
+ --_ctm-mob-dn-im-sr-in-c1,
868
+ var(--_ctm-tab-dn-im-sr-in-c1, var(--_ctm-dn-im-sr-in-c1))
869
+ );
870
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
871
+ stroke-width: prepareMediaVariable(--_ctm-dn-im-sr-se-wh, 1.25);
872
+ }
873
+ }
874
+ }
875
+ }
876
+
877
+ // The Collapsed layout's expand/collapse toggle had no rules at all, so the Expand
878
+ // Icon design section had nothing to paint and the toggle rendered as an unsized,
879
+ // uncoloured, non-clickable box. It takes the same `ed-in` (expand icon) variables
880
+ // the Show More button already uses.
881
+ .collapse_btn,
882
+ .show_more_btn {
883
+ white-space: nowrap;
884
+ background-color: var(
885
+ --_ctm-mob-dn-ed-in-bd-cr,
886
+ var(--_ctm-tab-dn-ed-in-bd-cr, var(--_ctm-dn-ed-in-bd-cr))
887
+ );
888
+ .icon {
889
+ display: flex;
890
+ svg {
891
+ width: var(
892
+ --_ctm-mob-dn-ed-in-in-se,
893
+ var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
894
+ );
895
+ height: var(
896
+ --_ctm-mob-dn-ed-in-in-se,
897
+ var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
898
+ );
899
+ path {
900
+ stroke: var(
901
+ --_ctm-mob-dn-ed-in-in-c1,
902
+ var(--_ctm-tab-dn-ed-in-in-c1, var(--_ctm-dn-ed-in-in-c1))
903
+ );
904
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
905
+ stroke-width: prepareMediaVariable(--_ctm-dn-ed-in-se-wh, 1.25);
906
+ }
907
+ }
908
+ }
909
+ }
910
+
911
+ .collapse_btn {
912
+ display: flex;
913
+ align-items: center;
914
+ flex-shrink: 0;
915
+ cursor: pointer;
916
+ }
917
+ }
918
+
919
+ // "Show Border" switches. Each design section paints its border from CSS variables,
920
+ // so the switch reaches the stylesheet as a data attribute and the matching
921
+ // border-width is zeroed here. Kept at the end of the block and matched to the same
922
+ // selector depth as the rules above — anywhere earlier and the section rules would
923
+ // win the tie on source order. The item gates carry :not(:first-of-type)
924
+ // /:not(:last-of-type) so switching "Other Item Style" off doesn't also strip the
925
+ // home and current items, which have their own borders and their own switches.
926
+ // Background & Fill's border lives on .wrapper, which is where both trail layouts
927
+ // now take it from — so the switch has to target that, not the inner trail wrappers.
928
+ &[data-trail-border="false"] > div.wrapper {
929
+ border-width: 0;
930
+ border-style: none;
931
+ }
932
+ &[data-other-border="false"]
933
+ > div
934
+ .horizontal_breadcrumb_wrapper
935
+ .breadcrumb_item:not(:first-of-type):not(:last-of-type),
936
+ &[data-other-border="false"]
937
+ > div
938
+ .vertical_breadcrumb_wrapper
939
+ .item_wrapper:not(:first-of-type):not(:last-of-type)
940
+ .breadcrumb_item {
941
+ border-width: 0;
942
+ border-style: none;
943
+ }
944
+ &[data-home-border="false"] > div .horizontal_breadcrumb_wrapper .breadcrumb_item:first-of-type,
945
+ &[data-home-border="false"]
946
+ > div
947
+ .vertical_breadcrumb_wrapper
948
+ .item_wrapper:first-of-type
949
+ .breadcrumb_item {
950
+ border-width: 0;
951
+ border-style: none;
952
+ }
953
+ &[data-current-border="false"]
954
+ > div
955
+ .horizontal_breadcrumb_wrapper
956
+ .breadcrumb_item:last-of-type,
957
+ &[data-current-border="false"]
958
+ > div
959
+ .vertical_breadcrumb_wrapper
960
+ .item_wrapper:last-of-type
961
+ .breadcrumb_item {
962
+ border-width: 0;
963
+ border-style: none;
964
+ }
965
+ }
966
+ }