@itwin/itwinui-css 1.0.0-dev.8 → 1.0.0

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 (51) hide show
  1. package/CHANGELOG.md +39 -969
  2. package/README.md +50 -29
  3. package/css/alert.css +1 -387
  4. package/css/all.css +1 -9049
  5. package/css/anchor.css +1 -64
  6. package/css/avatar.css +1 -222
  7. package/css/backdrop.css +1 -22
  8. package/css/badge.css +1 -25
  9. package/css/blockquote.css +1 -22
  10. package/css/breadcrumbs.css +1 -372
  11. package/css/button.css +1 -381
  12. package/css/carousel.css +1 -121
  13. package/css/checkbox.css +1 -150
  14. package/css/code.css +1 -81
  15. package/css/color-picker.css +1 -203
  16. package/css/date-picker.css +1 -399
  17. package/css/dialog.css +1 -159
  18. package/css/expandable-block.css +1 -171
  19. package/css/fieldset.css +1 -27
  20. package/css/file-upload.css +1 -78
  21. package/css/footer.css +1 -91
  22. package/css/global.css +1 -59
  23. package/css/header.css +1 -432
  24. package/css/information-panel.css +1 -189
  25. package/css/input.css +1 -166
  26. package/css/keyboard.css +1 -27
  27. package/css/location-marker.css +1 -114
  28. package/css/menu.css +1 -171
  29. package/css/non-ideal-state.css +1 -61
  30. package/css/progress-indicator.css +1 -299
  31. package/css/radio-tile.css +1 -187
  32. package/css/radio.css +1 -157
  33. package/css/select.css +1 -235
  34. package/css/side-navigation.css +1 -198
  35. package/css/skip-to-content.css +1 -61
  36. package/css/slider.css +1 -258
  37. package/css/stepper.css +1 -137
  38. package/css/surface.css +1 -14
  39. package/css/table.css +1 -705
  40. package/css/tabs.css +1 -321
  41. package/css/tag.css +1 -140
  42. package/css/text.css +1 -115
  43. package/css/tile.css +1 -488
  44. package/css/time-picker.css +1 -128
  45. package/css/toast.css +1 -284
  46. package/css/toggle-switch.css +1 -212
  47. package/css/tooltip.css +1 -48
  48. package/css/tree.css +1 -124
  49. package/css/utils.css +1 -679
  50. package/css/workflow-diagram.css +1 -63
  51. package/package.json +8 -4
package/css/breadcrumbs.css CHANGED
@@ -2,375 +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-foreground-2);
48
- }
49
- .iui-breadcrumbs-item-overrides > :-webkit-any-link{
50
- color:var(--iui-color-foreground-primary);
51
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-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-foreground-primary);
60
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-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-foreground-primary);
69
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-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-foreground-primary);
78
- outline-offset:1px;
79
- }
80
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
81
- outline:1px solid var(--iui-color-foreground-primary);
82
- outline-offset:1px;
83
- }
84
- .iui-breadcrumbs-item-overrides > :any-link:focus-visible{
85
- outline:1px solid var(--iui-color-foreground-primary);
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-foreground-primary);
91
- outline-offset:1px;
92
- }
93
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
94
- outline:1px solid var(--iui-color-foreground-primary);
95
- outline-offset:1px;
96
- }
97
- .iui-breadcrumbs-item-overrides > :any-link:focus{
98
- outline:1px solid var(--iui-color-foreground-primary);
99
- outline-offset:1px;
100
- }
101
- }
102
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
103
- color:var(--iui-color-foreground-primary-hover);
104
- }
105
- .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
106
- color:var(--iui-color-foreground-primary-hover);
107
- }
108
- .iui-breadcrumbs-item-overrides > :any-link:hover{
109
- color:var(--iui-color-foreground-primary-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
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link{
141
- text-decoration:none;
142
- }
143
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link{
144
- text-decoration:none;
145
- }
146
- .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link{
147
- text-decoration:none;
148
- }
149
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
150
- text-decoration:underline;
151
- }
152
- .iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
153
- text-decoration:underline;
154
- }
155
- .iui-theme-light .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link:hover{
156
- text-decoration:underline;
157
- }
158
-
159
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link{
160
- text-decoration:underline;
161
- }
162
-
163
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link{
164
- text-decoration:underline;
165
- }
166
-
167
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link{
168
- text-decoration:underline;
169
- }
170
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
171
- text-decoration:none;
172
- }
173
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
174
- text-decoration:none;
175
- }
176
- .iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link:hover{
177
- text-decoration:none;
178
- }
179
-
180
- .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
181
- outline-offset:-1px;
182
- }
183
-
184
- .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
185
- outline-offset:-1px;
186
- }
187
-
188
- .iui-breadcrumbs-item-overrides > :any-link:focus{
189
- outline-offset:-1px;
190
- }
191
- .iui-breadcrumbs-item-overrides .iui-button.iui-button{
192
- --_iui-button-text-color:var(--iui-color-foreground-2);
193
- --_iui-button-background-color:transparent;
194
- --_iui-button-border-color:transparent;
195
- --_iui-button-gap:var(--iui-size-xs);
196
- --_iui-button-padding-block:var(--iui-size-2xs);
197
- --_iui-button-padding-inline:var(--iui-size-m);
198
- --_iui-button-min-height:var(--iui-component-height);
199
- --_iui-button-padding-inline:var(--iui-size-xs);
200
- border:none;
201
- }
202
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover, :active){
203
- --_iui-button-text-color:var(--iui-color-foreground-1);
204
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
205
- }
206
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){
207
- outline-offset:-1px;
208
- outline-width:1px;
209
- }
210
- .iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
211
- --_iui-button-text-color:var(--iui-color-foreground-5);
212
- --_iui-button-background-color:transparent;
213
- --_iui-button-border-color:transparent;
214
- }
215
- .iui-breadcrumbs-item-overrides .iui-button > span{
216
- overflow:hidden;
217
- white-space:nowrap;
218
- text-overflow:ellipsis;
219
- }
220
- .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{
221
- --_iui-button-text-color:var(--iui-color-foreground-primary);
222
- }
223
-
224
- .iui-breadcrumbs-text{
225
- padding:0 var(--iui-size-xs);
226
- overflow:hidden;
227
- white-space:nowrap;
228
- text-overflow:ellipsis;
229
- line-height:var(--iui-component-height);
230
- }
231
- a.iui-breadcrumbs-text{
232
- color:var(--iui-color-foreground-primary);
233
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
234
- border-radius:var(--iui-border-radius-1);
235
- cursor:pointer;
236
- text-decoration:none;
237
- }
238
- a.iui-breadcrumbs-text:focus-visible{
239
- outline:1px solid var(--iui-color-foreground-primary);
240
- outline-offset:1px;
241
- }
242
- @supports not selector(*:focus-visible){
243
- a.iui-breadcrumbs-text:focus{
244
- outline:1px solid var(--iui-color-foreground-primary);
245
- outline-offset:1px;
246
- }
247
- }
248
- a.iui-breadcrumbs-text:hover{
249
- color:var(--iui-color-foreground-primary-hover);
250
- }
251
- a.iui-breadcrumbs-text:hover{
252
- text-decoration:underline;
253
- }
254
- @media (prefers-contrast: more){
255
- a.iui-breadcrumbs-text{
256
- text-decoration:underline;
257
- }
258
- a.iui-breadcrumbs-text:hover{
259
- text-decoration:none;
260
- }
261
- }
262
- .iui-theme-light a.iui-breadcrumbs-text, .iui-theme-dark a.iui-breadcrumbs-text{
263
- text-decoration:none;
264
- }
265
- .iui-theme-light a.iui-breadcrumbs-text:hover, .iui-theme-dark a.iui-breadcrumbs-text:hover{
266
- text-decoration:underline;
267
- }
268
-
269
- .iui-theme-light-hc a.iui-breadcrumbs-text, .iui-theme-dark-hc a.iui-breadcrumbs-text{
270
- text-decoration:underline;
271
- }
272
- .iui-theme-light-hc a.iui-breadcrumbs-text:hover, .iui-theme-dark-hc a.iui-breadcrumbs-text:hover{
273
- text-decoration:none;
274
- }
275
-
276
- a.iui-breadcrumbs-text:focus{
277
- outline-offset:-1px;
278
- }
279
-
280
- .iui-breadcrumbs-button{
281
- margin:0;
282
- padding:0;
283
- border:none;
284
- vertical-align:baseline;
285
- font-family:inherit;
286
- display:inline-flex;
287
- flex-shrink:0;
288
- align-items:center;
289
- vertical-align:middle;
290
- justify-content:center;
291
- position:relative;
292
- border-radius:var(--iui-border-radius-1);
293
- line-height:var(--iui-size-l);
294
- font-size:var(--iui-font-size-1);
295
- font-weight:var(--iui-font-weight-normal);
296
- -webkit-user-select:none;
297
- -moz-user-select:none;
298
- -ms-user-select:none;
299
- user-select:none;
300
- cursor:pointer;
301
- white-space:nowrap;
302
- border:1px solid var(--_iui-button-border-color);
303
- background:var(--_iui-button-background-color);
304
- color:var(--_iui-button-text-color);
305
- gap:var(--_iui-button-gap);
306
- min-height:var(--_iui-button-min-height);
307
- min-width:var(--_iui-button-min-height);
308
- padding-block:var(--_iui-button-padding-block);
309
- padding-inline:var(--_iui-button-padding-inline);
310
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
311
- -webkit-tap-highlight-color:transparent;
312
- text-decoration:none;
313
- --_iui-button-gap:var(--iui-size-xs);
314
- --_iui-button-padding-block:var(--iui-size-2xs);
315
- --_iui-button-padding-inline:var(--iui-size-m);
316
- --_iui-button-min-height:var(--iui-component-height);
317
- --_iui-button-text-color:var(--iui-color-foreground-2);
318
- --_iui-button-background-color:transparent;
319
- --_iui-button-border-color:transparent;
320
- --_iui-button-gap:var(--iui-size-xs);
321
- --_iui-button-padding-block:var(--iui-size-2xs);
322
- --_iui-button-padding-inline:var(--iui-size-m);
323
- --_iui-button-min-height:var(--iui-component-height);
324
- --_iui-button-padding-inline:var(--iui-size-xs);
325
- padding:0;
326
- border:none;
327
- color:var(--iui-color-foreground-primary);
328
- }
329
- .iui-breadcrumbs-button:focus-visible{
330
- outline:1px solid var(--iui-color-foreground-primary);
331
- outline-offset:-1px;
332
- }
333
- @supports not selector(*:focus-visible){
334
- .iui-breadcrumbs-button:focus{
335
- outline:1px solid var(--iui-color-foreground-primary);
336
- outline-offset:-1px;
337
- }
338
- }
339
- .iui-breadcrumbs-button:where(:hover, :active){
340
- --_iui-button-text-color:var(--iui-color-foreground-1);
341
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
342
- }
343
- .iui-breadcrumbs-button:where(:focus){
344
- outline-offset:-1px;
345
- outline-width:1px;
346
- }
347
- .iui-breadcrumbs-button:where([disabled], :disabled, [aria-disabled="true"]){
348
- --_iui-button-text-color:var(--iui-color-foreground-5);
349
- --_iui-button-background-color:transparent;
350
- --_iui-button-border-color:transparent;
351
- }
352
- .iui-breadcrumbs-button[aria-current]{
353
- color:var(--iui-color-foreground-2);
354
- }
355
-
356
- .iui-breadcrumbs-separator{
357
- display:flex;
358
- margin:0 var(--iui-size-3xs);
359
- }
360
- .iui-breadcrumbs-separator svg{
361
- display:flex;
362
- flex-shrink:0;
363
- width:var(--iui-size-s);
364
- height:var(--iui-size-s);
365
- fill:var(--iui-color-foreground-4);
366
- }
367
- @media (forced-colors: active){
368
- .iui-breadcrumbs-separator svg{
369
- fill:CanvasText;
370
- }
371
- }
372
- @media (forced-colors: active){
373
- .iui-breadcrumbs-separator svg{
374
- fill:CanvasText;
375
- }
376
- }
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}}