@itwin/itwinui-css 0.63.2-dev.0 → 0.63.2

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 (96) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +969 -925
  4. package/css/anchor.css +58 -56
  5. package/css/backdrop.css +21 -19
  6. package/css/badge.css +26 -24
  7. package/css/blockquote.css +26 -24
  8. package/css/breadcrumbs.css +384 -382
  9. package/css/button.css +462 -460
  10. package/css/carousel.css +119 -117
  11. package/css/code.css +87 -85
  12. package/css/color-picker.css +221 -219
  13. package/css/date-picker.css +449 -447
  14. package/css/dialog.css +153 -151
  15. package/css/expandable-block.css +209 -207
  16. package/css/fieldset.css +33 -31
  17. package/css/file-upload.css +100 -98
  18. package/css/footer.css +87 -85
  19. package/css/global.css +462 -460
  20. package/css/header.css +484 -482
  21. package/css/icon.css +163 -161
  22. package/css/information-panel.css +190 -188
  23. package/css/inputs.css +1257 -1255
  24. package/css/keyboard.css +34 -32
  25. package/css/location-marker.css +110 -108
  26. package/css/menu.css +168 -166
  27. package/css/non-ideal-state.css +62 -60
  28. package/css/notification-marker.css +246 -244
  29. package/css/popover.css +11 -9
  30. package/css/progress-indicator.css +379 -377
  31. package/css/radio-tile.css +184 -182
  32. package/css/reset-global-styles.css +35 -33
  33. package/css/side-navigation.css +209 -207
  34. package/css/skip-to-content.css +55 -53
  35. package/css/slider.css +240 -238
  36. package/css/surface.css +14 -12
  37. package/css/table.css +710 -708
  38. package/css/tabs.css +339 -337
  39. package/css/tag.css +142 -140
  40. package/css/text.css +102 -100
  41. package/css/tile.css +544 -542
  42. package/css/time-picker.css +125 -123
  43. package/css/toast-notification.css +301 -299
  44. package/css/toggle-switch.css +237 -235
  45. package/css/tooltip.css +53 -51
  46. package/css/tree.css +137 -135
  47. package/css/user-icon.css +242 -240
  48. package/css/wizard.css +182 -180
  49. package/package.json +1 -1
  50. package/scss/alert/classes.scss +7 -5
  51. package/scss/anchor/classes.scss +6 -4
  52. package/scss/backdrop/classes.scss +4 -2
  53. package/scss/badge/classes.scss +4 -2
  54. package/scss/blockquote/classes.scss +4 -2
  55. package/scss/breadcrumbs/classes.scss +22 -20
  56. package/scss/button/classes.scss +47 -45
  57. package/scss/carousel/classes.scss +10 -8
  58. package/scss/classes.scss +46 -50
  59. package/scss/code/classes.scss +7 -5
  60. package/scss/color-picker/classes.scss +40 -38
  61. package/scss/date-picker/classes.scss +44 -42
  62. package/scss/dialog/classes.scss +45 -43
  63. package/scss/expandable-block/classes.scss +4 -2
  64. package/scss/fieldset/classes.scss +4 -2
  65. package/scss/file-upload/classes.scss +4 -2
  66. package/scss/footer/classes.scss +16 -14
  67. package/scss/header/classes.scss +7 -5
  68. package/scss/icon/classes.scss +19 -17
  69. package/scss/information-panel/classes.scss +18 -16
  70. package/scss/inputs/classes.scss +62 -60
  71. package/scss/keyboard/classes.scss +4 -2
  72. package/scss/location-marker/classes.scss +10 -8
  73. package/scss/menu/classes.scss +14 -12
  74. package/scss/non-ideal-state/classes.scss +4 -2
  75. package/scss/notification-marker/classes.scss +5 -3
  76. package/scss/popover/classes.scss +4 -2
  77. package/scss/progress-indicator/classes.scss +22 -20
  78. package/scss/radio-tile/classes.scss +22 -20
  79. package/scss/reset-global-styles.scss +25 -23
  80. package/scss/side-navigation/classes.scss +10 -8
  81. package/scss/skip-to-content/classes.scss +4 -2
  82. package/scss/slider/classes.scss +37 -35
  83. package/scss/style/global.scss +49 -47
  84. package/scss/surface/classes.scss +4 -2
  85. package/scss/table/classes.scss +45 -43
  86. package/scss/tabs/classes.scss +31 -29
  87. package/scss/tag/classes.scss +20 -18
  88. package/scss/text/classes.scss +36 -34
  89. package/scss/tile/classes.scss +36 -34
  90. package/scss/time-picker/classes.scss +11 -9
  91. package/scss/toast-notification/classes.scss +71 -69
  92. package/scss/toggle-switch/classes.scss +7 -5
  93. package/scss/tooltip/classes.scss +17 -15
  94. package/scss/tree/classes.scss +13 -11
  95. package/scss/user-icon/classes.scss +18 -16
  96. package/scss/wizard/classes.scss +18 -16
package/css/button.css CHANGED
@@ -2,491 +2,493 @@
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-button{
6
- --_iui-button-active-stripe-inset:initial;
7
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
8
- margin:0;
9
- padding:0;
10
- border:none;
11
- vertical-align:baseline;
12
- font-family:inherit;
13
- display:inline-flex;
14
- align-items:center;
15
- vertical-align:middle;
16
- justify-content:center;
17
- position:relative;
18
- box-sizing:border-box;
19
- border-radius:4px;
20
- line-height:22px;
21
- box-shadow:none;
22
- font-size:14px;
23
- font-weight:400;
24
- text-decoration:none;
25
- -webkit-user-select:none;
26
- -moz-user-select:none;
27
- -ms-user-select:none;
28
- user-select:none;
29
- cursor:pointer;
30
- white-space:nowrap;
31
- border:1px solid transparent;
32
- color:rgba(0, 0, 0, 0.8);
33
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
34
- color:var(--_iui-button-text-color);
35
- padding:0 16px;
36
- height:38px;
37
- gap:8px;
38
- padding:0 16px;
39
- height:38px;
40
- gap:8px;
41
- }
42
- @media (prefers-reduced-motion: no-preference){
5
+ @layer itwinui-v1{
43
6
  .iui-button{
44
- transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
45
- }
46
- }
47
- .iui-button:hover{
48
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
49
- text-decoration:none;
50
- }
51
- .iui-button:focus-visible{
52
- outline:1px solid var(--iui-color-foreground-primary);
53
- outline-offset:-1px;
54
- }
55
- @supports not selector(*:focus-visible){
56
- .iui-button:focus{
7
+ --_iui-button-active-stripe-inset:initial;
8
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
9
+ margin:0;
10
+ padding:0;
11
+ border:none;
12
+ vertical-align:baseline;
13
+ font-family:inherit;
14
+ display:inline-flex;
15
+ align-items:center;
16
+ vertical-align:middle;
17
+ justify-content:center;
18
+ position:relative;
19
+ box-sizing:border-box;
20
+ border-radius:4px;
21
+ line-height:22px;
22
+ box-shadow:none;
23
+ font-size:14px;
24
+ font-weight:400;
25
+ text-decoration:none;
26
+ -webkit-user-select:none;
27
+ -moz-user-select:none;
28
+ -ms-user-select:none;
29
+ user-select:none;
30
+ cursor:pointer;
31
+ white-space:nowrap;
32
+ border:1px solid transparent;
33
+ color:rgba(0, 0, 0, 0.8);
34
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
35
+ color:var(--_iui-button-text-color);
36
+ padding:0 16px;
37
+ height:38px;
38
+ gap:8px;
39
+ padding:0 16px;
40
+ height:38px;
41
+ gap:8px;
42
+ }
43
+ @media (prefers-reduced-motion: no-preference){
44
+ .iui-button{
45
+ transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
46
+ }
47
+ }
48
+ .iui-button:hover{
49
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
50
+ text-decoration:none;
51
+ }
52
+ .iui-button:focus-visible{
57
53
  outline:1px solid var(--iui-color-foreground-primary);
58
54
  outline-offset:-1px;
59
55
  }
60
- }
61
- .iui-button[disabled], .iui-button:disabled{
62
- cursor:not-allowed;
63
- background:#edeff2;
64
- border-color:#edeff2;
65
- color:rgba(0, 0, 0, 0.2);
66
- background:var(--iui-color-background-disabled);
67
- border-color:var(--iui-color-background-disabled);
68
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
69
- }
70
- .iui-button.iui-active::after{
71
- content:"";
72
- position:absolute;
73
- inset:var(--_iui-button-active-stripe-inset);
74
- background-color:var(--iui-color-foreground-primary);
75
- }
76
- .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
77
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
78
- }
79
- .iui-button.iui-default{
80
- background-color:white;
81
- border-color:rgba(0, 0, 0, 0.4);
82
- background-color:var(--iui-color-background-1);
83
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
84
- }
85
- .iui-button.iui-default:focus-visible{
86
- outline:2px solid var(--iui-color-foreground-primary);
87
- outline-offset:-2px;
88
- }
89
- @supports not selector(*:focus-visible){
90
- .iui-button.iui-default:focus{
56
+ @supports not selector(*:focus-visible){
57
+ .iui-button:focus{
58
+ outline:1px solid var(--iui-color-foreground-primary);
59
+ outline-offset:-1px;
60
+ }
61
+ }
62
+ .iui-button[disabled], .iui-button:disabled{
63
+ cursor:not-allowed;
64
+ background:#edeff2;
65
+ border-color:#edeff2;
66
+ color:rgba(0, 0, 0, 0.2);
67
+ background:var(--iui-color-background-disabled);
68
+ border-color:var(--iui-color-background-disabled);
69
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
70
+ }
71
+ .iui-button.iui-active::after{
72
+ content:"";
73
+ position:absolute;
74
+ inset:var(--_iui-button-active-stripe-inset);
75
+ background-color:var(--iui-color-foreground-primary);
76
+ }
77
+ .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
78
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
79
+ }
80
+ .iui-button.iui-default{
81
+ background-color:white;
82
+ border-color:rgba(0, 0, 0, 0.4);
83
+ background-color:var(--iui-color-background-1);
84
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
85
+ }
86
+ .iui-button.iui-default:focus-visible{
91
87
  outline:2px solid var(--iui-color-foreground-primary);
92
88
  outline-offset:-2px;
93
89
  }
94
- }
95
- .iui-button.iui-default:hover, .iui-button.iui-default:active{
96
- background-color:#f2f2f2;
97
- border-color:black;
98
- background-color:var(--iui-color-background-1-overlay);
99
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
100
- }
101
- .iui-button.iui-default:hover .iui-notification-primary::before,
90
+ @supports not selector(*:focus-visible){
91
+ .iui-button.iui-default:focus{
92
+ outline:2px solid var(--iui-color-foreground-primary);
93
+ outline-offset:-2px;
94
+ }
95
+ }
96
+ .iui-button.iui-default:hover, .iui-button.iui-default:active{
97
+ background-color:#f2f2f2;
98
+ border-color:black;
99
+ background-color:var(--iui-color-background-1-overlay);
100
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
101
+ }
102
+ .iui-button.iui-default:hover .iui-notification-primary::before,
102
103
  .iui-button.iui-default:hover .iui-notification-positive::before,
103
104
  .iui-button.iui-default:hover .iui-notification-warning::before,
104
105
  .iui-button.iui-default:hover .iui-notification-negative::before, .iui-button.iui-default:active .iui-notification-primary::before,
105
106
  .iui-button.iui-default:active .iui-notification-positive::before,
106
107
  .iui-button.iui-default:active .iui-notification-warning::before,
107
108
  .iui-button.iui-default:active .iui-notification-negative::before{
108
- border-color:#f2f2f2;
109
- border-color:var(--iui-color-background-1-overlay);
110
- }
111
- .iui-button.iui-default.iui-dropdown{
112
- padding-right:8px;
113
- }
114
- .iui-button.iui-default.iui-dropdown.iui-small{
115
- padding-right:4px;
116
- }
117
- .iui-button.iui-default.iui-dropdown.iui-large{
118
- padding-right:12px;
119
- }
120
- .iui-button.iui-default.iui-active:enabled{
121
- position:relative;
122
- color:#008ae0;
123
- color:var(--iui-color-foreground-primary);
124
- }
125
- .iui-button.iui-default.iui-active:enabled::before{
126
- content:"";
127
- position:absolute;
128
- inset:0;
129
- background-color:rgba(0, 138, 224, 0.1);
130
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
131
- }
132
- .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
133
- cursor:not-allowed;
134
- background:#edeff2;
135
- border-color:#edeff2;
136
- color:rgba(0, 0, 0, 0.2);
137
- background:var(--iui-color-background-disabled);
138
- border-color:var(--iui-color-background-disabled);
139
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
140
- }
141
- .iui-button.iui-high-visibility{
142
- --_iui-button-text-color:var(--iui-color-foreground-accessory);
143
- background-color:#008ae0;
144
- border-color:#008ae0;
145
- color:white;
146
- background-color:var(--iui-color-background-primary);
147
- border-color:var(--iui-color-background-primary);
148
- color:var(--iui-color-foreground-accessory);
149
- color:var(--_iui-button-text-color);
150
- }
151
- .iui-button.iui-high-visibility:focus-visible{
152
- outline:1px solid var(--iui-color-foreground-accessory);
153
- outline-offset:-3px;
154
- }
155
- @supports not selector(*:focus-visible){
156
- .iui-button.iui-high-visibility:focus{
109
+ border-color:#f2f2f2;
110
+ border-color:var(--iui-color-background-1-overlay);
111
+ }
112
+ .iui-button.iui-default.iui-dropdown{
113
+ padding-right:8px;
114
+ }
115
+ .iui-button.iui-default.iui-dropdown.iui-small{
116
+ padding-right:4px;
117
+ }
118
+ .iui-button.iui-default.iui-dropdown.iui-large{
119
+ padding-right:12px;
120
+ }
121
+ .iui-button.iui-default.iui-active:enabled{
122
+ position:relative;
123
+ color:#008ae0;
124
+ color:var(--iui-color-foreground-primary);
125
+ }
126
+ .iui-button.iui-default.iui-active:enabled::before{
127
+ content:"";
128
+ position:absolute;
129
+ inset:0;
130
+ background-color:rgba(0, 138, 224, 0.1);
131
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
132
+ }
133
+ .iui-button.iui-default[disabled], .iui-button.iui-default:disabled{
134
+ cursor:not-allowed;
135
+ background:#edeff2;
136
+ border-color:#edeff2;
137
+ color:rgba(0, 0, 0, 0.2);
138
+ background:var(--iui-color-background-disabled);
139
+ border-color:var(--iui-color-background-disabled);
140
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
141
+ }
142
+ .iui-button.iui-high-visibility{
143
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
144
+ background-color:#008ae0;
145
+ border-color:#008ae0;
146
+ color:white;
147
+ background-color:var(--iui-color-background-primary);
148
+ border-color:var(--iui-color-background-primary);
149
+ color:var(--iui-color-foreground-accessory);
150
+ color:var(--_iui-button-text-color);
151
+ }
152
+ .iui-button.iui-high-visibility:focus-visible{
157
153
  outline:1px solid var(--iui-color-foreground-accessory);
158
154
  outline-offset:-3px;
159
155
  }
160
- }
161
- .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
162
- background-color:#006bad;
163
- border-color:#006bad;
164
- background-color:var(--iui-color-background-primary-overlay);
165
- border-color:var(--iui-color-background-primary-overlay);
166
- }
167
- .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
168
- cursor:not-allowed;
169
- background:#edeff2;
170
- border-color:#edeff2;
171
- color:rgba(0, 0, 0, 0.2);
172
- background:var(--iui-color-background-disabled);
173
- border-color:var(--iui-color-background-disabled);
174
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
175
- }
176
- .iui-button.iui-cta{
177
- --_iui-button-text-color:var(--iui-color-foreground-accessory);
178
- background-color:#53a21a;
179
- border-color:#53a21a;
180
- color:white;
181
- background-color:var(--iui-color-background-positive);
182
- border-color:var(--iui-color-background-positive);
183
- color:var(--iui-color-foreground-accessory);
184
- color:var(--_iui-button-text-color);
185
- }
186
- .iui-button.iui-cta:focus-visible{
187
- outline:1px solid var(--iui-color-foreground-accessory);
188
- outline-offset:-3px;
189
- }
190
- @supports not selector(*:focus-visible){
191
- .iui-button.iui-cta:focus{
156
+ @supports not selector(*:focus-visible){
157
+ .iui-button.iui-high-visibility:focus{
158
+ outline:1px solid var(--iui-color-foreground-accessory);
159
+ outline-offset:-3px;
160
+ }
161
+ }
162
+ .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
163
+ background-color:#006bad;
164
+ border-color:#006bad;
165
+ background-color:var(--iui-color-background-primary-overlay);
166
+ border-color:var(--iui-color-background-primary-overlay);
167
+ }
168
+ .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
169
+ cursor:not-allowed;
170
+ background:#edeff2;
171
+ border-color:#edeff2;
172
+ color:rgba(0, 0, 0, 0.2);
173
+ background:var(--iui-color-background-disabled);
174
+ border-color:var(--iui-color-background-disabled);
175
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
176
+ }
177
+ .iui-button.iui-cta{
178
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
179
+ background-color:#53a21a;
180
+ border-color:#53a21a;
181
+ color:white;
182
+ background-color:var(--iui-color-background-positive);
183
+ border-color:var(--iui-color-background-positive);
184
+ color:var(--iui-color-foreground-accessory);
185
+ color:var(--_iui-button-text-color);
186
+ }
187
+ .iui-button.iui-cta:focus-visible{
192
188
  outline:1px solid var(--iui-color-foreground-accessory);
193
189
  outline-offset:-3px;
194
190
  }
195
- }
196
- .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
197
- background-color:#3d7613;
198
- border-color:#3d7613;
199
- background-color:var(--iui-color-background-positive-overlay);
200
- border-color:var(--iui-color-background-positive-overlay);
201
- }
202
- .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
203
- cursor:not-allowed;
204
- background:#edeff2;
205
- border-color:#edeff2;
206
- color:rgba(0, 0, 0, 0.2);
207
- background:var(--iui-color-background-disabled);
208
- border-color:var(--iui-color-background-disabled);
209
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
210
- }
211
- .iui-button.iui-idea{
212
- --_iui-button-text-color:var(--iui-color-foreground-accessory);
213
- background-color:#008ae0;
214
- border-color:#008ae0;
215
- color:white;
216
- background-color:var(--iui-color-background-primary);
217
- border-color:var(--iui-color-background-primary);
218
- color:var(--iui-color-foreground-accessory);
219
- color:var(--_iui-button-text-color);
220
- border-radius:22px;
221
- box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
222
- position:fixed;
223
- bottom:11px;
224
- right:16px;
225
- }
226
- .iui-button.iui-idea:focus-visible{
227
- outline:1px solid var(--iui-color-foreground-accessory);
228
- outline-offset:-3px;
229
- }
230
- @supports not selector(*:focus-visible){
231
- .iui-button.iui-idea:focus{
191
+ @supports not selector(*:focus-visible){
192
+ .iui-button.iui-cta:focus{
193
+ outline:1px solid var(--iui-color-foreground-accessory);
194
+ outline-offset:-3px;
195
+ }
196
+ }
197
+ .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
198
+ background-color:#3d7613;
199
+ border-color:#3d7613;
200
+ background-color:var(--iui-color-background-positive-overlay);
201
+ border-color:var(--iui-color-background-positive-overlay);
202
+ }
203
+ .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
204
+ cursor:not-allowed;
205
+ background:#edeff2;
206
+ border-color:#edeff2;
207
+ color:rgba(0, 0, 0, 0.2);
208
+ background:var(--iui-color-background-disabled);
209
+ border-color:var(--iui-color-background-disabled);
210
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
211
+ }
212
+ .iui-button.iui-idea{
213
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
214
+ background-color:#008ae0;
215
+ border-color:#008ae0;
216
+ color:white;
217
+ background-color:var(--iui-color-background-primary);
218
+ border-color:var(--iui-color-background-primary);
219
+ color:var(--iui-color-foreground-accessory);
220
+ color:var(--_iui-button-text-color);
221
+ border-radius:22px;
222
+ box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
223
+ position:fixed;
224
+ bottom:11px;
225
+ right:16px;
226
+ }
227
+ .iui-button.iui-idea:focus-visible{
232
228
  outline:1px solid var(--iui-color-foreground-accessory);
233
229
  outline-offset:-3px;
234
230
  }
235
- }
236
- .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
237
- background-color:#006bad;
238
- border-color:#006bad;
239
- background-color:var(--iui-color-background-primary-overlay);
240
- border-color:var(--iui-color-background-primary-overlay);
241
- }
242
- .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
243
- cursor:not-allowed;
244
- background:#edeff2;
245
- border-color:#edeff2;
246
- color:rgba(0, 0, 0, 0.2);
247
- background:var(--iui-color-background-disabled);
248
- border-color:var(--iui-color-background-disabled);
249
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
250
- }
251
- .iui-button.iui-borderless{
252
- border-color:transparent;
253
- background-color:transparent;
254
- padding:0 8px;
255
- height:38px;
256
- gap:8px;
257
- }
258
- .iui-button.iui-borderless > .iui-button-icon:only-child{
259
- margin-left:3px;
260
- margin-right:3px;
261
- }
262
- .iui-button.iui-borderless:hover{
263
- background-color:rgba(0, 0, 0, 0.1);
264
- border-color:transparent;
265
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
266
- border-color:transparent;
267
- }
268
- .iui-button.iui-borderless.iui-active{
269
- background-color:rgba(0, 138, 224, 0.1);
270
- color:#008ae0;
271
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
272
- color:var(--iui-color-foreground-primary);
273
- border-color:transparent;
274
- }
275
- .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
276
- cursor:not-allowed;
277
- background:#edeff2;
278
- border-color:#edeff2;
279
- color:rgba(0, 0, 0, 0.2);
280
- background:var(--iui-color-background-disabled);
281
- border-color:var(--iui-color-background-disabled);
282
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
283
- background-color:transparent;
284
- border-color:transparent;
285
- background-color:transparent;
286
- border-color:transparent;
287
- }
288
- .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
289
- background-color:rgba(0, 0, 0, 0.05);
290
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
291
- }
292
- .iui-button.iui-small{
293
- padding:0 8px;
294
- height:27px;
295
- gap:4px;
296
- }
297
- .iui-button.iui-small.iui-borderless{
298
- padding:0 2px;
299
- height:27px;
300
- gap:4px;
301
- }
302
- .iui-button.iui-large{
303
- padding:0 24px;
304
- height:49px;
305
- font-size:16px;
306
- gap:12px;
307
- }
308
- .iui-button.iui-large.iui-borderless{
309
- padding:0 12px;
310
- height:49px;
311
- font-size:16px;
312
- gap:12px;
313
- }
231
+ @supports not selector(*:focus-visible){
232
+ .iui-button.iui-idea:focus{
233
+ outline:1px solid var(--iui-color-foreground-accessory);
234
+ outline-offset:-3px;
235
+ }
236
+ }
237
+ .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
238
+ background-color:#006bad;
239
+ border-color:#006bad;
240
+ background-color:var(--iui-color-background-primary-overlay);
241
+ border-color:var(--iui-color-background-primary-overlay);
242
+ }
243
+ .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
244
+ cursor:not-allowed;
245
+ background:#edeff2;
246
+ border-color:#edeff2;
247
+ color:rgba(0, 0, 0, 0.2);
248
+ background:var(--iui-color-background-disabled);
249
+ border-color:var(--iui-color-background-disabled);
250
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
251
+ }
252
+ .iui-button.iui-borderless{
253
+ border-color:transparent;
254
+ background-color:transparent;
255
+ padding:0 8px;
256
+ height:38px;
257
+ gap:8px;
258
+ }
259
+ .iui-button.iui-borderless > .iui-button-icon:only-child{
260
+ margin-left:3px;
261
+ margin-right:3px;
262
+ }
263
+ .iui-button.iui-borderless:hover{
264
+ background-color:rgba(0, 0, 0, 0.1);
265
+ border-color:transparent;
266
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
267
+ border-color:transparent;
268
+ }
269
+ .iui-button.iui-borderless.iui-active{
270
+ background-color:rgba(0, 138, 224, 0.1);
271
+ color:#008ae0;
272
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
273
+ color:var(--iui-color-foreground-primary);
274
+ border-color:transparent;
275
+ }
276
+ .iui-button.iui-borderless[disabled], .iui-button.iui-borderless:disabled{
277
+ cursor:not-allowed;
278
+ background:#edeff2;
279
+ border-color:#edeff2;
280
+ color:rgba(0, 0, 0, 0.2);
281
+ background:var(--iui-color-background-disabled);
282
+ border-color:var(--iui-color-background-disabled);
283
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
284
+ background-color:transparent;
285
+ border-color:transparent;
286
+ background-color:transparent;
287
+ border-color:transparent;
288
+ }
289
+ .iui-button.iui-borderless[disabled].iui-active, .iui-button.iui-borderless:disabled.iui-active{
290
+ background-color:rgba(0, 0, 0, 0.05);
291
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
292
+ }
293
+ .iui-button.iui-small{
294
+ padding:0 8px;
295
+ height:27px;
296
+ gap:4px;
297
+ }
298
+ .iui-button.iui-small.iui-borderless{
299
+ padding:0 2px;
300
+ height:27px;
301
+ gap:4px;
302
+ }
303
+ .iui-button.iui-large{
304
+ padding:0 24px;
305
+ height:49px;
306
+ font-size:16px;
307
+ gap:12px;
308
+ }
309
+ .iui-button.iui-large.iui-borderless{
310
+ padding:0 12px;
311
+ height:49px;
312
+ font-size:16px;
313
+ gap:12px;
314
+ }
314
315
 
315
- .iui-button-group{
316
- display:inline-flex;
317
- align-items:center;
318
- isolation:isolate;
319
- }
320
- .iui-button-group > *{
321
- display:flex;
322
- }
323
- .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
324
- position:relative;
325
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
326
- }
327
- .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
328
- z-index:1;
329
- }
330
- .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
331
- z-index:2;
332
- }
333
- .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
334
- z-index:-1;
335
- }
336
- .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
337
- border-radius:0;
338
- transition-duration:0ms;
339
- }
340
- .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
341
- transition-duration:0.2s;
342
- }
343
- .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
344
- border-top-left-radius:4px;
345
- border-bottom-left-radius:4px;
346
- }
347
- .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
348
- border-bottom-right-radius:4px;
349
- border-top-right-radius:4px;
350
- }
351
- .iui-button-group > * + *{
352
- margin-left:-1px;
353
- }
354
- .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
355
- border-left-color:var(--iui-color-background-4);
356
- }
357
- .iui-button-group-vertical{
358
- display:inline-flex;
359
- align-items:center;
360
- isolation:isolate;
361
- flex-direction:column;
362
- max-height:100%;
363
- }
364
- .iui-button-group-vertical > *{
365
- display:flex;
366
- }
367
- .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
368
- position:relative;
369
- --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
370
- }
371
- .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
372
- z-index:1;
373
- }
374
- .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
375
- z-index:2;
376
- }
377
- .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
378
- z-index:-1;
379
- }
380
- .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
381
- border-radius:0;
382
- transition-duration:0ms;
383
- }
384
- .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
385
- transition-duration:0.2s;
386
- }
387
- .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
388
- border-top-left-radius:4px;
389
- border-top-right-radius:4px;
390
- }
391
- .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
392
- border-bottom-right-radius:4px;
393
- border-bottom-left-radius:4px;
394
- }
395
- .iui-button-group-vertical > * + *{
396
- margin-top:-1px;
397
- }
398
- .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
399
- border-top-color:var(--iui-color-background-4);
400
- }
401
- .iui-button-group-overflow-x{
402
- width:100%;
403
- }
316
+ .iui-button-group{
317
+ display:inline-flex;
318
+ align-items:center;
319
+ isolation:isolate;
320
+ }
321
+ .iui-button-group > *{
322
+ display:flex;
323
+ }
324
+ .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
325
+ position:relative;
326
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
327
+ }
328
+ .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
329
+ z-index:1;
330
+ }
331
+ .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
332
+ z-index:2;
333
+ }
334
+ .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
335
+ z-index:-1;
336
+ }
337
+ .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
338
+ border-radius:0;
339
+ transition-duration:0ms;
340
+ }
341
+ .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
342
+ transition-duration:0.2s;
343
+ }
344
+ .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
345
+ border-top-left-radius:4px;
346
+ border-bottom-left-radius:4px;
347
+ }
348
+ .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
349
+ border-bottom-right-radius:4px;
350
+ border-top-right-radius:4px;
351
+ }
352
+ .iui-button-group > * + *{
353
+ margin-left:-1px;
354
+ }
355
+ .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
356
+ border-left-color:var(--iui-color-background-4);
357
+ }
358
+ .iui-button-group-vertical{
359
+ display:inline-flex;
360
+ align-items:center;
361
+ isolation:isolate;
362
+ flex-direction:column;
363
+ max-height:100%;
364
+ }
365
+ .iui-button-group-vertical > *{
366
+ display:flex;
367
+ }
368
+ .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
369
+ position:relative;
370
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px;
371
+ }
372
+ .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
373
+ z-index:1;
374
+ }
375
+ .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
376
+ z-index:2;
377
+ }
378
+ .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
379
+ z-index:-1;
380
+ }
381
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
382
+ border-radius:0;
383
+ transition-duration:0ms;
384
+ }
385
+ .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
386
+ transition-duration:0.2s;
387
+ }
388
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
389
+ border-top-left-radius:4px;
390
+ border-top-right-radius:4px;
391
+ }
392
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
393
+ border-bottom-right-radius:4px;
394
+ border-bottom-left-radius:4px;
395
+ }
396
+ .iui-button-group-vertical > * + *{
397
+ margin-top:-1px;
398
+ }
399
+ .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
400
+ border-top-color:var(--iui-color-background-4);
401
+ }
402
+ .iui-button-group-overflow-x{
403
+ width:100%;
404
+ }
404
405
 
405
- .iui-button-split-menu{
406
- display:inline-flex;
407
- align-items:center;
408
- isolation:isolate;
409
- }
410
- .iui-button-split-menu > *{
411
- display:flex;
412
- }
413
- .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
414
- position:relative;
415
- --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
416
- }
417
- .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
418
- z-index:1;
419
- }
420
- .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
421
- z-index:2;
422
- }
423
- .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled=true], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled=true], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
424
- z-index:-1;
425
- }
426
- .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
427
- border-radius:0;
428
- transition-duration:0ms;
429
- }
430
- .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
431
- transition-duration:0.2s;
432
- }
433
- .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
434
- border-top-left-radius:4px;
435
- border-bottom-left-radius:4px;
436
- }
437
- .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
438
- border-bottom-right-radius:4px;
439
- border-top-right-radius:4px;
440
- }
441
- .iui-button-split-menu > * + *{
442
- margin-left:-1px;
443
- }
444
- .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
445
- border-left-color:var(--iui-color-background-4);
446
- }
447
- .iui-button-split-menu:hover{
448
- background-color:rgba(0, 0, 0, 0.1);
449
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
450
- }
451
- .iui-button-split-menu > *:first-child > .iui-borderless:hover{
452
- background-color:transparent;
453
- }
454
- .iui-button-split-menu > *:last-child > .iui-button{
455
- padding:4px;
456
- }
457
- .iui-button-split-menu > *:last-child > .iui-small{
458
- padding:2px;
459
- }
460
- .iui-button-split-menu > *:last-child > .iui-large{
461
- padding:8px;
462
- }
463
- .iui-button-split-menu > *:first-child > .iui-high-visibility,
406
+ .iui-button-split-menu{
407
+ display:inline-flex;
408
+ align-items:center;
409
+ isolation:isolate;
410
+ }
411
+ .iui-button-split-menu > *{
412
+ display:flex;
413
+ }
414
+ .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
415
+ position:relative;
416
+ --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
417
+ }
418
+ .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
419
+ z-index:1;
420
+ }
421
+ .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
422
+ z-index:2;
423
+ }
424
+ .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled=true], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled=true], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
425
+ z-index:-1;
426
+ }
427
+ .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
428
+ border-radius:0;
429
+ transition-duration:0ms;
430
+ }
431
+ .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
432
+ transition-duration:0.2s;
433
+ }
434
+ .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
435
+ border-top-left-radius:4px;
436
+ border-bottom-left-radius:4px;
437
+ }
438
+ .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
439
+ border-bottom-right-radius:4px;
440
+ border-top-right-radius:4px;
441
+ }
442
+ .iui-button-split-menu > * + *{
443
+ margin-left:-1px;
444
+ }
445
+ .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
446
+ border-left-color:var(--iui-color-background-4);
447
+ }
448
+ .iui-button-split-menu:hover{
449
+ background-color:rgba(0, 0, 0, 0.1);
450
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
451
+ }
452
+ .iui-button-split-menu > *:first-child > .iui-borderless:hover{
453
+ background-color:transparent;
454
+ }
455
+ .iui-button-split-menu > *:last-child > .iui-button{
456
+ padding:4px;
457
+ }
458
+ .iui-button-split-menu > *:last-child > .iui-small{
459
+ padding:2px;
460
+ }
461
+ .iui-button-split-menu > *:last-child > .iui-large{
462
+ padding:8px;
463
+ }
464
+ .iui-button-split-menu > *:first-child > .iui-high-visibility,
464
465
  .iui-button-split-menu > *:first-child > .iui-cta{
465
- border-right-color:rgba(255, 255, 255, 0.4);
466
- border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
467
- }
468
- .iui-button-split-menu > *:last-child > .iui-high-visibility,
466
+ border-right-color:rgba(255, 255, 255, 0.4);
467
+ border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
468
+ }
469
+ .iui-button-split-menu > *:last-child > .iui-high-visibility,
469
470
  .iui-button-split-menu > *:last-child > .iui-cta{
470
- border-left-color:rgba(255, 255, 255, 0.4);
471
- border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
472
- }
473
- .iui-button-split-menu.iui-disabled{
474
- background-color:transparent;
475
- background-color:transparent;
476
- }
477
- .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
478
- cursor:not-allowed;
479
- background:#edeff2;
480
- border-color:#edeff2;
481
- color:rgba(0, 0, 0, 0.2);
482
- background:var(--iui-color-background-disabled);
483
- border-color:var(--iui-color-background-disabled);
484
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
485
- }
471
+ border-left-color:rgba(255, 255, 255, 0.4);
472
+ border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
473
+ }
474
+ .iui-button-split-menu.iui-disabled{
475
+ background-color:transparent;
476
+ background-color:transparent;
477
+ }
478
+ .iui-button-split-menu[disabled], .iui-button-split-menu:disabled{
479
+ cursor:not-allowed;
480
+ background:#edeff2;
481
+ border-color:#edeff2;
482
+ color:rgba(0, 0, 0, 0.2);
483
+ background:var(--iui-color-background-disabled);
484
+ border-color:var(--iui-color-background-disabled);
485
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
486
+ }
486
487
 
487
- .iui-button-icon{
488
- width:16px;
489
- height:16px;
490
- transition:fill 0.2s ease-out;
491
- fill:currentColor;
488
+ .iui-button-icon{
489
+ width:16px;
490
+ height:16px;
491
+ transition:fill 0.2s ease-out;
492
+ fill:currentColor;
493
+ }
492
494
  }