@itwin/itwinui-css 1.0.0-dev.14 → 1.0.0-dev.16

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 (49) hide show
  1. package/css/alert.css +1 -295
  2. package/css/all.css +1 -8827
  3. package/css/anchor.css +1 -56
  4. package/css/avatar.css +1 -225
  5. package/css/backdrop.css +1 -22
  6. package/css/badge.css +1 -25
  7. package/css/blockquote.css +1 -28
  8. package/css/breadcrumbs.css +1 -346
  9. package/css/button.css +1 -388
  10. package/css/carousel.css +1 -121
  11. package/css/checkbox.css +1 -148
  12. package/css/code.css +1 -85
  13. package/css/color-picker.css +1 -200
  14. package/css/date-picker.css +1 -394
  15. package/css/dialog.css +1 -161
  16. package/css/expandable-block.css +1 -171
  17. package/css/fieldset.css +1 -28
  18. package/css/file-upload.css +1 -78
  19. package/css/footer.css +1 -83
  20. package/css/global.css +1 -59
  21. package/css/header.css +1 -437
  22. package/css/information-panel.css +1 -190
  23. package/css/input.css +1 -167
  24. package/css/keyboard.css +1 -27
  25. package/css/location-marker.css +1 -114
  26. package/css/menu.css +1 -169
  27. package/css/non-ideal-state.css +1 -61
  28. package/css/progress-indicator.css +1 -299
  29. package/css/radio-tile.css +1 -188
  30. package/css/radio.css +1 -155
  31. package/css/select.css +1 -239
  32. package/css/side-navigation.css +1 -211
  33. package/css/skip-to-content.css +1 -61
  34. package/css/slider.css +1 -261
  35. package/css/stepper.css +1 -137
  36. package/css/surface.css +1 -11
  37. package/css/table.css +1 -723
  38. package/css/tabs.css +1 -324
  39. package/css/tag.css +1 -132
  40. package/css/text.css +1 -115
  41. package/css/tile.css +1 -491
  42. package/css/time-picker.css +1 -128
  43. package/css/toast.css +1 -315
  44. package/css/toggle-switch.css +1 -207
  45. package/css/tooltip.css +1 -48
  46. package/css/tree.css +1 -126
  47. package/css/utils.css +1 -513
  48. package/css/workflow-diagram.css +1 -63
  49. package/package.json +8 -4
package/css/breadcrumbs.css CHANGED
@@ -2,349 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-breadcrumbs{
6
- --_iui-breadcrumbs-height:var(--iui-component-height);
7
- margin:0;
8
- padding:0;
9
- border:none;
10
- vertical-align:baseline;
11
- display:flex;
12
- align-items:center;
13
- height:var(--_iui-breadcrumbs-height);
14
- }
15
-
16
- .iui-breadcrumbs-list{
17
- margin:0;
18
- padding:0;
19
- border:none;
20
- vertical-align:baseline;
21
- display:flex;
22
- align-items:center;
23
- list-style-type:none;
24
- -webkit-user-select:none;
25
- -moz-user-select:none;
26
- -ms-user-select:none;
27
- user-select:none;
28
- height:100%;
29
- }
30
-
31
- .iui-breadcrumbs-item{
32
- display:flex;
33
- align-items:center;
34
- height:100%;
35
- }
36
- .iui-breadcrumbs-item > *{
37
- max-width:26ch;
38
- }
39
-
40
- .iui-breadcrumbs-item-overrides > *{
41
- padding:0 var(--iui-size-xs);
42
- overflow:hidden;
43
- white-space:nowrap;
44
- text-overflow:ellipsis;
45
- }
46
- .iui-breadcrumbs-item-overrides > *:not(.iui-button){
47
- color:var(--iui-color-text);
48
- }
49
- .iui-breadcrumbs-item-overrides > :-webkit-any-link{
50
- color:var(--iui-color-text-accent);
51
- -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
52
- border-radius:var(--iui-border-radius-1);
53
- cursor:pointer;
54
- text-decoration:none;
55
- box-sizing:border-box;
56
- line-height:var(--iui-component-height);
57
- }
58
- .iui-breadcrumbs-item-overrides > :-moz-any-link{
59
- color:var(--iui-color-text-accent);
60
- -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
61
- border-radius:var(--iui-border-radius-1);
62
- cursor:pointer;
63
- text-decoration:none;
64
- box-sizing:border-box;
65
- line-height:var(--iui-component-height);
66
- }
67
- .iui-breadcrumbs-item-overrides > :any-link{
68
- color:var(--iui-color-text-accent);
69
- -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
70
- border-radius:var(--iui-border-radius-1);
71
- cursor:pointer;
72
- text-decoration:none;
73
- box-sizing:border-box;
74
- line-height:var(--iui-component-height);
75
- }
76
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
77
- outline:1px solid var(--iui-color-text-accent);
78
- outline-offset:1px;
79
- }
80
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
81
- outline:1px solid var(--iui-color-text-accent);
82
- outline-offset:1px;
83
- }
84
- .iui-breadcrumbs-item-overrides > :any-link:focus-visible{
85
- outline:1px solid var(--iui-color-text-accent);
86
- outline-offset:1px;
87
- }
88
- @supports not selector(*:focus-visible){
89
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
90
- outline:1px solid var(--iui-color-text-accent);
91
- outline-offset:1px;
92
- }
93
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
94
- outline:1px solid var(--iui-color-text-accent);
95
- outline-offset:1px;
96
- }
97
- .iui-breadcrumbs-item-overrides > :any-link:focus{
98
- outline:1px solid var(--iui-color-text-accent);
99
- outline-offset:1px;
100
- }
101
- }
102
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
103
- color:var(--iui-color-text-accent-hover);
104
- }
105
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
106
- color:var(--iui-color-text-accent-hover);
107
- }
108
- .iui-breadcrumbs-item-overrides > :any-link:hover{
109
- color:var(--iui-color-text-accent-hover);
110
- }
111
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
112
- text-decoration:underline;
113
- }
114
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
115
- text-decoration:underline;
116
- }
117
- .iui-breadcrumbs-item-overrides > :any-link:hover{
118
- text-decoration:underline;
119
- }
120
- @media (prefers-contrast: more){
121
- .iui-breadcrumbs-item-overrides > :-webkit-any-link{
122
- text-decoration:underline;
123
- }
124
- .iui-breadcrumbs-item-overrides > :-moz-any-link{
125
- text-decoration:underline;
126
- }
127
- .iui-breadcrumbs-item-overrides > :any-link{
128
- text-decoration:underline;
129
- }
130
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
131
- text-decoration:none;
132
- }
133
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
134
- text-decoration:none;
135
- }
136
- .iui-breadcrumbs-item-overrides > :any-link:hover{
137
- text-decoration:none;
138
- }
139
- }
140
- [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-webkit-any-link{
141
- text-decoration:underline;
142
- }
143
- [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-moz-any-link{
144
- text-decoration:underline;
145
- }
146
- [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :any-link{
147
- text-decoration:underline;
148
- }
149
- [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
150
- text-decoration:none;
151
- }
152
- [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
153
- text-decoration:none;
154
- }
155
- [data-iui-contrast=high] .iui-breadcrumbs-item-overrides > :any-link:hover{
156
- text-decoration:none;
157
- }
158
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
159
- outline-offset:-1px;
160
- }
161
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
162
- outline-offset:-1px;
163
- }
164
- .iui-breadcrumbs-item-overrides > :any-link:focus{
165
- outline-offset:-1px;
166
- }
167
- .iui-breadcrumbs-item-overrides .iui-button.iui-button{
168
- --_iui-button-text-color:var(--iui-color-text);
169
- --_iui-button-background-color:transparent;
170
- --_iui-button-border-color:transparent;
171
- --_iui-button-icon-fill:var(--iui-color-icon);
172
- --_iui-button-gap:var(--iui-size-xs);
173
- --_iui-button-padding-block:var(--iui-size-2xs);
174
- --_iui-button-padding-inline:var(--iui-size-m);
175
- --_iui-button-min-height:var(--iui-component-height);
176
- --_iui-button-padding-inline:var(--iui-size-xs);
177
- border:none;
178
- }
179
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover, :active){
180
- --_iui-button-text-color:var(--iui-color-text-hover);
181
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
182
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
183
- }
184
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){
185
- outline-offset:-1px;
186
- outline-width:1px;
187
- }
188
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
189
- --_iui-button-text-color:var(--iui-color-text-disabled);
190
- --_iui-button-background-color:transparent;
191
- --_iui-button-border-color:transparent;
192
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
193
- }
194
- .iui-breadcrumbs-item-overrides .iui-button > span{
195
- overflow:hidden;
196
- white-space:nowrap;
197
- text-overflow:ellipsis;
198
- }
199
- .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]), .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):active{
200
- --_iui-button-text-color:var(--iui-color-text-accent);
201
- }
202
-
203
- .iui-breadcrumbs-text{
204
- padding:0 var(--iui-size-xs);
205
- overflow:hidden;
206
- white-space:nowrap;
207
- text-overflow:ellipsis;
208
- line-height:var(--iui-component-height);
209
- }
210
- a.iui-breadcrumbs-text{
211
- color:var(--iui-color-text-accent);
212
- -webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));
213
- border-radius:var(--iui-border-radius-1);
214
- cursor:pointer;
215
- text-decoration:none;
216
- }
217
- a.iui-breadcrumbs-text:focus-visible{
218
- outline:1px solid var(--iui-color-text-accent);
219
- outline-offset:1px;
220
- }
221
- @supports not selector(*:focus-visible){
222
- a.iui-breadcrumbs-text:focus{
223
- outline:1px solid var(--iui-color-text-accent);
224
- outline-offset:1px;
225
- }
226
- }
227
- a.iui-breadcrumbs-text:hover{
228
- color:var(--iui-color-text-accent-hover);
229
- }
230
- a.iui-breadcrumbs-text:hover{
231
- text-decoration:underline;
232
- }
233
- @media (prefers-contrast: more){
234
- a.iui-breadcrumbs-text{
235
- text-decoration:underline;
236
- }
237
- a.iui-breadcrumbs-text:hover{
238
- text-decoration:none;
239
- }
240
- }
241
- [data-iui-contrast=high] a.iui-breadcrumbs-text{
242
- text-decoration:underline;
243
- }
244
- [data-iui-contrast=high] a.iui-breadcrumbs-text:hover{
245
- text-decoration:none;
246
- }
247
- a.iui-breadcrumbs-text:focus{
248
- outline-offset:-1px;
249
- }
250
-
251
- .iui-breadcrumbs-button{
252
- margin:0;
253
- padding:0;
254
- border:none;
255
- vertical-align:baseline;
256
- font-family:inherit;
257
- display:inline-flex;
258
- flex-shrink:0;
259
- align-items:center;
260
- vertical-align:middle;
261
- justify-content:center;
262
- position:relative;
263
- border-radius:var(--iui-border-radius-1);
264
- line-height:1.2;
265
- font-size:var(--iui-font-size-1);
266
- font-weight:var(--iui-font-weight-normal);
267
- -webkit-user-select:none;
268
- -moz-user-select:none;
269
- -ms-user-select:none;
270
- user-select:none;
271
- cursor:pointer;
272
- white-space:nowrap;
273
- border:1px solid var(--_iui-button-border-color);
274
- background:var(--_iui-button-background-color);
275
- color:var(--_iui-button-text-color);
276
- gap:var(--_iui-button-gap);
277
- min-height:var(--_iui-button-min-height);
278
- min-width:var(--_iui-button-min-height);
279
- padding-block:var(--_iui-button-padding-block);
280
- padding-inline:var(--_iui-button-padding-inline);
281
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
282
- -webkit-tap-highlight-color:transparent;
283
- text-decoration:none;
284
- --_iui-button-gap:var(--iui-size-xs);
285
- --_iui-button-padding-block:var(--iui-size-2xs);
286
- --_iui-button-padding-inline:var(--iui-size-m);
287
- --_iui-button-min-height:var(--iui-component-height);
288
- --_iui-button-text-color:var(--iui-color-text);
289
- --_iui-button-background-color:transparent;
290
- --_iui-button-border-color:transparent;
291
- --_iui-button-icon-fill:var(--iui-color-icon);
292
- --_iui-button-gap:var(--iui-size-xs);
293
- --_iui-button-padding-block:var(--iui-size-2xs);
294
- --_iui-button-padding-inline:var(--iui-size-m);
295
- --_iui-button-min-height:var(--iui-component-height);
296
- --_iui-button-padding-inline:var(--iui-size-xs);
297
- padding:0;
298
- border:none;
299
- color:var(--iui-color-text-accent);
300
- }
301
- .iui-breadcrumbs-button:focus-visible{
302
- outline:1px solid var(--iui-color-border-accent);
303
- outline-offset:-1px;
304
- }
305
- @supports not selector(*:focus-visible){
306
- .iui-breadcrumbs-button:focus{
307
- outline:1px solid var(--iui-color-border-accent);
308
- outline-offset:-1px;
309
- }
310
- }
311
- .iui-breadcrumbs-button:where(:hover, :active){
312
- --_iui-button-text-color:var(--iui-color-text-hover);
313
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
314
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
315
- }
316
- .iui-breadcrumbs-button:where(:focus){
317
- outline-offset:-1px;
318
- outline-width:1px;
319
- }
320
- .iui-breadcrumbs-button:where([disabled], :disabled, [aria-disabled="true"]){
321
- --_iui-button-text-color:var(--iui-color-text-disabled);
322
- --_iui-button-background-color:transparent;
323
- --_iui-button-border-color:transparent;
324
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
325
- }
326
- .iui-breadcrumbs-button[aria-current]{
327
- color:var(--iui-color-text);
328
- }
329
-
330
- .iui-breadcrumbs-separator{
331
- display:flex;
332
- margin:0 var(--iui-size-3xs);
333
- }
334
- .iui-breadcrumbs-separator svg{
335
- display:flex;
336
- flex-shrink:0;
337
- width:var(--iui-size-s);
338
- height:var(--iui-size-s);
339
- fill:var(--iui-color-icon-muted);
340
- }
341
- @media (forced-colors: active){
342
- .iui-breadcrumbs-separator svg{
343
- fill:CanvasText;
344
- }
345
- }
346
- @media (forced-colors: active){
347
- .iui-breadcrumbs-separator svg{
348
- fill:CanvasText;
349
- }
350
- }
5
+ .iui-breadcrumbs{--_iui-breadcrumbs-height:var(--iui-component-height);vertical-align:baseline;height:var(--_iui-breadcrumbs-height);border:none;align-items:center;margin:0;padding:0;display:flex}.iui-breadcrumbs-list{vertical-align:baseline;-webkit-user-select:none;user-select:none;height:100%;border:none;align-items:center;margin:0;padding:0;list-style-type:none;display:flex}.iui-breadcrumbs-item{height:100%;align-items:center;display:flex}.iui-breadcrumbs-item>*{max-width:26ch}.iui-breadcrumbs-item-overrides>*{padding:0 var(--iui-size-xs);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-breadcrumbs-item-overrides>:not(.iui-button){color:var(--iui-color-text)}.iui-breadcrumbs-item-overrides>:any-link{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;box-sizing:border-box;line-height:var(--iui-component-height);text-decoration:none}.iui-breadcrumbs-item-overrides>:any-link:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}@supports not selector(*:focus-visible){.iui-breadcrumbs-item-overrides>:any-link:focus{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}}.iui-breadcrumbs-item-overrides>:any-link:hover{color:var(--iui-color-text-accent-hover);text-decoration:underline}@media (prefers-contrast:more){.iui-breadcrumbs-item-overrides>:any-link{text-decoration:underline}.iui-breadcrumbs-item-overrides>:any-link:hover{text-decoration:none}}[data-iui-contrast=high] .iui-breadcrumbs-item-overrides>:any-link{text-decoration:underline}[data-iui-contrast=high] .iui-breadcrumbs-item-overrides>:any-link:hover{text-decoration:none}.iui-breadcrumbs-item-overrides>:any-link:focus{outline-offset:-1px}.iui-breadcrumbs-item-overrides .iui-button.iui-button{--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);border:none}.iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){outline-offset:-1px;outline-width:1px}.iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-breadcrumbs-item-overrides .iui-button>span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.iui-breadcrumbs-item-overrides .iui-button:not([aria-current]),.iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):hover,.iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):active{--_iui-button-text-color:var(--iui-color-text-accent)}.iui-breadcrumbs-text{padding:0 var(--iui-size-xs);white-space:nowrap;text-overflow:ellipsis;line-height:var(--iui-component-height);overflow:hidden}a.iui-breadcrumbs-text{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;text-decoration:none}a.iui-breadcrumbs-text:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}@supports not selector(*:focus-visible){a.iui-breadcrumbs-text:focus{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}}a.iui-breadcrumbs-text:hover{color:var(--iui-color-text-accent-hover);text-decoration:underline}@media (prefers-contrast:more){a.iui-breadcrumbs-text{text-decoration:underline}a.iui-breadcrumbs-text:hover{text-decoration:none}}[data-iui-contrast=high] a.iui-breadcrumbs-text{text-decoration:underline}[data-iui-contrast=high] a.iui-breadcrumbs-text:hover{text-decoration:none}a.iui-breadcrumbs-text:focus{outline-offset:-1px}.iui-breadcrumbs-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs);color:var(--iui-color-text-accent);border:none;flex-shrink:0;margin:0;padding:0;text-decoration:none;display:inline-flex;position:relative}.iui-breadcrumbs-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-breadcrumbs-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-breadcrumbs-button:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-breadcrumbs-button:where(:focus){outline-offset:-1px;outline-width:1px}.iui-breadcrumbs-button:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-breadcrumbs-button[aria-current]{color:var(--iui-color-text)}.iui-breadcrumbs-separator{margin:0 var(--iui-size-3xs);display:flex}.iui-breadcrumbs-separator svg{width:var(--iui-size-s);height:var(--iui-size-s);fill:var(--iui-color-icon-muted);flex-shrink:0;display:flex}@media (forced-colors:active){.iui-breadcrumbs-separator svg{fill:CanvasText;fill:CanvasText}}