@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
@@ -1,626 +1,626 @@
1
- @use "./functions.scss" as *;
2
-
3
- // Verbatim adaptation of quota-details.scss inner styles, rebound to the
4
- // Category Groups quotaDetails layout/design CSS-variable paths.
5
- // @imported inside category-groups-element.scss within the categoryGroups scope.
6
-
7
- .quota__details__element {
8
- background-color: var(
9
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
10
- var(
11
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
12
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr)
13
- )
14
- );
15
- padding: var(
16
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg,
17
- var(
18
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg,
19
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg)
20
- )
21
- );
22
- display: flex;
23
- flex-direction: column;
24
- --_sf-gp: var(
25
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg,
26
- var(
27
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg,
28
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg, 16px)
29
- )
30
- );
31
- row-gap: var(--_sf-gp);
32
- width: fit-content;
33
- height: auto;
34
- border-color: var(
35
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
36
- var(
37
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
38
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr)
39
- )
40
- );
41
- border-style: var(
42
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se,
43
- var(
44
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se,
45
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se)
46
- )
47
- );
48
- border-width: var(
49
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
50
- var(
51
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
52
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh)
53
- )
54
- );
55
- border-radius: var(
56
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
57
- var(
58
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
59
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs)
60
- )
61
- );
62
- box-shadow: var(
63
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
64
- var(
65
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
66
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae)
67
- )
68
- )
69
- var(
70
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
71
- var(
72
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
73
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br)
74
- )
75
- )
76
- var(
77
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
78
- var(
79
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
80
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd)
81
- )
82
- )
83
- var(
84
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
85
- var(
86
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
87
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr)
88
- )
89
- );
90
-
91
- .product__hilights {
92
- display: flex;
93
- align-items: center;
94
- // Design > Widget Style > alignment, falling back to the Layout panel's own
95
- // alignment so cards set up before the design control existed keep theirs.
96
- justify-content: prepareMediaVariable(
97
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-hl-at,
98
- prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at)
99
- );
100
- gap: var(--_sf-gp);
101
- width: 100%;
102
- height: 100%;
103
-
104
- &[data-show-dividers="true"] {
105
- // See quota-details.scss: Shape Size and Shape Color are the item's only two
106
- // controls, Size measuring the marker's diameter or the rule's thickness. The
107
- // `-dr-dr-` doubling is the `divider` node followed by the `divider…` property
108
- // name — the shape vars were written with only one, which is why neither
109
- // control did anything.
110
- $shapeSize: prepareMediaVariable(
111
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se,
112
- prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
113
- );
114
- $shapeColor: prepareMediaVariable(
115
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-cr,
116
- prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
117
- );
118
-
119
- .product__list__item {
120
- position: relative;
121
- // The rule is a pseudo-element and takes no space of its own, so a wide one grew
122
- // back over the item beside it — see dividerGapReserve in functions.scss.
123
- &:not(:last-child) {
124
- @include dividerGapReserve($shapeSize, right);
125
- }
126
- &:not(:last-child)::after {
127
- content: "";
128
- width: $shapeSize;
129
- height: 100%;
130
- position: absolute;
131
- right: dividerGapOffset(var(--_sf-gp, 0px), $shapeSize);
132
- background-color: $shapeColor;
133
- }
134
-
135
- // Divider item (Divider -> Item Style). This element embeds the same Quota
136
- // Details schema, so its Divider panel offers the same control and needs the
137
- // same marker — otherwise it would write to keys nothing here draws.
138
- .divider__marker {
139
- position: absolute;
140
- top: 50%;
141
- right: dividerMarkerOffset(var(--_sf-gp, 0px), $shapeSize);
142
- transform: translate(50%, -50%);
143
- display: flex;
144
- align-items: center;
145
- justify-content: center;
146
- z-index: 1;
147
-
148
- // 8px rather than the rule's thickness when Shape Size is absent: a marker
149
- // falling back to a hairline would read as missing.
150
- &[data-shape="circle"],
151
- &[data-shape="square"] {
152
- width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
153
- height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
154
- background-color: $shapeColor;
155
- }
156
-
157
- &[data-shape="circle"] {
158
- border-radius: 50%;
159
- }
160
-
161
- &[data-shape="icon"] {
162
- padding-block: 2px;
163
- background-color: prepareMediaVariable(
164
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
165
- #ffffff
166
- );
167
- }
168
-
169
- .icon {
170
- display: flex;
171
-
172
- svg {
173
- width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
174
- height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
175
-
176
- &[stroke]:not([stroke="none"]),
177
- [stroke]:not([stroke="none"]) {
178
- stroke: prepareMediaVariable(
179
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-c1,
180
- #e4e7ec
181
- );
182
- // Overrides the stroke-width presentation attribute baked into the icon markup.
183
- stroke-width: prepareMediaVariable(
184
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-se-wh,
185
- 1.25
186
- );
187
- }
188
- &[fill]:not([fill="none"]),
189
- [fill]:not([fill="none"]) {
190
- fill: prepareMediaVariable(
191
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-c1,
192
- #e4e7ec
193
- );
194
- }
195
- }
196
- }
197
- }
198
-
199
- // Rendered inside every item; only the ones carrying a rule show it.
200
- &:last-child .divider__marker {
201
- display: none;
202
- }
203
- }
204
-
205
- // A shape or icon marker REPLACES the rule rather than sitting on it, so the
206
- // rule is drawn only while the separator is the plain "divider".
207
- &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
208
- display: none;
209
- }
210
- }
211
-
212
- .product__list__item {
213
- display: flex;
214
- align-items: center;
215
- gap: 4px;
216
-
217
- .svg_icon {
218
- display: flex;
219
- }
220
- }
221
-
222
- .quota__left {
223
- .count {
224
- // No `white-space: nowrap` here: it stopped the text reflowing when the card
225
- // is narrowed, which forced the two stats onto separate lines instead of
226
- // letting them shrink and stay on one. Matches the standalone element.
227
- min-width: 0;
228
- color: var(
229
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
230
- var(
231
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
232
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr)
233
- )
234
- );
235
- font-family: var(
236
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
237
- var(
238
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
239
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy)
240
- )
241
- );
242
- text-transform: var(
243
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm,
244
- var(
245
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm,
246
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm)
247
- )
248
- );
249
- word-wrap: var(
250
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp,
251
- var(
252
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp,
253
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp)
254
- )
255
- );
256
- word-break: var(
257
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk,
258
- var(
259
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk,
260
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk)
261
- )
262
- );
263
- font-size: var(
264
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
265
- var(
266
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
267
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se)
268
- )
269
- );
270
- font-weight: var(
271
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
272
- var(
273
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
274
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt)
275
- )
276
- );
277
- font-style: var(
278
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
279
- var(
280
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
281
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
282
- )
283
- );
284
- letter-spacing: var(
285
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
286
- var(
287
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
288
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg)
289
- )
290
- );
291
- line-height: var(
292
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
293
- var(
294
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
295
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht)
296
- )
297
- );
298
- text-decoration: var(
299
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue,
300
- var(
301
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue,
302
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue)
303
- )
304
- );
305
- }
306
- .label {
307
- // No `white-space: nowrap` here: it stopped the text reflowing when the card
308
- // is narrowed, which forced the two stats onto separate lines instead of
309
- // letting them shrink and stay on one. Matches the standalone element.
310
- min-width: 0;
311
- color: var(
312
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
313
- var(
314
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
315
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc)
316
- )
317
- );
318
- font-family: var(
319
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
320
- var(
321
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
322
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
323
- )
324
- );
325
- text-transform: var(
326
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
327
- var(
328
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
329
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc)
330
- )
331
- );
332
- word-wrap: var(
333
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
334
- var(
335
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
336
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc)
337
- )
338
- );
339
- word-break: var(
340
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
341
- var(
342
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
343
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc)
344
- )
345
- );
346
- font-size: var(
347
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
348
- var(
349
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
350
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
351
- )
352
- );
353
- font-weight: var(
354
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
355
- var(
356
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
357
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
358
- )
359
- );
360
- font-style: var(
361
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
362
- var(
363
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
364
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
365
- )
366
- );
367
- letter-spacing: var(
368
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
369
- var(
370
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
371
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
372
- )
373
- );
374
- line-height: var(
375
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
376
- var(
377
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
378
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
379
- )
380
- );
381
- text-decoration: var(
382
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
383
- var(
384
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
385
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc)
386
- )
387
- );
388
- }
389
- .icon {
390
- display: flex;
391
- svg {
392
- width: var(
393
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
394
- var(
395
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
396
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
397
- )
398
- );
399
- height: var(
400
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
401
- var(
402
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
403
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
404
- )
405
- );
406
- path {
407
- stroke: var(
408
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1,
409
- var(
410
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1,
411
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1)
412
- )
413
- );
414
- // Overrides the stroke-width presentation attribute baked into the icon markup.
415
- stroke-width: prepareMediaVariable(
416
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-se-wh,
417
- 1.25
418
- );
419
- }
420
- }
421
- }
422
- }
423
-
424
- .days__left {
425
- .count {
426
- // No `white-space: nowrap` here: it stopped the text reflowing when the card
427
- // is narrowed, which forced the two stats onto separate lines instead of
428
- // letting them shrink and stay on one. Matches the standalone element.
429
- min-width: 0;
430
- color: var(
431
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
432
- var(
433
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
434
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr)
435
- )
436
- );
437
- font-family: var(
438
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
439
- var(
440
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
441
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy)
442
- )
443
- );
444
- text-transform: var(
445
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm,
446
- var(
447
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm,
448
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm)
449
- )
450
- );
451
- word-wrap: var(
452
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp,
453
- var(
454
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp,
455
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp)
456
- )
457
- );
458
- word-break: var(
459
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk,
460
- var(
461
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk,
462
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk)
463
- )
464
- );
465
- font-size: var(
466
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
467
- var(
468
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
469
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se)
470
- )
471
- );
472
- font-weight: var(
473
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
474
- var(
475
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
476
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt)
477
- )
478
- );
479
- font-style: var(
480
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
481
- var(
482
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
483
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
484
- )
485
- );
486
- letter-spacing: var(
487
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
488
- var(
489
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
490
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg)
491
- )
492
- );
493
- line-height: var(
494
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
495
- var(
496
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
497
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht)
498
- )
499
- );
500
- text-decoration: var(
501
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue,
502
- var(
503
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue,
504
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue)
505
- )
506
- );
507
- }
508
- .label {
509
- // No `white-space: nowrap` here: it stopped the text reflowing when the card
510
- // is narrowed, which forced the two stats onto separate lines instead of
511
- // letting them shrink and stay on one. Matches the standalone element.
512
- min-width: 0;
513
- color: var(
514
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
515
- var(
516
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
517
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc)
518
- )
519
- );
520
- font-family: var(
521
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
522
- var(
523
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
524
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
525
- )
526
- );
527
- text-transform: var(
528
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
529
- var(
530
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
531
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc)
532
- )
533
- );
534
- word-wrap: var(
535
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
536
- var(
537
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
538
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc)
539
- )
540
- );
541
- word-break: var(
542
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
543
- var(
544
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
545
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc)
546
- )
547
- );
548
- font-size: var(
549
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
550
- var(
551
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
552
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
553
- )
554
- );
555
- font-weight: var(
556
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
557
- var(
558
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
559
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
560
- )
561
- );
562
- font-style: var(
563
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
564
- var(
565
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
566
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
567
- )
568
- );
569
- letter-spacing: var(
570
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
571
- var(
572
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
573
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
574
- )
575
- );
576
- line-height: var(
577
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
578
- var(
579
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
580
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
581
- )
582
- );
583
- text-decoration: var(
584
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
585
- var(
586
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
587
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc)
588
- )
589
- );
590
- }
591
- .icon {
592
- display: flex;
593
- svg {
594
- width: var(
595
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
596
- var(
597
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
598
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
599
- )
600
- );
601
- height: var(
602
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
603
- var(
604
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
605
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
606
- )
607
- );
608
- path {
609
- stroke: var(
610
- --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1,
611
- var(
612
- --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1,
613
- var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1)
614
- )
615
- );
616
- // Overrides the stroke-width presentation attribute baked into the icon markup.
617
- stroke-width: prepareMediaVariable(
618
- --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-se-wh,
619
- 1.25
620
- );
621
- }
622
- }
623
- }
624
- }
625
- }
626
- }
1
+ @use "./functions.scss" as *;
2
+
3
+ // Verbatim adaptation of quota-details.scss inner styles, rebound to the
4
+ // Category Groups quotaDetails layout/design CSS-variable paths.
5
+ // @imported inside category-groups-element.scss within the categoryGroups scope.
6
+
7
+ .quota__details__element {
8
+ background-color: var(
9
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
10
+ var(
11
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
12
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr)
13
+ )
14
+ );
15
+ padding: var(
16
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg,
17
+ var(
18
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg,
19
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-pg)
20
+ )
21
+ );
22
+ display: flex;
23
+ flex-direction: column;
24
+ --_sf-gp: var(
25
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg,
26
+ var(
27
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg,
28
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-im-sg, 16px)
29
+ )
30
+ );
31
+ row-gap: var(--_sf-gp);
32
+ width: fit-content;
33
+ height: auto;
34
+ border-color: var(
35
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
36
+ var(
37
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr,
38
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-cr)
39
+ )
40
+ );
41
+ border-style: var(
42
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se,
43
+ var(
44
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se,
45
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-se)
46
+ )
47
+ );
48
+ border-width: var(
49
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
50
+ var(
51
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh,
52
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-wh)
53
+ )
54
+ );
55
+ border-radius: var(
56
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
57
+ var(
58
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs,
59
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-br-rs)
60
+ )
61
+ );
62
+ box-shadow: var(
63
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
64
+ var(
65
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae,
66
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-ae)
67
+ )
68
+ )
69
+ var(
70
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
71
+ var(
72
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br,
73
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-br)
74
+ )
75
+ )
76
+ var(
77
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
78
+ var(
79
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd,
80
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-sd)
81
+ )
82
+ )
83
+ var(
84
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
85
+ var(
86
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr,
87
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-sw-cr)
88
+ )
89
+ );
90
+
91
+ .product__hilights {
92
+ display: flex;
93
+ align-items: center;
94
+ // Design > Widget Style > alignment, falling back to the Layout panel's own
95
+ // alignment so cards set up before the design control existed keep theirs.
96
+ justify-content: prepareMediaVariable(
97
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-hl-at,
98
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-lt-hl-at)
99
+ );
100
+ gap: var(--_sf-gp);
101
+ width: 100%;
102
+ height: 100%;
103
+
104
+ &[data-show-dividers="true"] {
105
+ // See quota-details.scss: Shape Size and Shape Color are the item's only two
106
+ // controls, Size measuring the marker's diameter or the rule's thickness. The
107
+ // `-dr-dr-` doubling is the `divider` node followed by the `divider…` property
108
+ // name — the shape vars were written with only one, which is why neither
109
+ // control did anything.
110
+ $shapeSize: prepareMediaVariable(
111
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se,
112
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-wh, 1px)
113
+ );
114
+ $shapeColor: prepareMediaVariable(
115
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-cr,
116
+ prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-cr, #e4e7ec)
117
+ );
118
+
119
+ .product__list__item {
120
+ position: relative;
121
+ // The rule is a pseudo-element and takes no space of its own, so a wide one grew
122
+ // back over the item beside it — see dividerGapReserve in functions.scss.
123
+ &:not(:last-child) {
124
+ @include dividerGapReserve($shapeSize, right);
125
+ }
126
+ &:not(:last-child)::after {
127
+ content: "";
128
+ width: $shapeSize;
129
+ height: 100%;
130
+ position: absolute;
131
+ right: dividerGapOffset(var(--_sf-gp, 0px), $shapeSize);
132
+ background-color: $shapeColor;
133
+ }
134
+
135
+ // Divider item (Divider -> Item Style). This element embeds the same Quota
136
+ // Details schema, so its Divider panel offers the same control and needs the
137
+ // same marker — otherwise it would write to keys nothing here draws.
138
+ .divider__marker {
139
+ position: absolute;
140
+ top: 50%;
141
+ right: dividerMarkerOffset(var(--_sf-gp, 0px), $shapeSize);
142
+ transform: translate(50%, -50%);
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ z-index: 1;
147
+
148
+ // 8px rather than the rule's thickness when Shape Size is absent: a marker
149
+ // falling back to a hairline would read as missing.
150
+ &[data-shape="circle"],
151
+ &[data-shape="square"] {
152
+ width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
153
+ height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-dr-se-se, 8px);
154
+ background-color: $shapeColor;
155
+ }
156
+
157
+ &[data-shape="circle"] {
158
+ border-radius: 50%;
159
+ }
160
+
161
+ &[data-shape="icon"] {
162
+ padding-block: 2px;
163
+ background-color: prepareMediaVariable(
164
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-wt-se-bd-cr,
165
+ #ffffff
166
+ );
167
+ }
168
+
169
+ .icon {
170
+ display: flex;
171
+
172
+ svg {
173
+ width: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
174
+ height: prepareMediaVariable(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-se, 12px);
175
+
176
+ &[stroke]:not([stroke="none"]),
177
+ [stroke]:not([stroke="none"]) {
178
+ stroke: prepareMediaVariable(
179
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-c1,
180
+ #e4e7ec
181
+ );
182
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
183
+ stroke-width: prepareMediaVariable(
184
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-se-wh,
185
+ 1.25
186
+ );
187
+ }
188
+ &[fill]:not([fill="none"]),
189
+ [fill]:not([fill="none"]) {
190
+ fill: prepareMediaVariable(
191
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-dr-in-c1,
192
+ #e4e7ec
193
+ );
194
+ }
195
+ }
196
+ }
197
+ }
198
+
199
+ // Rendered inside every item; only the ones carrying a rule show it.
200
+ &:last-child .divider__marker {
201
+ display: none;
202
+ }
203
+ }
204
+
205
+ // A shape or icon marker REPLACES the rule rather than sitting on it, so the
206
+ // rule is drawn only while the separator is the plain "divider".
207
+ &:not([data-divider-item="divider"]) .product__list__item:not(:last-child)::after {
208
+ display: none;
209
+ }
210
+ }
211
+
212
+ .product__list__item {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 4px;
216
+
217
+ .svg_icon {
218
+ display: flex;
219
+ }
220
+ }
221
+
222
+ .quota__left {
223
+ .count {
224
+ // No `white-space: nowrap` here: it stopped the text reflowing when the card
225
+ // is narrowed, which forced the two stats onto separate lines instead of
226
+ // letting them shrink and stay on one. Matches the standalone element.
227
+ min-width: 0;
228
+ color: var(
229
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
230
+ var(
231
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr,
232
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr)
233
+ )
234
+ );
235
+ font-family: var(
236
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
237
+ var(
238
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy,
239
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy)
240
+ )
241
+ );
242
+ text-transform: var(
243
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm,
244
+ var(
245
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm,
246
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm)
247
+ )
248
+ );
249
+ word-wrap: var(
250
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp,
251
+ var(
252
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp,
253
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp)
254
+ )
255
+ );
256
+ word-break: var(
257
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk,
258
+ var(
259
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk,
260
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk)
261
+ )
262
+ );
263
+ font-size: var(
264
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
265
+ var(
266
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se,
267
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se)
268
+ )
269
+ );
270
+ font-weight: var(
271
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
272
+ var(
273
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt,
274
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt)
275
+ )
276
+ );
277
+ font-style: var(
278
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
279
+ var(
280
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic,
281
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic)
282
+ )
283
+ );
284
+ letter-spacing: var(
285
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
286
+ var(
287
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg,
288
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg)
289
+ )
290
+ );
291
+ line-height: var(
292
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
293
+ var(
294
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht,
295
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht)
296
+ )
297
+ );
298
+ text-decoration: var(
299
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue,
300
+ var(
301
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue,
302
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue)
303
+ )
304
+ );
305
+ }
306
+ .label {
307
+ // No `white-space: nowrap` here: it stopped the text reflowing when the card
308
+ // is narrowed, which forced the two stats onto separate lines instead of
309
+ // letting them shrink and stay on one. Matches the standalone element.
310
+ min-width: 0;
311
+ color: var(
312
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
313
+ var(
314
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc,
315
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-cr-dc)
316
+ )
317
+ );
318
+ font-family: var(
319
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
320
+ var(
321
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc,
322
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-fy-dc)
323
+ )
324
+ );
325
+ text-transform: var(
326
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
327
+ var(
328
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc,
329
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-tt-tm-dc)
330
+ )
331
+ );
332
+ word-wrap: var(
333
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
334
+ var(
335
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc,
336
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-wp-dc)
337
+ )
338
+ );
339
+ word-break: var(
340
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
341
+ var(
342
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc,
343
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-wd-bk-dc)
344
+ )
345
+ );
346
+ font-size: var(
347
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
348
+ var(
349
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc,
350
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-dc)
351
+ )
352
+ );
353
+ font-weight: var(
354
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
355
+ var(
356
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc,
357
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-wt-dc)
358
+ )
359
+ );
360
+ font-style: var(
361
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
362
+ var(
363
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc,
364
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ft-se-ic-dc)
365
+ )
366
+ );
367
+ letter-spacing: var(
368
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
369
+ var(
370
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc,
371
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-lr-sg-dc)
372
+ )
373
+ );
374
+ line-height: var(
375
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
376
+ var(
377
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc,
378
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-le-ht-dc)
379
+ )
380
+ );
381
+ text-decoration: var(
382
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
383
+ var(
384
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc,
385
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-ue-dc)
386
+ )
387
+ );
388
+ }
389
+ .icon {
390
+ display: flex;
391
+ svg {
392
+ width: var(
393
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
394
+ var(
395
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
396
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
397
+ )
398
+ );
399
+ height: var(
400
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
401
+ var(
402
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se,
403
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-se)
404
+ )
405
+ );
406
+ path {
407
+ stroke: var(
408
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1,
409
+ var(
410
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1,
411
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-in-c1)
412
+ )
413
+ );
414
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
415
+ stroke-width: prepareMediaVariable(
416
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-qa-lt-se-wh,
417
+ 1.25
418
+ );
419
+ }
420
+ }
421
+ }
422
+ }
423
+
424
+ .days__left {
425
+ .count {
426
+ // No `white-space: nowrap` here: it stopped the text reflowing when the card
427
+ // is narrowed, which forced the two stats onto separate lines instead of
428
+ // letting them shrink and stay on one. Matches the standalone element.
429
+ min-width: 0;
430
+ color: var(
431
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
432
+ var(
433
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr,
434
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr)
435
+ )
436
+ );
437
+ font-family: var(
438
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
439
+ var(
440
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy,
441
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy)
442
+ )
443
+ );
444
+ text-transform: var(
445
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm,
446
+ var(
447
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm,
448
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm)
449
+ )
450
+ );
451
+ word-wrap: var(
452
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp,
453
+ var(
454
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp,
455
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp)
456
+ )
457
+ );
458
+ word-break: var(
459
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk,
460
+ var(
461
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk,
462
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk)
463
+ )
464
+ );
465
+ font-size: var(
466
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
467
+ var(
468
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se,
469
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se)
470
+ )
471
+ );
472
+ font-weight: var(
473
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
474
+ var(
475
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt,
476
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt)
477
+ )
478
+ );
479
+ font-style: var(
480
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
481
+ var(
482
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic,
483
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic)
484
+ )
485
+ );
486
+ letter-spacing: var(
487
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
488
+ var(
489
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg,
490
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg)
491
+ )
492
+ );
493
+ line-height: var(
494
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
495
+ var(
496
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht,
497
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht)
498
+ )
499
+ );
500
+ text-decoration: var(
501
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue,
502
+ var(
503
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue,
504
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue)
505
+ )
506
+ );
507
+ }
508
+ .label {
509
+ // No `white-space: nowrap` here: it stopped the text reflowing when the card
510
+ // is narrowed, which forced the two stats onto separate lines instead of
511
+ // letting them shrink and stay on one. Matches the standalone element.
512
+ min-width: 0;
513
+ color: var(
514
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
515
+ var(
516
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc,
517
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-cr-dc)
518
+ )
519
+ );
520
+ font-family: var(
521
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
522
+ var(
523
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc,
524
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-fy-dc)
525
+ )
526
+ );
527
+ text-transform: var(
528
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
529
+ var(
530
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc,
531
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-tt-tm-dc)
532
+ )
533
+ );
534
+ word-wrap: var(
535
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
536
+ var(
537
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc,
538
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-wp-dc)
539
+ )
540
+ );
541
+ word-break: var(
542
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
543
+ var(
544
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc,
545
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-wd-bk-dc)
546
+ )
547
+ );
548
+ font-size: var(
549
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
550
+ var(
551
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc,
552
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-dc)
553
+ )
554
+ );
555
+ font-weight: var(
556
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
557
+ var(
558
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc,
559
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-wt-dc)
560
+ )
561
+ );
562
+ font-style: var(
563
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
564
+ var(
565
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc,
566
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ft-se-ic-dc)
567
+ )
568
+ );
569
+ letter-spacing: var(
570
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
571
+ var(
572
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc,
573
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-lr-sg-dc)
574
+ )
575
+ );
576
+ line-height: var(
577
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
578
+ var(
579
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc,
580
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-le-ht-dc)
581
+ )
582
+ );
583
+ text-decoration: var(
584
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
585
+ var(
586
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc,
587
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-ue-dc)
588
+ )
589
+ );
590
+ }
591
+ .icon {
592
+ display: flex;
593
+ svg {
594
+ width: var(
595
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
596
+ var(
597
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
598
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
599
+ )
600
+ );
601
+ height: var(
602
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
603
+ var(
604
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se,
605
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-se)
606
+ )
607
+ );
608
+ path {
609
+ stroke: var(
610
+ --_ctm-mob-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1,
611
+ var(
612
+ --_ctm-tab-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1,
613
+ var(--_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-in-c1)
614
+ )
615
+ );
616
+ // Overrides the stroke-width presentation attribute baked into the icon markup.
617
+ stroke-width: prepareMediaVariable(
618
+ --_ctm-catego-dn-pt-gd-dn-qa-ds-qa-ds-dn-ds-lt-se-wh,
619
+ 1.25
620
+ );
621
+ }
622
+ }
623
+ }
624
+ }
625
+ }
626
+ }