@itwin/itwinui-css 0.63.1 → 0.63.2-dev.1

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 (95) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/alert.css +250 -248
  3. package/css/all.css +9975 -9928
  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/code/classes.scss +7 -5
  59. package/scss/color-picker/classes.scss +40 -38
  60. package/scss/date-picker/classes.scss +44 -42
  61. package/scss/dialog/classes.scss +45 -43
  62. package/scss/expandable-block/classes.scss +4 -2
  63. package/scss/fieldset/classes.scss +4 -2
  64. package/scss/file-upload/classes.scss +4 -2
  65. package/scss/footer/classes.scss +16 -14
  66. package/scss/header/classes.scss +7 -5
  67. package/scss/icon/classes.scss +19 -17
  68. package/scss/information-panel/classes.scss +18 -16
  69. package/scss/inputs/classes.scss +62 -60
  70. package/scss/keyboard/classes.scss +4 -2
  71. package/scss/location-marker/classes.scss +10 -8
  72. package/scss/menu/classes.scss +14 -12
  73. package/scss/non-ideal-state/classes.scss +4 -2
  74. package/scss/notification-marker/classes.scss +5 -3
  75. package/scss/popover/classes.scss +4 -2
  76. package/scss/progress-indicator/classes.scss +22 -20
  77. package/scss/radio-tile/classes.scss +22 -20
  78. package/scss/reset-global-styles.scss +25 -23
  79. package/scss/side-navigation/classes.scss +10 -8
  80. package/scss/skip-to-content/classes.scss +4 -2
  81. package/scss/slider/classes.scss +37 -35
  82. package/scss/style/global.scss +49 -47
  83. package/scss/surface/classes.scss +4 -2
  84. package/scss/table/classes.scss +45 -43
  85. package/scss/tabs/classes.scss +31 -29
  86. package/scss/tag/classes.scss +20 -18
  87. package/scss/text/classes.scss +36 -34
  88. package/scss/tile/classes.scss +36 -34
  89. package/scss/time-picker/classes.scss +11 -9
  90. package/scss/toast-notification/classes.scss +71 -69
  91. package/scss/toggle-switch/classes.scss +7 -5
  92. package/scss/tooltip/classes.scss +17 -15
  93. package/scss/tree/classes.scss +13 -11
  94. package/scss/user-icon/classes.scss +18 -16
  95. package/scss/wizard/classes.scss +18 -16
package/css/inputs.css CHANGED
@@ -2,1338 +2,1340 @@
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-input-container{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- display:-ms-grid;
11
- display:grid;
12
- -ms-grid-rows: auto auto;
13
- -ms-grid-columns: auto 1fr;
14
- grid-template:"label label" "inputs inputs"/auto 1fr;
15
- cursor:default;
16
- }
17
- .iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
18
- -ms-grid-row:2;
19
- -ms-grid-column:2;
20
- }
21
- .iui-input-container.iui-inline-icon > .iui-input,
5
+ @layer itwinui-v1{
6
+ .iui-input-container{
7
+ margin:0;
8
+ padding:0;
9
+ border:none;
10
+ vertical-align:baseline;
11
+ display:-ms-grid;
12
+ display:grid;
13
+ -ms-grid-rows: auto auto;
14
+ -ms-grid-columns: auto 1fr;
15
+ grid-template:"label label" "inputs inputs"/auto 1fr;
16
+ cursor:default;
17
+ }
18
+ .iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
19
+ -ms-grid-row:2;
20
+ -ms-grid-column:2;
21
+ }
22
+ .iui-input-container.iui-inline-icon > .iui-input,
22
23
  .iui-input-container.iui-inline-icon > .iui-textarea{
23
- padding-right:40px;
24
- }
25
- .iui-input-container.iui-inline-icon > .iui-input:last-child,
24
+ padding-right:40px;
25
+ }
26
+ .iui-input-container.iui-inline-icon > .iui-input:last-child,
26
27
  .iui-input-container.iui-inline-icon > .iui-textarea:last-child{
27
- padding-right:12px;
28
- }
29
- .iui-input-container.iui-with-message{
30
- -ms-grid-rows: auto auto auto;
31
- -ms-grid-columns: auto 1fr;
32
- grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
33
- }
34
- .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
35
- margin-top:3px;
36
- }
37
- .iui-input-container .iui-input,
28
+ padding-right:12px;
29
+ }
30
+ .iui-input-container.iui-with-message{
31
+ -ms-grid-rows: auto auto auto;
32
+ -ms-grid-columns: auto 1fr;
33
+ grid-template:"label label" "inputs inputs" "icon message"/auto 1fr;
34
+ }
35
+ .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
36
+ margin-top:3px;
37
+ }
38
+ .iui-input-container .iui-input,
38
39
  .iui-input-container .iui-input-with-icon,
39
40
  .iui-input-container .iui-textarea,
40
41
  .iui-input-container .iui-input-group{
41
- -ms-grid-row:2;
42
- -ms-grid-column:1;
43
- -ms-grid-column-span:2;
44
- grid-area:inputs;
45
- -ms-grid-row:2;
46
- -ms-grid-column:1;
47
- -ms-grid-column-span:2;
48
- }
49
- .iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
50
- padding:6px 0;
51
- }
52
- label.iui-input-container{
53
- cursor:pointer;
54
- }
55
- label.iui-input-container.iui-disabled{
56
- cursor:not-allowed;
57
- }
42
+ -ms-grid-row:2;
43
+ -ms-grid-column:1;
44
+ -ms-grid-column-span:2;
45
+ grid-area:inputs;
46
+ -ms-grid-row:2;
47
+ -ms-grid-column:1;
48
+ -ms-grid-column-span:2;
49
+ }
50
+ .iui-input-container .iui-input-group .iui-toggle-switch-wrapper{
51
+ padding:6px 0;
52
+ }
53
+ label.iui-input-container{
54
+ cursor:pointer;
55
+ }
56
+ label.iui-input-container.iui-disabled{
57
+ cursor:not-allowed;
58
+ }
58
59
 
59
- .iui-input-container.iui-disabled label{
60
- cursor:not-allowed;
61
- }
62
- .iui-input-container .iui-checkbox-wrapper,
60
+ .iui-input-container.iui-disabled label{
61
+ cursor:not-allowed;
62
+ }
63
+ .iui-input-container .iui-checkbox-wrapper,
63
64
  .iui-input-container .iui-radio-wrapper{
64
- min-height:22px;
65
- }
66
- .iui-input-container.iui-inline-label{
67
- -ms-grid-rows: auto;
68
- -ms-grid-columns: auto 1fr auto;
69
- grid-template:"label inputs icon"/auto 1fr auto;
70
- }
71
- div.iui-input-container.iui-inline-label{
72
- -ms-grid-columns:auto min-content auto;
73
- }
65
+ min-height:22px;
66
+ }
67
+ .iui-input-container.iui-inline-label{
68
+ -ms-grid-rows: auto;
69
+ -ms-grid-columns: auto 1fr auto;
70
+ grid-template:"label inputs icon"/auto 1fr auto;
71
+ }
72
+ div.iui-input-container.iui-inline-label{
73
+ -ms-grid-columns:auto min-content auto;
74
+ }
74
75
 
75
- .iui-input-container.iui-inline-label .iui-input,
76
+ .iui-input-container.iui-inline-label .iui-input,
76
77
  .iui-input-container.iui-inline-label .iui-input-with-icon,
77
78
  .iui-input-container.iui-inline-label .iui-textarea,
78
79
  .iui-input-container.iui-inline-label .iui-input-group{
79
- -ms-grid-row:1;
80
- -ms-grid-column:2;
81
- }
82
- .iui-input-container.iui-inline-label .iui-input-icon{
83
- -ms-grid-row:1;
84
- -ms-grid-column:3;
85
- }
86
- .iui-input-container.iui-inline-label.iui-with-message{
87
- -ms-grid-rows: auto auto;
88
- -ms-grid-columns: auto auto 1fr;
89
- grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
90
- }
91
- .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
92
- -ms-grid-row:2;
93
- -ms-grid-column:2;
94
- }
95
- .iui-input-container.iui-inline-label.iui-with-message .iui-message{
96
- -ms-grid-row:2;
97
- -ms-grid-column:3;
98
- }
99
- .iui-input-container.iui-inline-label > .iui-input-group{
100
- display:flex;
101
- gap:16px;
102
- }
103
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox-wrapper,
80
+ -ms-grid-row:1;
81
+ -ms-grid-column:2;
82
+ }
83
+ .iui-input-container.iui-inline-label .iui-input-icon{
84
+ -ms-grid-row:1;
85
+ -ms-grid-column:3;
86
+ }
87
+ .iui-input-container.iui-inline-label.iui-with-message{
88
+ -ms-grid-rows: auto auto;
89
+ -ms-grid-columns: auto auto 1fr;
90
+ grid-template:"label inputs inputs" ". icon message"/auto auto 1fr;
91
+ }
92
+ .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
93
+ -ms-grid-row:2;
94
+ -ms-grid-column:2;
95
+ }
96
+ .iui-input-container.iui-inline-label.iui-with-message .iui-message{
97
+ -ms-grid-row:2;
98
+ -ms-grid-column:3;
99
+ }
100
+ .iui-input-container.iui-inline-label > .iui-input-group{
101
+ display:flex;
102
+ gap:16px;
103
+ }
104
+ .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox-wrapper,
104
105
  .iui-input-container.iui-inline-label > .iui-input-group > .iui-radio-wrapper,
105
106
  .iui-input-container.iui-inline-label > .iui-input-group > .iui-toggle-switch-wrapper{
106
- margin-right:16px;
107
- }
108
- @supports (gap: 16px){
109
- .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox-wrapper,
107
+ margin-right:16px;
108
+ }
109
+ @supports (gap: 16px){
110
+ .iui-input-container.iui-inline-label > .iui-input-group > .iui-checkbox-wrapper,
110
111
  .iui-input-container.iui-inline-label > .iui-input-group > .iui-radio-wrapper,
111
112
  .iui-input-container.iui-inline-label > .iui-input-group > .iui-toggle-switch-wrapper{
113
+ margin-right:0;
114
+ }
115
+ }
116
+ .iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
117
+ margin-right:16px;
118
+ }
119
+ .iui-input-container > .iui-label{
120
+ -ms-grid-row:1;
121
+ -ms-grid-column:1;
122
+ -ms-grid-column-span:2;
123
+ font-weight:600;
124
+ margin-bottom:3px;
125
+ grid-area:label;
126
+ -ms-grid-row-align:center;
127
+ align-self:center;
128
+ }
129
+ .iui-input-container > .iui-label.iui-required::after{
130
+ content:"*";
131
+ margin-left:4px;
132
+ color:#d10a0a;
133
+ color:var(--iui-color-foreground-negative);
134
+ }
135
+ .iui-input-container .iui-input-icon{
136
+ -ms-grid-row:3;
137
+ -ms-grid-column:1;
138
+ display:flex;
139
+ grid-area:icon;
140
+ width:16px;
141
+ height:16px;
142
+ -ms-grid-row-align:center;
143
+ align-self:center;
144
+ fill:rgba(0, 0, 0, 0.4);
145
+ fill:var(--iui-icons-color);
146
+ }
147
+ .iui-input-container .iui-input-icon:not(:last-child){
148
+ margin-right:4px;
149
+ }
150
+ .iui-input-container .iui-message{
151
+ -ms-grid-row:3;
152
+ -ms-grid-column:2;
153
+ font-size:12px;
154
+ grid-area:message;
155
+ margin-top:3px;
156
+ color:rgba(0, 0, 0, 0.4);
157
+ color:var(--iui-text-color-muted);
158
+ }
159
+ .iui-input-container .iui-message a{
160
+ -webkit-user-select:none;
161
+ -moz-user-select:none;
162
+ -ms-user-select:none;
163
+ user-select:none;
164
+ }
165
+ .iui-input-container.iui-inline-icon > .iui-input-icon{
166
+ -ms-grid-row:1;
167
+ -ms-grid-column:3;
168
+ grid-area:inputs;
169
+ -ms-grid-column-align:end;
170
+ justify-self:end;
171
+ margin:0 14px 0 0;
172
+ position:relative;
173
+ }
174
+ .iui-input-container.iui-inline-icon > .iui-input-icon svg{
175
+ width:16px;
176
+ height:16px;
177
+ }
178
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
179
+ height:100%;
180
+ width:-webkit-fit-content;
181
+ width:-moz-fit-content;
182
+ width:fit-content;
112
183
  margin-right:0;
184
+ border-top-left-radius:0;
185
+ border-bottom-left-radius:0;
186
+ border-top-right-radius:inherit;
187
+ border-bottom-right-radius:inherit;
188
+ }
189
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
190
+ align-items:center;
191
+ height:90%;
192
+ margin-right:2px;
193
+ padding:0 12px;
194
+ cursor:pointer;
195
+ background-position:center;
196
+ transition:background 0.4s ease-out;
197
+ }
198
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
199
+ background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
200
+ }
201
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
202
+ background-color:var(--iui-color-background-2);
203
+ background-size:100%;
204
+ transition:background 0s;
205
+ }
206
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
207
+ fill:rgba(0, 0, 0, 0.8);
208
+ fill:var(--iui-icons-color-actionable);
209
+ transition:transform 0.2s ease-out;
210
+ }
211
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
212
+ transform:rotate(180deg);
213
+ }
214
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
215
+ cursor:not-allowed;
216
+ }
217
+ .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
218
+ fill:rgba(0, 0, 0, 0.2);
219
+ fill:var(--iui-icons-color-actionable-disabled);
220
+ }
221
+ .iui-input-container.iui-inline-label > .iui-label{
222
+ margin:0 16px 0 0;
223
+ -ms-grid-column-span:1;
224
+ }
225
+ .iui-input-container.iui-inline-label > .iui-label.iui-required{
226
+ margin-right:6px;
227
+ }
228
+ .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
229
+ background-color:rgba(83, 162, 26, 0.2);
230
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
113
231
  }
114
- }
115
- .iui-input-container.iui-inline-label > .iui-input-group:not(:last-child){
116
- margin-right:16px;
117
- }
118
- .iui-input-container > .iui-label{
119
- -ms-grid-row:1;
120
- -ms-grid-column:1;
121
- -ms-grid-column-span:2;
122
- font-weight:600;
123
- margin-bottom:3px;
124
- grid-area:label;
125
- -ms-grid-row-align:center;
126
- align-self:center;
127
- }
128
- .iui-input-container > .iui-label.iui-required::after{
129
- content:"*";
130
- margin-left:4px;
131
- color:#d10a0a;
132
- color:var(--iui-color-foreground-negative);
133
- }
134
- .iui-input-container .iui-input-icon{
135
- -ms-grid-row:3;
136
- -ms-grid-column:1;
137
- display:flex;
138
- grid-area:icon;
139
- width:16px;
140
- height:16px;
141
- -ms-grid-row-align:center;
142
- align-self:center;
143
- fill:rgba(0, 0, 0, 0.4);
144
- fill:var(--iui-icons-color);
145
- }
146
- .iui-input-container .iui-input-icon:not(:last-child){
147
- margin-right:4px;
148
- }
149
- .iui-input-container .iui-message{
150
- -ms-grid-row:3;
151
- -ms-grid-column:2;
152
- font-size:12px;
153
- grid-area:message;
154
- margin-top:3px;
155
- color:rgba(0, 0, 0, 0.4);
156
- color:var(--iui-text-color-muted);
157
- }
158
- .iui-input-container .iui-message a{
159
- -webkit-user-select:none;
160
- -moz-user-select:none;
161
- -ms-user-select:none;
162
- user-select:none;
163
- }
164
- .iui-input-container.iui-inline-icon > .iui-input-icon{
165
- -ms-grid-row:1;
166
- -ms-grid-column:3;
167
- grid-area:inputs;
168
- -ms-grid-column-align:end;
169
- justify-self:end;
170
- margin:0 14px 0 0;
171
- position:relative;
172
- }
173
- .iui-input-container.iui-inline-icon > .iui-input-icon svg{
174
- width:16px;
175
- height:16px;
176
- }
177
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
178
- height:100%;
179
- width:-webkit-fit-content;
180
- width:-moz-fit-content;
181
- width:fit-content;
182
- margin-right:0;
183
- border-top-left-radius:0;
184
- border-bottom-left-radius:0;
185
- border-top-right-radius:inherit;
186
- border-bottom-right-radius:inherit;
187
- }
188
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
189
- align-items:center;
190
- height:90%;
191
- margin-right:2px;
192
- padding:0 12px;
193
- cursor:pointer;
194
- background-position:center;
195
- transition:background 0.4s ease-out;
196
- }
197
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
198
- background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
199
- }
200
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
201
- background-color:var(--iui-color-background-2);
202
- background-size:100%;
203
- transition:background 0s;
204
- }
205
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
206
- fill:rgba(0, 0, 0, 0.8);
207
- fill:var(--iui-icons-color-actionable);
208
- transition:transform 0.2s ease-out;
209
- }
210
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
211
- transform:rotate(180deg);
212
- }
213
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
214
- cursor:not-allowed;
215
- }
216
- .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
217
- fill:rgba(0, 0, 0, 0.2);
218
- fill:var(--iui-icons-color-actionable-disabled);
219
- }
220
- .iui-input-container.iui-inline-label > .iui-label{
221
- margin:0 16px 0 0;
222
- -ms-grid-column-span:1;
223
- }
224
- .iui-input-container.iui-inline-label > .iui-label.iui-required{
225
- margin-right:6px;
226
- }
227
- .iui-input-container.iui-positive::-moz-selection, .iui-input-container.iui-positive *::-moz-selection{
228
- background-color:rgba(83, 162, 26, 0.2);
229
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
230
- }
231
- .iui-input-container.iui-positive::selection,
232
+ .iui-input-container.iui-positive::selection,
232
233
  .iui-input-container.iui-positive *::selection{
233
- background-color:rgba(83, 162, 26, 0.2);
234
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
235
- }
236
- .iui-input-container.iui-positive .iui-input-icon{
237
- fill:#53a21a;
238
- fill:var(--iui-color-foreground-positive);
239
- }
240
- .iui-input-container.iui-positive .iui-message{
241
- color:#53a21a;
242
- color:var(--iui-color-foreground-positive);
243
- }
244
- .iui-input-container.iui-positive .iui-message a{
245
- text-decoration:underline;
246
- color:#53a21a;
247
- color:var(--iui-color-foreground-positive);
248
- }
249
- .iui-input-container.iui-positive .iui-message a:hover{
250
- text-decoration:none;
251
- color:#3d7613;
252
- color:var(--iui-color-foreground-positive-overlay);
253
- }
254
- .iui-input-container.iui-positive .iui-input,
234
+ background-color:rgba(83, 162, 26, 0.2);
235
+ background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
236
+ }
237
+ .iui-input-container.iui-positive .iui-input-icon{
238
+ fill:#53a21a;
239
+ fill:var(--iui-color-foreground-positive);
240
+ }
241
+ .iui-input-container.iui-positive .iui-message{
242
+ color:#53a21a;
243
+ color:var(--iui-color-foreground-positive);
244
+ }
245
+ .iui-input-container.iui-positive .iui-message a{
246
+ text-decoration:underline;
247
+ color:#53a21a;
248
+ color:var(--iui-color-foreground-positive);
249
+ }
250
+ .iui-input-container.iui-positive .iui-message a:hover{
251
+ text-decoration:none;
252
+ color:#3d7613;
253
+ color:var(--iui-color-foreground-positive-overlay);
254
+ }
255
+ .iui-input-container.iui-positive .iui-input,
255
256
  .iui-input-container.iui-positive .iui-textarea{
256
- padding-bottom:6px;
257
- border-bottom:2px solid #53a21a;
258
- border-bottom:2px solid var(--iui-color-foreground-positive);
259
- }
260
- .iui-input-container.iui-positive .iui-input.iui-small,
257
+ padding-bottom:6px;
258
+ border-bottom:2px solid #53a21a;
259
+ border-bottom:2px solid var(--iui-color-foreground-positive);
260
+ }
261
+ .iui-input-container.iui-positive .iui-input.iui-small,
261
262
  .iui-input-container.iui-positive .iui-textarea.iui-small{
262
- padding-bottom:0.5px;
263
- }
264
- .iui-input-container.iui-positive .iui-input.iui-large,
263
+ padding-bottom:0.5px;
264
+ }
265
+ .iui-input-container.iui-positive .iui-input.iui-large,
265
266
  .iui-input-container.iui-positive .iui-textarea.iui-large{
266
- padding-bottom:11.5px;
267
- }
268
- .iui-input-container.iui-positive .iui-input:focus,
267
+ padding-bottom:11.5px;
268
+ }
269
+ .iui-input-container.iui-positive .iui-input:focus,
269
270
  .iui-input-container.iui-positive .iui-textarea:focus{
270
- border-bottom:2px solid #53a21a;
271
- outline:2px solid #53a21a;
272
- outline-offset:-2px;
273
- border-bottom:2px solid var(--iui-color-foreground-positive);
274
- outline:2px solid var(--iui-color-foreground-positive);
275
- outline-offset:-2px;
276
- }
277
- .iui-input-container.iui-positive .iui-input-with-icon{
278
- --_hover-color:var(--iui-color-foreground-positive);
279
- --_focus-color:var(--iui-color-foreground-positive);
280
- }
281
- .iui-input-container.iui-positive .iui-select-button{
282
- border-bottom:transparent;
283
- }
284
- .iui-input-container.iui-positive .iui-select-button::after{
285
- content:"";
286
- width:100%;
287
- position:absolute;
288
- bottom:0;
289
- left:0;
290
- height:2px;
291
- background-color:#53a21a;
292
- background-color:var(--iui-color-foreground-positive);
293
- }
294
- .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
295
- background-color:rgba(209, 10, 10, 0.2);
296
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
297
- }
298
- .iui-input-container.iui-negative::selection,
271
+ border-bottom:2px solid #53a21a;
272
+ outline:2px solid #53a21a;
273
+ outline-offset:-2px;
274
+ border-bottom:2px solid var(--iui-color-foreground-positive);
275
+ outline:2px solid var(--iui-color-foreground-positive);
276
+ outline-offset:-2px;
277
+ }
278
+ .iui-input-container.iui-positive .iui-input-with-icon{
279
+ --_hover-color:var(--iui-color-foreground-positive);
280
+ --_focus-color:var(--iui-color-foreground-positive);
281
+ }
282
+ .iui-input-container.iui-positive .iui-select-button{
283
+ border-bottom:transparent;
284
+ }
285
+ .iui-input-container.iui-positive .iui-select-button::after{
286
+ content:"";
287
+ width:100%;
288
+ position:absolute;
289
+ bottom:0;
290
+ left:0;
291
+ height:2px;
292
+ background-color:#53a21a;
293
+ background-color:var(--iui-color-foreground-positive);
294
+ }
295
+ .iui-input-container.iui-negative::-moz-selection, .iui-input-container.iui-negative *::-moz-selection{
296
+ background-color:rgba(209, 10, 10, 0.2);
297
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
298
+ }
299
+ .iui-input-container.iui-negative::selection,
299
300
  .iui-input-container.iui-negative *::selection{
300
- background-color:rgba(209, 10, 10, 0.2);
301
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
302
- }
303
- .iui-input-container.iui-negative .iui-input-icon{
304
- fill:#d10a0a;
305
- fill:var(--iui-color-foreground-negative);
306
- }
307
- .iui-input-container.iui-negative .iui-message{
308
- color:#d10a0a;
309
- color:var(--iui-color-foreground-negative);
310
- }
311
- .iui-input-container.iui-negative .iui-message a{
312
- text-decoration:underline;
313
- color:#d10a0a;
314
- color:var(--iui-color-foreground-negative);
315
- }
316
- .iui-input-container.iui-negative .iui-message a:hover{
317
- text-decoration:none;
318
- color:#a10808;
319
- color:var(--iui-color-foreground-negative-overlay);
320
- }
321
- .iui-input-container.iui-negative .iui-input,
301
+ background-color:rgba(209, 10, 10, 0.2);
302
+ background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
303
+ }
304
+ .iui-input-container.iui-negative .iui-input-icon{
305
+ fill:#d10a0a;
306
+ fill:var(--iui-color-foreground-negative);
307
+ }
308
+ .iui-input-container.iui-negative .iui-message{
309
+ color:#d10a0a;
310
+ color:var(--iui-color-foreground-negative);
311
+ }
312
+ .iui-input-container.iui-negative .iui-message a{
313
+ text-decoration:underline;
314
+ color:#d10a0a;
315
+ color:var(--iui-color-foreground-negative);
316
+ }
317
+ .iui-input-container.iui-negative .iui-message a:hover{
318
+ text-decoration:none;
319
+ color:#a10808;
320
+ color:var(--iui-color-foreground-negative-overlay);
321
+ }
322
+ .iui-input-container.iui-negative .iui-input,
322
323
  .iui-input-container.iui-negative .iui-textarea{
323
- padding-bottom:6px;
324
- border-bottom:2px solid #d10a0a;
325
- border-bottom:2px solid var(--iui-color-foreground-negative);
326
- }
327
- .iui-input-container.iui-negative .iui-input.iui-small,
324
+ padding-bottom:6px;
325
+ border-bottom:2px solid #d10a0a;
326
+ border-bottom:2px solid var(--iui-color-foreground-negative);
327
+ }
328
+ .iui-input-container.iui-negative .iui-input.iui-small,
328
329
  .iui-input-container.iui-negative .iui-textarea.iui-small{
329
- padding-bottom:0.5px;
330
- }
331
- .iui-input-container.iui-negative .iui-input.iui-large,
330
+ padding-bottom:0.5px;
331
+ }
332
+ .iui-input-container.iui-negative .iui-input.iui-large,
332
333
  .iui-input-container.iui-negative .iui-textarea.iui-large{
333
- padding-bottom:11.5px;
334
- }
335
- .iui-input-container.iui-negative .iui-input:focus,
334
+ padding-bottom:11.5px;
335
+ }
336
+ .iui-input-container.iui-negative .iui-input:focus,
336
337
  .iui-input-container.iui-negative .iui-textarea:focus{
337
- border-bottom:2px solid #d10a0a;
338
- outline:2px solid #d10a0a;
339
- outline-offset:-2px;
340
- border-bottom:2px solid var(--iui-color-foreground-negative);
341
- outline:2px solid var(--iui-color-foreground-negative);
342
- outline-offset:-2px;
343
- }
344
- .iui-input-container.iui-negative .iui-input-with-icon{
345
- --_hover-color:var(--iui-color-foreground-negative);
346
- --_focus-color:var(--iui-color-foreground-negative);
347
- }
348
- .iui-input-container.iui-negative .iui-select-button{
349
- border-bottom:transparent;
350
- }
351
- .iui-input-container.iui-negative .iui-select-button::after{
352
- content:"";
353
- width:100%;
354
- position:absolute;
355
- bottom:0;
356
- left:0;
357
- height:2px;
358
- background-color:#d10a0a;
359
- background-color:var(--iui-color-foreground-negative);
360
- }
361
- .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
362
- background-color:rgba(241, 141, 19, 0.2);
363
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
364
- }
365
- .iui-input-container.iui-warning::selection,
338
+ border-bottom:2px solid #d10a0a;
339
+ outline:2px solid #d10a0a;
340
+ outline-offset:-2px;
341
+ border-bottom:2px solid var(--iui-color-foreground-negative);
342
+ outline:2px solid var(--iui-color-foreground-negative);
343
+ outline-offset:-2px;
344
+ }
345
+ .iui-input-container.iui-negative .iui-input-with-icon{
346
+ --_hover-color:var(--iui-color-foreground-negative);
347
+ --_focus-color:var(--iui-color-foreground-negative);
348
+ }
349
+ .iui-input-container.iui-negative .iui-select-button{
350
+ border-bottom:transparent;
351
+ }
352
+ .iui-input-container.iui-negative .iui-select-button::after{
353
+ content:"";
354
+ width:100%;
355
+ position:absolute;
356
+ bottom:0;
357
+ left:0;
358
+ height:2px;
359
+ background-color:#d10a0a;
360
+ background-color:var(--iui-color-foreground-negative);
361
+ }
362
+ .iui-input-container.iui-warning::-moz-selection, .iui-input-container.iui-warning *::-moz-selection{
363
+ background-color:rgba(241, 141, 19, 0.2);
364
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
365
+ }
366
+ .iui-input-container.iui-warning::selection,
366
367
  .iui-input-container.iui-warning *::selection{
367
- background-color:rgba(241, 141, 19, 0.2);
368
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
369
- }
370
- .iui-input-container.iui-warning .iui-input-icon{
371
- fill:#f18d13;
372
- fill:var(--iui-color-foreground-warning);
373
- }
374
- .iui-input-container.iui-warning .iui-message{
375
- color:#f18d13;
376
- color:var(--iui-color-foreground-warning);
377
- }
378
- .iui-input-container.iui-warning .iui-message a{
379
- text-decoration:underline;
380
- color:#f18d13;
381
- color:var(--iui-color-foreground-warning);
382
- }
383
- .iui-input-container.iui-warning .iui-message a:hover{
384
- text-decoration:none;
385
- color:#c6720c;
386
- color:var(--iui-color-foreground-warning-overlay);
387
- }
388
- .iui-input-container.iui-warning .iui-input,
368
+ background-color:rgba(241, 141, 19, 0.2);
369
+ background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
370
+ }
371
+ .iui-input-container.iui-warning .iui-input-icon{
372
+ fill:#f18d13;
373
+ fill:var(--iui-color-foreground-warning);
374
+ }
375
+ .iui-input-container.iui-warning .iui-message{
376
+ color:#f18d13;
377
+ color:var(--iui-color-foreground-warning);
378
+ }
379
+ .iui-input-container.iui-warning .iui-message a{
380
+ text-decoration:underline;
381
+ color:#f18d13;
382
+ color:var(--iui-color-foreground-warning);
383
+ }
384
+ .iui-input-container.iui-warning .iui-message a:hover{
385
+ text-decoration:none;
386
+ color:#c6720c;
387
+ color:var(--iui-color-foreground-warning-overlay);
388
+ }
389
+ .iui-input-container.iui-warning .iui-input,
389
390
  .iui-input-container.iui-warning .iui-textarea{
390
- padding-bottom:6px;
391
- border-bottom:2px solid #f18d13;
392
- border-bottom:2px solid var(--iui-color-foreground-warning);
393
- }
394
- .iui-input-container.iui-warning .iui-input.iui-small,
391
+ padding-bottom:6px;
392
+ border-bottom:2px solid #f18d13;
393
+ border-bottom:2px solid var(--iui-color-foreground-warning);
394
+ }
395
+ .iui-input-container.iui-warning .iui-input.iui-small,
395
396
  .iui-input-container.iui-warning .iui-textarea.iui-small{
396
- padding-bottom:0.5px;
397
- }
398
- .iui-input-container.iui-warning .iui-input.iui-large,
397
+ padding-bottom:0.5px;
398
+ }
399
+ .iui-input-container.iui-warning .iui-input.iui-large,
399
400
  .iui-input-container.iui-warning .iui-textarea.iui-large{
400
- padding-bottom:11.5px;
401
- }
402
- .iui-input-container.iui-warning .iui-input:focus,
401
+ padding-bottom:11.5px;
402
+ }
403
+ .iui-input-container.iui-warning .iui-input:focus,
403
404
  .iui-input-container.iui-warning .iui-textarea:focus{
404
- border-bottom:2px solid #f18d13;
405
- outline:2px solid #f18d13;
406
- outline-offset:-2px;
407
- border-bottom:2px solid var(--iui-color-foreground-warning);
408
- outline:2px solid var(--iui-color-foreground-warning);
409
- outline-offset:-2px;
410
- }
411
- .iui-input-container.iui-warning .iui-input-with-icon{
412
- --_hover-color:var(--iui-color-foreground-warning);
413
- --_focus-color:var(--iui-color-foreground-warning);
414
- }
415
- .iui-input-container.iui-warning .iui-select-button{
416
- border-bottom:transparent;
417
- }
418
- .iui-input-container.iui-warning .iui-select-button::after{
419
- content:"";
420
- width:100%;
421
- position:absolute;
422
- bottom:0;
423
- left:0;
424
- height:2px;
425
- background-color:#f18d13;
426
- background-color:var(--iui-color-foreground-warning);
427
- }
405
+ border-bottom:2px solid #f18d13;
406
+ outline:2px solid #f18d13;
407
+ outline-offset:-2px;
408
+ border-bottom:2px solid var(--iui-color-foreground-warning);
409
+ outline:2px solid var(--iui-color-foreground-warning);
410
+ outline-offset:-2px;
411
+ }
412
+ .iui-input-container.iui-warning .iui-input-with-icon{
413
+ --_hover-color:var(--iui-color-foreground-warning);
414
+ --_focus-color:var(--iui-color-foreground-warning);
415
+ }
416
+ .iui-input-container.iui-warning .iui-select-button{
417
+ border-bottom:transparent;
418
+ }
419
+ .iui-input-container.iui-warning .iui-select-button::after{
420
+ content:"";
421
+ width:100%;
422
+ position:absolute;
423
+ bottom:0;
424
+ left:0;
425
+ height:2px;
426
+ background-color:#f18d13;
427
+ background-color:var(--iui-color-foreground-warning);
428
+ }
428
429
 
429
- .iui-input-label{
430
- font-weight:600;
431
- margin-bottom:3px;
432
- cursor:default;
433
- display:block;
434
- }
435
- .iui-input-label.iui-required::after{
436
- content:"*";
437
- margin-left:4px;
438
- color:#d10a0a;
439
- color:var(--iui-color-foreground-negative);
440
- }
441
- label.iui-input-label{
442
- cursor:pointer;
443
- }
444
- label.iui-input-label.iui-disabled{
445
- cursor:not-allowed;
446
- }
430
+ .iui-input-label{
431
+ font-weight:600;
432
+ margin-bottom:3px;
433
+ cursor:default;
434
+ display:block;
435
+ }
436
+ .iui-input-label.iui-required::after{
437
+ content:"*";
438
+ margin-left:4px;
439
+ color:#d10a0a;
440
+ color:var(--iui-color-foreground-negative);
441
+ }
442
+ label.iui-input-label{
443
+ cursor:pointer;
444
+ }
445
+ label.iui-input-label.iui-disabled{
446
+ cursor:not-allowed;
447
+ }
447
448
 
448
- .iui-input-label.iui-inline{
449
- margin:0 16px 0 0;
450
- -ms-grid-column-span:1;
451
- display:inline-flex;
452
- align-items:center;
453
- }
454
- .iui-input-label.iui-inline.iui-required{
455
- margin-right:6px;
456
- }
449
+ .iui-input-label.iui-inline{
450
+ margin:0 16px 0 0;
451
+ -ms-grid-column-span:1;
452
+ display:inline-flex;
453
+ align-items:center;
454
+ }
455
+ .iui-input-label.iui-inline.iui-required{
456
+ margin-right:6px;
457
+ }
457
458
 
458
- .iui-input{
459
- margin:0;
460
- padding:0;
461
- border:none;
462
- vertical-align:baseline;
463
- width:100%;
464
- font-family:inherit;
465
- font-size:14px;
466
- font-weight:400;
467
- line-height:22px;
468
- border-radius:4px;
469
- -webkit-appearance:none;
470
- -moz-appearance:none;
471
- appearance:none;
472
- box-sizing:border-box;
473
- padding:7px 12px;
474
- min-height:38px;
475
- color:rgba(0, 0, 0, 0.8);
476
- background-color:white;
477
- border:1px solid rgba(0, 0, 0, 0.4);
478
- color:var(--iui-text-color);
479
- background-color:var(--iui-color-background-1);
480
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
481
- }
482
- .iui-input:focus-visible{
483
- outline:2px solid var(--iui-color-foreground-primary);
484
- outline-offset:-2px;
485
- }
486
- @supports not selector(*:focus-visible){
487
- .iui-input:focus{
459
+ .iui-input{
460
+ margin:0;
461
+ padding:0;
462
+ border:none;
463
+ vertical-align:baseline;
464
+ width:100%;
465
+ font-family:inherit;
466
+ font-size:14px;
467
+ font-weight:400;
468
+ line-height:22px;
469
+ border-radius:4px;
470
+ -webkit-appearance:none;
471
+ -moz-appearance:none;
472
+ appearance:none;
473
+ box-sizing:border-box;
474
+ padding:7px 12px;
475
+ min-height:38px;
476
+ color:rgba(0, 0, 0, 0.8);
477
+ background-color:white;
478
+ border:1px solid rgba(0, 0, 0, 0.4);
479
+ color:var(--iui-text-color);
480
+ background-color:var(--iui-color-background-1);
481
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
482
+ }
483
+ .iui-input:focus-visible{
488
484
  outline:2px solid var(--iui-color-foreground-primary);
489
485
  outline-offset:-2px;
490
486
  }
491
- }
492
- @media (prefers-reduced-motion: no-preference){
493
- .iui-input{
494
- transition:border-color 0.2s ease-out;
487
+ @supports not selector(*:focus-visible){
488
+ .iui-input:focus{
489
+ outline:2px solid var(--iui-color-foreground-primary);
490
+ outline-offset:-2px;
491
+ }
492
+ }
493
+ @media (prefers-reduced-motion: no-preference){
494
+ .iui-input{
495
+ transition:border-color 0.2s ease-out;
496
+ }
497
+ }
498
+ .iui-input.iui-small{
499
+ padding-top:1.5px;
500
+ padding-bottom:1.5px;
501
+ min-height:27px;
502
+ }
503
+ .iui-input.iui-large{
504
+ padding-top:12.5px;
505
+ padding-bottom:12.5px;
506
+ min-height:49px;
507
+ font-size:16px;
508
+ }
509
+ .iui-input::-moz-placeholder{
510
+ -moz-user-select:none;
511
+ user-select:none;
512
+ color:rgba(0, 0, 0, 0.2);
513
+ color:var(--iui-text-color-placeholder);
514
+ }
515
+ .iui-input:-ms-input-placeholder{
516
+ -ms-user-select:none;
517
+ user-select:none;
518
+ color:rgba(0, 0, 0, 0.2);
519
+ color:var(--iui-text-color-placeholder);
520
+ }
521
+ .iui-input::placeholder{
522
+ -webkit-user-select:none;
523
+ -moz-user-select:none;
524
+ -ms-user-select:none;
525
+ user-select:none;
526
+ color:rgba(0, 0, 0, 0.2);
527
+ color:var(--iui-text-color-placeholder);
528
+ }
529
+ .iui-input:-webkit-autofill{
530
+ border-color:#008ae0;
531
+ color:#008ae0;
532
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
533
+ border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
534
+ color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
535
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
536
+ }
537
+ .iui-input:autofill{
538
+ border-color:#008ae0;
539
+ color:#008ae0;
540
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
541
+ border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
542
+ color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
543
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
495
544
  }
496
- }
497
- .iui-input.iui-small{
498
- padding-top:1.5px;
499
- padding-bottom:1.5px;
500
- min-height:27px;
501
- }
502
- .iui-input.iui-large{
503
- padding-top:12.5px;
504
- padding-bottom:12.5px;
505
- min-height:49px;
506
- font-size:16px;
507
- }
508
- .iui-input::-moz-placeholder{
509
- -moz-user-select:none;
510
- user-select:none;
511
- color:rgba(0, 0, 0, 0.2);
512
- color:var(--iui-text-color-placeholder);
513
- }
514
- .iui-input:-ms-input-placeholder{
515
- -ms-user-select:none;
516
- user-select:none;
517
- color:rgba(0, 0, 0, 0.2);
518
- color:var(--iui-text-color-placeholder);
519
- }
520
- .iui-input::placeholder{
521
- -webkit-user-select:none;
522
- -moz-user-select:none;
523
- -ms-user-select:none;
524
- user-select:none;
525
- color:rgba(0, 0, 0, 0.2);
526
- color:var(--iui-text-color-placeholder);
527
- }
528
- .iui-input:-webkit-autofill{
529
- border-color:#008ae0;
530
- color:#008ae0;
531
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
532
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
533
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
534
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
535
- }
536
- .iui-input:autofill{
537
- border-color:#008ae0;
538
- color:#008ae0;
539
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
540
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
541
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
542
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
543
- }
544
- .iui-input:hover{
545
- border-color:rgba(0, 0, 0, 0.8);
546
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
547
- }
548
- @media (prefers-reduced-motion: no-preference){
549
545
  .iui-input:hover{
550
- transition:border-color 0.2s ease-out;
546
+ border-color:rgba(0, 0, 0, 0.8);
547
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
548
+ }
549
+ @media (prefers-reduced-motion: no-preference){
550
+ .iui-input:hover{
551
+ transition:border-color 0.2s ease-out;
552
+ }
553
+ }
554
+ .iui-input[disabled]{
555
+ background-color:#edeff2;
556
+ border-color:#edeff2;
557
+ background-color:var(--iui-color-background-disabled);
558
+ border-color:var(--iui-color-background-disabled);
559
+ cursor:not-allowed;
560
+ --_hover-color:var(--iui-color-background-disabled);
551
561
  }
552
- }
553
- .iui-input[disabled]{
554
- background-color:#edeff2;
555
- border-color:#edeff2;
556
- background-color:var(--iui-color-background-disabled);
557
- border-color:var(--iui-color-background-disabled);
558
- cursor:not-allowed;
559
- --_hover-color:var(--iui-color-background-disabled);
560
- }
561
562
 
562
- .iui-select-button{
563
- width:100%;
564
- margin:0;
565
- border-radius:4px;
566
- box-sizing:border-box;
567
- padding:7px 12px;
568
- min-height:38px;
569
- transition:border-color 0.2s ease-out;
570
- display:flex;
571
- align-items:center;
572
- -webkit-user-select:none;
573
- -moz-user-select:none;
574
- -ms-user-select:none;
575
- user-select:none;
576
- position:relative;
577
- overflow:hidden;
578
- color:rgba(0, 0, 0, 0.8);
579
- background-color:white;
580
- border:1px solid rgba(0, 0, 0, 0.4);
581
- color:var(--iui-text-color);
582
- background-color:var(--iui-color-background-1);
583
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
584
- }
585
- .iui-select-button:focus-visible{
586
- outline:2px solid var(--iui-color-foreground-primary);
587
- outline-offset:-2px;
588
- }
589
- @supports not selector(*:focus-visible){
590
- .iui-select-button:focus{
563
+ .iui-select-button{
564
+ width:100%;
565
+ margin:0;
566
+ border-radius:4px;
567
+ box-sizing:border-box;
568
+ padding:7px 12px;
569
+ min-height:38px;
570
+ transition:border-color 0.2s ease-out;
571
+ display:flex;
572
+ align-items:center;
573
+ -webkit-user-select:none;
574
+ -moz-user-select:none;
575
+ -ms-user-select:none;
576
+ user-select:none;
577
+ position:relative;
578
+ overflow:hidden;
579
+ color:rgba(0, 0, 0, 0.8);
580
+ background-color:white;
581
+ border:1px solid rgba(0, 0, 0, 0.4);
582
+ color:var(--iui-text-color);
583
+ background-color:var(--iui-color-background-1);
584
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
585
+ }
586
+ .iui-select-button:focus-visible{
591
587
  outline:2px solid var(--iui-color-foreground-primary);
592
588
  outline-offset:-2px;
593
589
  }
594
- }
595
- .iui-select-button.iui-small{
596
- padding-top:1.5px;
597
- padding-bottom:1.5px;
598
- min-height:27px;
599
- }
600
- .iui-select-button.iui-large{
601
- padding-top:12.5px;
602
- padding-bottom:12.5px;
603
- min-height:49px;
604
- font-size:16px;
605
- }
606
- .iui-select-button.iui-disabled{
607
- background-color:#edeff2;
608
- border-color:#edeff2;
609
- background-color:var(--iui-color-background-disabled);
610
- border-color:var(--iui-color-background-disabled);
611
- --_hover-color:var(--iui-color-background-disabled);
612
- cursor:not-allowed;
613
- }
614
- .iui-select-button .iui-icon{
615
- width:16px;
616
- height:16px;
617
- flex:0 0 auto;
618
- fill:rgba(0, 0, 0, 0.8);
619
- fill:var(--iui-icons-color-actionable);
620
- fill:currentColor;
621
- }
622
- .iui-select-button .iui-icon + .iui-content{
623
- margin-left:8px;
624
- }
625
- .iui-select-button .iui-content{
626
- overflow:hidden;
627
- white-space:nowrap;
628
- text-overflow:ellipsis;
629
- }
630
- .iui-select-button.iui-placeholder{
631
- color:rgba(0, 0, 0, 0.2);
632
- color:var(--iui-text-color-placeholder);
633
- }
590
+ @supports not selector(*:focus-visible){
591
+ .iui-select-button:focus{
592
+ outline:2px solid var(--iui-color-foreground-primary);
593
+ outline-offset:-2px;
594
+ }
595
+ }
596
+ .iui-select-button.iui-small{
597
+ padding-top:1.5px;
598
+ padding-bottom:1.5px;
599
+ min-height:27px;
600
+ }
601
+ .iui-select-button.iui-large{
602
+ padding-top:12.5px;
603
+ padding-bottom:12.5px;
604
+ min-height:49px;
605
+ font-size:16px;
606
+ }
607
+ .iui-select-button.iui-disabled{
608
+ background-color:#edeff2;
609
+ border-color:#edeff2;
610
+ background-color:var(--iui-color-background-disabled);
611
+ border-color:var(--iui-color-background-disabled);
612
+ --_hover-color:var(--iui-color-background-disabled);
613
+ cursor:not-allowed;
614
+ }
615
+ .iui-select-button .iui-icon{
616
+ width:16px;
617
+ height:16px;
618
+ flex:0 0 auto;
619
+ fill:rgba(0, 0, 0, 0.8);
620
+ fill:var(--iui-icons-color-actionable);
621
+ fill:currentColor;
622
+ }
623
+ .iui-select-button .iui-icon + .iui-content{
624
+ margin-left:8px;
625
+ }
626
+ .iui-select-button .iui-content{
627
+ overflow:hidden;
628
+ white-space:nowrap;
629
+ text-overflow:ellipsis;
630
+ }
631
+ .iui-select-button.iui-placeholder{
632
+ color:rgba(0, 0, 0, 0.2);
633
+ color:var(--iui-text-color-placeholder);
634
+ }
634
635
 
635
- .iui-select-tag-container{
636
- position:absolute;
637
- inset:0 40px 0 12px;
638
- height:100%;
639
- display:flex;
640
- align-items:center;
641
- gap:4px;
642
- overflow:hidden;
643
- }
644
- .iui-select-tag-container > * + *{
645
- margin-left:4px;
646
- }
647
- @supports (gap: 4px){
636
+ .iui-select-tag-container{
637
+ position:absolute;
638
+ inset:0 40px 0 12px;
639
+ height:100%;
640
+ display:flex;
641
+ align-items:center;
642
+ gap:4px;
643
+ overflow:hidden;
644
+ }
648
645
  .iui-select-tag-container > * + *{
649
- margin-left:0;
646
+ margin-left:4px;
647
+ }
648
+ @supports (gap: 4px){
649
+ .iui-select-tag-container > * + *{
650
+ margin-left:0;
651
+ }
650
652
  }
651
- }
652
653
 
653
- .iui-select-tag{
654
- -webkit-user-select:all;
655
- -moz-user-select:all;
656
- user-select:all;
657
- text-transform:lowercase;
658
- display:inline-flex;
659
- height:33px;
660
- margin-top:3px;
661
- margin-bottom:3px;
662
- border-radius:9999px;
663
- box-sizing:border-box;
664
- padding:0 2px;
665
- align-items:center;
666
- transition:border-color 0.2s ease-out;
667
- font-size:14px;
668
- text-transform:none;
669
- cursor:default;
670
- -webkit-tap-highlight-color:transparent;
671
- border:1px solid rgba(0, 0, 0, 0.4);
672
- background-color:white;
673
- color:rgba(0, 0, 0, 0.8);
674
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
675
- background-color:var(--iui-color-background-1);
676
- color:var(--iui-text-color);
677
- margin-top:0;
678
- margin-bottom:0;
679
- display:inline-flex;
680
- align-items:center;
681
- height:80%;
682
- max-height:33px;
683
- }
684
- .iui-select-tag:hover{
685
- border-color:black;
686
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
687
- }
654
+ .iui-select-tag{
655
+ -webkit-user-select:all;
656
+ -moz-user-select:all;
657
+ user-select:all;
658
+ text-transform:lowercase;
659
+ display:inline-flex;
660
+ height:33px;
661
+ margin-top:3px;
662
+ margin-bottom:3px;
663
+ border-radius:9999px;
664
+ box-sizing:border-box;
665
+ padding:0 2px;
666
+ align-items:center;
667
+ transition:border-color 0.2s ease-out;
668
+ font-size:14px;
669
+ text-transform:none;
670
+ cursor:default;
671
+ -webkit-tap-highlight-color:transparent;
672
+ border:1px solid rgba(0, 0, 0, 0.4);
673
+ background-color:white;
674
+ color:rgba(0, 0, 0, 0.8);
675
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
676
+ background-color:var(--iui-color-background-1);
677
+ color:var(--iui-text-color);
678
+ margin-top:0;
679
+ margin-bottom:0;
680
+ display:inline-flex;
681
+ align-items:center;
682
+ height:80%;
683
+ max-height:33px;
684
+ }
685
+ .iui-select-tag:hover{
686
+ border-color:black;
687
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
688
+ }
688
689
 
689
- .iui-select-tag-label{
690
- margin:0;
691
- padding:0;
692
- border:none;
693
- vertical-align:baseline;
694
- font-size:14px;
695
- font-weight:400;
696
- line-height:22px;
697
- white-space:nowrap;
698
- text-overflow:ellipsis;
699
- overflow:hidden;
700
- margin:0 4px 0 8px;
701
- display:inline-flex;
702
- align-items:center;
703
- }
704
- .iui-select-tag-label:only-child{
705
- margin:0 8px;
706
- }
707
- .iui-select-button.iui-small .iui-select-tag-label{
708
- font-size:12px;
709
- line-height:16px;
710
- }
690
+ .iui-select-tag-label{
691
+ margin:0;
692
+ padding:0;
693
+ border:none;
694
+ vertical-align:baseline;
695
+ font-size:14px;
696
+ font-weight:400;
697
+ line-height:22px;
698
+ white-space:nowrap;
699
+ text-overflow:ellipsis;
700
+ overflow:hidden;
701
+ margin:0 4px 0 8px;
702
+ display:inline-flex;
703
+ align-items:center;
704
+ }
705
+ .iui-select-tag-label:only-child{
706
+ margin:0 8px;
707
+ }
708
+ .iui-select-button.iui-small .iui-select-tag-label{
709
+ font-size:12px;
710
+ line-height:16px;
711
+ }
711
712
 
712
- .iui-select-tag-button{
713
- --_iui-button-active-stripe-inset:initial;
714
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
715
- margin:0;
716
- padding:0;
717
- border:none;
718
- vertical-align:baseline;
719
- font-family:inherit;
720
- display:inline-flex;
721
- align-items:center;
722
- vertical-align:middle;
723
- justify-content:center;
724
- position:relative;
725
- box-sizing:border-box;
726
- border-radius:4px;
727
- line-height:22px;
728
- box-shadow:none;
729
- font-size:14px;
730
- font-weight:400;
731
- text-decoration:none;
732
- -webkit-user-select:none;
733
- -moz-user-select:none;
734
- -ms-user-select:none;
735
- user-select:none;
736
- cursor:pointer;
737
- white-space:nowrap;
738
- border:1px solid transparent;
739
- color:rgba(0, 0, 0, 0.8);
740
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
741
- color:var(--_iui-button-text-color);
742
- border-color:transparent;
743
- background-color:transparent;
744
- padding:0 8px;
745
- height:38px;
746
- gap:8px;
747
- border-radius:50%;
748
- padding:0 4px;
749
- height:100%;
750
- aspect-ratio:1/1;
751
- }
752
- @media (prefers-reduced-motion: no-preference){
753
713
  .iui-select-tag-button{
754
- transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
755
- }
756
- }
757
- .iui-select-tag-button:hover{
758
- --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
759
- text-decoration:none;
760
- }
761
- .iui-select-tag-button:focus-visible{
762
- outline:1px solid var(--iui-color-foreground-primary);
763
- outline-offset:-1px;
764
- }
765
- @supports not selector(*:focus-visible){
766
- .iui-select-tag-button:focus{
714
+ --_iui-button-active-stripe-inset:initial;
715
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
716
+ margin:0;
717
+ padding:0;
718
+ border:none;
719
+ vertical-align:baseline;
720
+ font-family:inherit;
721
+ display:inline-flex;
722
+ align-items:center;
723
+ vertical-align:middle;
724
+ justify-content:center;
725
+ position:relative;
726
+ box-sizing:border-box;
727
+ border-radius:4px;
728
+ line-height:22px;
729
+ box-shadow:none;
730
+ font-size:14px;
731
+ font-weight:400;
732
+ text-decoration:none;
733
+ -webkit-user-select:none;
734
+ -moz-user-select:none;
735
+ -ms-user-select:none;
736
+ user-select:none;
737
+ cursor:pointer;
738
+ white-space:nowrap;
739
+ border:1px solid transparent;
740
+ color:rgba(0, 0, 0, 0.8);
741
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
742
+ color:var(--_iui-button-text-color);
743
+ border-color:transparent;
744
+ background-color:transparent;
745
+ padding:0 8px;
746
+ height:38px;
747
+ gap:8px;
748
+ border-radius:50%;
749
+ padding:0 4px;
750
+ height:100%;
751
+ aspect-ratio:1/1;
752
+ }
753
+ @media (prefers-reduced-motion: no-preference){
754
+ .iui-select-tag-button{
755
+ transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
756
+ }
757
+ }
758
+ .iui-select-tag-button:hover{
759
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
760
+ text-decoration:none;
761
+ }
762
+ .iui-select-tag-button:focus-visible{
767
763
  outline:1px solid var(--iui-color-foreground-primary);
768
764
  outline-offset:-1px;
769
765
  }
770
- }
771
- .iui-select-tag-button[disabled], .iui-select-tag-button:disabled{
772
- cursor:not-allowed;
773
- background:#edeff2;
774
- border-color:#edeff2;
775
- color:rgba(0, 0, 0, 0.2);
776
- background:var(--iui-color-background-disabled);
777
- border-color:var(--iui-color-background-disabled);
778
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
779
- }
780
- .iui-select-tag-button > .iui-button-icon:only-child{
781
- margin-left:3px;
782
- margin-right:3px;
783
- }
784
- .iui-select-tag-button:hover{
785
- background-color:rgba(0, 0, 0, 0.1);
786
- border-color:transparent;
787
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
788
- border-color:transparent;
789
- }
790
- .iui-select-tag-button.iui-active{
791
- background-color:rgba(0, 138, 224, 0.1);
792
- color:#008ae0;
793
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
794
- color:var(--iui-color-foreground-primary);
795
- border-color:transparent;
796
- }
797
- .iui-select-tag-button[disabled], .iui-select-tag-button:disabled{
798
- cursor:not-allowed;
799
- background:#edeff2;
800
- border-color:#edeff2;
801
- color:rgba(0, 0, 0, 0.2);
802
- background:var(--iui-color-background-disabled);
803
- border-color:var(--iui-color-background-disabled);
804
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
805
- background-color:transparent;
806
- border-color:transparent;
807
- background-color:transparent;
808
- border-color:transparent;
809
- }
810
- .iui-select-tag-button[disabled].iui-active, .iui-select-tag-button:disabled.iui-active{
811
- background-color:rgba(0, 0, 0, 0.05);
812
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
813
- }
814
- .iui-select-button.iui-small .iui-select-tag-button{
815
- font-size:12px;
816
- line-height:16px;
817
- }
766
+ @supports not selector(*:focus-visible){
767
+ .iui-select-tag-button:focus{
768
+ outline:1px solid var(--iui-color-foreground-primary);
769
+ outline-offset:-1px;
770
+ }
771
+ }
772
+ .iui-select-tag-button[disabled], .iui-select-tag-button:disabled{
773
+ cursor:not-allowed;
774
+ background:#edeff2;
775
+ border-color:#edeff2;
776
+ color:rgba(0, 0, 0, 0.2);
777
+ background:var(--iui-color-background-disabled);
778
+ border-color:var(--iui-color-background-disabled);
779
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
780
+ }
781
+ .iui-select-tag-button > .iui-button-icon:only-child{
782
+ margin-left:3px;
783
+ margin-right:3px;
784
+ }
785
+ .iui-select-tag-button:hover{
786
+ background-color:rgba(0, 0, 0, 0.1);
787
+ border-color:transparent;
788
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
789
+ border-color:transparent;
790
+ }
791
+ .iui-select-tag-button.iui-active{
792
+ background-color:rgba(0, 138, 224, 0.1);
793
+ color:#008ae0;
794
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
795
+ color:var(--iui-color-foreground-primary);
796
+ border-color:transparent;
797
+ }
798
+ .iui-select-tag-button[disabled], .iui-select-tag-button:disabled{
799
+ cursor:not-allowed;
800
+ background:#edeff2;
801
+ border-color:#edeff2;
802
+ color:rgba(0, 0, 0, 0.2);
803
+ background:var(--iui-color-background-disabled);
804
+ border-color:var(--iui-color-background-disabled);
805
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
806
+ background-color:transparent;
807
+ border-color:transparent;
808
+ background-color:transparent;
809
+ border-color:transparent;
810
+ }
811
+ .iui-select-tag-button[disabled].iui-active, .iui-select-tag-button:disabled.iui-active{
812
+ background-color:rgba(0, 0, 0, 0.05);
813
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
814
+ }
815
+ .iui-select-button.iui-small .iui-select-tag-button{
816
+ font-size:12px;
817
+ line-height:16px;
818
+ }
818
819
 
819
- .iui-select-tag-button-icon{
820
- width:16px;
821
- height:16px;
822
- transition:fill 0.2s ease-out;
823
- fill:currentColor;
824
- flex-shrink:0;
825
- }
826
- .iui-select-button.iui-small .iui-select-tag-button-icon{
827
- width:12px;
828
- height:12px;
829
- }
820
+ .iui-select-tag-button-icon{
821
+ width:16px;
822
+ height:16px;
823
+ transition:fill 0.2s ease-out;
824
+ fill:currentColor;
825
+ flex-shrink:0;
826
+ }
827
+ .iui-select-button.iui-small .iui-select-tag-button-icon{
828
+ width:12px;
829
+ height:12px;
830
+ }
830
831
 
831
- .iui-textarea{
832
- margin:0;
833
- padding:0;
834
- border:none;
835
- vertical-align:baseline;
836
- width:100%;
837
- font-family:inherit;
838
- font-size:14px;
839
- font-weight:400;
840
- line-height:22px;
841
- border-radius:4px;
842
- -webkit-appearance:none;
843
- -moz-appearance:none;
844
- appearance:none;
845
- box-sizing:border-box;
846
- padding:7px 12px;
847
- min-height:38px;
848
- color:rgba(0, 0, 0, 0.8);
849
- background-color:white;
850
- border:1px solid rgba(0, 0, 0, 0.4);
851
- color:var(--iui-text-color);
852
- background-color:var(--iui-color-background-1);
853
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
854
- resize:vertical;
855
- min-height:38px;
856
- }
857
- .iui-textarea:focus-visible{
858
- outline:2px solid var(--iui-color-foreground-primary);
859
- outline-offset:-2px;
860
- }
861
- @supports not selector(*:focus-visible){
862
- .iui-textarea:focus{
832
+ .iui-textarea{
833
+ margin:0;
834
+ padding:0;
835
+ border:none;
836
+ vertical-align:baseline;
837
+ width:100%;
838
+ font-family:inherit;
839
+ font-size:14px;
840
+ font-weight:400;
841
+ line-height:22px;
842
+ border-radius:4px;
843
+ -webkit-appearance:none;
844
+ -moz-appearance:none;
845
+ appearance:none;
846
+ box-sizing:border-box;
847
+ padding:7px 12px;
848
+ min-height:38px;
849
+ color:rgba(0, 0, 0, 0.8);
850
+ background-color:white;
851
+ border:1px solid rgba(0, 0, 0, 0.4);
852
+ color:var(--iui-text-color);
853
+ background-color:var(--iui-color-background-1);
854
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
855
+ resize:vertical;
856
+ min-height:38px;
857
+ }
858
+ .iui-textarea:focus-visible{
863
859
  outline:2px solid var(--iui-color-foreground-primary);
864
860
  outline-offset:-2px;
865
861
  }
866
- }
867
- @media (prefers-reduced-motion: no-preference){
868
- .iui-textarea{
869
- transition:border-color 0.2s ease-out;
862
+ @supports not selector(*:focus-visible){
863
+ .iui-textarea:focus{
864
+ outline:2px solid var(--iui-color-foreground-primary);
865
+ outline-offset:-2px;
866
+ }
867
+ }
868
+ @media (prefers-reduced-motion: no-preference){
869
+ .iui-textarea{
870
+ transition:border-color 0.2s ease-out;
871
+ }
872
+ }
873
+ .iui-textarea.iui-small{
874
+ padding-top:1.5px;
875
+ padding-bottom:1.5px;
876
+ min-height:27px;
877
+ }
878
+ .iui-textarea.iui-large{
879
+ padding-top:12.5px;
880
+ padding-bottom:12.5px;
881
+ min-height:49px;
882
+ font-size:16px;
883
+ }
884
+ .iui-textarea::-moz-placeholder{
885
+ -moz-user-select:none;
886
+ user-select:none;
887
+ color:rgba(0, 0, 0, 0.2);
888
+ color:var(--iui-text-color-placeholder);
889
+ }
890
+ .iui-textarea:-ms-input-placeholder{
891
+ -ms-user-select:none;
892
+ user-select:none;
893
+ color:rgba(0, 0, 0, 0.2);
894
+ color:var(--iui-text-color-placeholder);
895
+ }
896
+ .iui-textarea::placeholder{
897
+ -webkit-user-select:none;
898
+ -moz-user-select:none;
899
+ -ms-user-select:none;
900
+ user-select:none;
901
+ color:rgba(0, 0, 0, 0.2);
902
+ color:var(--iui-text-color-placeholder);
903
+ }
904
+ .iui-textarea:-webkit-autofill{
905
+ border-color:#008ae0;
906
+ color:#008ae0;
907
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
908
+ border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
909
+ color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
910
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
911
+ }
912
+ .iui-textarea:autofill{
913
+ border-color:#008ae0;
914
+ color:#008ae0;
915
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
916
+ border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
917
+ color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
918
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
870
919
  }
871
- }
872
- .iui-textarea.iui-small{
873
- padding-top:1.5px;
874
- padding-bottom:1.5px;
875
- min-height:27px;
876
- }
877
- .iui-textarea.iui-large{
878
- padding-top:12.5px;
879
- padding-bottom:12.5px;
880
- min-height:49px;
881
- font-size:16px;
882
- }
883
- .iui-textarea::-moz-placeholder{
884
- -moz-user-select:none;
885
- user-select:none;
886
- color:rgba(0, 0, 0, 0.2);
887
- color:var(--iui-text-color-placeholder);
888
- }
889
- .iui-textarea:-ms-input-placeholder{
890
- -ms-user-select:none;
891
- user-select:none;
892
- color:rgba(0, 0, 0, 0.2);
893
- color:var(--iui-text-color-placeholder);
894
- }
895
- .iui-textarea::placeholder{
896
- -webkit-user-select:none;
897
- -moz-user-select:none;
898
- -ms-user-select:none;
899
- user-select:none;
900
- color:rgba(0, 0, 0, 0.2);
901
- color:var(--iui-text-color-placeholder);
902
- }
903
- .iui-textarea:-webkit-autofill{
904
- border-color:#008ae0;
905
- color:#008ae0;
906
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
907
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
908
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
909
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
910
- }
911
- .iui-textarea:autofill{
912
- border-color:#008ae0;
913
- color:#008ae0;
914
- background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
915
- border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
916
- color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
917
- background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
918
- }
919
- .iui-textarea:hover{
920
- border-color:rgba(0, 0, 0, 0.8);
921
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
922
- }
923
- @media (prefers-reduced-motion: no-preference){
924
920
  .iui-textarea:hover{
925
- transition:border-color 0.2s ease-out;
921
+ border-color:rgba(0, 0, 0, 0.8);
922
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
923
+ }
924
+ @media (prefers-reduced-motion: no-preference){
925
+ .iui-textarea:hover{
926
+ transition:border-color 0.2s ease-out;
927
+ }
928
+ }
929
+ .iui-textarea[disabled]{
930
+ background-color:#edeff2;
931
+ border-color:#edeff2;
932
+ background-color:var(--iui-color-background-disabled);
933
+ border-color:var(--iui-color-background-disabled);
934
+ cursor:not-allowed;
935
+ --_hover-color:var(--iui-color-background-disabled);
936
+ }
937
+ .iui-textarea[disabled], .iui-textarea[readonly]{
938
+ resize:none;
926
939
  }
927
- }
928
- .iui-textarea[disabled]{
929
- background-color:#edeff2;
930
- border-color:#edeff2;
931
- background-color:var(--iui-color-background-disabled);
932
- border-color:var(--iui-color-background-disabled);
933
- cursor:not-allowed;
934
- --_hover-color:var(--iui-color-background-disabled);
935
- }
936
- .iui-textarea[disabled], .iui-textarea[readonly]{
937
- resize:none;
938
- }
939
940
 
940
- .iui-input-with-icon{
941
- display:-ms-grid;
942
- display:grid;
943
- align-items:center;
944
- cursor:pointer;
945
- }
946
- .iui-input-with-icon > :first-child{
947
- -ms-grid-row:1;
948
- grid-area:1/-1;
949
- padding-right:40px;
950
- }
951
- .iui-input-with-icon:focus-within > :first-child{
952
- outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
953
- outline-offset:-2px;
954
- }
955
- .iui-input-with-icon:hover > :first-child{
956
- border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
957
- }
941
+ .iui-input-with-icon{
942
+ display:-ms-grid;
943
+ display:grid;
944
+ align-items:center;
945
+ cursor:pointer;
946
+ }
947
+ .iui-input-with-icon > :first-child{
948
+ -ms-grid-row:1;
949
+ grid-area:1/-1;
950
+ padding-right:40px;
951
+ }
952
+ .iui-input-with-icon:focus-within > :first-child{
953
+ outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
954
+ outline-offset:-2px;
955
+ }
956
+ .iui-input-with-icon:hover > :first-child{
957
+ border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
958
+ }
958
959
 
959
- .iui-end-icon{
960
- -ms-grid-row:1;
961
- -ms-grid-column:3;
962
- grid-area:inputs;
963
- -ms-grid-column-align:end;
964
- justify-self:end;
965
- margin:0 14px 0 0;
966
- position:relative;
967
- display:flex;
968
- grid-area:1/-1;
969
- }
970
- .iui-end-icon svg{
971
- width:16px;
972
- height:16px;
973
- }
974
- .iui-end-icon.iui-button{
975
- height:100%;
976
- width:-webkit-fit-content;
977
- width:-moz-fit-content;
978
- width:fit-content;
979
- margin-right:0;
980
- border-top-left-radius:0;
981
- border-bottom-left-radius:0;
982
- border-top-right-radius:inherit;
983
- border-bottom-right-radius:inherit;
984
- }
985
- .iui-end-icon.iui-actionable{
986
- align-items:center;
987
- height:90%;
988
- margin-right:2px;
989
- padding:0 12px;
990
- cursor:pointer;
991
- background-position:center;
992
- transition:background 0.4s ease-out;
993
- }
994
- .iui-end-icon.iui-actionable:hover{
995
- background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
996
- }
997
- .iui-end-icon.iui-actionable:active{
998
- background-color:var(--iui-color-background-2);
999
- background-size:100%;
1000
- transition:background 0s;
1001
- }
1002
- .iui-end-icon.iui-actionable svg{
1003
- fill:rgba(0, 0, 0, 0.8);
1004
- fill:var(--iui-icons-color-actionable);
1005
- transition:transform 0.2s ease-out;
1006
- }
1007
- .iui-end-icon.iui-actionable.iui-open svg{
1008
- transform:rotate(180deg);
1009
- }
1010
- .iui-end-icon.iui-disabled{
1011
- cursor:not-allowed;
1012
- }
1013
- .iui-end-icon.iui-disabled svg{
1014
- fill:rgba(0, 0, 0, 0.2);
1015
- fill:var(--iui-icons-color-actionable-disabled);
1016
- }
960
+ .iui-end-icon{
961
+ -ms-grid-row:1;
962
+ -ms-grid-column:3;
963
+ grid-area:inputs;
964
+ -ms-grid-column-align:end;
965
+ justify-self:end;
966
+ margin:0 14px 0 0;
967
+ position:relative;
968
+ display:flex;
969
+ grid-area:1/-1;
970
+ }
971
+ .iui-end-icon svg{
972
+ width:16px;
973
+ height:16px;
974
+ }
975
+ .iui-end-icon.iui-button{
976
+ height:100%;
977
+ width:-webkit-fit-content;
978
+ width:-moz-fit-content;
979
+ width:fit-content;
980
+ margin-right:0;
981
+ border-top-left-radius:0;
982
+ border-bottom-left-radius:0;
983
+ border-top-right-radius:inherit;
984
+ border-bottom-right-radius:inherit;
985
+ }
986
+ .iui-end-icon.iui-actionable{
987
+ align-items:center;
988
+ height:90%;
989
+ margin-right:2px;
990
+ padding:0 12px;
991
+ cursor:pointer;
992
+ background-position:center;
993
+ transition:background 0.4s ease-out;
994
+ }
995
+ .iui-end-icon.iui-actionable:hover{
996
+ background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%;
997
+ }
998
+ .iui-end-icon.iui-actionable:active{
999
+ background-color:var(--iui-color-background-2);
1000
+ background-size:100%;
1001
+ transition:background 0s;
1002
+ }
1003
+ .iui-end-icon.iui-actionable svg{
1004
+ fill:rgba(0, 0, 0, 0.8);
1005
+ fill:var(--iui-icons-color-actionable);
1006
+ transition:transform 0.2s ease-out;
1007
+ }
1008
+ .iui-end-icon.iui-actionable.iui-open svg{
1009
+ transform:rotate(180deg);
1010
+ }
1011
+ .iui-end-icon.iui-disabled{
1012
+ cursor:not-allowed;
1013
+ }
1014
+ .iui-end-icon.iui-disabled svg{
1015
+ fill:rgba(0, 0, 0, 0.2);
1016
+ fill:var(--iui-icons-color-actionable-disabled);
1017
+ }
1017
1018
 
1018
- .iui-checkbox{
1019
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
1020
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
1021
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
1022
- --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
1023
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
1024
- --_iui-checkbox-background-color:var(--iui-color-background-1);
1025
- --_iui-checkbox-mask-image:initial;
1026
- -webkit-appearance:none;
1027
- -moz-appearance:none;
1028
- appearance:none;
1029
- margin:0;
1030
- width:16px;
1031
- height:16px;
1032
- position:relative;
1033
- border-radius:4px;
1034
- background-color:var(--_iui-checkbox-background-color);
1035
- flex-shrink:0;
1036
- cursor:pointer;
1037
- }
1038
- .iui-checkbox-wrapper{
1039
- margin:0;
1040
- padding:0;
1041
- border:none;
1042
- vertical-align:baseline;
1043
- display:flex;
1044
- align-items:center;
1045
- font-size:14px;
1046
- width:-webkit-fit-content;
1047
- width:-moz-fit-content;
1048
- width:fit-content;
1049
- -webkit-user-select:none;
1050
- -moz-user-select:none;
1051
- -ms-user-select:none;
1052
- user-select:none;
1053
- position:relative;
1054
- cursor:pointer;
1055
- color:rgba(0, 0, 0, 0.8);
1056
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1057
- gap:8px;
1058
- }
1059
- .iui-checkbox-wrapper > * + *{
1060
- margin-left:8px;
1061
- }
1062
- @supports (gap: 8px){
1019
+ .iui-checkbox{
1020
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
1021
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
1022
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
1023
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
1024
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
1025
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
1026
+ --_iui-checkbox-mask-image:initial;
1027
+ -webkit-appearance:none;
1028
+ -moz-appearance:none;
1029
+ appearance:none;
1030
+ margin:0;
1031
+ width:16px;
1032
+ height:16px;
1033
+ position:relative;
1034
+ border-radius:4px;
1035
+ background-color:var(--_iui-checkbox-background-color);
1036
+ flex-shrink:0;
1037
+ cursor:pointer;
1038
+ }
1039
+ .iui-checkbox-wrapper{
1040
+ margin:0;
1041
+ padding:0;
1042
+ border:none;
1043
+ vertical-align:baseline;
1044
+ display:flex;
1045
+ align-items:center;
1046
+ font-size:14px;
1047
+ width:-webkit-fit-content;
1048
+ width:-moz-fit-content;
1049
+ width:fit-content;
1050
+ -webkit-user-select:none;
1051
+ -moz-user-select:none;
1052
+ -ms-user-select:none;
1053
+ user-select:none;
1054
+ position:relative;
1055
+ cursor:pointer;
1056
+ color:rgba(0, 0, 0, 0.8);
1057
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1058
+ gap:8px;
1059
+ }
1063
1060
  .iui-checkbox-wrapper > * + *{
1064
- margin-left:0;
1065
- }
1066
- }
1067
- .iui-checkbox-wrapper.iui-loading{
1068
- cursor:wait;
1069
- color:var(--iui-text-color-muted);
1070
- }
1071
- .iui-checkbox-wrapper > .iui-checkbox-label,
1061
+ margin-left:8px;
1062
+ }
1063
+ @supports (gap: 8px){
1064
+ .iui-checkbox-wrapper > * + *{
1065
+ margin-left:0;
1066
+ }
1067
+ }
1068
+ .iui-checkbox-wrapper.iui-loading{
1069
+ cursor:wait;
1070
+ color:var(--iui-text-color-muted);
1071
+ }
1072
+ .iui-checkbox-wrapper > .iui-checkbox-label,
1072
1073
  .iui-checkbox-wrapper > .iui-radio-label{
1073
- display:flex;
1074
- align-items:center;
1075
- }
1076
- .iui-checkbox-wrapper > .iui-checkbox-label svg,
1074
+ display:flex;
1075
+ align-items:center;
1076
+ }
1077
+ .iui-checkbox-wrapper > .iui-checkbox-label svg,
1077
1078
  .iui-checkbox-wrapper > .iui-radio-label svg{
1078
- width:16px;
1079
- height:16px;
1080
- vertical-align:middle;
1081
- fill:currentColor;
1082
- }
1083
- .iui-checkbox-wrapper.iui-disabled{
1084
- cursor:not-allowed;
1085
- color:var(--iui-text-color-muted);
1086
- }
1087
- .iui-checkbox-wrapper.iui-disabled svg{
1088
- fill:var(--iui-icons-color-actionable-disabled);
1089
- }
1090
- .iui-checkbox-wrapper.iui-positive{
1091
- color:#53a21a;
1092
- color:var(--iui-color-foreground-positive);
1093
- }
1094
- .iui-checkbox-wrapper.iui-warning{
1095
- color:#f18d13;
1096
- color:var(--iui-color-foreground-warning);
1097
- }
1098
- .iui-checkbox-wrapper.iui-negative{
1099
- color:#d10a0a;
1100
- color:var(--iui-color-foreground-negative);
1101
- }
1102
- .iui-checkbox::before{
1103
- content:"";
1104
- position:absolute;
1105
- inset:0;
1106
- transition:border-color 0.2s ease-out;
1107
- border-radius:inherit;
1108
- border-style:solid;
1109
- border-width:1px;
1110
- border-color:var(--_iui-checkbox-border-color);
1111
- }
1112
- .iui-checkbox::after{
1113
- content:"";
1114
- position:absolute;
1115
- inset:0;
1116
- background-color:var(--_iui-checkbox-svg-color);
1117
- -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
1118
- mask:var(--_iui-checkbox-mask-image) no-repeat center;
1119
- }
1120
- .iui-checkbox:not(:checked){
1121
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1122
- }
1123
- .iui-checkbox:checked{
1124
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1125
- --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
1126
- }
1127
- .iui-checkbox:indeterminate{
1128
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1129
- --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
1130
- }
1131
- .iui-checkbox:hover{
1132
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1133
- }
1134
- .iui-checkbox:focus-visible{
1135
- outline:2px solid var(--iui-color-foreground-primary);
1136
- outline-offset:-1px;
1137
- }
1138
- @supports not selector(*:focus-visible){
1139
- .iui-checkbox:focus{
1079
+ width:16px;
1080
+ height:16px;
1081
+ vertical-align:middle;
1082
+ fill:currentColor;
1083
+ }
1084
+ .iui-checkbox-wrapper.iui-disabled{
1085
+ cursor:not-allowed;
1086
+ color:var(--iui-text-color-muted);
1087
+ }
1088
+ .iui-checkbox-wrapper.iui-disabled svg{
1089
+ fill:var(--iui-icons-color-actionable-disabled);
1090
+ }
1091
+ .iui-checkbox-wrapper.iui-positive{
1092
+ color:#53a21a;
1093
+ color:var(--iui-color-foreground-positive);
1094
+ }
1095
+ .iui-checkbox-wrapper.iui-warning{
1096
+ color:#f18d13;
1097
+ color:var(--iui-color-foreground-warning);
1098
+ }
1099
+ .iui-checkbox-wrapper.iui-negative{
1100
+ color:#d10a0a;
1101
+ color:var(--iui-color-foreground-negative);
1102
+ }
1103
+ .iui-checkbox::before{
1104
+ content:"";
1105
+ position:absolute;
1106
+ inset:0;
1107
+ transition:border-color 0.2s ease-out;
1108
+ border-radius:inherit;
1109
+ border-style:solid;
1110
+ border-width:1px;
1111
+ border-color:var(--_iui-checkbox-border-color);
1112
+ }
1113
+ .iui-checkbox::after{
1114
+ content:"";
1115
+ position:absolute;
1116
+ inset:0;
1117
+ background-color:var(--_iui-checkbox-svg-color);
1118
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
1119
+ mask:var(--_iui-checkbox-mask-image) no-repeat center;
1120
+ }
1121
+ .iui-checkbox:not(:checked){
1122
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1123
+ }
1124
+ .iui-checkbox:checked{
1125
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1126
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
1127
+ }
1128
+ .iui-checkbox:indeterminate{
1129
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1130
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
1131
+ }
1132
+ .iui-checkbox:hover{
1133
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1134
+ }
1135
+ .iui-checkbox:focus-visible{
1140
1136
  outline:2px solid var(--iui-color-foreground-primary);
1141
1137
  outline-offset:-1px;
1142
1138
  }
1143
- }
1144
- .iui-checkbox:disabled{
1145
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1146
- --_iui-checkbox-border-color:var(--iui-color-background-border);
1147
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1148
- cursor:not-allowed;
1149
- }
1150
- .iui-checkbox.iui-checkbox-visibility{
1151
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
1152
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
1153
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
1154
- --_iui-checkbox-border-color:transparent;
1155
- --_iui-checkbox-background-color:transparent;
1156
- }
1157
- .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
1158
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
1159
- }
1160
- .iui-checkbox.iui-checkbox-visibility:where(:hover){
1161
- --_iui-checkbox-border-color:transparent;
1162
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1163
- }
1164
- .iui-checkbox.iui-checkbox-visibility:where(:disabled){
1165
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1166
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1167
- }
1168
- .iui-checkbox.iui-loading{
1169
- --_iui-checkbox-border-color:transparent;
1170
- --_iui-checkbox-background-color:transparent;
1171
- opacity:0;
1172
- position:absolute;
1173
- cursor:wait;
1174
- }
1139
+ @supports not selector(*:focus-visible){
1140
+ .iui-checkbox:focus{
1141
+ outline:2px solid var(--iui-color-foreground-primary);
1142
+ outline-offset:-1px;
1143
+ }
1144
+ }
1145
+ .iui-checkbox:disabled{
1146
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1147
+ --_iui-checkbox-border-color:var(--iui-color-background-border);
1148
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1149
+ cursor:not-allowed;
1150
+ }
1151
+ .iui-checkbox.iui-checkbox-visibility{
1152
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
1153
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
1154
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
1155
+ --_iui-checkbox-border-color:transparent;
1156
+ --_iui-checkbox-background-color:transparent;
1157
+ }
1158
+ .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
1159
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
1160
+ }
1161
+ .iui-checkbox.iui-checkbox-visibility:where(:hover){
1162
+ --_iui-checkbox-border-color:transparent;
1163
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1164
+ }
1165
+ .iui-checkbox.iui-checkbox-visibility:where(:disabled){
1166
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1167
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1168
+ }
1169
+ .iui-checkbox.iui-loading{
1170
+ --_iui-checkbox-border-color:transparent;
1171
+ --_iui-checkbox-background-color:transparent;
1172
+ opacity:0;
1173
+ position:absolute;
1174
+ cursor:wait;
1175
+ }
1175
1176
 
1176
- .iui-radio{
1177
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
1178
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
1179
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
1180
- --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
1181
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
1182
- --_iui-checkbox-background-color:var(--iui-color-background-1);
1183
- --_iui-checkbox-mask-image:initial;
1184
- -webkit-appearance:none;
1185
- -moz-appearance:none;
1186
- appearance:none;
1187
- margin:0;
1188
- width:16px;
1189
- height:16px;
1190
- position:relative;
1191
- border-radius:4px;
1192
- background-color:var(--_iui-checkbox-background-color);
1193
- flex-shrink:0;
1194
- cursor:pointer;
1195
- border-radius:50%;
1196
- }
1197
- .iui-radio-wrapper{
1198
- margin:0;
1199
- padding:0;
1200
- border:none;
1201
- vertical-align:baseline;
1202
- display:flex;
1203
- align-items:center;
1204
- font-size:14px;
1205
- width:-webkit-fit-content;
1206
- width:-moz-fit-content;
1207
- width:fit-content;
1208
- -webkit-user-select:none;
1209
- -moz-user-select:none;
1210
- -ms-user-select:none;
1211
- user-select:none;
1212
- position:relative;
1213
- cursor:pointer;
1214
- color:rgba(0, 0, 0, 0.8);
1215
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1216
- gap:8px;
1217
- }
1218
- .iui-radio-wrapper > * + *{
1219
- margin-left:8px;
1220
- }
1221
- @supports (gap: 8px){
1177
+ .iui-radio{
1178
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
1179
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
1180
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
1181
+ --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
1182
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
1183
+ --_iui-checkbox-background-color:var(--iui-color-background-1);
1184
+ --_iui-checkbox-mask-image:initial;
1185
+ -webkit-appearance:none;
1186
+ -moz-appearance:none;
1187
+ appearance:none;
1188
+ margin:0;
1189
+ width:16px;
1190
+ height:16px;
1191
+ position:relative;
1192
+ border-radius:4px;
1193
+ background-color:var(--_iui-checkbox-background-color);
1194
+ flex-shrink:0;
1195
+ cursor:pointer;
1196
+ border-radius:50%;
1197
+ }
1198
+ .iui-radio-wrapper{
1199
+ margin:0;
1200
+ padding:0;
1201
+ border:none;
1202
+ vertical-align:baseline;
1203
+ display:flex;
1204
+ align-items:center;
1205
+ font-size:14px;
1206
+ width:-webkit-fit-content;
1207
+ width:-moz-fit-content;
1208
+ width:fit-content;
1209
+ -webkit-user-select:none;
1210
+ -moz-user-select:none;
1211
+ -ms-user-select:none;
1212
+ user-select:none;
1213
+ position:relative;
1214
+ cursor:pointer;
1215
+ color:rgba(0, 0, 0, 0.8);
1216
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1217
+ gap:8px;
1218
+ }
1222
1219
  .iui-radio-wrapper > * + *{
1223
- margin-left:0;
1224
- }
1225
- }
1226
- .iui-radio-wrapper.iui-loading{
1227
- cursor:wait;
1228
- color:var(--iui-text-color-muted);
1229
- }
1230
- .iui-radio-wrapper > .iui-checkbox-label,
1220
+ margin-left:8px;
1221
+ }
1222
+ @supports (gap: 8px){
1223
+ .iui-radio-wrapper > * + *{
1224
+ margin-left:0;
1225
+ }
1226
+ }
1227
+ .iui-radio-wrapper.iui-loading{
1228
+ cursor:wait;
1229
+ color:var(--iui-text-color-muted);
1230
+ }
1231
+ .iui-radio-wrapper > .iui-checkbox-label,
1231
1232
  .iui-radio-wrapper > .iui-radio-label{
1232
- display:flex;
1233
- align-items:center;
1234
- }
1235
- .iui-radio-wrapper > .iui-checkbox-label svg,
1233
+ display:flex;
1234
+ align-items:center;
1235
+ }
1236
+ .iui-radio-wrapper > .iui-checkbox-label svg,
1236
1237
  .iui-radio-wrapper > .iui-radio-label svg{
1237
- width:16px;
1238
- height:16px;
1239
- vertical-align:middle;
1240
- fill:currentColor;
1241
- }
1242
- .iui-radio-wrapper.iui-disabled{
1243
- cursor:not-allowed;
1244
- color:var(--iui-text-color-muted);
1245
- }
1246
- .iui-radio-wrapper.iui-disabled svg{
1247
- fill:var(--iui-icons-color-actionable-disabled);
1248
- }
1249
- .iui-radio-wrapper.iui-positive{
1250
- color:#53a21a;
1251
- color:var(--iui-color-foreground-positive);
1252
- }
1253
- .iui-radio-wrapper.iui-warning{
1254
- color:#f18d13;
1255
- color:var(--iui-color-foreground-warning);
1256
- }
1257
- .iui-radio-wrapper.iui-negative{
1258
- color:#d10a0a;
1259
- color:var(--iui-color-foreground-negative);
1260
- }
1261
- .iui-radio::before{
1262
- content:"";
1263
- position:absolute;
1264
- inset:0;
1265
- transition:border-color 0.2s ease-out;
1266
- border-radius:inherit;
1267
- border-style:solid;
1268
- border-width:1px;
1269
- border-color:var(--_iui-checkbox-border-color);
1270
- }
1271
- .iui-radio::after{
1272
- content:"";
1273
- position:absolute;
1274
- inset:0;
1275
- background-color:var(--_iui-checkbox-svg-color);
1276
- -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
1277
- mask:var(--_iui-checkbox-mask-image) no-repeat center;
1278
- }
1279
- .iui-radio:not(:checked){
1280
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1281
- }
1282
- .iui-radio:checked{
1283
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1284
- --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
1285
- }
1286
- .iui-radio:indeterminate{
1287
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1288
- --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
1289
- }
1290
- .iui-radio:hover{
1291
- --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1292
- }
1293
- .iui-radio:focus-visible{
1294
- outline:2px solid var(--iui-color-foreground-primary);
1295
- outline-offset:-1px;
1296
- }
1297
- @supports not selector(*:focus-visible){
1298
- .iui-radio:focus{
1238
+ width:16px;
1239
+ height:16px;
1240
+ vertical-align:middle;
1241
+ fill:currentColor;
1242
+ }
1243
+ .iui-radio-wrapper.iui-disabled{
1244
+ cursor:not-allowed;
1245
+ color:var(--iui-text-color-muted);
1246
+ }
1247
+ .iui-radio-wrapper.iui-disabled svg{
1248
+ fill:var(--iui-icons-color-actionable-disabled);
1249
+ }
1250
+ .iui-radio-wrapper.iui-positive{
1251
+ color:#53a21a;
1252
+ color:var(--iui-color-foreground-positive);
1253
+ }
1254
+ .iui-radio-wrapper.iui-warning{
1255
+ color:#f18d13;
1256
+ color:var(--iui-color-foreground-warning);
1257
+ }
1258
+ .iui-radio-wrapper.iui-negative{
1259
+ color:#d10a0a;
1260
+ color:var(--iui-color-foreground-negative);
1261
+ }
1262
+ .iui-radio::before{
1263
+ content:"";
1264
+ position:absolute;
1265
+ inset:0;
1266
+ transition:border-color 0.2s ease-out;
1267
+ border-radius:inherit;
1268
+ border-style:solid;
1269
+ border-width:1px;
1270
+ border-color:var(--_iui-checkbox-border-color);
1271
+ }
1272
+ .iui-radio::after{
1273
+ content:"";
1274
+ position:absolute;
1275
+ inset:0;
1276
+ background-color:var(--_iui-checkbox-svg-color);
1277
+ -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
1278
+ mask:var(--_iui-checkbox-mask-image) no-repeat center;
1279
+ }
1280
+ .iui-radio:not(:checked){
1281
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1282
+ }
1283
+ .iui-radio:checked{
1284
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1285
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
1286
+ }
1287
+ .iui-radio:indeterminate{
1288
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
1289
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
1290
+ }
1291
+ .iui-radio:hover{
1292
+ --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1293
+ }
1294
+ .iui-radio:focus-visible{
1299
1295
  outline:2px solid var(--iui-color-foreground-primary);
1300
1296
  outline-offset:-1px;
1301
1297
  }
1302
- }
1303
- .iui-radio:disabled{
1304
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1305
- --_iui-checkbox-border-color:var(--iui-color-background-border);
1306
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1307
- cursor:not-allowed;
1308
- }
1309
- .iui-radio.iui-checkbox-visibility{
1310
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
1311
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
1312
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
1313
- --_iui-checkbox-border-color:transparent;
1314
- --_iui-checkbox-background-color:transparent;
1315
- }
1316
- .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
1317
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
1318
- }
1319
- .iui-radio.iui-checkbox-visibility:where(:hover){
1320
- --_iui-checkbox-border-color:transparent;
1321
- --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1322
- }
1323
- .iui-radio.iui-checkbox-visibility:where(:disabled){
1324
- --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1325
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1326
- }
1327
- .iui-radio.iui-loading{
1328
- --_iui-checkbox-border-color:transparent;
1329
- --_iui-checkbox-background-color:transparent;
1330
- opacity:0;
1331
- position:absolute;
1332
- cursor:wait;
1333
- }
1334
- .iui-radio:checked{
1335
- --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
1336
- }
1337
- .iui-radio:not(:checked), .iui-radio:indeterminate{
1338
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1298
+ @supports not selector(*:focus-visible){
1299
+ .iui-radio:focus{
1300
+ outline:2px solid var(--iui-color-foreground-primary);
1301
+ outline-offset:-1px;
1302
+ }
1303
+ }
1304
+ .iui-radio:disabled{
1305
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1306
+ --_iui-checkbox-border-color:var(--iui-color-background-border);
1307
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1308
+ cursor:not-allowed;
1309
+ }
1310
+ .iui-radio.iui-checkbox-visibility{
1311
+ --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
1312
+ --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
1313
+ --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
1314
+ --_iui-checkbox-border-color:transparent;
1315
+ --_iui-checkbox-background-color:transparent;
1316
+ }
1317
+ .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
1318
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
1319
+ }
1320
+ .iui-radio.iui-checkbox-visibility:where(:hover){
1321
+ --_iui-checkbox-border-color:transparent;
1322
+ --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1323
+ }
1324
+ .iui-radio.iui-checkbox-visibility:where(:disabled){
1325
+ --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
1326
+ --_iui-checkbox-background-color:var(--iui-color-background-disabled);
1327
+ }
1328
+ .iui-radio.iui-loading{
1329
+ --_iui-checkbox-border-color:transparent;
1330
+ --_iui-checkbox-background-color:transparent;
1331
+ opacity:0;
1332
+ position:absolute;
1333
+ cursor:wait;
1334
+ }
1335
+ .iui-radio:checked{
1336
+ --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
1337
+ }
1338
+ .iui-radio:not(:checked), .iui-radio:indeterminate{
1339
+ --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
1340
+ }
1339
1341
  }