@itwin/itwinui-css 0.56.0 → 0.57.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css/all.css CHANGED
@@ -584,12 +584,12 @@ html.iui-theme-dark-hc{
584
584
  }
585
585
 
586
586
  .iui-anchor{
587
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
588
587
  color:#008ae0;
589
588
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
590
589
  color:var(--iui-color-foreground-primary);
591
590
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
592
591
  border-radius:3px;
592
+ box-sizing:border-box;
593
593
  cursor:pointer;
594
594
  text-decoration:none;
595
595
  }
@@ -607,22 +607,6 @@ html.iui-theme-dark-hc{
607
607
  color:#006bad;
608
608
  color:var(--iui-color-foreground-primary-overlay);
609
609
  }
610
- .iui-anchor-external::after{
611
- content:"";
612
- display:inline-block;
613
- width:1.5ch;
614
- height:1.5ch;
615
- margin-left:0.5ch;
616
- vertical-align:-0.1ch;
617
- background-color:currentColor;
618
- -webkit-mask:var(--_iui-anchor-external-svg);
619
- mask:var(--_iui-anchor-external-svg);
620
- }
621
- @media (forced-colors: active){
622
- .iui-anchor-external::after{
623
- background-color:LinkText;
624
- }
625
- }
626
610
  .iui-anchor:hover{
627
611
  text-decoration:underline;
628
612
  }
@@ -967,12 +951,12 @@ html.iui-theme-dark-hc{
967
951
  }
968
952
 
969
953
  .iui-anchor{
970
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
971
954
  color:#008ae0;
972
955
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
973
956
  color:var(--iui-color-foreground-primary);
974
957
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
975
958
  border-radius:3px;
959
+ box-sizing:border-box;
976
960
  cursor:pointer;
977
961
  text-decoration:none;
978
962
  }
@@ -990,22 +974,6 @@ html.iui-theme-dark-hc{
990
974
  color:#006bad;
991
975
  color:var(--iui-color-foreground-primary-overlay);
992
976
  }
993
- .iui-anchor-external::after{
994
- content:"";
995
- display:inline-block;
996
- width:1.5ch;
997
- height:1.5ch;
998
- margin-left:0.5ch;
999
- vertical-align:-0.1ch;
1000
- background-color:currentColor;
1001
- -webkit-mask:var(--_iui-anchor-external-svg);
1002
- mask:var(--_iui-anchor-external-svg);
1003
- }
1004
- @media (forced-colors: active){
1005
- .iui-anchor-external::after{
1006
- background-color:LinkText;
1007
- }
1008
- }
1009
977
  .iui-anchor:hover{
1010
978
  text-decoration:underline;
1011
979
  }
@@ -1031,6 +999,26 @@ html.iui-theme-dark-hc{
1031
999
  text-decoration:none;
1032
1000
  }
1033
1001
 
1002
+ .iui-anchor-external{
1003
+ --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
1004
+ }
1005
+ .iui-anchor-external::after{
1006
+ content:"";
1007
+ display:inline-block;
1008
+ width:1.5ch;
1009
+ height:1.5ch;
1010
+ margin-left:0.5ch;
1011
+ vertical-align:-0.1ch;
1012
+ background-color:currentColor;
1013
+ -webkit-mask:var(--_iui-anchor-external-svg);
1014
+ mask:var(--_iui-anchor-external-svg);
1015
+ }
1016
+ @media (forced-colors: active){
1017
+ .iui-anchor-external::after{
1018
+ background-color:LinkText;
1019
+ }
1020
+ }
1021
+
1034
1022
  .iui-badge{
1035
1023
  --iui-badge-background-color:#c7ccd1;
1036
1024
  --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
@@ -1108,102 +1096,195 @@ html.iui-theme-dark-hc{
1108
1096
 
1109
1097
  .iui-breadcrumbs-item{
1110
1098
  display:flex;
1099
+ align-items:center;
1111
1100
  line-height:38px;
1112
1101
  height:38px;
1113
- max-width:192px;
1114
- margin:0 12px;
1115
1102
  }
1116
- .iui-breadcrumbs-item a{
1117
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
1103
+ .iui-breadcrumbs-item > *{
1104
+ max-width:26ch;
1105
+ }
1106
+ .iui-breadcrumbs-item > *{
1107
+ padding:0 8px;
1108
+ overflow:hidden;
1109
+ white-space:nowrap;
1110
+ text-overflow:ellipsis;
1111
+ color:rgba(0, 0, 0, 0.8);
1112
+ color:var(--iui-text-color);
1113
+ }
1114
+ .iui-breadcrumbs-item > :-webkit-any-link{
1118
1115
  color:#008ae0;
1119
1116
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
1120
1117
  color:var(--iui-color-foreground-primary);
1121
1118
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
1122
1119
  border-radius:3px;
1120
+ box-sizing:border-box;
1123
1121
  cursor:pointer;
1124
1122
  text-decoration:none;
1125
1123
  }
1126
- .iui-breadcrumbs-item a:focus-visible{
1124
+ .iui-breadcrumbs-item > :-moz-any-link{
1125
+ color:#008ae0;
1126
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
1127
+ color:var(--iui-color-foreground-primary);
1128
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
1129
+ border-radius:3px;
1130
+ box-sizing:border-box;
1131
+ cursor:pointer;
1132
+ text-decoration:none;
1133
+ }
1134
+ .iui-breadcrumbs-item > :any-link{
1135
+ color:#008ae0;
1136
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
1137
+ color:var(--iui-color-foreground-primary);
1138
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
1139
+ border-radius:3px;
1140
+ box-sizing:border-box;
1141
+ cursor:pointer;
1142
+ text-decoration:none;
1143
+ }
1144
+ .iui-breadcrumbs-item > :-webkit-any-link:focus-visible{
1145
+ outline:1px solid var(--iui-color-foreground-primary);
1146
+ outline-offset:1px;
1147
+ }
1148
+ .iui-breadcrumbs-item > :-moz-any-link:focus-visible{
1149
+ outline:1px solid var(--iui-color-foreground-primary);
1150
+ outline-offset:1px;
1151
+ }
1152
+ .iui-breadcrumbs-item > :any-link:focus-visible{
1127
1153
  outline:1px solid var(--iui-color-foreground-primary);
1128
1154
  outline-offset:1px;
1129
1155
  }
1130
1156
  @supports not selector(*:focus-visible){
1131
- .iui-breadcrumbs-item a:focus{
1157
+ .iui-breadcrumbs-item > :-webkit-any-link:focus{
1158
+ outline:1px solid var(--iui-color-foreground-primary);
1159
+ outline-offset:1px;
1160
+ }
1161
+ .iui-breadcrumbs-item > :-moz-any-link:focus{
1162
+ outline:1px solid var(--iui-color-foreground-primary);
1163
+ outline-offset:1px;
1164
+ }
1165
+ .iui-breadcrumbs-item > :any-link:focus{
1132
1166
  outline:1px solid var(--iui-color-foreground-primary);
1133
1167
  outline-offset:1px;
1134
1168
  }
1135
1169
  }
1136
- .iui-breadcrumbs-item a:hover{
1170
+ .iui-breadcrumbs-item > :-webkit-any-link:hover{
1137
1171
  color:#006bad;
1138
1172
  color:var(--iui-color-foreground-primary-overlay);
1139
1173
  }
1140
- .iui-breadcrumbs-item a-external::after{
1141
- content:"";
1142
- display:inline-block;
1143
- width:1.5ch;
1144
- height:1.5ch;
1145
- margin-left:0.5ch;
1146
- vertical-align:-0.1ch;
1147
- background-color:currentColor;
1148
- -webkit-mask:var(--_iui-anchor-external-svg);
1149
- mask:var(--_iui-anchor-external-svg);
1174
+ .iui-breadcrumbs-item > :-moz-any-link:hover{
1175
+ color:#006bad;
1176
+ color:var(--iui-color-foreground-primary-overlay);
1150
1177
  }
1151
- @media (forced-colors: active){
1152
- .iui-breadcrumbs-item a-external::after{
1153
- background-color:LinkText;
1154
- }
1178
+ .iui-breadcrumbs-item > :any-link:hover{
1179
+ color:#006bad;
1180
+ color:var(--iui-color-foreground-primary-overlay);
1181
+ }
1182
+ .iui-breadcrumbs-item > :-webkit-any-link:hover{
1183
+ text-decoration:underline;
1184
+ }
1185
+ .iui-breadcrumbs-item > :-moz-any-link:hover{
1186
+ text-decoration:underline;
1155
1187
  }
1156
- .iui-breadcrumbs-item a:hover{
1188
+ .iui-breadcrumbs-item > :any-link:hover{
1157
1189
  text-decoration:underline;
1158
1190
  }
1159
1191
  @media (prefers-contrast: more){
1160
- .iui-breadcrumbs-item a{
1192
+ .iui-breadcrumbs-item > :-webkit-any-link{
1161
1193
  text-decoration:underline;
1162
1194
  }
1163
- .iui-breadcrumbs-item a:hover{
1195
+ .iui-breadcrumbs-item > :-moz-any-link{
1196
+ text-decoration:underline;
1197
+ }
1198
+ .iui-breadcrumbs-item > :any-link{
1199
+ text-decoration:underline;
1200
+ }
1201
+ .iui-breadcrumbs-item > :-webkit-any-link:hover{
1202
+ text-decoration:none;
1203
+ }
1204
+ .iui-breadcrumbs-item > :-moz-any-link:hover{
1164
1205
  text-decoration:none;
1165
1206
  }
1207
+ .iui-breadcrumbs-item > :any-link:hover{
1208
+ text-decoration:none;
1209
+ }
1210
+ }
1211
+ .iui-theme-light .iui-breadcrumbs-item > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item > :-webkit-any-link{
1212
+ text-decoration:none;
1213
+ }
1214
+ .iui-theme-light .iui-breadcrumbs-item > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item > :-moz-any-link{
1215
+ text-decoration:none;
1166
1216
  }
1167
- .iui-theme-light .iui-breadcrumbs-item a, .iui-theme-dark .iui-breadcrumbs-item a{
1217
+ .iui-theme-light .iui-breadcrumbs-item > :any-link, .iui-theme-dark .iui-breadcrumbs-item > :any-link{
1168
1218
  text-decoration:none;
1169
1219
  }
1170
- .iui-theme-light .iui-breadcrumbs-item a:hover, .iui-theme-dark .iui-breadcrumbs-item a:hover{
1220
+ .iui-theme-light .iui-breadcrumbs-item > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item > :-webkit-any-link:hover{
1221
+ text-decoration:underline;
1222
+ }
1223
+ .iui-theme-light .iui-breadcrumbs-item > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item > :-moz-any-link:hover{
1224
+ text-decoration:underline;
1225
+ }
1226
+ .iui-theme-light .iui-breadcrumbs-item > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item > :any-link:hover{
1227
+ text-decoration:underline;
1228
+ }
1229
+
1230
+ .iui-theme-light-hc .iui-breadcrumbs-item > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item > :-webkit-any-link{
1171
1231
  text-decoration:underline;
1172
1232
  }
1173
1233
 
1174
- .iui-theme-light-hc .iui-breadcrumbs-item a, .iui-theme-dark-hc .iui-breadcrumbs-item a{
1234
+ .iui-theme-light-hc .iui-breadcrumbs-item > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item > :-moz-any-link{
1175
1235
  text-decoration:underline;
1176
1236
  }
1177
- .iui-theme-light-hc .iui-breadcrumbs-item a:hover, .iui-theme-dark-hc .iui-breadcrumbs-item a:hover{
1237
+
1238
+ .iui-theme-light-hc .iui-breadcrumbs-item > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item > :any-link{
1239
+ text-decoration:underline;
1240
+ }
1241
+ .iui-theme-light-hc .iui-breadcrumbs-item > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item > :-webkit-any-link:hover{
1242
+ text-decoration:none;
1243
+ }
1244
+ .iui-theme-light-hc .iui-breadcrumbs-item > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item > :-moz-any-link:hover{
1245
+ text-decoration:none;
1246
+ }
1247
+ .iui-theme-light-hc .iui-breadcrumbs-item > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item > :any-link:hover{
1178
1248
  text-decoration:none;
1179
1249
  }
1180
1250
 
1181
- .iui-breadcrumbs-item .iui-button{
1251
+ .iui-breadcrumbs-item > :-webkit-any-link:focus{
1252
+ outline-offset:-1px;
1253
+ }
1254
+
1255
+ .iui-breadcrumbs-item > :-moz-any-link:focus{
1256
+ outline-offset:-1px;
1257
+ }
1258
+
1259
+ .iui-breadcrumbs-item > :any-link:focus{
1260
+ outline-offset:-1px;
1261
+ }
1262
+ .iui-breadcrumbs-item .iui-button.iui-button{
1182
1263
  border-color:transparent;
1183
1264
  background-color:transparent;
1184
1265
  padding:0 8px;
1185
1266
  height:38px;
1186
1267
  gap:8px;
1187
- margin:0 -9px;
1268
+ border:none;
1188
1269
  }
1189
- .iui-breadcrumbs-item .iui-button > .iui-button-icon:only-child{
1270
+ .iui-breadcrumbs-item .iui-button.iui-button > .iui-button-icon:only-child{
1190
1271
  margin-left:3px;
1191
1272
  margin-right:3px;
1192
1273
  }
1193
- .iui-breadcrumbs-item .iui-button:hover{
1274
+ .iui-breadcrumbs-item .iui-button.iui-button:hover{
1194
1275
  background-color:rgba(0, 0, 0, 0.1);
1195
1276
  border-color:transparent;
1196
1277
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1197
1278
  border-color:transparent;
1198
1279
  }
1199
- .iui-breadcrumbs-item .iui-button.iui-active{
1280
+ .iui-breadcrumbs-item .iui-button.iui-button.iui-active{
1200
1281
  background-color:rgba(0, 138, 224, 0.1);
1201
1282
  color:#008ae0;
1202
1283
  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
1203
1284
  color:var(--iui-color-foreground-primary);
1204
1285
  border-color:transparent;
1205
1286
  }
1206
- .iui-breadcrumbs-item .iui-button[disabled], .iui-breadcrumbs-item .iui-button:disabled{
1287
+ .iui-breadcrumbs-item .iui-button.iui-button[disabled], .iui-breadcrumbs-item .iui-button.iui-button:disabled{
1207
1288
  cursor:not-allowed;
1208
1289
  background:#edeff2;
1209
1290
  border-color:#edeff2;
@@ -1216,55 +1297,215 @@ html.iui-theme-dark-hc{
1216
1297
  background-color:transparent;
1217
1298
  border-color:transparent;
1218
1299
  }
1219
- .iui-breadcrumbs-item .iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button:disabled.iui-active{
1300
+ .iui-breadcrumbs-item .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button.iui-button:disabled.iui-active{
1220
1301
  background-color:rgba(0, 0, 0, 0.05);
1221
1302
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
1222
1303
  }
1223
- .iui-breadcrumbs-item > *,
1304
+ .iui-breadcrumbs-item .iui-button.iui-button:focus-visible{
1305
+ outline:1px solid var(--iui-color-foreground-primary);
1306
+ outline-offset:-1px;
1307
+ }
1308
+ @supports not selector(*:focus-visible){
1309
+ .iui-breadcrumbs-item .iui-button.iui-button:focus{
1310
+ outline:1px solid var(--iui-color-foreground-primary);
1311
+ outline-offset:-1px;
1312
+ }
1313
+ }
1224
1314
  .iui-breadcrumbs-item .iui-button-label{
1225
1315
  overflow:hidden;
1226
1316
  white-space:nowrap;
1227
1317
  text-overflow:ellipsis;
1228
1318
  }
1229
- .iui-breadcrumbs-item:not(.iui-current) > .iui-button{
1319
+ .iui-breadcrumbs-item .iui-button:not([aria-current]), .iui-breadcrumbs-item .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item .iui-button:not([aria-current]):active{
1320
+ --_iui-button-text-color:var(--iui-color-foreground-primary);
1321
+ }
1322
+
1323
+ .iui-breadcrumbs-text{
1324
+ padding:0 8px;
1325
+ overflow:hidden;
1326
+ white-space:nowrap;
1327
+ text-overflow:ellipsis;
1328
+ }
1329
+ a.iui-breadcrumbs-text{
1230
1330
  color:#008ae0;
1331
+ -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
1231
1332
  color:var(--iui-color-foreground-primary);
1333
+ -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
1334
+ border-radius:3px;
1335
+ box-sizing:border-box;
1336
+ cursor:pointer;
1337
+ text-decoration:none;
1232
1338
  }
1233
- .iui-breadcrumbs-item:not(.iui-current) > .iui-button:hover{
1339
+ a.iui-breadcrumbs-text:focus-visible{
1340
+ outline:1px solid var(--iui-color-foreground-primary);
1341
+ outline-offset:1px;
1342
+ }
1343
+ @supports not selector(*:focus-visible){
1344
+ a.iui-breadcrumbs-text:focus{
1345
+ outline:1px solid var(--iui-color-foreground-primary);
1346
+ outline-offset:1px;
1347
+ }
1348
+ }
1349
+ a.iui-breadcrumbs-text:hover{
1234
1350
  color:#006bad;
1235
1351
  color:var(--iui-color-foreground-primary-overlay);
1236
1352
  }
1353
+ a.iui-breadcrumbs-text:hover{
1354
+ text-decoration:underline;
1355
+ }
1356
+ @media (prefers-contrast: more){
1357
+ a.iui-breadcrumbs-text{
1358
+ text-decoration:underline;
1359
+ }
1360
+ a.iui-breadcrumbs-text:hover{
1361
+ text-decoration:none;
1362
+ }
1363
+ }
1364
+ .iui-theme-light a.iui-breadcrumbs-text, .iui-theme-dark a.iui-breadcrumbs-text{
1365
+ text-decoration:none;
1366
+ }
1367
+ .iui-theme-light a.iui-breadcrumbs-text:hover, .iui-theme-dark a.iui-breadcrumbs-text:hover{
1368
+ text-decoration:underline;
1369
+ }
1370
+
1371
+ .iui-theme-light-hc a.iui-breadcrumbs-text, .iui-theme-dark-hc a.iui-breadcrumbs-text{
1372
+ text-decoration:underline;
1373
+ }
1374
+ .iui-theme-light-hc a.iui-breadcrumbs-text:hover, .iui-theme-dark-hc a.iui-breadcrumbs-text:hover{
1375
+ text-decoration:none;
1376
+ }
1377
+
1378
+ a.iui-breadcrumbs-text:focus{
1379
+ outline-offset:-1px;
1380
+ }
1381
+
1382
+ .iui-breadcrumbs-button{
1383
+ --_iui-button-active-stripe-inset:initial;
1384
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1385
+ margin:0;
1386
+ padding:0;
1387
+ border:none;
1388
+ vertical-align:baseline;
1389
+ font-family:inherit;
1390
+ display:inline-flex;
1391
+ align-items:center;
1392
+ vertical-align:middle;
1393
+ justify-content:center;
1394
+ position:relative;
1395
+ box-sizing:border-box;
1396
+ border-radius:3px;
1397
+ line-height:22px;
1398
+ box-shadow:none;
1399
+ font-size:14px;
1400
+ font-weight:400;
1401
+ text-decoration:none;
1402
+ -webkit-user-select:none;
1403
+ -moz-user-select:none;
1404
+ -ms-user-select:none;
1405
+ user-select:none;
1406
+ cursor:pointer;
1407
+ white-space:nowrap;
1408
+ border:1px solid transparent;
1409
+ color:rgba(0, 0, 0, 0.8);
1410
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1411
+ color:var(--_iui-button-text-color);
1412
+ border-color:transparent;
1413
+ background-color:transparent;
1414
+ padding:0 8px;
1415
+ height:38px;
1416
+ gap:8px;
1417
+ padding:0;
1418
+ border:none;
1419
+ color:#008ae0;
1420
+ color:var(--iui-color-foreground-primary);
1421
+ }
1422
+ @media (prefers-reduced-motion: no-preference){
1423
+ .iui-breadcrumbs-button{
1424
+ transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
1425
+ }
1426
+ }
1427
+ .iui-breadcrumbs-button:hover{
1428
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
1429
+ text-decoration:none;
1430
+ }
1431
+ .iui-breadcrumbs-button:focus-visible{
1432
+ outline:1px solid var(--iui-color-foreground-primary);
1433
+ outline-offset:-1px;
1434
+ }
1435
+ @supports not selector(*:focus-visible){
1436
+ .iui-breadcrumbs-button:focus{
1437
+ outline:1px solid var(--iui-color-foreground-primary);
1438
+ outline-offset:-1px;
1439
+ }
1440
+ }
1441
+ .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
1442
+ cursor:not-allowed;
1443
+ background:#edeff2;
1444
+ border-color:#edeff2;
1445
+ color:rgba(0, 0, 0, 0.2);
1446
+ background:var(--iui-color-background-disabled);
1447
+ border-color:var(--iui-color-background-disabled);
1448
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1449
+ }
1450
+ .iui-breadcrumbs-button > .iui-button-icon:only-child{
1451
+ margin-left:3px;
1452
+ margin-right:3px;
1453
+ }
1454
+ .iui-breadcrumbs-button:hover{
1455
+ background-color:rgba(0, 0, 0, 0.1);
1456
+ border-color:transparent;
1457
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
1458
+ border-color:transparent;
1459
+ }
1460
+ .iui-breadcrumbs-button.iui-active{
1461
+ background-color:rgba(0, 138, 224, 0.1);
1462
+ color:#008ae0;
1463
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
1464
+ color:var(--iui-color-foreground-primary);
1465
+ border-color:transparent;
1466
+ }
1467
+ .iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
1468
+ cursor:not-allowed;
1469
+ background:#edeff2;
1470
+ border-color:#edeff2;
1471
+ color:rgba(0, 0, 0, 0.2);
1472
+ background:var(--iui-color-background-disabled);
1473
+ border-color:var(--iui-color-background-disabled);
1474
+ color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1475
+ background-color:transparent;
1476
+ border-color:transparent;
1477
+ background-color:transparent;
1478
+ border-color:transparent;
1479
+ }
1480
+ .iui-breadcrumbs-button[disabled].iui-active, .iui-breadcrumbs-button:disabled.iui-active{
1481
+ background-color:rgba(0, 0, 0, 0.05);
1482
+ background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
1483
+ }
1484
+ .iui-breadcrumbs-button[aria-current]{
1485
+ color:rgba(0, 0, 0, 0.8);
1486
+ color:var(--iui-text-color);
1487
+ }
1237
1488
 
1238
1489
  .iui-breadcrumbs-separator{
1239
1490
  display:flex;
1491
+ margin:0 2px;
1240
1492
  }
1241
1493
  .iui-breadcrumbs-separator svg{
1242
- fill:rgba(0, 0, 0, 0.4);
1243
- fill:var(--iui-icons-color);
1244
- display:inline-flex;
1245
1494
  width:12px;
1246
1495
  height:12px;
1247
1496
  display:flex;
1497
+ fill:rgba(0, 0, 0, 0.4);
1498
+ fill:var(--iui-icons-color);
1248
1499
  }
1249
- .iui-breadcrumbs-separator svg.iui-informational{
1250
- fill:#008ae0;
1251
- fill:var(--iui-icons-color-primary);
1252
- }
1253
- .iui-breadcrumbs-separator svg.iui-positive{
1254
- fill:#53a21a;
1255
- fill:var(--iui-icons-color-positive);
1256
- }
1257
- .iui-breadcrumbs-separator svg.iui-warning{
1258
- fill:#f18d13;
1259
- fill:var(--iui-icons-color-warning);
1260
- }
1261
- .iui-breadcrumbs-separator svg.iui-negative{
1262
- fill:#d10a0a;
1263
- fill:var(--iui-icons-color-negative);
1500
+ @media (forced-colors: active){
1501
+ .iui-breadcrumbs-separator svg{
1502
+ fill:CanvasText;
1503
+ }
1264
1504
  }
1265
1505
 
1266
1506
  .iui-button{
1267
1507
  --_iui-button-active-stripe-inset:initial;
1508
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1268
1509
  margin:0;
1269
1510
  padding:0;
1270
1511
  border:none;
@@ -1291,6 +1532,7 @@ html.iui-theme-dark-hc{
1291
1532
  border:1px solid transparent;
1292
1533
  color:rgba(0, 0, 0, 0.8);
1293
1534
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1535
+ color:var(--_iui-button-text-color);
1294
1536
  padding:0 16px;
1295
1537
  height:38px;
1296
1538
  gap:8px;
@@ -1304,9 +1546,8 @@ html.iui-theme-dark-hc{
1304
1546
  }
1305
1547
  }
1306
1548
  .iui-button:hover{
1549
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
1307
1550
  text-decoration:none;
1308
- color:black;
1309
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
1310
1551
  }
1311
1552
  .iui-button:focus-visible{
1312
1553
  outline:1px solid var(--iui-color-foreground-primary);
@@ -1339,10 +1580,8 @@ html.iui-theme-dark-hc{
1339
1580
  .iui-button.iui-default{
1340
1581
  background-color:white;
1341
1582
  border-color:rgba(0, 0, 0, 0.4);
1342
- color:rgba(0, 0, 0, 0.8);
1343
1583
  background-color:var(--iui-color-background-1);
1344
1584
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
1345
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
1346
1585
  }
1347
1586
  .iui-button.iui-default:focus-visible{
1348
1587
  outline:2px solid var(--iui-color-foreground-primary);
@@ -1357,10 +1596,8 @@ html.iui-theme-dark-hc{
1357
1596
  .iui-button.iui-default:hover, .iui-button.iui-default:active{
1358
1597
  background-color:#f2f2f2;
1359
1598
  border-color:black;
1360
- color:black;
1361
1599
  background-color:var(--iui-color-background-1-overlay);
1362
1600
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
1363
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
1364
1601
  }
1365
1602
  .iui-button.iui-default:hover .iui-notification-primary::before,
1366
1603
  .iui-button.iui-default:hover .iui-notification-positive::before,
@@ -1403,12 +1640,14 @@ html.iui-theme-dark-hc{
1403
1640
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1404
1641
  }
1405
1642
  .iui-button.iui-high-visibility{
1643
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
1406
1644
  background-color:#008ae0;
1407
1645
  border-color:#008ae0;
1408
1646
  color:white;
1409
1647
  background-color:var(--iui-color-background-primary);
1410
1648
  border-color:var(--iui-color-background-primary);
1411
1649
  color:var(--iui-color-foreground-accessory);
1650
+ color:var(--_iui-button-text-color);
1412
1651
  }
1413
1652
  .iui-button.iui-high-visibility:focus-visible{
1414
1653
  outline:1px solid var(--iui-color-foreground-accessory);
@@ -1423,10 +1662,8 @@ html.iui-theme-dark-hc{
1423
1662
  .iui-button.iui-high-visibility:hover, .iui-button.iui-high-visibility:active{
1424
1663
  background-color:#006bad;
1425
1664
  border-color:#006bad;
1426
- color:white;
1427
1665
  background-color:var(--iui-color-background-primary-overlay);
1428
1666
  border-color:var(--iui-color-background-primary-overlay);
1429
- color:var(--iui-color-foreground-accessory);
1430
1667
  }
1431
1668
  .iui-button.iui-high-visibility[disabled], .iui-button.iui-high-visibility:disabled{
1432
1669
  cursor:not-allowed;
@@ -1438,12 +1675,14 @@ html.iui-theme-dark-hc{
1438
1675
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1439
1676
  }
1440
1677
  .iui-button.iui-cta{
1678
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
1441
1679
  background-color:#53a21a;
1442
1680
  border-color:#53a21a;
1443
1681
  color:white;
1444
1682
  background-color:var(--iui-color-background-positive);
1445
1683
  border-color:var(--iui-color-background-positive);
1446
1684
  color:var(--iui-color-foreground-accessory);
1685
+ color:var(--_iui-button-text-color);
1447
1686
  }
1448
1687
  .iui-button.iui-cta:focus-visible{
1449
1688
  outline:1px solid var(--iui-color-foreground-accessory);
@@ -1458,10 +1697,8 @@ html.iui-theme-dark-hc{
1458
1697
  .iui-button.iui-cta:hover, .iui-button.iui-cta:active{
1459
1698
  background-color:#3d7613;
1460
1699
  border-color:#3d7613;
1461
- color:white;
1462
1700
  background-color:var(--iui-color-background-positive-overlay);
1463
1701
  border-color:var(--iui-color-background-positive-overlay);
1464
- color:var(--iui-color-foreground-accessory);
1465
1702
  }
1466
1703
  .iui-button.iui-cta[disabled], .iui-button.iui-cta:disabled{
1467
1704
  cursor:not-allowed;
@@ -1473,12 +1710,14 @@ html.iui-theme-dark-hc{
1473
1710
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
1474
1711
  }
1475
1712
  .iui-button.iui-idea{
1713
+ --_iui-button-text-color:var(--iui-color-foreground-accessory);
1476
1714
  background-color:#008ae0;
1477
1715
  border-color:#008ae0;
1478
1716
  color:white;
1479
1717
  background-color:var(--iui-color-background-primary);
1480
1718
  border-color:var(--iui-color-background-primary);
1481
1719
  color:var(--iui-color-foreground-accessory);
1720
+ color:var(--_iui-button-text-color);
1482
1721
  border-radius:22px;
1483
1722
  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
1484
1723
  position:fixed;
@@ -1498,10 +1737,8 @@ html.iui-theme-dark-hc{
1498
1737
  .iui-button.iui-idea:hover, .iui-button.iui-idea:active{
1499
1738
  background-color:#006bad;
1500
1739
  border-color:#006bad;
1501
- color:white;
1502
1740
  background-color:var(--iui-color-background-primary-overlay);
1503
1741
  border-color:var(--iui-color-background-primary-overlay);
1504
- color:var(--iui-color-foreground-accessory);
1505
1742
  }
1506
1743
  .iui-button.iui-idea[disabled], .iui-button.iui-idea:disabled{
1507
1744
  cursor:not-allowed;
@@ -3107,12 +3344,12 @@ html.iui-theme-dark-hc{
3107
3344
  background-color:var(--iui-text-color-muted);
3108
3345
  }
3109
3346
  .iui-legal-footer > ul > li > a{
3110
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
3111
3347
  color:#008ae0;
3112
3348
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
3113
3349
  color:var(--iui-color-foreground-primary);
3114
3350
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
3115
3351
  border-radius:3px;
3352
+ box-sizing:border-box;
3116
3353
  cursor:pointer;
3117
3354
  text-decoration:none;
3118
3355
  }
@@ -3130,22 +3367,6 @@ html.iui-theme-dark-hc{
3130
3367
  color:#006bad;
3131
3368
  color:var(--iui-color-foreground-primary-overlay);
3132
3369
  }
3133
- .iui-legal-footer > ul > li > a-external::after{
3134
- content:"";
3135
- display:inline-block;
3136
- width:1.5ch;
3137
- height:1.5ch;
3138
- margin-left:0.5ch;
3139
- vertical-align:-0.1ch;
3140
- background-color:currentColor;
3141
- -webkit-mask:var(--_iui-anchor-external-svg);
3142
- mask:var(--_iui-anchor-external-svg);
3143
- }
3144
- @media (forced-colors: active){
3145
- .iui-legal-footer > ul > li > a-external::after{
3146
- background-color:LinkText;
3147
- }
3148
- }
3149
3370
  .iui-legal-footer > ul > li > a:hover{
3150
3371
  text-decoration:underline;
3151
3372
  }
@@ -6418,12 +6639,12 @@ label.iui-input-label.iui-disabled{
6418
6639
  border-color:rgba(0, 0, 0, 0.8);
6419
6640
  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
6420
6641
  }
6421
- .iui-radio-tile-content:hover svg{
6642
+ .iui-radio-tile-content:hover .iui-radio-tile-icon{
6422
6643
  fill:rgba(0, 0, 0, 0.8);
6423
6644
  fill:var(--iui-icons-color-actionable);
6424
6645
  }
6425
6646
  @media (forced-colors: active){
6426
- .iui-radio-tile-content:hover svg{
6647
+ .iui-radio-tile-content:hover .iui-radio-tile-icon{
6427
6648
  fill:CanvasText;
6428
6649
  }
6429
6650
  }
@@ -6481,12 +6702,12 @@ label.iui-input-label.iui-disabled{
6481
6702
  border-color:Highlight;
6482
6703
  }
6483
6704
  }
6484
- .iui-radio-tile-input:checked + * svg{
6705
+ .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
6485
6706
  fill:#008ae0;
6486
6707
  fill:var(--iui-icons-color-primary);
6487
6708
  }
6488
6709
  @media (forced-colors: active){
6489
- .iui-radio-tile-input:checked + * svg{
6710
+ .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
6490
6711
  fill:Highlight;
6491
6712
  }
6492
6713
  }
@@ -6524,18 +6745,16 @@ label.iui-input-label.iui-disabled{
6524
6745
  background-color:GrayText;
6525
6746
  }
6526
6747
  }
6527
- .iui-radio-tile-input:disabled + * svg{
6748
+ .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
6749
+ filter:grayscale(100%);
6528
6750
  fill:rgba(0, 0, 0, 0.2);
6529
6751
  fill:var(--iui-icons-color-actionable-disabled);
6530
6752
  }
6531
6753
  @media (forced-colors: active){
6532
- .iui-radio-tile-input:disabled + * svg{
6754
+ .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
6533
6755
  fill:GrayText;
6534
6756
  }
6535
6757
  }
6536
- .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
6537
- filter:grayscale(100%);
6538
- }
6539
6758
  @media (forced-colors: active){
6540
6759
  .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
6541
6760
  .iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
@@ -6564,18 +6783,16 @@ label.iui-input-label.iui-disabled{
6564
6783
  margin:0 auto;
6565
6784
  padding-top:6px;
6566
6785
  padding-bottom:11px;
6567
- }
6568
- .iui-radio-tile-icon svg{
6569
6786
  fill:rgba(0, 0, 0, 0.4);
6570
6787
  fill:var(--iui-icons-color);
6571
6788
  }
6572
6789
  @media (prefers-reduced-motion: no-preference){
6573
- .iui-radio-tile-icon svg{
6790
+ .iui-radio-tile-icon{
6574
6791
  transition:fill 0.2s ease-out;
6575
6792
  }
6576
6793
  }
6577
6794
  @media (forced-colors: active){
6578
- .iui-radio-tile-icon svg{
6795
+ .iui-radio-tile-icon{
6579
6796
  fill:CanvasText;
6580
6797
  }
6581
6798
  }
@@ -7588,6 +7805,7 @@ label.iui-input-label.iui-disabled{
7588
7805
 
7589
7806
  .iui-paginator-page-button{
7590
7807
  --_iui-button-active-stripe-inset:initial;
7808
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
7591
7809
  margin:0;
7592
7810
  padding:0;
7593
7811
  border:none;
@@ -7614,6 +7832,7 @@ label.iui-input-label.iui-disabled{
7614
7832
  border:1px solid transparent;
7615
7833
  color:rgba(0, 0, 0, 0.8);
7616
7834
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
7835
+ color:var(--_iui-button-text-color);
7617
7836
  border-color:transparent;
7618
7837
  background-color:transparent;
7619
7838
  padding:0 8px;
@@ -7628,9 +7847,8 @@ label.iui-input-label.iui-disabled{
7628
7847
  }
7629
7848
  }
7630
7849
  .iui-paginator-page-button:hover{
7850
+ --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
7631
7851
  text-decoration:none;
7632
- color:black;
7633
- color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
7634
7852
  }
7635
7853
  .iui-paginator-page-button:focus-visible{
7636
7854
  outline:1px solid var(--iui-color-foreground-primary);
@@ -7651,15 +7869,6 @@ label.iui-input-label.iui-disabled{
7651
7869
  border-color:var(--iui-color-background-disabled);
7652
7870
  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
7653
7871
  }
7654
- .iui-paginator-page-button.iui-active::after{
7655
- content:"";
7656
- position:absolute;
7657
- inset:var(--_iui-button-active-stripe-inset);
7658
- background-color:var(--iui-color-foreground-primary);
7659
- }
7660
- .iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
7661
- background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
7662
- }
7663
7872
  .iui-paginator-page-button > .iui-button-icon:only-child{
7664
7873
  margin-left:3px;
7665
7874
  margin-right:3px;
@@ -7694,6 +7903,15 @@ label.iui-input-label.iui-disabled{
7694
7903
  background-color:rgba(0, 0, 0, 0.05);
7695
7904
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
7696
7905
  }
7906
+ .iui-paginator-page-button.iui-active::after{
7907
+ content:"";
7908
+ position:absolute;
7909
+ inset:var(--_iui-button-active-stripe-inset);
7910
+ background-color:var(--iui-color-foreground-primary);
7911
+ }
7912
+ .iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
7913
+ background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
7914
+ }
7697
7915
  .iui-paginator-page-button-small{
7698
7916
  padding:0 8px;
7699
7917
  height:27px;
@@ -8157,12 +8375,12 @@ label.iui-input-label.iui-disabled{
8157
8375
  }
8158
8376
 
8159
8377
  a.iui-tag-basic{
8160
- --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
8161
8378
  color:#008ae0;
8162
8379
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
8163
8380
  color:var(--iui-color-foreground-primary);
8164
8381
  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
8165
8382
  border-radius:3px;
8383
+ box-sizing:border-box;
8166
8384
  cursor:pointer;
8167
8385
  text-decoration:none;
8168
8386
  }
@@ -8180,22 +8398,6 @@ a.iui-tag-basic:hover{
8180
8398
  color:#006bad;
8181
8399
  color:var(--iui-color-foreground-primary-overlay);
8182
8400
  }
8183
- a.iui-tag-basic-external::after{
8184
- content:"";
8185
- display:inline-block;
8186
- width:1.5ch;
8187
- height:1.5ch;
8188
- margin-left:0.5ch;
8189
- vertical-align:-0.1ch;
8190
- background-color:currentColor;
8191
- -webkit-mask:var(--_iui-anchor-external-svg);
8192
- mask:var(--_iui-anchor-external-svg);
8193
- }
8194
- @media (forced-colors: active){
8195
- a.iui-tag-basic-external::after{
8196
- background-color:LinkText;
8197
- }
8198
- }
8199
8401
  a.iui-tag-basic:hover{
8200
8402
  text-decoration:underline;
8201
8403
  }