@stackoverflow/stacks 1.2.0 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/controllers/s-expandable-control.d.ts +1 -1
  2. package/dist/controllers/s-tooltip.d.ts +16 -1
  3. package/dist/css/stacks.css +974 -731
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +174 -91
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/css/atomic/borders.less +1 -0
  8. package/lib/css/atomic/colors.less +1 -0
  9. package/lib/css/atomic/misc.less +1 -1
  10. package/lib/css/atomic/typography.less +0 -6
  11. package/lib/css/atomic/width-height.less +1 -1
  12. package/lib/css/components/activity-indicator.less +18 -17
  13. package/lib/css/components/avatars.less +51 -131
  14. package/lib/css/components/badges.less +2 -0
  15. package/lib/css/components/breadcrumbs.less +4 -4
  16. package/lib/css/components/buttons.less +38 -54
  17. package/lib/css/components/empty-states.less +15 -0
  18. package/lib/css/components/{collapsible.less → expandable.less} +0 -0
  19. package/lib/css/components/inputs.less +44 -110
  20. package/lib/css/components/labels.less +98 -0
  21. package/lib/css/components/notices.less +190 -163
  22. package/lib/css/components/post-summary.less +117 -114
  23. package/lib/css/components/progress-bars.less +1 -1
  24. package/lib/css/components/prose.less +4 -4
  25. package/lib/css/components/spinner.less +39 -1
  26. package/lib/css/components/tables.less +1 -5
  27. package/lib/css/components/topbar.less +4 -1
  28. package/lib/css/components/uploader.less +70 -84
  29. package/lib/css/exports/constants-colors.less +68 -49
  30. package/lib/css/stacks-dynamic.less +0 -1
  31. package/lib/css/stacks-static.less +3 -2
  32. package/lib/ts/controllers/s-expandable-control.ts +23 -19
  33. package/lib/ts/controllers/s-modal.ts +16 -16
  34. package/lib/ts/controllers/s-navigation-tablist.ts +13 -13
  35. package/lib/ts/controllers/s-popover.ts +26 -18
  36. package/lib/ts/controllers/s-table.ts +31 -29
  37. package/lib/ts/controllers/s-tooltip.ts +62 -23
  38. package/lib/ts/controllers/s-uploader.ts +26 -12
  39. package/lib/ts/stacks.ts +8 -4
  40. package/package.json +23 -23
  41. package/lib/css/components/banners.less +0 -80
  42. package/lib/css/components/blank-states.less +0 -26
@@ -400,48 +400,90 @@ template {
400
400
  fill: currentColor;
401
401
  }
402
402
  .s-activity-indicator {
403
+ --_focus-ring: var(--focus-ring);
404
+ --_bg-color: var(--theme-secondary-400);
403
405
  display: inline-block;
404
406
  min-width: var(--su-static12);
405
407
  min-height: var(--su-static12);
406
408
  padding: var(--su2) var(--su4);
407
409
  line-height: 1.1;
408
- background-color: var(--theme-secondary-400);
409
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
410
+ background-color: var(--_bg-color);
411
+ box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring);
410
412
  border-radius: 1000px;
411
413
  font-size: var(--fs-fine);
412
414
  font-weight: 600;
413
415
  color: hsl(0, 0%, 100%);
414
416
  text-transform: uppercase;
415
417
  }
416
- body.theme-highcontrast .s-activity-indicator {
417
- color: var(--white);
418
+ .s-activity-indicator.s-activity-indicator__success {
419
+ --_bg-color: var(--green-500);
420
+ --_focus-ring: var(--focus-ring-success);
418
421
  }
419
- .s-activity-indicator__success {
420
- background-color: var(--green-500);
421
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
422
+ .s-activity-indicator.s-activity-indicator__warning {
423
+ --_bg-color: var(--yellow-600);
424
+ --_focus-ring: var(--focus-ring-warning);
422
425
  }
423
- .s-activity-indicator__warning {
424
- background-color: var(--yellow-600);
425
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
426
+ .s-activity-indicator.s-activity-indicator__danger {
427
+ --_bg-color: var(--red-500);
428
+ --_focus-ring: var(--focus-ring-error);
426
429
  }
427
- .s-activity-indicator__danger {
428
- background-color: var(--red-500);
429
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
430
+ body.theme-highcontrast .s-activity-indicator {
431
+ color: var(--white);
430
432
  }
431
433
  .s-avatar {
434
+ --_size: var(--su-static16);
435
+ --_br: var(--br-sm);
436
+ --_fs-letter: calc(var(--su-static12) - var(--su-static1));
437
+ --_scale-badge: 1;
432
438
  display: inline-block;
433
439
  position: relative;
434
- width: var(--su-static16);
435
- height: var(--su-static16);
436
- border-radius: var(--br-sm);
440
+ width: var(--_size);
441
+ height: var(--_size);
442
+ border-radius: var(--_br);
437
443
  background-color: hsl(0, 0%, 100%);
438
444
  background-repeat: no-repeat;
439
445
  background-size: 100%;
440
446
  vertical-align: bottom;
441
447
  }
448
+ .s-avatar.s-avatar__24 {
449
+ --_size: var(--su-static24);
450
+ --_fs-letter: var(--su-static16);
451
+ --_scale-badge: 1.1;
452
+ }
453
+ .s-avatar.s-avatar__32 {
454
+ --_size: var(--su-static32);
455
+ --_br: var(--br-md);
456
+ --_fs-letter: calc(var(--su-static24) - var(--su-static2));
457
+ --_scale-badge: 1.3;
458
+ }
459
+ .s-avatar.s-avatar__48 {
460
+ --_size: var(--su-static48);
461
+ --_br: var(--br-md);
462
+ --_fs-letter: calc(var(--su-static32) + var(--su-static2));
463
+ --_scale-badge: 1.6;
464
+ }
465
+ .s-avatar.s-avatar__64 {
466
+ --_size: var(--su-static64);
467
+ --_br: var(--br-lg);
468
+ --_fs-letter: calc(var(--su-static48) - var(--su-static4));
469
+ --_scale-badge: 2.4;
470
+ }
471
+ .s-avatar.s-avatar__96 {
472
+ --_size: var(--su-static96);
473
+ --_br: calc(var(--br-lg) + var(--br-sm));
474
+ --_fs-letter: calc(var(--su-static64) + var(--su-static2));
475
+ --_scale-badge: 3;
476
+ }
477
+ .s-avatar.s-avatar__128 {
478
+ --_size: var(--su-static128);
479
+ --_br: calc(var(--br-lg) + var(--br-sm));
480
+ --_fs-letter: calc(var(--su-static96) - var(--su-static8));
481
+ --_scale-badge: 3;
482
+ }
442
483
  body.theme-highcontrast .s-avatar {
443
484
  background-color: var(--black);
444
485
  box-shadow: 0 0 0 1px var(--black);
486
+ color: var(--white);
445
487
  }
446
488
  body.theme-highcontrast .s-avatar .s-avatar--letter {
447
489
  color: var(--white);
@@ -449,7 +491,7 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
449
491
  .s-avatar .s-avatar--letter {
450
492
  display: block;
451
493
  color: hsl(0, 0%, 100%);
452
- font-size: 11px;
494
+ font-size: var(--_fs-letter);
453
495
  font-weight: bold;
454
496
  line-height: 1.4;
455
497
  text-align: center;
@@ -463,113 +505,15 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
463
505
  position: absolute;
464
506
  right: -4px;
465
507
  bottom: -4px;
508
+ -webkit-transform: scale(var(--_scale-badge));
509
+ transform: scale(var(--_scale-badge));
466
510
  }
467
511
  .s-avatar .s-avatar--image {
468
- width: var(--su-static16);
469
- height: var(--su-static16);
470
- border-radius: var(--br-sm);
512
+ width: var(--_size);
513
+ height: var(--_size);
514
+ border-radius: var(--_br);
471
515
  display: block;
472
516
  }
473
- .s-avatar.s-avatar__24 {
474
- width: var(--su-static24);
475
- height: var(--su-static24);
476
- }
477
- .s-avatar.s-avatar__24 .s-avatar--letter {
478
- font-size: 16px;
479
- }
480
- .s-avatar.s-avatar__24 .s-avatar--badge {
481
- -webkit-transform: scale(1.1);
482
- transform: scale(1.1);
483
- }
484
- .s-avatar.s-avatar__24 .s-avatar--image {
485
- width: var(--su-static24);
486
- height: var(--su-static24);
487
- }
488
- .s-avatar.s-avatar__32 {
489
- width: var(--su-static32);
490
- height: var(--su-static32);
491
- border-radius: var(--br-md);
492
- }
493
- .s-avatar.s-avatar__32 .s-avatar--letter {
494
- font-size: 22px;
495
- }
496
- .s-avatar.s-avatar__32 .s-avatar--badge {
497
- -webkit-transform: scale(1.3);
498
- transform: scale(1.3);
499
- }
500
- .s-avatar.s-avatar__32 .s-avatar--image {
501
- width: var(--su-static32);
502
- height: var(--su-static32);
503
- border-radius: var(--br-md);
504
- }
505
- .s-avatar.s-avatar__48 {
506
- width: var(--su-static48);
507
- height: var(--su-static48);
508
- border-radius: var(--br-md);
509
- }
510
- .s-avatar.s-avatar__48 .s-avatar--letter {
511
- font-size: 34px;
512
- }
513
- .s-avatar.s-avatar__48 .s-avatar--badge {
514
- -webkit-transform: scale(1.6);
515
- transform: scale(1.6);
516
- }
517
- .s-avatar.s-avatar__48 .s-avatar--image {
518
- width: var(--su-static48);
519
- height: var(--su-static48);
520
- border-radius: var(--br-md);
521
- }
522
- .s-avatar.s-avatar__64 {
523
- width: var(--su-static64);
524
- height: var(--su-static64);
525
- border-radius: var(--br-lg);
526
- }
527
- .s-avatar.s-avatar__64 .s-avatar--letter {
528
- font-size: 44px;
529
- }
530
- .s-avatar.s-avatar__64 .s-avatar--badge {
531
- -webkit-transform: scale(2.4);
532
- transform: scale(2.4);
533
- }
534
- .s-avatar.s-avatar__64 .s-avatar--image {
535
- width: var(--su-static64);
536
- height: var(--su-static64);
537
- border-radius: var(--br-lg);
538
- }
539
- .s-avatar.s-avatar__96 {
540
- width: var(--su-static96);
541
- height: var(--su-static96);
542
- border-radius: calc(var(--br-lg) + var(--br-sm));
543
- }
544
- .s-avatar.s-avatar__96 .s-avatar--letter {
545
- font-size: 66px;
546
- }
547
- .s-avatar.s-avatar__96 .s-avatar--badge {
548
- -webkit-transform: scale(3);
549
- transform: scale(3);
550
- }
551
- .s-avatar.s-avatar__96 .s-avatar--image {
552
- width: var(--su-static96);
553
- height: var(--su-static96);
554
- border-radius: calc(var(--br-lg) + var(--br-sm));
555
- }
556
- .s-avatar.s-avatar__128 {
557
- width: var(--su-static128);
558
- height: var(--su-static128);
559
- border-radius: calc(var(--br-lg) + var(--br-lg));
560
- }
561
- .s-avatar.s-avatar__128 .s-avatar--letter {
562
- font-size: 88px;
563
- }
564
- .s-avatar.s-avatar__128 .s-avatar--badge {
565
- -webkit-transform: scale(3);
566
- transform: scale(3);
567
- }
568
- .s-avatar.s-avatar__128 .s-avatar--image {
569
- width: var(--su-static128);
570
- height: var(--su-static128);
571
- border-radius: calc(var(--br-lg) + var(--br-lg));
572
- }
573
517
  .s-badge,
574
518
  .s-topbar--notice {
575
519
  display: inline-flex;
@@ -738,6 +682,9 @@ body.theme-highcontrast .s-badge__staff {
738
682
  background-color: var(--red-500);
739
683
  border-color: transparent;
740
684
  }
685
+ body.theme-highcontrast .s-badge__danger.s-badge__filled {
686
+ color: var(--white);
687
+ }
741
688
  .s-badge__info {
742
689
  color: var(--blue-900);
743
690
  background-color: var(--blue-100);
@@ -796,7 +743,7 @@ body.theme-highcontrast .s-badge__staff {
796
743
  display: flex;
797
744
  flex-wrap: wrap;
798
745
  align-items: start;
799
- color: var(--black-150);
746
+ color: var(--black-200);
800
747
  font-size: var(--fs-caption);
801
748
  }
802
749
  .s-breadcrumbs .s-breadcrumbs--item {
@@ -811,7 +758,7 @@ body.theme-highcontrast .s-badge__staff {
811
758
  margin-left: var(--su4);
812
759
  }
813
760
  body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
814
- color: var(--black-350);
761
+ color: var(--fc-light);
815
762
  }
816
763
  @media (max-width: 640px) {
817
764
  .s-breadcrumbs .s-breadcrumbs--divider {
@@ -820,10 +767,10 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
820
767
  }
821
768
  }
822
769
  .s-breadcrumbs .s-breadcrumbs--link {
823
- color: var(--black-350);
770
+ color: var(--fc-light);
824
771
  }
825
772
  .s-breadcrumbs .s-breadcrumbs--link:hover {
826
- color: var(--black-600);
773
+ color: var(--fc-medium);
827
774
  }
828
775
  .s-btn-group {
829
776
  display: flex;
@@ -1213,81 +1160,28 @@ fieldset[disabled] a,
1213
1160
  fieldset[disabled] .s-btn,
1214
1161
  fieldset[disabled] .s-link {
1215
1162
  box-shadow: none !important;
1216
- opacity: 0.5;
1163
+ opacity: var(--_o-disabled-static);
1217
1164
  pointer-events: none;
1218
1165
  }
1219
1166
  fieldset[disabled] .s-checkbox,
1220
1167
  fieldset[disabled] .s-input-message,
1221
- fieldset[disabled] .s-label,
1222
1168
  fieldset[disabled] .s-radio,
1223
1169
  fieldset[disabled] .s-toggle-switch,
1224
1170
  fieldset[disabled] .s-toggle-switch label {
1225
1171
  cursor: not-allowed;
1226
- opacity: 0.5;
1172
+ opacity: var(--_o-disabled-static);
1227
1173
  }
1228
1174
  fieldset[disabled] .s-input,
1229
1175
  fieldset[disabled] .s-textarea,
1230
1176
  fieldset[disabled] .s-select > select {
1231
1177
  cursor: not-allowed;
1232
- opacity: 0.5;
1233
- }
1234
- .s-label {
1235
- padding: 0 var(--su2);
1236
- color: var(--fc-dark);
1237
- font-family: inherit;
1238
- font-size: var(--fs-body2);
1239
- font-weight: 600;
1240
- }
1241
- .s-label[for] {
1242
- cursor: pointer;
1243
- }
1244
- .s-label--status {
1245
- margin-left: var(--su4);
1246
- padding: var(--su2) var(--su8);
1247
- border-radius: 1000px;
1248
- background-color: var(--black-050);
1249
- color: var(--fc-medium);
1250
- font-size: var(--fs-caption);
1251
- font-weight: 400;
1252
- vertical-align: text-bottom;
1253
- }
1254
- body.theme-highcontrast .s-label--status {
1255
- border: 1px solid currentColor;
1256
- }
1257
- .s-label--status.s-label--status__required {
1258
- background-color: var(--red-100);
1259
- color: var(--red-600);
1260
- }
1261
- @media (prefers-color-scheme: dark) {
1262
- body.theme-system .s-label--status.s-label--status__required {
1263
- color: var(--red-800);
1264
- }
1265
- }
1266
- body.theme-dark .s-label--status.s-label--status__required,
1267
- .theme-dark__forced .s-label--status.s-label--status__required,
1268
- body.theme-system .theme-dark__forced .s-label--status.s-label--status__required {
1269
- color: var(--red-800);
1270
- }
1271
- .s-label--status.s-label--status__new {
1272
- background-color: var(--green-100);
1273
- color: var(--green-700);
1274
- }
1275
- .s-label--status.s-label--status__beta {
1276
- background-color: var(--blue-100);
1277
- color: var(--blue-700);
1178
+ opacity: var(--_o-disabled-static);
1278
1179
  }
1279
1180
  .s-description {
1280
1181
  padding: 0 var(--su2);
1281
1182
  color: var(--fc-medium);
1282
1183
  font-size: var(--fs-caption);
1283
1184
  }
1284
- .s-label .s-description,
1285
- .s-label .s-input-message {
1286
- padding: 0;
1287
- margin-top: 4px;
1288
- margin-bottom: 0;
1289
- font-weight: normal;
1290
- }
1291
1185
  .s-input-fill {
1292
1186
  padding: 0.6em 0.7em;
1293
1187
  border: 1px solid var(--bc-darker);
@@ -1408,7 +1302,7 @@ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required
1408
1302
  }
1409
1303
  .s-checkbox[disabled],
1410
1304
  .s-radio[disabled] {
1411
- opacity: 0.5;
1305
+ opacity: var(--_o-disabled-static);
1412
1306
  cursor: not-allowed;
1413
1307
  }
1414
1308
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
@@ -1418,24 +1312,33 @@ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required
1418
1312
  background-repeat: no-repeat;
1419
1313
  background-size: contain;
1420
1314
  }
1421
- .s-checkbox:checked {
1315
+ .s-checkbox:checked,
1316
+ .s-checkbox:indeterminate {
1422
1317
  border-color: var(--theme-secondary-400) !important;
1423
1318
  background-color: var(--theme-secondary-400);
1424
- background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
1425
1319
  }
1426
1320
  @media (prefers-color-scheme: dark) {
1427
- body.theme-highcontrast.theme-system .s-checkbox:checked {
1321
+ body.theme-highcontrast.theme-system .s-checkbox:checked,
1322
+ body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
1428
1323
  border-color: var(--blue-700) !important;
1429
1324
  background-color: var(--blue-300);
1430
1325
  }
1431
1326
  }
1432
- body.theme-highcontrast.theme-dark .s-checkbox:checked {
1327
+ body.theme-highcontrast.theme-dark .s-checkbox:checked,
1328
+ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1433
1329
  border-color: var(--blue-700) !important;
1434
1330
  background-color: var(--blue-300);
1435
1331
  }
1436
- .s-checkbox:checked:focus {
1332
+ .s-checkbox:checked:focus,
1333
+ .s-checkbox:indeterminate:focus {
1437
1334
  border-color: var(--theme-secondary-400);
1438
1335
  }
1336
+ .s-checkbox:checked {
1337
+ background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
1338
+ }
1339
+ .s-checkbox:indeterminate {
1340
+ background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
1341
+ }
1439
1342
  .s-checkbox:focus {
1440
1343
  border-color: var(--theme-secondary-300);
1441
1344
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -1490,52 +1393,59 @@ body.theme-highcontrast .s-input:focus-within {
1490
1393
  }
1491
1394
  .s-input[disabled],
1492
1395
  .s-textarea[disabled],
1493
- .s-select > select[disabled],
1494
- .s-input[read-only],
1495
- .s-textarea[read-only],
1496
- .s-select > select[read-only] {
1497
- cursor: not-allowed;
1498
- opacity: 0.5;
1499
- }
1500
- body.theme-highcontrast .s-input[disabled],
1501
- body.theme-highcontrast .s-textarea[disabled],
1502
- body.theme-highcontrast .s-select > select[disabled],
1503
- body.theme-highcontrast .s-input[read-only],
1504
- body.theme-highcontrast .s-textarea[read-only],
1505
- body.theme-highcontrast .s-select > select[read-only] {
1506
- opacity: 0.5;
1507
- }
1508
- .s-input[disabled],
1509
- .s-textarea[disabled],
1510
1396
  .s-select > select[disabled] {
1511
1397
  cursor: not-allowed;
1512
- opacity: 0.5;
1398
+ opacity: var(--_o-disabled-static);
1399
+ }
1400
+ .s-input[readonly],
1401
+ .s-textarea[readonly],
1402
+ .s-select > select[readonly],
1403
+ .is-readonly .s-input,
1404
+ .is-readonly .s-textarea,
1405
+ .is-readonly .s-select > select {
1406
+ border-color: var(--bc-light);
1407
+ background-color: var(--black-050);
1408
+ color: var(--black-200);
1409
+ cursor: not-allowed;
1410
+ }
1411
+ body.theme-highcontrast .s-input[readonly],
1412
+ body.theme-highcontrast .s-textarea[readonly],
1413
+ body.theme-highcontrast .s-select > select[readonly],
1414
+ body.theme-highcontrast .is-readonly .s-input,
1415
+ body.theme-highcontrast .is-readonly .s-textarea,
1416
+ body.theme-highcontrast .is-readonly .s-select > select {
1417
+ color: var(--fc-light);
1513
1418
  }
1514
1419
  .is-disabled,
1420
+ .is-readonly,
1515
1421
  .has-success,
1516
1422
  .has-error,
1517
1423
  .has-warning {
1518
1424
  position: relative;
1519
1425
  }
1520
1426
  .is-disabled .s-input,
1427
+ .is-readonly .s-input,
1521
1428
  .has-success .s-input,
1522
1429
  .has-error .s-input,
1523
1430
  .has-warning .s-input {
1524
1431
  padding-right: var(--su32);
1525
1432
  }
1526
1433
  .is-disabled .s-select .s-input-icon,
1434
+ .is-readonly .s-select .s-input-icon,
1527
1435
  .has-success .s-select .s-input-icon,
1528
1436
  .has-error .s-select .s-input-icon,
1529
1437
  .has-warning .s-select .s-input-icon {
1530
1438
  right: var(--su32);
1531
1439
  }
1532
1440
  .is-disabled .s-textarea,
1441
+ .is-readonly .s-textarea,
1533
1442
  .has-success .s-textarea,
1534
1443
  .has-error .s-textarea,
1535
1444
  .has-warning .s-textarea {
1536
1445
  padding-right: var(--su48);
1537
1446
  }
1538
1447
  .is-disabled .s-textarea ~ .s-input-icon,
1448
+ .is-readonly .s-textarea ~ .s-input-icon,
1539
1449
  .has-success .s-textarea ~ .s-input-icon,
1540
1450
  .has-error .s-textarea ~ .s-input-icon,
1541
1451
  .has-warning .s-textarea ~ .s-input-icon {
@@ -1543,6 +1453,7 @@ body.theme-highcontrast .s-select > select[read-only] {
1543
1453
  right: 1.5em;
1544
1454
  }
1545
1455
  .is-disabled .s-input-message a,
1456
+ .is-readonly .s-input-message a,
1546
1457
  .has-success .s-input-message a,
1547
1458
  .has-error .s-input-message a,
1548
1459
  .has-warning .s-input-message a {
@@ -1627,22 +1538,17 @@ body.theme-highcontrast .s-select > select[read-only] {
1627
1538
  .is-disabled .s-select:after {
1628
1539
  border-color: var(--bc-darker) transparent;
1629
1540
  }
1630
- .is-disabled .s-label,
1631
1541
  .is-disabled .s-description {
1632
- opacity: 0.5;
1633
- }
1634
- .is-disabled .s-label .s-description,
1635
- .is-disabled .s-description .s-description {
1636
- opacity: unset;
1542
+ opacity: var(--_o-disabled-static);
1637
1543
  }
1638
1544
  .is-disabled .s-input-icon {
1639
- color: var(--black-200);
1640
- }
1641
- body.theme-highcontrast .is-disabled .s-input-icon {
1642
1545
  color: var(--black-400);
1643
1546
  }
1644
- .is-disabled .s-label {
1645
- cursor: not-allowed;
1547
+ .is-readonly .s-input-icon {
1548
+ color: var(--black-200);
1549
+ }
1550
+ body.theme-highcontrast .is-readonly .s-input-icon {
1551
+ color: var(--fc-light);
1646
1552
  }
1647
1553
  .s-input-icon {
1648
1554
  position: absolute;
@@ -1655,10 +1561,6 @@ body.theme-highcontrast .is-disabled .s-input-icon {
1655
1561
  .s-input-icon.s-input-icon__creditcard {
1656
1562
  right: auto;
1657
1563
  left: 0.7em;
1658
- color: var(--black-200);
1659
- }
1660
- body.theme-highcontrast .s-input-icon.s-input-icon__search,
1661
- body.theme-highcontrast .s-input-icon.s-input-icon__creditcard {
1662
1564
  color: var(--black-400);
1663
1565
  }
1664
1566
  .s-input-message {
@@ -1667,25 +1569,21 @@ body.theme-highcontrast .s-input-icon.s-input-icon__creditcard {
1667
1569
  }
1668
1570
  .s-input__sm,
1669
1571
  .s-textarea__sm,
1670
- .s-label__sm,
1671
1572
  .s-select__sm > select {
1672
1573
  font-size: var(--fs-caption);
1673
1574
  }
1674
1575
  .s-input__md,
1675
1576
  .s-textarea__md,
1676
- .s-label__md,
1677
1577
  .s-select__md > select {
1678
1578
  font-size: var(--fs-body3);
1679
1579
  }
1680
1580
  .s-input__lg,
1681
1581
  .s-textarea__lg,
1682
- .s-label__lg,
1683
1582
  .s-select__lg > select {
1684
1583
  font-size: var(--fs-title);
1685
1584
  }
1686
1585
  .s-input__xl,
1687
1586
  .s-textarea__xl,
1688
- .s-label__xl,
1689
1587
  .s-select__xl > select {
1690
1588
  font-size: var(--fs-headline1);
1691
1589
  }
@@ -1720,6 +1618,101 @@ body.theme-highcontrast .s-input-icon.s-input-icon__creditcard {
1720
1618
  padding-bottom: 0.4em;
1721
1619
  }
1722
1620
  }
1621
+ .s-label {
1622
+ --_fs: var(--fs-body2);
1623
+ color: var(--fc-dark);
1624
+ font-family: inherit;
1625
+ font-size: var(--_fs);
1626
+ font-weight: 600;
1627
+ padding: 0 var(--su2);
1628
+ }
1629
+ .s-label[for] {
1630
+ cursor: pointer;
1631
+ }
1632
+ fieldset[disabled] .s-label,
1633
+ .is-disabled .s-label {
1634
+ cursor: not-allowed;
1635
+ opacity: var(--_o-disabled-static);
1636
+ }
1637
+ fieldset[disabled] .s-label .s-description,
1638
+ .is-disabled .s-label .s-description {
1639
+ opacity: unset;
1640
+ }
1641
+ .is-readonly .s-label {
1642
+ cursor: not-allowed;
1643
+ }
1644
+ .s-label .s-description,
1645
+ .s-label .s-input-message {
1646
+ font-weight: normal;
1647
+ margin-bottom: 0;
1648
+ margin-top: var(--su4);
1649
+ padding: 0;
1650
+ }
1651
+ .s-label.s-label__sm {
1652
+ --_fs: var(--fs-caption);
1653
+ }
1654
+ .s-label.s-label__md {
1655
+ --_fs: var(--fs-body3);
1656
+ }
1657
+ .s-label.s-label__lg {
1658
+ --_fs: var(--fs-title);
1659
+ }
1660
+ .s-label.s-label__xl {
1661
+ --_fs: var(--fs-headline1);
1662
+ }
1663
+ .s-label--status {
1664
+ --_b: none;
1665
+ --_bg: var(--black-050);
1666
+ --_fc: var(--fc-medium);
1667
+ background-color: var(--_bg);
1668
+ border: var(--_b);
1669
+ border-radius: 1000px;
1670
+ color: var(--_fc);
1671
+ font-size: var(--fs-caption);
1672
+ font-weight: 400;
1673
+ margin-left: var(--su4);
1674
+ padding: var(--su2) var(--su8);
1675
+ vertical-align: text-bottom;
1676
+ }
1677
+ body.theme-highcontrast .s-label--status {
1678
+ --_b: var(--su-static1) solid currentColor;
1679
+ }
1680
+ .s-label--status.s-label--status__required {
1681
+ --_bg: var(--red-100);
1682
+ --_fc: var(--red-700);
1683
+ }
1684
+ @media (prefers-color-scheme: dark) {
1685
+ body.theme-system .s-label--status.s-label--status__required {
1686
+ --_bg: var(--red-050);
1687
+ --_fc: var(--red-800);
1688
+ }
1689
+ }
1690
+ body.theme-dark .s-label--status.s-label--status__required,
1691
+ .theme-dark__forced .s-label--status.s-label--status__required,
1692
+ body.theme-system .theme-dark__forced .s-label--status.s-label--status__required {
1693
+ --_bg: var(--red-050);
1694
+ --_fc: var(--red-800);
1695
+ }
1696
+ .s-label--status.s-label--status__new {
1697
+ --_bg: var(--green-100);
1698
+ --_fc: var(--green-700);
1699
+ }
1700
+ @media (prefers-color-scheme: dark) {
1701
+ body.theme-system .s-label--status.s-label--status__new {
1702
+ --_bg: var(--green-050);
1703
+ --_fc: var(--green-800);
1704
+ }
1705
+ }
1706
+ body.theme-dark .s-label--status.s-label--status__new,
1707
+ .theme-dark__forced .s-label--status.s-label--status__new,
1708
+ body.theme-system .theme-dark__forced .s-label--status.s-label--status__new {
1709
+ --_bg: var(--green-050);
1710
+ --_fc: var(--green-800);
1711
+ }
1712
+ .s-label--status.s-label--status__beta {
1713
+ --_bg: var(--blue-100);
1714
+ --_fc: var(--blue-700);
1715
+ }
1723
1716
  .s-menu {
1724
1717
  list-style: none;
1725
1718
  margin: 0;
@@ -2252,77 +2245,6 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
2252
2245
  .s-post-summary.s-post-summary__minimal .s-post-summary--content {
2253
2246
  width: 100%;
2254
2247
  }
2255
- .s-post-summary.s-post-summary__legacy {
2256
- padding-left: 0;
2257
- }
2258
- @media (max-width: 980px) {
2259
- .s-post-summary.s-post-summary__legacy {
2260
- padding-left: var(--su16);
2261
- }
2262
- }
2263
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats {
2264
- width: auto;
2265
- flex-direction: row;
2266
- align-items: center;
2267
- gap: var(--su2);
2268
- }
2269
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item {
2270
- min-width: var(--su64);
2271
- height: var(--su48);
2272
- flex-direction: column;
2273
- gap: 0;
2274
- font-size: var(--fs-caption);
2275
- }
2276
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
2277
- color: inherit;
2278
- }
2279
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.has-accepted-answer .svg-icon {
2280
- display: none;
2281
- }
2282
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
2283
- font-weight: normal;
2284
- font-size: var(--fs-body3);
2285
- }
2286
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-deleted,
2287
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-published,
2288
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-draft,
2289
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-review,
2290
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-closed,
2291
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-archived,
2292
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-pinned {
2293
- display: none;
2294
- }
2295
- @media (max-width: 980px) {
2296
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats {
2297
- flex-direction: row;
2298
- align-items: center;
2299
- gap: var(--su8);
2300
- }
2301
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item {
2302
- min-width: auto;
2303
- height: auto;
2304
- flex-direction: row;
2305
- gap: 3px;
2306
- }
2307
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item .s-post-summary--stats-item-number {
2308
- font-size: inherit;
2309
- }
2310
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.s-post-summary--stats-item__emphasized {
2311
- color: var(--fc-dark);
2312
- }
2313
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.has-accepted-answer .svg-icon {
2314
- display: block;
2315
- }
2316
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-deleted,
2317
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-published,
2318
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-draft,
2319
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-review,
2320
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-closed,
2321
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-archived,
2322
- .s-post-summary.s-post-summary__legacy .s-post-summary--stats .s-post-summary--stats-item.is-pinned {
2323
- display: block;
2324
- }
2325
- }
2326
2248
  .s-post-summary--content-menu-button {
2327
2249
  position: absolute !important;
2328
2250
  top: var(--su8);
@@ -2377,29 +2299,26 @@ body.theme-system .theme-dark__forced .s-popover--arrow {
2377
2299
  padding: var(--su2) var(--su4);
2378
2300
  }
2379
2301
  .s-post-summary--stats .s-post-summary--stats-item.has-answers {
2380
- color: var(--green-600);
2381
- border: 1px solid var(--green-600);
2302
+ color: var(--green-700);
2303
+ border: 1px solid var(--green-700);
2382
2304
  }
2383
2305
  .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer {
2384
- color: hsl(0, 0%, 100%);
2385
- background-color: var(--green-500);
2386
- border-color: var(--green-500);
2387
- }
2388
- body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer {
2389
2306
  color: var(--white);
2307
+ background-color: var(--green-700);
2308
+ border-color: var(--green-700);
2390
2309
  }
2391
2310
  .s-post-summary--stats .s-post-summary--stats-item.has-bounty {
2392
2311
  color: var(--white);
2393
2312
  background-color: var(--blue-600);
2394
2313
  }
2395
2314
  .s-post-summary--stats .s-post-summary--stats-item.is-warm {
2396
- color: var(--orange-800);
2315
+ color: var(--yellow-800);
2397
2316
  }
2398
2317
  .s-post-summary--stats .s-post-summary--stats-item.is-hot {
2399
- color: var(--orange-600);
2318
+ color: var(--orange-800);
2400
2319
  }
2401
2320
  .s-post-summary--stats .s-post-summary--stats-item.is-supernova {
2402
- color: var(--orange-400);
2321
+ color: var(--red-800);
2403
2322
  }
2404
2323
  .s-post-summary--stats .s-post-summary--stats-item.is-published {
2405
2324
  color: var(--black-800);
@@ -2449,7 +2368,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
2449
2368
  line-height: var(--lh-md);
2450
2369
  font-weight: normal;
2451
2370
  word-break: break-word !important;
2452
- word-wrap: break-word !important;
2453
2371
  overflow-wrap: break-word !important;
2454
2372
  -webkit-hyphens: auto !important;
2455
2373
  -moz-hyphens: auto !important;
@@ -2466,7 +2384,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
2466
2384
  }
2467
2385
  .s-post-summary--content .s-post-summary--content-title a {
2468
2386
  word-break: break-word !important;
2469
- word-wrap: break-word !important;
2470
2387
  overflow-wrap: break-word !important;
2471
2388
  -webkit-hyphens: auto !important;
2472
2389
  -moz-hyphens: auto !important;
@@ -2500,7 +2417,6 @@ body.theme-highcontrast .s-post-summary--stats .s-post-summary--stats-item.has-a
2500
2417
  -webkit-box-orient: vertical;
2501
2418
  overflow: hidden;
2502
2419
  word-break: break-word !important;
2503
- word-wrap: break-word !important;
2504
2420
  overflow-wrap: break-word !important;
2505
2421
  -webkit-hyphens: auto !important;
2506
2422
  -moz-hyphens: auto !important;
@@ -2582,43 +2498,113 @@ body.theme-highcontrast .s-post-summary--answer:before {
2582
2498
  .s-post-summary__watched {
2583
2499
  background-color: var(--yellow-050);
2584
2500
  }
2501
+ .s-post-summary__watched .s-post-summary--content-title > a {
2502
+ color: var(--blue-700);
2503
+ }
2504
+ .s-post-summary__watched .s-post-summary--content-title > a:hover,
2505
+ .s-post-summary__watched .s-post-summary--content-title > a:active {
2506
+ color: var(--blue-700);
2507
+ }
2508
+ .s-post-summary__watched .s-post-summary--content-title > a:visited {
2509
+ color: var(--blue-800);
2510
+ }
2511
+ .s-post-summary__watched .s-post-summary--stats {
2512
+ color: var(--black-500);
2513
+ }
2514
+ .s-post-summary__watched .s-user-card .s-user-card--link {
2515
+ color: var(--blue-700);
2516
+ }
2517
+ .s-post-summary__watched .s-user-card .s-user-card--rep,
2518
+ .s-post-summary__watched .s-user-card .s-user-card--time {
2519
+ color: var(--black-600);
2520
+ }
2585
2521
  .s-post-summary__deleted {
2586
- background-color: var(--red-050);
2522
+ background-color: var(--red-025);
2523
+ }
2524
+ .s-post-summary__deleted .s-badge__filled {
2525
+ color: var(--white);
2526
+ }
2527
+ @media (prefers-color-scheme: dark) {
2528
+ body.theme-system .s-post-summary__deleted .s-badge__filled {
2529
+ background-color: var(--red-800);
2530
+ }
2531
+ }
2532
+ body.theme-dark .s-post-summary__deleted .s-badge__filled,
2533
+ .theme-dark__forced .s-post-summary__deleted .s-badge__filled,
2534
+ body.theme-system .theme-dark__forced .s-post-summary__deleted .s-badge__filled {
2535
+ background-color: var(--red-800);
2587
2536
  }
2588
2537
  .s-post-summary__deleted .is-deleted {
2589
- color: hsl(0, 0%, 100%);
2590
- background-color: var(--red-500);
2538
+ color: var(--white);
2539
+ background-color: var(--red-600);
2591
2540
  }
2592
- .s-post-summary__ignored .s-post-summary--content > *:not(.s-post-summary--content-menu-button),
2593
- .s-post-summary__deleted .s-post-summary--content > *:not(.s-post-summary--content-menu-button) {
2594
- opacity: 0.6;
2541
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag,
2542
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:hover,
2543
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:active,
2544
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:focus {
2545
+ background-color: var(--black-075);
2546
+ }
2547
+ .s-post-summary__ignored .s-post-summary--stats {
2548
+ color: var(--black-500);
2595
2549
  }
2596
- .s-post-summary__ignored .s-post-summary--stats-item:not(.s-badge):not(.is-deleted),
2597
- .s-post-summary__deleted .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
2598
- opacity: 0.6;
2599
- filter: grayscale(100%);
2550
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers {
2551
+ color: var(--black-600);
2552
+ border: 1px solid var(--black-075);
2553
+ background-color: var(--black-075);
2600
2554
  }
2601
- .s-post-summary__ignored .s-post-summary--content-title a,
2602
- .s-post-summary__deleted .s-post-summary--content-title a {
2555
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers .has-accepted-answer {
2603
2556
  color: var(--black-600);
2557
+ background-color: var(--black-075);
2558
+ border-color: var(--black-075);
2604
2559
  }
2605
- .s-post-summary__ignored .s-post-summary--content-title a:hover,
2606
- .s-post-summary__deleted .s-post-summary--content-title a:hover,
2607
- .s-post-summary__ignored .s-post-summary--content-title a:active,
2608
- .s-post-summary__deleted .s-post-summary--content-title a:active {
2560
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item__emphasized {
2609
2561
  color: var(--black-500);
2610
2562
  }
2611
- .s-post-summary__ignored .s-post-summary--content-title a:visited,
2612
- .s-post-summary__deleted .s-post-summary--content-title a:visited {
2613
- color: var(--black-700);
2563
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag,
2564
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:hover,
2565
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:active,
2566
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:focus {
2567
+ background-color: var(--black-050);
2568
+ }
2569
+ .s-post-summary__ignored .s-post-summary--content-title > a,
2570
+ .s-post-summary__deleted .s-post-summary--content-title > a {
2571
+ color: var(--black-500);
2572
+ }
2573
+ .s-post-summary__ignored .s-post-summary--content-title > a:hover,
2574
+ .s-post-summary__deleted .s-post-summary--content-title > a:hover,
2575
+ .s-post-summary__ignored .s-post-summary--content-title > a:active,
2576
+ .s-post-summary__deleted .s-post-summary--content-title > a:active,
2577
+ .s-post-summary__ignored .s-post-summary--content-title > a:visited,
2578
+ .s-post-summary__deleted .s-post-summary--content-title > a:visited {
2579
+ color: var(--black-500);
2614
2580
  }
2615
2581
  .s-post-summary__ignored .s-post-summary--content-excerpt,
2616
2582
  .s-post-summary__deleted .s-post-summary--content-excerpt {
2617
2583
  color: var(--black-500);
2618
2584
  }
2619
- .s-post-summary__ignored .s-post-summary--meta,
2620
- .s-post-summary__deleted .s-post-summary--meta {
2621
- filter: grayscale(100%);
2585
+ .s-post-summary__ignored .s-post-summary--meta > *:not(.s-post-summary--meta-tags),
2586
+ .s-post-summary__deleted .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
2587
+ color: var(--black-600);
2588
+ }
2589
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag,
2590
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag,
2591
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:hover,
2592
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:hover,
2593
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:active,
2594
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:active,
2595
+ .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:focus,
2596
+ .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:focus {
2597
+ color: var(--black-600);
2598
+ }
2599
+ .s-post-summary__ignored .s-user-card .s-user-card--link,
2600
+ .s-post-summary__deleted .s-user-card .s-user-card--link {
2601
+ color: var(--black-500);
2602
+ }
2603
+ .s-post-summary__ignored .s-user-card .s-user-card--rep,
2604
+ .s-post-summary__deleted .s-user-card .s-user-card--rep,
2605
+ .s-post-summary__ignored .s-user-card .s-user-card--time,
2606
+ .s-post-summary__deleted .s-user-card .s-user-card--time {
2607
+ color: var(--black-500);
2622
2608
  }
2623
2609
  .s-progress,
2624
2610
  .s-progress--bar {
@@ -2758,7 +2744,7 @@ body.theme-highcontrast .s-progress__privilege .s-progress--bar {
2758
2744
  border-radius: 0;
2759
2745
  padding: var(--su12) var(--su6) 0 var(--su6);
2760
2746
  text-align: center;
2761
- color: var(--black-300);
2747
+ color: var(--black-500);
2762
2748
  z-index: var(--zi-base);
2763
2749
  }
2764
2750
  .s-progress.s-progress__stepped .s-progress--stop {
@@ -2850,13 +2836,13 @@ body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
2850
2836
  --s-prose-spacing-condensed: calc(var(--s-prose-spacing) / 2);
2851
2837
  font-size: 15px;
2852
2838
  line-height: var(--s-prose-line-height);
2853
- word-wrap: break-word;
2839
+ overflow-wrap: break-word;
2854
2840
  }
2855
2841
  .s-prose p {
2856
2842
  margin-bottom: var(--s-prose-spacing);
2857
2843
  }
2858
2844
  .s-prose pre {
2859
- word-wrap: normal;
2845
+ overflow-wrap: normal;
2860
2846
  }
2861
2847
  .s-prose code {
2862
2848
  font-size: var(--fs-body1);
@@ -2878,10 +2864,10 @@ body.theme-highcontrast .s-prose hr {
2878
2864
  background-color: var(--black-500);
2879
2865
  }
2880
2866
  .s-prose li {
2881
- word-wrap: break-word;
2867
+ overflow-wrap: break-word;
2882
2868
  }
2883
2869
  .s-prose li pre {
2884
- word-wrap: normal;
2870
+ overflow-wrap: normal;
2885
2871
  }
2886
2872
  .s-prose p:last-child,
2887
2873
  .s-prose dl:last-child,
@@ -3406,6 +3392,39 @@ body.theme-system .theme-dark__forced .s-prose kbd {
3406
3392
  }
3407
3393
  }
3408
3394
  }
3395
+ .is-loading {
3396
+ position: relative;
3397
+ padding-left: 2.2em;
3398
+ }
3399
+ .is-loading:before {
3400
+ content: "";
3401
+ position: absolute;
3402
+ opacity: 0.3;
3403
+ left: 0.6em;
3404
+ top: calc(50% - 0.6em);
3405
+ width: 1.23076923em;
3406
+ height: 1.23076923em;
3407
+ border-width: 2px;
3408
+ border-style: solid;
3409
+ border-color: currentColor;
3410
+ border-radius: var(--br-circle);
3411
+ }
3412
+ .is-loading:after {
3413
+ content: "";
3414
+ position: absolute;
3415
+ left: 0.6em;
3416
+ top: calc(50% - 0.6em);
3417
+ width: 1.23076923em;
3418
+ height: 1.23076923em;
3419
+ border-width: 2px;
3420
+ border-style: solid;
3421
+ border-color: transparent;
3422
+ border-left-color: currentColor;
3423
+ border-radius: var(--br-circle);
3424
+ animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
3425
+ filter: invert(0);
3426
+ transform-origin: 50% 50% 1px;
3427
+ }
3409
3428
  @keyframes s-spinner-rotate {
3410
3429
  from {
3411
3430
  transform: rotate(0deg);
@@ -3600,11 +3619,7 @@ body.theme-system .theme-dark__forced .s-prose kbd {
3600
3619
  }
3601
3620
  .s-table tr.is-disabled th:not(.is-enabled),
3602
3621
  .s-table tr.is-disabled td:not(.is-enabled) {
3603
- opacity: 0.3;
3604
- }
3605
- body.theme-highcontrast .s-table tr.is-disabled th:not(.is-enabled),
3606
- body.theme-highcontrast .s-table tr.is-disabled td:not(.is-enabled) {
3607
- opacity: 0.8;
3622
+ opacity: calc(var(--_o-disabled) * 0.6);
3608
3623
  }
3609
3624
  .s-table--cell1 {
3610
3625
  width: 8.33333333%;
@@ -3842,6 +3857,9 @@ body.theme-highcontrast .s-topbar {
3842
3857
  color: var(--theme-topbar-item-color-hover);
3843
3858
  background-color: var(--theme-topbar-item-background-hover);
3844
3859
  }
3860
+ .s-topbar .s-navigation .s-navigation--item:focus-visible {
3861
+ box-shadow: var(--theme-topbar-search-shadow-focus);
3862
+ }
3845
3863
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
3846
3864
  color: var(--theme-topbar-item-color);
3847
3865
  }
@@ -3853,7 +3871,7 @@ body.theme-highcontrast .s-topbar {
3853
3871
  --theme-topbar-background-color: hsl(210, 8%, 97.5%);
3854
3872
  --theme-topbar-search-color: hsl(210, 8%, 25%);
3855
3873
  --theme-topbar-search-background: hsl(0, 0%, 100%);
3856
- --theme-topbar-search-placeholder: hsl(210, 8%, 75%);
3874
+ --theme-topbar-search-placeholder: hsl(210, 8%, 55%);
3857
3875
  --theme-topbar-search-border: hsl(210, 8%, 75%);
3858
3876
  --theme-topbar-search-border-focus: hsl(206, 90%, 69.5%);
3859
3877
  --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -4077,84 +4095,77 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
4077
4095
  }
4078
4096
  }
4079
4097
  .s-uploader {
4080
- align-items: center;
4081
- background-color: var(--black-025);
4082
- border-radius: var(--br-lg);
4083
- display: flex;
4084
- min-height: var(--su-static128);
4085
- justify-content: center;
4086
- padding: var(--su8) var(--su16);
4098
+ --_bg: var(--black-025);
4099
+ --_bg-focus: var(--black-050);
4100
+ --_bg-bc: var(--black-150);
4101
+ --_focus-ring-color: var(--focus-ring);
4102
+ --_bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
4087
4103
  position: relative;
4088
- text-align: center;
4089
- }
4090
- .s-uploader:before {
4091
- --s-uploader-background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
4092
- content: '';
4093
- display: block;
4094
- position: absolute;
4095
- top: 0;
4096
- left: 0;
4097
- right: 0;
4098
- bottom: 0;
4099
- background-color: var(--black-150);
4100
- -webkit-mask-image: var(--s-uploader-background-image);
4101
- mask-image: var(--s-uploader-background-image);
4102
- border-radius: var(--br-lg);
4103
4104
  }
4104
- body.theme-highcontrast .s-uploader:before {
4105
- background-color: var(--black-400);
4105
+ body.theme-highcontrast .s-uploader {
4106
+ --_bg-bc-hc: var(--black-400);
4106
4107
  }
4107
- .s-uploader.has-error {
4108
- background-color: var(--red-050);
4109
- }
4110
- .s-uploader.has-error:before {
4111
- background-color: var(--red-400);
4108
+ .s-uploader.is-active {
4109
+ --_bg: var(--black-050);
4110
+ --_bg-bc: var(--black-200);
4112
4111
  }
4113
- body.theme-highcontrast .s-uploader.has-error:before {
4114
- background-color: var(--red-400);
4112
+ .s-uploader.is-disabled {
4113
+ opacity: var(--_o-disabled-static);
4115
4114
  }
4116
- .s-uploader.has-error .s-link {
4117
- color: var(--red-900);
4115
+ .s-uploader.has-error {
4116
+ --_bg: var(--red-050);
4117
+ --_bg-focus: var(--red-100);
4118
+ --_bg-bc: var(--red-400);
4119
+ --_bg-bc-hc-state: var(--red-400);
4120
+ --_focus-ring-color: var(--focus-ring-error);
4121
+ --_link-fc: var(--red-900);
4118
4122
  }
4119
4123
  .s-uploader.has-success {
4120
- background-color: var(--green-025);
4121
- }
4122
- .s-uploader.has-success:before {
4123
- background-color: var(--green-400);
4124
- }
4125
- body.theme-highcontrast .s-uploader.has-success:before {
4126
- background-color: var(--green-400);
4127
- }
4128
- .s-uploader.has-success .s-link {
4129
- color: var(--green-900);
4124
+ --_bg: var(--green-025);
4125
+ --_bg-focus: var(--green-050);
4126
+ --_bg-bc: var(--green-400);
4127
+ --_bg-bc-hc-state: var(--green-400);
4128
+ --_focus-ring-color: var(--focus-ring-success);
4129
+ --_link-fc: var(--green-900);
4130
4130
  }
4131
4131
  .s-uploader.has-warning {
4132
- background-color: var(--yellow-050);
4133
- }
4134
- .s-uploader.has-warning:before {
4135
- background-color: var(--yellow-400);
4136
- }
4137
- body.theme-highcontrast .s-uploader.has-warning:before {
4138
- background-color: var(--yellow-400);
4139
- }
4132
+ --_bg: var(--yellow-050);
4133
+ --_bg-focus: var(--yellow-100);
4134
+ --_bg-bc: var(--yellow-400);
4135
+ --_bg-bc-hc-state: var(--yellow-400);
4136
+ --_focus-ring-color: var(--focus-ring-warning);
4137
+ --_link-fc: var(--yellow-900);
4138
+ }
4139
+ .s-uploader.has-error .s-link,
4140
+ .s-uploader.has-success .s-link,
4140
4141
  .s-uploader.has-warning .s-link {
4141
- color: var(--yellow-900);
4142
- }
4143
- .s-uploader.is-active {
4144
- background-color: var(--black-050);
4145
- }
4146
- .s-uploader.is-active:before {
4147
- background-color: var(--black-200);
4148
- }
4149
- body.theme-highcontrast .s-uploader.is-active:before {
4150
- background-color: var(--black);
4151
- }
4152
- .s-uploader.is-disabled {
4153
- opacity: 0.5;
4142
+ color: var(--_link-fc);
4154
4143
  }
4155
4144
  .s-uploader input[type="file"]::file-selector-button {
4156
4145
  cursor: pointer;
4157
4146
  }
4147
+ .s-uploader .s-uploader--container {
4148
+ align-items: center;
4149
+ background-color: var(--_bg);
4150
+ border-radius: var(--br-lg);
4151
+ display: flex;
4152
+ flex-direction: column;
4153
+ justify-content: center;
4154
+ min-height: var(--su-static128);
4155
+ padding: var(--su8) var(--su16);
4156
+ position: relative;
4157
+ text-align: center;
4158
+ }
4159
+ .s-uploader .s-uploader--container:before {
4160
+ -webkit-mask-image: var(--_bg-b-image);
4161
+ mask-image: var(--_bg-b-image);
4162
+ background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
4163
+ content: '';
4164
+ border-radius: var(--br-lg);
4165
+ display: block;
4166
+ position: absolute;
4167
+ inset: 0;
4168
+ }
4158
4169
  .s-uploader .s-uploader--input {
4159
4170
  cursor: pointer;
4160
4171
  height: 100%;
@@ -4162,10 +4173,11 @@ body.theme-highcontrast .s-uploader.is-active:before {
4162
4173
  opacity: 0;
4163
4174
  position: absolute;
4164
4175
  width: 100%;
4176
+ z-index: var(--zi-selected);
4165
4177
  }
4166
4178
  .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
4167
- background-color: var(--black-050);
4168
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
4179
+ background-color: var(--_bg-focus);
4180
+ box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
4169
4181
  }
4170
4182
  .s-uploader .s-uploader--preview {
4171
4183
  max-width: 100%;
@@ -4226,8 +4238,7 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
4226
4238
  object-fit: cover;
4227
4239
  }
4228
4240
  .s-uploader .s-uploader--previews.has-multiple .s-uploader--preview-thumbnail:not(img) {
4229
- --s-uploader--preview-document-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
4230
- background-image: var(--s-uploader--preview-document-icon);
4241
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
4231
4242
  background-position: center;
4232
4243
  background-repeat: no-repeat;
4233
4244
  }
@@ -4775,7 +4786,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
4775
4786
  --theme-topbar-background-color: var(--black-025);
4776
4787
  --theme-topbar-search-color: var(--black-700);
4777
4788
  --theme-topbar-search-background: var(--white);
4778
- --theme-topbar-search-placeholder: var(--black-200);
4789
+ --theme-topbar-search-placeholder: var(--black-400);
4779
4790
  --theme-topbar-search-border: var(--black-200);
4780
4791
  --theme-topbar-search-border-focus: var(--blue-300);
4781
4792
  --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -4921,6 +4932,7 @@ body.theme-system .theme-light__forced {
4921
4932
  --yellow-700: hsl(47, 79%, 40%);
4922
4933
  --yellow-800: hsl(47, 82%, 34%);
4923
4934
  --yellow-900: hsl(47, 84%, 28%);
4935
+ --red-025: hsl(358, 80%, 98%);
4924
4936
  --red-050: hsl(358, 75%, 97%);
4925
4937
  --red-100: hsl(358, 76%, 90%);
4926
4938
  --red-200: hsl(358, 74%, 83%);
@@ -4953,6 +4965,8 @@ body.theme-system .theme-light__forced {
4953
4965
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
4954
4966
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
4955
4967
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
4968
+ --_o-disabled: 0.5;
4969
+ --_o-disabled-static: 0.5;
4956
4970
  --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
4957
4971
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
4958
4972
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
@@ -5092,6 +5106,7 @@ body:not(.theme-dark) .theme-dark__forced {
5092
5106
  --yellow-700: hsl(47, 84.5%, 64%);
5093
5107
  --yellow-800: hsl(47, 90%, 72.5%);
5094
5108
  --yellow-900: hsl(47, 93%, 83.5%);
5109
+ --red-025: hsl(1, 10%, 24%);
5095
5110
  --red-050: hsl(1, 30%, 26.5%);
5096
5111
  --red-100: hsl(1, 35%, 33%);
5097
5112
  --red-200: hsl(1, 37%, 38.5%);
@@ -5124,6 +5139,8 @@ body:not(.theme-dark) .theme-dark__forced {
5124
5139
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
5125
5140
  --focus-ring-error: hsla(358, 62%, 52%, 0.3);
5126
5141
  --focus-ring-muted: hsla(0, 0%, 100%, 0.1);
5142
+ --_o-disabled: 0.5;
5143
+ --_o-disabled-static: 0.5;
5127
5144
  --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
5128
5145
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
5129
5146
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
@@ -5261,6 +5278,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
5261
5278
  --yellow-700: hsl(47, 84.5%, 64%);
5262
5279
  --yellow-800: hsl(47, 90%, 72.5%);
5263
5280
  --yellow-900: hsl(47, 93%, 83.5%);
5281
+ --red-025: hsl(1, 10%, 24%);
5264
5282
  --red-050: hsl(1, 30%, 26.5%);
5265
5283
  --red-100: hsl(1, 35%, 33%);
5266
5284
  --red-200: hsl(1, 37%, 38.5%);
@@ -5293,6 +5311,8 @@ body:not(.theme-dark) .theme-dark__forced .themed {
5293
5311
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
5294
5312
  --focus-ring-error: hsla(358, 62%, 52%, 0.3);
5295
5313
  --focus-ring-muted: hsla(0, 0%, 100%, 0.1);
5314
+ --_o-disabled: 0.5;
5315
+ --_o-disabled-static: 0.5;
5296
5316
  --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
5297
5317
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
5298
5318
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
@@ -5379,61 +5399,62 @@ body.theme-system.theme-highcontrast .theme-light__forced {
5379
5399
  --black-750: hsl(210, 8%, 10%);
5380
5400
  --black-800: hsl(210, 8%, 5%);
5381
5401
  --black-900: hsl(0, 0%, 0%);
5382
- --orange-050: hsl(27, 100%, 97.5%);
5383
- --orange-100: hsl(27, 100%, 94%);
5384
- --orange-200: hsl(27, 100%, 88%);
5385
- --orange-300: hsl(27, 100%, 82%);
5402
+ --orange-050: hsl(27, 100%, 93%);
5403
+ --orange-100: hsl(27, 100%, 90%);
5404
+ --orange-200: hsl(27, 100%, 86%);
5405
+ --orange-300: hsl(27, 100%, 81%);
5386
5406
  --orange-400: hsl(27, 100%, 34%);
5387
5407
  --orange-500: hsl(27, 100%, 29%);
5388
5408
  --orange-600: hsl(27, 100%, 24%);
5389
5409
  --orange-700: hsl(27, 100%, 19%);
5390
5410
  --orange-800: hsl(27, 100%, 13%);
5391
5411
  --orange-900: hsl(27, 100%, 8%);
5392
- --blue-050: hsl(206, 100%, 97.5%);
5393
- --blue-100: hsl(206, 100%, 95%);
5394
- --blue-200: hsl(206, 100%, 90%);
5395
- --blue-300: hsl(206, 100%, 85%);
5412
+ --blue-050: hsl(206, 100%, 94%);
5413
+ --blue-100: hsl(206, 100%, 92%);
5414
+ --blue-200: hsl(206, 100%, 89%);
5415
+ --blue-300: hsl(206, 100%, 86%);
5396
5416
  --blue-400: hsl(206, 100%, 25%);
5397
5417
  --blue-500: hsl(206, 100%, 20%);
5398
5418
  --blue-600: hsl(206, 100%, 15%);
5399
5419
  --blue-700: hsl(206, 100%, 10%);
5400
5420
  --blue-800: hsl(206, 100%, 7.5%);
5401
5421
  --blue-900: hsl(206, 100%, 5%);
5402
- --powder-050: hsl(205, 100%, 97.5%);
5403
- --powder-100: hsl(205, 85%, 96%);
5404
- --powder-200: hsl(205, 75%, 92%);
5405
- --powder-300: hsl(205, 70%, 88%);
5422
+ --powder-050: hsl(205, 100%, 95%);
5423
+ --powder-100: hsl(205, 85%, 93%);
5424
+ --powder-200: hsl(205, 75%, 89%);
5425
+ --powder-300: hsl(205, 70%, 86%);
5406
5426
  --powder-400: hsl(205, 55%, 28%);
5407
5427
  --powder-500: hsl(205, 60%, 24%);
5408
5428
  --powder-600: hsl(205, 70%, 20%);
5409
5429
  --powder-700: hsl(205, 75%, 16%);
5410
5430
  --powder-800: hsl(205, 75%, 12%);
5411
5431
  --powder-900: hsl(205, 75%, 8%);
5412
- --green-025: hsl(140, 100%, 97%);
5413
- --green-050: hsl(140, 100%, 96%);
5414
- --green-100: hsl(140, 100%, 94%);
5415
- --green-200: hsl(140, 100%, 88%);
5416
- --green-300: hsl(140, 100%, 82%);
5432
+ --green-025: hsl(140, 100%, 94%);
5433
+ --green-050: hsl(140, 100%, 91%);
5434
+ --green-100: hsl(140, 100%, 87%);
5435
+ --green-200: hsl(140, 100%, 83%);
5436
+ --green-300: hsl(140, 100%, 78%);
5417
5437
  --green-400: hsl(140, 100%, 18%);
5418
5438
  --green-500: hsl(140, 100%, 15%);
5419
5439
  --green-600: hsl(140, 100%, 12%);
5420
5440
  --green-700: hsl(140, 100%, 9%);
5421
5441
  --green-800: hsl(140, 100%, 6%);
5422
5442
  --green-900: hsl(140, 100%, 3%);
5423
- --yellow-050: hsl(47, 100%, 95%);
5424
- --yellow-100: hsl(47, 100%, 92%);
5425
- --yellow-200: hsl(47, 95%, 85%);
5426
- --yellow-300: hsl(47, 95%, 78%);
5443
+ --yellow-050: hsl(47, 100%, 92%);
5444
+ --yellow-100: hsl(47, 100%, 88%);
5445
+ --yellow-200: hsl(47, 95%, 83%);
5446
+ --yellow-300: hsl(47, 95%, 75%);
5427
5447
  --yellow-400: hsl(47, 100%, 28%);
5428
5448
  --yellow-500: hsl(47, 100%, 26%);
5429
5449
  --yellow-600: hsl(47, 100%, 23%);
5430
5450
  --yellow-700: hsl(47, 100%, 19%);
5431
5451
  --yellow-800: hsl(47, 100%, 13%);
5432
5452
  --yellow-900: hsl(47, 100%, 7%);
5433
- --red-050: hsl(358, 100%, 97.5%);
5434
- --red-100: hsl(358, 100%, 95%);
5435
- --red-200: hsl(358, 100%, 90%);
5436
- --red-300: hsl(358, 100%, 85%);
5453
+ --red-025: hsl(358, 100%, 97%);
5454
+ --red-050: hsl(358, 100%, 94%);
5455
+ --red-100: hsl(358, 100%, 92%);
5456
+ --red-200: hsl(358, 100%, 89%);
5457
+ --red-300: hsl(358, 100%, 86%);
5437
5458
  --red-400: hsl(358, 100%, 35%);
5438
5459
  --red-500: hsl(358, 100%, 29%);
5439
5460
  --red-600: hsl(358, 100%, 23%);
@@ -5463,6 +5484,7 @@ body.theme-system.theme-highcontrast .theme-light__forced {
5463
5484
  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
5464
5485
  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
5465
5486
  --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
5487
+ --_o-disabled: 0.8;
5466
5488
  --bs-sm: none;
5467
5489
  --bs-md: none;
5468
5490
  --bs-lg: none;
@@ -5500,61 +5522,62 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5500
5522
  --black-750: hsl(210, 8%, 90%);
5501
5523
  --black-800: hsl(210, 8%, 95%);
5502
5524
  --black-900: hsl(0, 0%, 100%);
5503
- --orange-050: hsl(27, 100%, 4%);
5504
- --orange-100: hsl(27, 100%, 8%);
5505
- --orange-200: hsl(27, 100%, 16%);
5506
- --orange-300: hsl(27, 100%, 24%);
5525
+ --orange-050: hsl(27, 100%, 7%);
5526
+ --orange-100: hsl(27, 100%, 9%);
5527
+ --orange-200: hsl(27, 100%, 15%);
5528
+ --orange-300: hsl(27, 100%, 22%);
5507
5529
  --orange-400: hsl(27, 100%, 64%);
5508
5530
  --orange-500: hsl(27, 100%, 71%);
5509
5531
  --orange-600: hsl(27, 100%, 77%);
5510
5532
  --orange-700: hsl(27, 100%, 82%);
5511
5533
  --orange-800: hsl(27, 100%, 87%);
5512
5534
  --orange-900: hsl(27, 100%, 91%);
5513
- --blue-050: hsl(206, 100%, 4%);
5535
+ --blue-050: hsl(206, 100%, 7%);
5514
5536
  --blue-100: hsl(206, 100%, 11%);
5515
- --blue-200: hsl(206, 100%, 18%);
5516
- --blue-300: hsl(206, 100%, 25%);
5537
+ --blue-200: hsl(206, 100%, 17%);
5538
+ --blue-300: hsl(206, 100%, 24%);
5517
5539
  --blue-400: hsl(206, 100%, 75%);
5518
5540
  --blue-500: hsl(206, 100%, 80%);
5519
5541
  --blue-600: hsl(206, 100%, 85%);
5520
5542
  --blue-700: hsl(206, 100%, 90%);
5521
5543
  --blue-800: hsl(206, 100%, 92.5%);
5522
5544
  --blue-900: hsl(206, 100%, 95%);
5523
- --powder-050: hsl(205, 100%, 6%);
5524
- --powder-100: hsl(205, 90%, 8%);
5545
+ --powder-050: hsl(205, 100%, 7%);
5546
+ --powder-100: hsl(205, 95%, 10%);
5525
5547
  --powder-200: hsl(205, 80%, 14%);
5526
- --powder-300: hsl(205, 60%, 20%);
5548
+ --powder-300: hsl(205, 76%, 19%);
5527
5549
  --powder-400: hsl(205, 55%, 72%);
5528
5550
  --powder-500: hsl(205, 60%, 76%);
5529
5551
  --powder-600: hsl(205, 70%, 80%);
5530
5552
  --powder-700: hsl(205, 75%, 84%);
5531
5553
  --powder-800: hsl(205, 75%, 88%);
5532
5554
  --powder-900: hsl(205, 75%, 92%);
5533
- --green-025: hsl(140, 100%, 3%);
5534
- --green-050: hsl(140, 100%, 4%);
5535
- --green-100: hsl(140, 100%, 6%);
5536
- --green-200: hsl(140, 100%, 12%);
5537
- --green-300: hsl(140, 100%, 18%);
5555
+ --green-025: hsl(140, 100%, 5%);
5556
+ --green-050: hsl(140, 100%, 6%);
5557
+ --green-100: hsl(140, 100%, 7%);
5558
+ --green-200: hsl(140, 100%, 11%);
5559
+ --green-300: hsl(140, 100%, 15%);
5538
5560
  --green-400: hsl(140, 100%, 65%);
5539
5561
  --green-500: hsl(140, 100%, 71%);
5540
5562
  --green-600: hsl(140, 100%, 77%);
5541
5563
  --green-700: hsl(140, 100%, 83%);
5542
5564
  --green-800: hsl(140, 100%, 89%);
5543
5565
  --green-900: hsl(140, 100%, 94%);
5544
- --yellow-050: hsl(47, 100%, 4%);
5545
- --yellow-100: hsl(47, 100%, 8%);
5546
- --yellow-200: hsl(47, 95%, 16%);
5547
- --yellow-300: hsl(47, 95%, 24%);
5566
+ --yellow-050: hsl(47, 100%, 6%);
5567
+ --yellow-100: hsl(47, 100%, 9%);
5568
+ --yellow-200: hsl(47, 100%, 14%);
5569
+ --yellow-300: hsl(47, 100%, 20%);
5548
5570
  --yellow-400: hsl(47, 100%, 55%);
5549
5571
  --yellow-500: hsl(47, 100%, 63%);
5550
5572
  --yellow-600: hsl(47, 100%, 71%);
5551
5573
  --yellow-700: hsl(47, 100%, 79%);
5552
5574
  --yellow-800: hsl(47, 100%, 87%);
5553
5575
  --yellow-900: hsl(47, 100%, 95%);
5554
- --red-050: hsl(358, 100%, 4%);
5555
- --red-100: hsl(358, 100%, 8%);
5556
- --red-200: hsl(358, 100%, 16%);
5557
- --red-300: hsl(358, 100%, 24%);
5576
+ --red-025: hsl(358, 100%, 7%);
5577
+ --red-050: hsl(358, 100%, 9%);
5578
+ --red-100: hsl(358, 100%, 12%);
5579
+ --red-200: hsl(358, 100%, 17%);
5580
+ --red-300: hsl(358, 100%, 22%);
5558
5581
  --red-400: hsl(358, 100%, 70%);
5559
5582
  --red-500: hsl(358, 100%, 75%);
5560
5583
  --red-600: hsl(358, 100%, 80%);
@@ -5584,6 +5607,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5584
5607
  --fc-dark: var(--black-900);
5585
5608
  --fc-medium: var(--black-700);
5586
5609
  --fc-light: var(--black-500);
5610
+ --_o-disabled: 0.8;
5587
5611
  --bs-sm: none;
5588
5612
  --bs-md: none;
5589
5613
  --bs-lg: none;
@@ -5621,61 +5645,62 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5621
5645
  --black-750: hsl(210, 8%, 90%);
5622
5646
  --black-800: hsl(210, 8%, 95%);
5623
5647
  --black-900: hsl(0, 0%, 100%);
5624
- --orange-050: hsl(27, 100%, 4%);
5625
- --orange-100: hsl(27, 100%, 8%);
5626
- --orange-200: hsl(27, 100%, 16%);
5627
- --orange-300: hsl(27, 100%, 24%);
5648
+ --orange-050: hsl(27, 100%, 7%);
5649
+ --orange-100: hsl(27, 100%, 9%);
5650
+ --orange-200: hsl(27, 100%, 15%);
5651
+ --orange-300: hsl(27, 100%, 22%);
5628
5652
  --orange-400: hsl(27, 100%, 64%);
5629
5653
  --orange-500: hsl(27, 100%, 71%);
5630
5654
  --orange-600: hsl(27, 100%, 77%);
5631
5655
  --orange-700: hsl(27, 100%, 82%);
5632
5656
  --orange-800: hsl(27, 100%, 87%);
5633
5657
  --orange-900: hsl(27, 100%, 91%);
5634
- --blue-050: hsl(206, 100%, 4%);
5658
+ --blue-050: hsl(206, 100%, 7%);
5635
5659
  --blue-100: hsl(206, 100%, 11%);
5636
- --blue-200: hsl(206, 100%, 18%);
5637
- --blue-300: hsl(206, 100%, 25%);
5660
+ --blue-200: hsl(206, 100%, 17%);
5661
+ --blue-300: hsl(206, 100%, 24%);
5638
5662
  --blue-400: hsl(206, 100%, 75%);
5639
5663
  --blue-500: hsl(206, 100%, 80%);
5640
5664
  --blue-600: hsl(206, 100%, 85%);
5641
5665
  --blue-700: hsl(206, 100%, 90%);
5642
5666
  --blue-800: hsl(206, 100%, 92.5%);
5643
5667
  --blue-900: hsl(206, 100%, 95%);
5644
- --powder-050: hsl(205, 100%, 6%);
5645
- --powder-100: hsl(205, 90%, 8%);
5668
+ --powder-050: hsl(205, 100%, 7%);
5669
+ --powder-100: hsl(205, 95%, 10%);
5646
5670
  --powder-200: hsl(205, 80%, 14%);
5647
- --powder-300: hsl(205, 60%, 20%);
5671
+ --powder-300: hsl(205, 76%, 19%);
5648
5672
  --powder-400: hsl(205, 55%, 72%);
5649
5673
  --powder-500: hsl(205, 60%, 76%);
5650
5674
  --powder-600: hsl(205, 70%, 80%);
5651
5675
  --powder-700: hsl(205, 75%, 84%);
5652
5676
  --powder-800: hsl(205, 75%, 88%);
5653
5677
  --powder-900: hsl(205, 75%, 92%);
5654
- --green-025: hsl(140, 100%, 3%);
5655
- --green-050: hsl(140, 100%, 4%);
5656
- --green-100: hsl(140, 100%, 6%);
5657
- --green-200: hsl(140, 100%, 12%);
5658
- --green-300: hsl(140, 100%, 18%);
5678
+ --green-025: hsl(140, 100%, 5%);
5679
+ --green-050: hsl(140, 100%, 6%);
5680
+ --green-100: hsl(140, 100%, 7%);
5681
+ --green-200: hsl(140, 100%, 11%);
5682
+ --green-300: hsl(140, 100%, 15%);
5659
5683
  --green-400: hsl(140, 100%, 65%);
5660
5684
  --green-500: hsl(140, 100%, 71%);
5661
5685
  --green-600: hsl(140, 100%, 77%);
5662
5686
  --green-700: hsl(140, 100%, 83%);
5663
5687
  --green-800: hsl(140, 100%, 89%);
5664
5688
  --green-900: hsl(140, 100%, 94%);
5665
- --yellow-050: hsl(47, 100%, 4%);
5666
- --yellow-100: hsl(47, 100%, 8%);
5667
- --yellow-200: hsl(47, 95%, 16%);
5668
- --yellow-300: hsl(47, 95%, 24%);
5689
+ --yellow-050: hsl(47, 100%, 6%);
5690
+ --yellow-100: hsl(47, 100%, 9%);
5691
+ --yellow-200: hsl(47, 100%, 14%);
5692
+ --yellow-300: hsl(47, 100%, 20%);
5669
5693
  --yellow-400: hsl(47, 100%, 55%);
5670
5694
  --yellow-500: hsl(47, 100%, 63%);
5671
5695
  --yellow-600: hsl(47, 100%, 71%);
5672
5696
  --yellow-700: hsl(47, 100%, 79%);
5673
5697
  --yellow-800: hsl(47, 100%, 87%);
5674
5698
  --yellow-900: hsl(47, 100%, 95%);
5675
- --red-050: hsl(358, 100%, 4%);
5676
- --red-100: hsl(358, 100%, 8%);
5677
- --red-200: hsl(358, 100%, 16%);
5678
- --red-300: hsl(358, 100%, 24%);
5699
+ --red-025: hsl(358, 100%, 7%);
5700
+ --red-050: hsl(358, 100%, 9%);
5701
+ --red-100: hsl(358, 100%, 12%);
5702
+ --red-200: hsl(358, 100%, 17%);
5703
+ --red-300: hsl(358, 100%, 22%);
5679
5704
  --red-400: hsl(358, 100%, 70%);
5680
5705
  --red-500: hsl(358, 100%, 75%);
5681
5706
  --red-600: hsl(358, 100%, 80%);
@@ -5705,6 +5730,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
5705
5730
  --fc-dark: var(--black-900);
5706
5731
  --fc-medium: var(--black-700);
5707
5732
  --fc-light: var(--black-500);
5733
+ --_o-disabled: 0.8;
5708
5734
  --bs-sm: none;
5709
5735
  --bs-md: none;
5710
5736
  --bs-lg: none;
@@ -6231,6 +6257,9 @@ body.theme-highcontrast .bc-black-200 {
6231
6257
  .bc-green-900 {
6232
6258
  border-color: var(--green-900) !important;
6233
6259
  }
6260
+ .bc-red-025 {
6261
+ border-color: var(--red-025) !important;
6262
+ }
6234
6263
  .bc-red-050 {
6235
6264
  border-color: var(--red-050) !important;
6236
6265
  }
@@ -9543,6 +9572,38 @@ body.theme-dark .d\:bg-green-025,
9543
9572
  body.theme-system .theme-dark__forced .d\:bg-green-025 {
9544
9573
  background-color: var(--green-025) !important;
9545
9574
  }
9575
+ .fc-red-025,
9576
+ .h\:fc-red-025:hover,
9577
+ .f\:fc-red-025:focus,
9578
+ .f\:fc-red-025:focus-within {
9579
+ color: var(--red-025) !important;
9580
+ }
9581
+ @media (prefers-color-scheme: dark) {
9582
+ body.theme-system .d\:fc-red-025 {
9583
+ color: var(--red-025) !important;
9584
+ }
9585
+ }
9586
+ body.theme-dark .d\:fc-red-025,
9587
+ .theme-dark__forced .d\:fc-red-025,
9588
+ body.theme-system .theme-dark__forced .d\:fc-red-025 {
9589
+ color: var(--red-025) !important;
9590
+ }
9591
+ .bg-red-025,
9592
+ .h\:bg-red-025:hover,
9593
+ .f\:bg-red-025:focus,
9594
+ .f\:bg-red-025:focus-within {
9595
+ background-color: var(--red-025) !important;
9596
+ }
9597
+ @media (prefers-color-scheme: dark) {
9598
+ body.theme-system .d\:bg-red-025 {
9599
+ background-color: var(--red-025) !important;
9600
+ }
9601
+ }
9602
+ body.theme-dark .d\:bg-red-025,
9603
+ .theme-dark__forced .d\:bg-red-025,
9604
+ body.theme-system .theme-dark__forced .d\:bg-red-025 {
9605
+ background-color: var(--red-025) !important;
9606
+ }
9546
9607
  .fc-theme-primary-350,
9547
9608
  .h\:fc-theme-primary-350:hover,
9548
9609
  .f\:fc-theme-primary-350:focus,
@@ -13270,23 +13331,18 @@ p {
13270
13331
  }
13271
13332
  .ow-normal {
13272
13333
  overflow-wrap: normal !important;
13273
- word-wrap: normal !important;
13274
13334
  }
13275
13335
  .ow-break-word {
13276
13336
  overflow-wrap: break-word !important;
13277
- word-wrap: break-word !important;
13278
13337
  }
13279
13338
  .ow-inherit {
13280
13339
  overflow-wrap: inherit !important;
13281
- word-wrap: inherit !important;
13282
13340
  }
13283
13341
  .ow-initial {
13284
13342
  overflow-wrap: initial !important;
13285
- word-wrap: initial !important;
13286
13343
  }
13287
13344
  .ow-unset {
13288
13345
  overflow-wrap: unset !important;
13289
- word-wrap: unset !important;
13290
13346
  }
13291
13347
  .hyphens-none {
13292
13348
  hyphens: none !important;
@@ -13301,7 +13357,6 @@ p {
13301
13357
  }
13302
13358
  .break-word {
13303
13359
  word-break: break-word !important;
13304
- word-wrap: break-word !important;
13305
13360
  overflow-wrap: break-word !important;
13306
13361
  -webkit-hyphens: auto !important;
13307
13362
  -moz-hyphens: auto !important;
@@ -13542,7 +13597,7 @@ ol {
13542
13597
  padding: 0;
13543
13598
  position: absolute;
13544
13599
  width: 1px;
13545
- word-wrap: normal;
13600
+ overflow-wrap: normal;
13546
13601
  }
13547
13602
  .float-left {
13548
13603
  float: left !important;
@@ -14433,7 +14488,7 @@ ol {
14433
14488
  .hmn-initial {
14434
14489
  min-height: initial !important;
14435
14490
  }
14436
- .hmx-screen {
14491
+ .hmn-screen {
14437
14492
  min-height: 100vh !important;
14438
14493
  }
14439
14494
  /* stylelint-disable */
@@ -16003,7 +16058,7 @@ ol {
16003
16058
  .lg\:hmn-initial {
16004
16059
  min-height: initial !important;
16005
16060
  }
16006
- .lg\:hmx-screen {
16061
+ .lg\:hmn-screen {
16007
16062
  min-height: 100vh !important;
16008
16063
  }
16009
16064
  }
@@ -17573,7 +17628,7 @@ ol {
17573
17628
  .md\:hmn-initial {
17574
17629
  min-height: initial !important;
17575
17630
  }
17576
- .md\:hmx-screen {
17631
+ .md\:hmn-screen {
17577
17632
  min-height: 100vh !important;
17578
17633
  }
17579
17634
  }
@@ -19143,7 +19198,7 @@ ol {
19143
19198
  .sm\:hmn-initial {
19144
19199
  min-height: initial !important;
19145
19200
  }
19146
- .sm\:hmx-screen {
19201
+ .sm\:hmn-screen {
19147
19202
  min-height: 100vh !important;
19148
19203
  }
19149
19204
  }
@@ -19182,51 +19237,6 @@ body *:before,
19182
19237
  body *:after {
19183
19238
  box-sizing: inherit;
19184
19239
  }
19185
- .s-banner__body-pt {
19186
- padding-top: 93px;
19187
- }
19188
- .s-banner {
19189
- position: fixed;
19190
- z-index: calc(var(--zi-navigation-fixed) - 1);
19191
- top: 0;
19192
- right: 0;
19193
- left: 0;
19194
- width: 100%;
19195
- padding: var(--su12);
19196
- border-top: 1px solid transparent;
19197
- border-bottom: 1px solid transparent;
19198
- border-radius: 0;
19199
- box-shadow: none;
19200
- color: var(--fc-medium);
19201
- font-size: var(--fs-body1);
19202
- }
19203
- .s-banner[aria-hidden="true"] {
19204
- visibility: hidden;
19205
- opacity: 0;
19206
- -webkit-transform: translate3d(0, -50px, 0);
19207
- transform: translate3d(0, -50px, 0);
19208
- }
19209
- .s-banner[aria-hidden="false"] {
19210
- visibility: visible;
19211
- opacity: 1;
19212
- -webkit-transform: translate3d(0, 49px, 0);
19213
- transform: translate3d(0, 49px, 0);
19214
- }
19215
- .s-banner.is-pinned {
19216
- z-index: calc(var(--zi-navigation-fixed) + 1);
19217
- -webkit-transform: translate3d(0, 0, 0);
19218
- transform: translate3d(0, 0, 0);
19219
- }
19220
- .s-banner.s-banner__important {
19221
- border-color: transparent;
19222
- color: var(--white);
19223
- }
19224
- .s-banner--container {
19225
- position: relative;
19226
- width: 100%;
19227
- max-width: calc(var(--s-step) * 10);
19228
- margin: 0 auto;
19229
- }
19230
19240
  .s-btn {
19231
19241
  position: relative;
19232
19242
  display: inline-block;
@@ -19274,7 +19284,7 @@ button[type="reset"] .s-btn {
19274
19284
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
19275
19285
  }
19276
19286
  .s-btn[disabled] {
19277
- opacity: 0.5;
19287
+ opacity: var(--_o-disabled-static);
19278
19288
  pointer-events: none;
19279
19289
  box-shadow: none !important;
19280
19290
  }
@@ -19338,7 +19348,7 @@ button[type="reset"] .s-btn {
19338
19348
  border-bottom-width: 0;
19339
19349
  }
19340
19350
  .s-btn .s-btn--badge {
19341
- opacity: 0.5;
19351
+ opacity: var(--_o-disabled);
19342
19352
  display: inline-block;
19343
19353
  border-radius: var(--br-sm);
19344
19354
  padding: var(--su2) calc(var(--su4) - var(--su1));
@@ -19346,9 +19356,6 @@ button[type="reset"] .s-btn {
19346
19356
  line-height: var(--lh-xs);
19347
19357
  background-color: currentColor;
19348
19358
  }
19349
- body.theme-highcontrast .s-btn .s-btn--badge {
19350
- opacity: 0.8;
19351
- }
19352
19359
  .s-btn .s-btn--number {
19353
19360
  color: var(--white);
19354
19361
  }
@@ -19383,13 +19390,13 @@ body.theme-highcontrast .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--n
19383
19390
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.7);
19384
19391
  }
19385
19392
  @media (prefers-color-scheme: dark) {
19386
- body.theme-system .s-btn__filled {
19393
+ body.theme-system .s-btn__filled:not(:focus) {
19387
19394
  box-shadow: none;
19388
19395
  }
19389
19396
  }
19390
- body.theme-dark .s-btn__filled,
19391
- .theme-dark__forced .s-btn__filled,
19392
- body.theme-system .theme-dark__forced .s-btn__filled {
19397
+ body.theme-dark .s-btn__filled:not(:focus),
19398
+ .theme-dark__forced .s-btn__filled:not(:focus),
19399
+ body.theme-system .theme-dark__forced .s-btn__filled:not(:focus) {
19393
19400
  box-shadow: none;
19394
19401
  }
19395
19402
  .s-btn__filled:hover,
@@ -19450,13 +19457,13 @@ body.theme-highcontrast .s-btn__muted.s-btn__filled {
19450
19457
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
19451
19458
  }
19452
19459
  @media (prefers-color-scheme: dark) {
19453
- body.theme-system .s-btn__muted.s-btn__filled {
19460
+ body.theme-system .s-btn__muted.s-btn__filled:not(:focus) {
19454
19461
  box-shadow: none;
19455
19462
  }
19456
19463
  }
19457
- body.theme-dark .s-btn__muted.s-btn__filled,
19458
- .theme-dark__forced .s-btn__muted.s-btn__filled,
19459
- body.theme-system .theme-dark__forced .s-btn__muted.s-btn__filled {
19464
+ body.theme-dark .s-btn__muted.s-btn__filled:not(:focus),
19465
+ .theme-dark__forced .s-btn__muted.s-btn__filled:not(:focus),
19466
+ body.theme-system .theme-dark__forced .s-btn__muted.s-btn__filled:not(:focus) {
19460
19467
  box-shadow: none;
19461
19468
  }
19462
19469
  body.theme-highcontrast .s-btn__muted.s-btn__filled {
@@ -19538,13 +19545,13 @@ body.theme-highcontrast .s-btn__danger:focus {
19538
19545
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
19539
19546
  }
19540
19547
  @media (prefers-color-scheme: dark) {
19541
- body.theme-system .s-btn__danger.s-btn__filled {
19548
+ body.theme-system .s-btn__danger.s-btn__filled:not(:focus) {
19542
19549
  box-shadow: none;
19543
19550
  }
19544
19551
  }
19545
- body.theme-dark .s-btn__danger.s-btn__filled,
19546
- .theme-dark__forced .s-btn__danger.s-btn__filled,
19547
- body.theme-system .theme-dark__forced .s-btn__danger.s-btn__filled {
19552
+ body.theme-dark .s-btn__danger.s-btn__filled:not(:focus),
19553
+ .theme-dark__forced .s-btn__danger.s-btn__filled:not(:focus),
19554
+ body.theme-system .theme-dark__forced .s-btn__danger.s-btn__filled:not(:focus) {
19548
19555
  box-shadow: none;
19549
19556
  }
19550
19557
  body.theme-highcontrast .s-btn__danger.s-btn__filled {
@@ -19589,25 +19596,28 @@ body.theme-highcontrast .s-btn__danger.s-btn__filled.is-selected .s-btn--number
19589
19596
  box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
19590
19597
  }
19591
19598
  @media (prefers-color-scheme: dark) {
19592
- body.theme-system .s-btn__primary {
19599
+ body.theme-system .s-btn__primary:not(:focus) {
19593
19600
  box-shadow: none;
19594
19601
  }
19595
19602
  body.theme-system .s-btn__primary:not(.is-selected) {
19603
+ background-color: var(--theme-secondary-300);
19596
19604
  color: var(--black);
19597
19605
  }
19598
19606
  }
19599
- body.theme-dark .s-btn__primary,
19600
- .theme-dark__forced .s-btn__primary,
19601
- body.theme-system .theme-dark__forced .s-btn__primary {
19607
+ body.theme-dark .s-btn__primary:not(:focus),
19608
+ .theme-dark__forced .s-btn__primary:not(:focus),
19609
+ body.theme-system .theme-dark__forced .s-btn__primary:not(:focus) {
19602
19610
  box-shadow: none;
19603
19611
  }
19604
19612
  body.theme-dark .s-btn__primary:not(.is-selected),
19605
19613
  .theme-dark__forced .s-btn__primary:not(.is-selected),
19606
19614
  body.theme-system .theme-dark__forced .s-btn__primary:not(.is-selected) {
19615
+ background-color: var(--theme-secondary-300);
19607
19616
  color: var(--black);
19608
19617
  }
19609
19618
  body.theme-highcontrast .s-btn__primary:not(.is-selected) {
19610
19619
  border-color: transparent;
19620
+ background-color: var(--theme-secondary-400);
19611
19621
  color: var(--white);
19612
19622
  }
19613
19623
  .theme-light__forced .s-btn__primary,
@@ -19700,7 +19710,7 @@ body.theme-highcontrast .s-btn__github {
19700
19710
  .s-btn__unset:focus {
19701
19711
  padding: 0;
19702
19712
  border: none;
19703
- outline: none;
19713
+ outline: initial;
19704
19714
  font: unset;
19705
19715
  border-radius: 0;
19706
19716
  color: unset;
@@ -19714,7 +19724,7 @@ body.theme-highcontrast .s-btn__github {
19714
19724
  padding: 0;
19715
19725
  border: none;
19716
19726
  border-radius: 0;
19717
- outline: none;
19727
+ outline: initial;
19718
19728
  font: inherit;
19719
19729
  background: none;
19720
19730
  box-shadow: none;
@@ -19813,44 +19823,18 @@ body.theme-highcontrast .s-btn__link {
19813
19823
  .s-btn__link.s-btn__dropdown:after {
19814
19824
  right: 0;
19815
19825
  }
19826
+ .s-btn__unset:focus,
19827
+ .s-btn__link:focus,
19828
+ .s-btn__unset:focus-visible,
19829
+ .s-btn__link:focus-visible {
19830
+ outline-style: auto;
19831
+ }
19816
19832
  .s-btn__icon .svg-icon {
19817
19833
  vertical-align: baseline;
19818
19834
  margin-top: -0.3em;
19819
19835
  margin-bottom: -0.3em;
19820
19836
  transition: opacity 200ms var(--te-smooth);
19821
19837
  }
19822
- .s-btn.is-loading {
19823
- padding-left: 2.2em;
19824
- }
19825
- .s-btn.is-loading:before {
19826
- content: "";
19827
- position: absolute;
19828
- opacity: 0.3;
19829
- left: 0.6em;
19830
- top: calc(50% - 0.6em);
19831
- width: 1.23076923em;
19832
- height: 1.23076923em;
19833
- border-width: 2px;
19834
- border-style: solid;
19835
- border-color: currentColor;
19836
- border-radius: var(--br-circle);
19837
- }
19838
- .s-btn.is-loading:after {
19839
- content: "";
19840
- position: absolute;
19841
- left: 0.6em;
19842
- top: calc(50% - 0.6em);
19843
- width: 1.23076923em;
19844
- height: 1.23076923em;
19845
- border-width: 2px;
19846
- border-style: solid;
19847
- border-color: transparent;
19848
- border-left-color: currentColor;
19849
- border-radius: var(--br-circle);
19850
- animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
19851
- filter: invert(0);
19852
- transform-origin: 50% 50% 1px;
19853
- }
19854
19838
  .s-btn.is-loading .svg-icon:first-child {
19855
19839
  margin-left: -23px;
19856
19840
  opacity: 0;
@@ -20318,188 +20302,439 @@ body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
20318
20302
  .s-link-preview--footer a:focus {
20319
20303
  color: var(--black-600);
20320
20304
  }
20321
- .s-notice {
20322
- padding: var(--su16);
20323
- border: 1px solid transparent;
20324
- border-radius: var(--br-sm);
20325
- color: var(--fc-medium);
20305
+ .s-banner {
20306
+ background: var(--_bg, var(--black-050));
20307
+ border-color: var(--_bc, var(--bc-medium));
20308
+ border-style: solid;
20309
+ color: var(--_fc, var(--fc-medium));
20326
20310
  font-size: var(--fs-body1);
20327
- }
20328
- .s-toast .s-notice {
20329
- max-width: 44rem;
20311
+ --_x-offset: 0;
20312
+ border-width: var(--su-static1) 0;
20313
+ inset: 0 0 auto 0;
20314
+ padding: var(--su12);
20315
+ position: fixed;
20330
20316
  width: 100%;
20331
- padding-top: var(--su8);
20332
- padding-bottom: var(--su8);
20333
- box-shadow: var(--bs-sm);
20334
- pointer-events: all;
20317
+ z-index: calc(var(--zi-navigation-fixed) - 1);
20318
+ -webkit-transform: translate3d(0, var(--_x-offset), 0);
20319
+ transform: translate3d(0, var(--_x-offset), 0);
20335
20320
  }
20336
- .s-notice .s-notice--btn {
20337
- color: var(--fc-dark);
20321
+ .s-banner code {
20322
+ background: var(--_code-bg, transparent);
20323
+ }
20324
+ .s-banner .s-banner--btn {
20325
+ color: inherit;
20338
20326
  padding: var(--su8);
20339
20327
  }
20340
- .s-notice__info,
20328
+ .s-banner .s-banner--btn:focus,
20329
+ .s-banner .s-banner--btn:hover {
20330
+ background: var(--_btn-focus-bg, var(--black-100));
20331
+ }
20332
+ .s-banner .s-banner--btn:active {
20333
+ background: var(--_btn-active-bg, var(--black-150));
20334
+ }
20335
+ @media (prefers-color-scheme: dark) {
20336
+ body.theme-system .s-banner:not(.s-banner__important) {
20337
+ --_bc: var(--_bg);
20338
+ }
20339
+ }
20340
+ body.theme-dark .s-banner:not(.s-banner__important),
20341
+ .theme-dark__forced .s-banner:not(.s-banner__important),
20342
+ body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
20343
+ --_bc: var(--_bg);
20344
+ }
20345
+ body.theme-highcontrast .s-banner:not(.s-banner__important) {
20346
+ --_bc: currentColor;
20347
+ }
20348
+ @media (prefers-color-scheme: dark) {
20349
+ body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
20350
+ --_bc: currentColor;
20351
+ }
20352
+ }
20353
+ body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
20354
+ --_bc: currentColor;
20355
+ }
20356
+ .s-banner__important {
20357
+ --_bc: var(--_bg);
20358
+ --_bg: var(--black-700);
20359
+ --_fc: var(--white);
20360
+ --_btn-focus-bg: var(--black-800);
20361
+ --_btn-active-bg: var(--black-900);
20362
+ }
20363
+ body.theme-highcontrast .s-banner__important {
20364
+ --_bc: var(--_bg);
20365
+ }
20366
+ .s-banner__danger {
20367
+ --_bc: var(--red-200);
20368
+ --_bg: var(--red-050);
20369
+ --_btn-focus-bg: var(--red-100);
20370
+ --_btn-active-bg: var(--red-200);
20371
+ }
20372
+ body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
20373
+ --_bg: var(--red-200);
20374
+ }
20375
+ .s-banner__danger.s-banner__important {
20376
+ --_bc: var(--_bg);
20377
+ --_bg: var(--red-500);
20378
+ --_btn-focus-bg: var(--red-600);
20379
+ --_btn-active-bg: var(--red-700);
20380
+ }
20381
+ @media (prefers-color-scheme: dark) {
20382
+ body.theme-system .s-banner__danger.s-banner__important {
20383
+ --_bg: var(--red-400);
20384
+ --_fc: var(--black-900);
20385
+ }
20386
+ }
20387
+ body.theme-dark .s-banner__danger.s-banner__important,
20388
+ .theme-dark__forced .s-banner__danger.s-banner__important,
20389
+ body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
20390
+ --_bg: var(--red-400);
20391
+ --_fc: var(--black-900);
20392
+ }
20393
+ @media (prefers-color-scheme: dark) {
20394
+ body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
20395
+ --_bg: var(--red-500);
20396
+ --_fc: var(--white);
20397
+ }
20398
+ }
20399
+ body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
20400
+ --_bg: var(--red-500);
20401
+ --_fc: var(--white);
20402
+ }
20341
20403
  .s-banner__info {
20342
- border-color: var(--theme-secondary-150);
20343
- background-color: var(--theme-secondary-050);
20404
+ --_bc: var(--theme-secondary-150);
20405
+ --_bg: var(--theme-secondary-050);
20406
+ --_btn-focus-bg: var(--theme-secondary-100);
20407
+ --_btn-active-bg: var(--theme-secondary-150);
20408
+ --_code-bg: var(--theme-secondary-150);
20409
+ }
20410
+ body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
20411
+ --_bg: var(--theme-secondary-100);
20412
+ }
20413
+ @media (prefers-color-scheme: dark) {
20414
+ body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
20415
+ --_bg: var(--theme-secondary-100);
20416
+ }
20417
+ }
20418
+ body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
20419
+ --_bg: var(--theme-secondary-100);
20344
20420
  }
20345
- .s-notice__info.s-notice__important,
20346
- .s-banner__info.s-notice__important,
20347
- .s-notice__info.s-banner__important,
20348
20421
  .s-banner__info.s-banner__important {
20349
- background-color: var(--theme-secondary-400);
20422
+ --_bc: var(--_bg);
20423
+ --_bg: var(--theme-secondary-400);
20424
+ --_btn-focus-bg: var(--theme-secondary-500);
20425
+ --_btn-active-bg: var(--theme-secondary-600);
20350
20426
  }
20351
- .s-notice__info .s-notice--btn:focus,
20352
- .s-banner__info .s-notice--btn:focus,
20353
- .s-notice__info .s-notice--btn:hover,
20354
- .s-banner__info .s-notice--btn:hover {
20355
- background-color: var(--theme-secondary-300);
20427
+ @media (prefers-color-scheme: dark) {
20428
+ body.theme-system .s-banner__info.s-banner__important {
20429
+ --_bg: var(--theme-secondary-300);
20430
+ --_fc: var(--black-900);
20431
+ }
20356
20432
  }
20357
- .s-notice__info .s-notice--btn:active,
20358
- .s-banner__info .s-notice--btn:active {
20359
- background-color: var(--theme-secondary-400);
20433
+ body.theme-dark .s-banner__info.s-banner__important,
20434
+ .theme-dark__forced .s-banner__info.s-banner__important,
20435
+ body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
20436
+ --_bg: var(--theme-secondary-300);
20437
+ --_fc: var(--black-900);
20438
+ }
20439
+ @media (prefers-color-scheme: dark) {
20440
+ body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
20441
+ --_bg: var(--theme-secondary-400);
20442
+ --_fc: var(--white);
20443
+ }
20360
20444
  }
20361
- .s-notice__info code,
20362
- .s-banner__info code {
20363
- background-color: var(--theme-secondary-150);
20445
+ body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
20446
+ --_bg: var(--theme-secondary-400);
20447
+ --_fc: var(--white);
20364
20448
  }
20365
- .s-notice__success,
20366
20449
  .s-banner__success {
20367
- border-color: var(--green-200);
20368
- background-color: var(--green-050);
20450
+ --_bc: var(--green-200);
20451
+ --_bg: var(--green-050);
20452
+ --_btn-focus-bg: var(--green-100);
20453
+ --_btn-active-bg: var(--green-200);
20369
20454
  }
20370
- body.theme-highcontrast .s-notice__success,
20371
- body.theme-highcontrast .s-banner__success {
20372
- background-color: var(--green-200);
20373
- border-color: var(--green-400);
20455
+ body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
20456
+ --_bg: var(--green-200);
20374
20457
  }
20375
- .s-notice__success.s-notice__important,
20376
- .s-banner__success.s-notice__important,
20377
- .s-notice__success.s-banner__important,
20378
20458
  .s-banner__success.s-banner__important {
20379
- background-color: var(--green-400);
20380
- color: var(--black-900);
20459
+ --_bc: var(--_bg);
20460
+ --_bg: var(--green-400);
20461
+ --_fc: var(--black-900);
20462
+ --_btn-focus-bg: var(--green-500);
20463
+ --_btn-active-bg: var(--green-600);
20381
20464
  }
20382
- body.theme-highcontrast .s-notice__success.s-notice__important,
20383
- body.theme-highcontrast .s-banner__success.s-notice__important,
20384
- body.theme-highcontrast .s-notice__success.s-banner__important,
20385
- body.theme-highcontrast .s-banner__success.s-banner__important {
20386
- background-color: var(--green-500);
20387
- color: var(--white);
20388
- border-color: transparent;
20465
+ @media (prefers-color-scheme: dark) {
20466
+ body.theme-system .s-banner__success.s-banner__important {
20467
+ --_bg: var(--green-500);
20468
+ --_fc: var(--white);
20469
+ }
20389
20470
  }
20390
- .s-notice__success .s-notice--btn:focus,
20391
- .s-banner__success .s-notice--btn:focus,
20392
- .s-notice__success .s-notice--btn:hover,
20393
- .s-banner__success .s-notice--btn:hover {
20394
- background-color: var(--green-100);
20471
+ body.theme-dark .s-banner__success.s-banner__important,
20472
+ .theme-dark__forced .s-banner__success.s-banner__important,
20473
+ body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
20474
+ --_bg: var(--green-500);
20475
+ --_fc: var(--white);
20395
20476
  }
20396
- .s-notice__success .s-notice--btn:active,
20397
- .s-banner__success .s-notice--btn:active {
20398
- background-color: var(--green-200);
20477
+ body.theme-highcontrast .s-banner__success.s-banner__important {
20478
+ --_bg: var(--green-500);
20479
+ --_fc: var(--white);
20399
20480
  }
20400
- .s-notice__warning,
20401
20481
  .s-banner__warning {
20402
- border-color: var(--yellow-300);
20403
- background-color: var(--yellow-050);
20482
+ --_bc: var(--yellow-300);
20483
+ --_bg: var(--yellow-050);
20484
+ --_btn-focus-bg: var(--yellow-200);
20485
+ --_btn-active-bg: var(--yellow-300);
20486
+ --_code-bg: var(--yellow-200);
20404
20487
  }
20405
- body.theme-highcontrast .s-notice__warning,
20406
- body.theme-highcontrast .s-banner__warning {
20407
- background-color: var(--yellow-200);
20408
- border-color: var(--yellow-700);
20488
+ body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
20489
+ --_bg: var(--yellow-200);
20409
20490
  }
20410
- .s-notice__warning.s-notice__important,
20411
- .s-banner__warning.s-notice__important,
20412
- .s-notice__warning.s-banner__important,
20413
20491
  .s-banner__warning.s-banner__important {
20414
- background-color: var(--yellow-400);
20415
- color: var(--black-900);
20492
+ --_bc: var(--_bg);
20493
+ --_bg: var(--yellow-400);
20494
+ --_btn-focus-bg: var(--yellow-500);
20495
+ --_btn-active-bg: var(--yellow-600);
20496
+ --_fc: var(--black-900);
20497
+ }
20498
+ @media (prefers-color-scheme: dark) {
20499
+ body.theme-system .s-banner__warning.s-banner__important {
20500
+ --_bg: var(--yellow-600);
20501
+ --_fc: var(--white);
20502
+ }
20503
+ }
20504
+ body.theme-dark .s-banner__warning.s-banner__important,
20505
+ .theme-dark__forced .s-banner__warning.s-banner__important,
20506
+ body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
20507
+ --_bg: var(--yellow-600);
20508
+ --_fc: var(--white);
20416
20509
  }
20417
- body.theme-highcontrast .s-notice__warning.s-notice__important,
20418
- body.theme-highcontrast .s-banner__warning.s-notice__important,
20419
- body.theme-highcontrast .s-notice__warning.s-banner__important,
20420
20510
  body.theme-highcontrast .s-banner__warning.s-banner__important {
20421
- background-color: var(--yellow-500);
20422
- color: var(--white);
20423
- border-color: transparent;
20511
+ --_bg: var(--yellow-700);
20512
+ --_fc: var(--white);
20424
20513
  }
20425
- .s-notice__warning .s-notice--btn:focus,
20426
- .s-banner__warning .s-notice--btn:focus,
20427
- .s-notice__warning .s-notice--btn:hover,
20428
- .s-banner__warning .s-notice--btn:hover {
20429
- background-color: var(--yellow-200);
20514
+ .s-banner__body-pt {
20515
+ padding-top: 93px;
20430
20516
  }
20431
- .s-notice__warning .s-notice--btn:active,
20432
- .s-banner__warning .s-notice--btn:active {
20433
- background-color: var(--yellow-300);
20517
+ .s-banner.is-pinned {
20518
+ z-index: calc(var(--zi-navigation-fixed) + 1);
20434
20519
  }
20435
- .s-notice__warning code,
20436
- .s-banner__warning code {
20437
- background-color: var(--yellow-200);
20520
+ .s-banner[aria-hidden="true"] {
20521
+ --_x-offset: -50px;
20522
+ visibility: hidden;
20523
+ opacity: 0;
20438
20524
  }
20439
- .s-notice__danger,
20440
- .s-banner__danger {
20441
- border-color: var(--red-200);
20442
- background-color: var(--red-050);
20525
+ .s-banner[aria-hidden="false"] {
20526
+ --_x-offset: 49px;
20527
+ visibility: visible;
20528
+ opacity: 1;
20443
20529
  }
20444
- body.theme-highcontrast .s-notice__danger,
20445
- body.theme-highcontrast .s-banner__danger {
20446
- background-color: var(--red-200);
20447
- border-color: var(--red-500);
20530
+ .s-banner .s-banner--container {
20531
+ position: relative;
20532
+ width: 100%;
20533
+ max-width: calc(var(--s-step) * 10);
20534
+ margin: 0 auto;
20448
20535
  }
20449
- body.theme-highcontrast .s-notice__danger.s-notice__important,
20450
- body.theme-highcontrast .s-banner__danger.s-notice__important,
20451
- body.theme-highcontrast .s-notice__danger.s-banner__important,
20452
- body.theme-highcontrast .s-banner__danger.s-banner__important {
20453
- background-color: var(--red-500);
20536
+ .s-notice {
20537
+ background: var(--_bg, var(--black-050));
20538
+ border-color: var(--_bc, var(--bc-medium));
20539
+ border-style: solid;
20540
+ color: var(--_fc, var(--fc-medium));
20541
+ font-size: var(--fs-body1);
20542
+ border-radius: var(--br-sm);
20543
+ border-width: var(--su-static1);
20544
+ padding: var(--su16);
20454
20545
  }
20455
- .s-notice__danger.s-notice__important,
20456
- .s-banner__danger.s-notice__important,
20457
- .s-notice__danger.s-banner__important,
20458
- .s-banner__danger.s-banner__important {
20459
- background-color: var(--red-400);
20546
+ .s-notice code {
20547
+ background: var(--_code-bg, transparent);
20460
20548
  }
20461
- .s-notice__danger .s-notice--btn:focus,
20462
- .s-banner__danger .s-notice--btn:focus,
20463
- .s-notice__danger .s-notice--btn:hover,
20464
- .s-banner__danger .s-notice--btn:hover {
20465
- background-color: var(--red-100);
20549
+ .s-notice .s-notice--btn {
20550
+ color: inherit;
20551
+ padding: var(--su8);
20466
20552
  }
20467
- .s-notice__danger .s-notice--btn:active,
20468
- .s-banner__danger .s-notice--btn:active {
20469
- background-color: var(--red-200);
20553
+ .s-notice .s-notice--btn:focus,
20554
+ .s-notice .s-notice--btn:hover {
20555
+ background: var(--_btn-focus-bg, var(--black-100));
20556
+ }
20557
+ .s-notice .s-notice--btn:active {
20558
+ background: var(--_btn-active-bg, var(--black-150));
20559
+ }
20560
+ @media (prefers-color-scheme: dark) {
20561
+ body.theme-system .s-notice:not(.s-notice__important) {
20562
+ --_bc: var(--_bg);
20563
+ }
20564
+ }
20565
+ body.theme-dark .s-notice:not(.s-notice__important),
20566
+ .theme-dark__forced .s-notice:not(.s-notice__important),
20567
+ body.theme-system .theme-dark__forced .s-notice:not(.s-notice__important) {
20568
+ --_bc: var(--_bg);
20569
+ }
20570
+ body.theme-highcontrast .s-notice:not(.s-notice__important) {
20571
+ --_bc: currentColor;
20572
+ }
20573
+ @media (prefers-color-scheme: dark) {
20574
+ body.theme-highcontrast.theme-system .s-notice:not(.s-notice__important) {
20575
+ --_bc: currentColor;
20576
+ }
20577
+ }
20578
+ body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
20579
+ --_bc: currentColor;
20470
20580
  }
20471
20581
  .s-notice__important {
20472
- border-color: transparent;
20473
- background-color: var(--black-700);
20474
- color: var(--white);
20582
+ --_bc: var(--_bg);
20583
+ --_bg: var(--black-700);
20584
+ --_fc: var(--white);
20585
+ --_btn-focus-bg: var(--black-800);
20586
+ --_btn-active-bg: var(--black-900);
20587
+ }
20588
+ body.theme-highcontrast .s-notice__important {
20589
+ --_bc: var(--_bg);
20590
+ }
20591
+ .s-notice__danger {
20592
+ --_bc: var(--red-200);
20593
+ --_bg: var(--red-050);
20594
+ --_btn-focus-bg: var(--red-100);
20595
+ --_btn-active-bg: var(--red-200);
20596
+ }
20597
+ body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
20598
+ --_bg: var(--red-200);
20599
+ }
20600
+ .s-notice__danger.s-notice__important {
20601
+ --_bc: var(--_bg);
20602
+ --_bg: var(--red-500);
20603
+ --_btn-focus-bg: var(--red-600);
20604
+ --_btn-active-bg: var(--red-700);
20475
20605
  }
20476
20606
  @media (prefers-color-scheme: dark) {
20477
- body.theme-system .s-notice__info,
20478
- body.theme-system .s-notice__success,
20479
- body.theme-system .s-notice__warning,
20480
- body.theme-system .s-notice__danger {
20481
- border-color: transparent;
20607
+ body.theme-system .s-notice__danger.s-notice__important {
20608
+ --_bg: var(--red-400);
20609
+ --_fc: var(--black-900);
20482
20610
  }
20483
20611
  }
20484
- body.theme-dark .s-notice__info,
20485
- body.theme-dark .s-notice__success,
20486
- body.theme-dark .s-notice__warning,
20487
- body.theme-dark .s-notice__danger,
20488
- .theme-dark__forced .s-notice__info,
20489
- .theme-dark__forced .s-notice__success,
20490
- .theme-dark__forced .s-notice__warning,
20491
- .theme-dark__forced .s-notice__danger,
20492
- body.theme-system .theme-dark__forced .s-notice__info,
20493
- body.theme-system .theme-dark__forced .s-notice__success,
20494
- body.theme-system .theme-dark__forced .s-notice__warning,
20495
- body.theme-system .theme-dark__forced .s-notice__danger {
20496
- border-color: transparent;
20612
+ body.theme-dark .s-notice__danger.s-notice__important,
20613
+ .theme-dark__forced .s-notice__danger.s-notice__important,
20614
+ body.theme-system .theme-dark__forced .s-notice__danger.s-notice__important {
20615
+ --_bg: var(--red-400);
20616
+ --_fc: var(--black-900);
20497
20617
  }
20498
- body.theme-highcontrast .s-notice__info,
20499
- body.theme-highcontrast .s-notice__success,
20500
- body.theme-highcontrast .s-notice__warning,
20501
- body.theme-highcontrast .s-notice__danger {
20502
- border-color: currentColor;
20618
+ @media (prefers-color-scheme: dark) {
20619
+ body.theme-highcontrast.theme-system .s-notice__danger.s-notice__important {
20620
+ --_bg: var(--red-500);
20621
+ --_fc: var(--white);
20622
+ }
20623
+ }
20624
+ body.theme-highcontrast.theme-dark .s-notice__danger.s-notice__important {
20625
+ --_bg: var(--red-500);
20626
+ --_fc: var(--white);
20627
+ }
20628
+ .s-notice__info {
20629
+ --_bc: var(--theme-secondary-150);
20630
+ --_bg: var(--theme-secondary-050);
20631
+ --_btn-focus-bg: var(--theme-secondary-100);
20632
+ --_btn-active-bg: var(--theme-secondary-150);
20633
+ --_code-bg: var(--theme-secondary-150);
20634
+ }
20635
+ body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
20636
+ --_bg: var(--theme-secondary-100);
20637
+ }
20638
+ @media (prefers-color-scheme: dark) {
20639
+ body.theme-highcontrast.theme-system .s-notice__info:not(.s-notice__important) {
20640
+ --_bg: var(--theme-secondary-100);
20641
+ }
20642
+ }
20643
+ body.theme-highcontrast.theme-dark .s-notice__info:not(.s-notice__important) {
20644
+ --_bg: var(--theme-secondary-100);
20645
+ }
20646
+ .s-notice__info.s-notice__important {
20647
+ --_bc: var(--_bg);
20648
+ --_bg: var(--theme-secondary-400);
20649
+ --_btn-focus-bg: var(--theme-secondary-500);
20650
+ --_btn-active-bg: var(--theme-secondary-600);
20651
+ }
20652
+ @media (prefers-color-scheme: dark) {
20653
+ body.theme-system .s-notice__info.s-notice__important {
20654
+ --_bg: var(--theme-secondary-300);
20655
+ --_fc: var(--black-900);
20656
+ }
20657
+ }
20658
+ body.theme-dark .s-notice__info.s-notice__important,
20659
+ .theme-dark__forced .s-notice__info.s-notice__important,
20660
+ body.theme-system .theme-dark__forced .s-notice__info.s-notice__important {
20661
+ --_bg: var(--theme-secondary-300);
20662
+ --_fc: var(--black-900);
20663
+ }
20664
+ @media (prefers-color-scheme: dark) {
20665
+ body.theme-highcontrast.theme-system .s-notice__info.s-notice__important {
20666
+ --_bg: var(--theme-secondary-400);
20667
+ --_fc: var(--white);
20668
+ }
20669
+ }
20670
+ body.theme-highcontrast.theme-dark .s-notice__info.s-notice__important {
20671
+ --_bg: var(--theme-secondary-400);
20672
+ --_fc: var(--white);
20673
+ }
20674
+ .s-notice__success {
20675
+ --_bc: var(--green-200);
20676
+ --_bg: var(--green-050);
20677
+ --_btn-focus-bg: var(--green-100);
20678
+ --_btn-active-bg: var(--green-200);
20679
+ }
20680
+ body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
20681
+ --_bg: var(--green-200);
20682
+ }
20683
+ .s-notice__success.s-notice__important {
20684
+ --_bc: var(--_bg);
20685
+ --_bg: var(--green-400);
20686
+ --_fc: var(--black-900);
20687
+ --_btn-focus-bg: var(--green-500);
20688
+ --_btn-active-bg: var(--green-600);
20689
+ }
20690
+ @media (prefers-color-scheme: dark) {
20691
+ body.theme-system .s-notice__success.s-notice__important {
20692
+ --_bg: var(--green-500);
20693
+ --_fc: var(--white);
20694
+ }
20695
+ }
20696
+ body.theme-dark .s-notice__success.s-notice__important,
20697
+ .theme-dark__forced .s-notice__success.s-notice__important,
20698
+ body.theme-system .theme-dark__forced .s-notice__success.s-notice__important {
20699
+ --_bg: var(--green-500);
20700
+ --_fc: var(--white);
20701
+ }
20702
+ body.theme-highcontrast .s-notice__success.s-notice__important {
20703
+ --_bg: var(--green-500);
20704
+ --_fc: var(--white);
20705
+ }
20706
+ .s-notice__warning {
20707
+ --_bc: var(--yellow-300);
20708
+ --_bg: var(--yellow-050);
20709
+ --_btn-focus-bg: var(--yellow-200);
20710
+ --_btn-active-bg: var(--yellow-300);
20711
+ --_code-bg: var(--yellow-200);
20712
+ }
20713
+ body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
20714
+ --_bg: var(--yellow-200);
20715
+ }
20716
+ .s-notice__warning.s-notice__important {
20717
+ --_bc: var(--_bg);
20718
+ --_bg: var(--yellow-400);
20719
+ --_btn-focus-bg: var(--yellow-500);
20720
+ --_btn-active-bg: var(--yellow-600);
20721
+ --_fc: var(--black-900);
20722
+ }
20723
+ @media (prefers-color-scheme: dark) {
20724
+ body.theme-system .s-notice__warning.s-notice__important {
20725
+ --_bg: var(--yellow-600);
20726
+ --_fc: var(--white);
20727
+ }
20728
+ }
20729
+ body.theme-dark .s-notice__warning.s-notice__important,
20730
+ .theme-dark__forced .s-notice__warning.s-notice__important,
20731
+ body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
20732
+ --_bg: var(--yellow-600);
20733
+ --_fc: var(--white);
20734
+ }
20735
+ body.theme-highcontrast .s-notice__warning.s-notice__important {
20736
+ --_bg: var(--yellow-700);
20737
+ --_fc: var(--white);
20503
20738
  }
20504
20739
  .s-toast {
20505
20740
  visibility: hidden;
@@ -20526,6 +20761,14 @@ body.theme-highcontrast .s-notice__danger {
20526
20761
  transform: none;
20527
20762
  }
20528
20763
  }
20764
+ .s-toast .s-notice {
20765
+ max-width: 44rem;
20766
+ width: 100%;
20767
+ padding-top: var(--su8);
20768
+ padding-bottom: var(--su8);
20769
+ box-shadow: var(--bs-sm);
20770
+ pointer-events: all;
20771
+ }
20529
20772
  .s-tag {
20530
20773
  display: inline-flex;
20531
20774
  align-items: center;