@stackoverflow/stacks 1.3.5 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/css/stacks.css +1401 -1034
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/css/atomic/gap.less +44 -0
  4. package/lib/css/atomic/grid.less +0 -35
  5. package/lib/css/components/_styles-template.less +75 -0
  6. package/lib/css/components/activity-indicator.less +23 -33
  7. package/lib/css/components/avatars.less +71 -82
  8. package/lib/css/components/award-bling.less +29 -0
  9. package/lib/css/components/badges.less +199 -230
  10. package/lib/css/components/breadcrumbs.less +23 -30
  11. package/lib/css/components/buttons.less +4 -2
  12. package/lib/css/components/cards.less +18 -36
  13. package/lib/css/components/labels.less +66 -66
  14. package/lib/css/components/links.less +4 -4
  15. package/lib/css/components/menu.less +27 -38
  16. package/lib/css/components/navigation.less +114 -117
  17. package/lib/css/components/notices.less +77 -77
  18. package/lib/css/components/page-titles.less +39 -36
  19. package/lib/css/components/pagination.less +44 -47
  20. package/lib/css/components/post-summary.less +62 -55
  21. package/lib/css/components/tags.less +177 -211
  22. package/lib/css/components/toggle-switches.less +5 -4
  23. package/lib/css/components/topbar.less +10 -4
  24. package/lib/css/components/uploader.less +43 -53
  25. package/lib/css/components/user-cards.less +5 -1
  26. package/lib/css/stacks-static.less +2 -0
  27. package/package.json +12 -12
package/dist/css/stacks.css CHANGED
@@ -400,98 +400,139 @@ 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
+ --_ai-focus-ring: var(--focus-ring);
404
+ --_ai-bg: var(--theme-secondary-400);
405
+ --_ai-fc: hsl(0, 0%, 100%);
406
+ background-color: var(--_ai-bg);
407
+ box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
408
+ color: var(--_ai-fc);
409
+ border-radius: 1000px;
405
410
  display: inline-block;
411
+ font-size: var(--fs-fine);
412
+ font-weight: 600;
413
+ line-height: 1.1;
406
414
  min-width: var(--su-static12);
407
415
  min-height: var(--su-static12);
408
416
  padding: var(--su2) var(--su4);
409
- line-height: 1.1;
410
- background-color: var(--_bg-color);
411
- box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring);
412
- border-radius: 1000px;
413
- font-size: var(--fs-fine);
414
- font-weight: 600;
415
- color: hsl(0, 0%, 100%);
416
417
  text-transform: uppercase;
417
418
  }
419
+ body.theme-highcontrast .s-activity-indicator {
420
+ --_ai-fc: var(--white);
421
+ }
418
422
  .s-activity-indicator.s-activity-indicator__success {
419
- --_bg-color: var(--green-500);
420
- --_focus-ring: var(--focus-ring-success);
423
+ --_ai-bg-color: var(--green-500);
424
+ --_ai-focus-ring: var(--focus-ring-success);
421
425
  }
422
426
  .s-activity-indicator.s-activity-indicator__warning {
423
- --_bg-color: var(--yellow-600);
424
- --_focus-ring: var(--focus-ring-warning);
427
+ --_ai-bg-color: var(--yellow-600);
428
+ --_ai-focus-ring: var(--focus-ring-warning);
425
429
  }
426
430
  .s-activity-indicator.s-activity-indicator__danger {
427
- --_bg-color: var(--red-500);
428
- --_focus-ring: var(--focus-ring-error);
431
+ --_ai-bg-color: var(--red-500);
432
+ --_ai-focus-ring: var(--focus-ring-error);
429
433
  }
430
- body.theme-highcontrast .s-activity-indicator {
431
- color: var(--white);
434
+ .s-award-bling {
435
+ --_ab-before-bg: unset;
436
+ align-items: center;
437
+ color: inherit;
438
+ display: flex;
439
+ }
440
+ .s-award-bling.s-award-bling__gold {
441
+ --_ab-before-bg: var(--gold);
442
+ }
443
+ .s-award-bling.s-award-bling__silver {
444
+ --_ab-before-bg: var(--silver);
445
+ }
446
+ .s-award-bling.s-award-bling__bronze {
447
+ --_ab-before-bg: var(--bronze);
448
+ }
449
+ .s-award-bling:before {
450
+ background-color: var(--_ab-before-bg);
451
+ border-radius: 100%;
452
+ content: "";
453
+ margin-right: var(--su4);
454
+ height: var(--su8);
455
+ width: var(--su8);
432
456
  }
433
457
  .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;
438
- display: inline-block;
439
- position: relative;
440
- width: var(--_size);
441
- height: var(--_size);
442
- border-radius: var(--_br);
443
- background-color: hsl(0, 0%, 100%);
458
+ --_av-size: var(--su-static16);
459
+ --_av-bg: hsl(0, 0%, 100%);
460
+ --_av-br: var(--br-sm);
461
+ --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
462
+ --_av-scale-badge: 1;
463
+ background-color: var(--_av-bg);
464
+ border-radius: var(--_av-br);
465
+ height: var(--_av-size);
466
+ width: var(--_av-size);
444
467
  background-repeat: no-repeat;
445
468
  background-size: 100%;
469
+ display: inline-block;
470
+ position: relative;
446
471
  vertical-align: bottom;
447
472
  }
473
+ body.theme-highcontrast .s-avatar {
474
+ background-color: var(--black);
475
+ box-shadow: 0 0 0 1px var(--black);
476
+ color: var(--white);
477
+ }
478
+ body.theme-highcontrast .s-avatar .s-avatar--letter {
479
+ color: var(--white);
480
+ }
481
+ .s-avatar.s-avatar__32,
482
+ .s-avatar.s-avatar__48 {
483
+ --_av-br: var(--br-md);
484
+ }
485
+ .s-avatar.s-avatar__96,
486
+ .s-avatar.s-avatar__128 {
487
+ --_av-br: calc(var(--br-lg) + var(--br-sm));
488
+ --_av-scale-badge: 3;
489
+ }
448
490
  .s-avatar.s-avatar__24 {
449
- --_size: var(--su-static24);
450
- --_fs-letter: var(--su-static16);
451
- --_scale-badge: 1.1;
491
+ --_av-size: var(--su-static24);
492
+ --_av-fs-letter: var(--su-static16);
493
+ --_av-scale-badge: 1.1;
452
494
  }
453
495
  .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;
496
+ --_av-size: var(--su-static32);
497
+ --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
498
+ --_av-scale-badge: 1.3;
458
499
  }
459
500
  .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;
501
+ --_av-size: var(--su-static48);
502
+ --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
503
+ --_av-scale-badge: 1.6;
464
504
  }
465
505
  .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;
506
+ --_av-size: var(--su-static64);
507
+ --_av-br: var(--br-lg);
508
+ --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
509
+ --_av-scale-badge: 2.4;
470
510
  }
471
511
  .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;
512
+ --_av-size: var(--su-static96);
513
+ --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
476
514
  }
477
515
  .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;
516
+ --_av-size: var(--su-static128);
517
+ --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
482
518
  }
483
- body.theme-highcontrast .s-avatar {
484
- background-color: var(--black);
485
- box-shadow: 0 0 0 1px var(--black);
486
- color: var(--white);
519
+ .s-avatar .s-avatar--badge {
520
+ bottom: calc(var(--su-static4) * -1);
521
+ position: absolute;
522
+ right: calc(var(--su-static4) * -1);
523
+ -webkit-transform: scale(var(--_av-scale-badge));
524
+ transform: scale(var(--_av-scale-badge));
487
525
  }
488
- body.theme-highcontrast .s-avatar .s-avatar--letter {
489
- color: var(--white);
526
+ .s-avatar .s-avatar--image {
527
+ border-radius: var(--_av-br);
528
+ display: block;
529
+ height: var(--_av-size);
530
+ width: var(--_av-size);
490
531
  }
491
532
  .s-avatar .s-avatar--letter {
492
533
  display: block;
493
534
  color: hsl(0, 0%, 100%);
494
- font-size: var(--_fs-letter);
535
+ font-size: var(--_av-fs-letter);
495
536
  font-weight: bold;
496
537
  line-height: 1.4;
497
538
  text-align: center;
@@ -501,230 +542,204 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
501
542
  -ms-user-select: none;
502
543
  user-select: none;
503
544
  }
504
- .s-avatar .s-avatar--badge {
505
- position: absolute;
506
- right: -4px;
507
- bottom: -4px;
508
- -webkit-transform: scale(var(--_scale-badge));
509
- transform: scale(var(--_scale-badge));
510
- }
511
- .s-avatar .s-avatar--image {
512
- width: var(--_size);
513
- height: var(--_size);
514
- border-radius: var(--_br);
515
- display: block;
516
- }
517
545
  .s-badge,
518
546
  .s-topbar--notice {
519
- display: inline-flex;
547
+ --_ba-as: unset;
548
+ --_ba-bc: var(--bc-medium);
549
+ --_ba-bg: var(--black-050);
550
+ --_ba-fc: var(--black-700);
551
+ --_ba-fs: var(--fs-caption);
552
+ --_ba-g: 0.3em;
553
+ --_ba-lh: 2;
554
+ --_ba-px: var(--su6);
555
+ --_ba-py: 0;
556
+ --_ba-wmn: 0;
557
+ align-self: var(--_ba-as);
558
+ background-color: var(--_ba-bg);
559
+ border: var(--su-static1) solid var(--_ba-bc);
560
+ color: var(--_ba-fc);
561
+ font-size: var(--_ba-fs);
562
+ gap: var(--_ba-g);
563
+ line-height: var(--_ba-lh);
564
+ min-width: var(--_ba-wmn);
565
+ padding: var(--_ba-py) var(--_ba-px);
520
566
  align-items: center;
521
- justify-content: center;
522
- min-width: 0;
523
- padding: 0 var(--su6);
524
- border-width: 1px;
525
- border-style: solid;
526
567
  border-radius: var(--br-sm);
527
- font-size: var(--fs-caption);
568
+ display: inline-flex;
528
569
  font-weight: normal;
529
- line-height: 2;
570
+ justify-content: center;
530
571
  text-decoration: none;
531
572
  vertical-align: middle;
532
573
  white-space: nowrap;
533
- border-color: var(--bc-medium);
534
- background-color: var(--black-050);
535
- color: var(--black-700);
536
- }
537
- a.s-badge:hover {
538
- text-decoration: none;
539
- }
540
- .s-badge--image {
541
- display: inline-flex;
542
- align-self: center;
543
- margin-right: var(--su1);
544
- margin-left: calc((var(--su4) + var(--su1)) * -1);
545
- }
546
- .s-badge__icon {
547
- gap: 0.3em;
548
- }
549
- .s-badge__sm {
550
- min-width: 18px;
551
- align-self: flex-start;
552
- padding-right: var(--su4);
553
- padding-left: var(--su4);
554
- font-size: var(--fs-fine);
555
- line-height: 1.8;
556
- }
557
- .s-badge__xs {
558
- align-self: flex-start;
559
- padding-right: var(--su2);
560
- padding-left: var(--su2);
561
- font-size: var(--fs-fine);
562
- line-height: 1.5;
563
- }
564
- .s-badge__gold {
565
- border-color: var(--gold-darker);
566
- background-color: var(--gold-lighter);
567
- color: var(--black-700);
568
- }
569
- .s-badge__silver {
570
- border-color: var(--silver-darker);
571
- background-color: var(--silver-lighter);
572
- color: var(--black-700);
573
- }
574
- .s-badge__bronze {
575
- border-color: var(--bronze-darker);
576
- background-color: var(--bronze-lighter);
577
- color: var(--black-700);
578
574
  }
579
575
  body.theme-highcontrast .s-badge__gold,
580
576
  body.theme-highcontrast .s-badge__silver,
581
- body.theme-highcontrast .s-badge__bronze {
582
- border-color: currentColor;
583
- color: var(--black-900);
584
- }
585
- .s-badge__bounty {
586
- border-color: transparent;
587
- background-color: var(--blue-600);
588
- color: var(--white);
589
- }
590
- .s-badge__votes {
591
- border-color: var(--black-150);
592
- background-color: var(--white);
593
- color: var(--black-700);
594
- }
595
- body.theme-highcontrast .s-badge__votes {
596
- border-color: currentColor;
597
- }
598
- .s-badge__answered {
599
- border-color: transparent;
600
- background-color: var(--green-400);
601
- color: var(--white);
602
- }
603
- .s-badge__rep {
604
- border-color: var(--green-400);
605
- background-color: var(--white);
606
- color: var(--green-500);
607
- }
608
- body.theme-highcontrast .s-badge__rep {
609
- border-color: currentColor;
610
- }
611
- .s-badge__rep-down {
612
- border-color: var(--red-400);
613
- background-color: var(--white);
614
- color: var(--red-500);
615
- }
616
- body.theme-highcontrast .s-badge__rep-down {
617
- border-color: currentColor;
618
- }
619
- .s-badge__important {
620
- border-color: transparent;
621
- background-color: var(--red-600);
622
- color: var(--white);
623
- }
624
- .s-badge__admin {
625
- border-color: var(--theme-primary-200);
626
- background-color: var(--theme-primary-075);
627
- color: var(--theme-primary-800);
628
- }
629
- body.theme-highcontrast .s-badge__admin {
630
- border-color: currentColor;
631
- }
632
- .s-badge__moderator {
633
- border-color: var(--theme-secondary-200);
634
- background-color: var(--theme-secondary-075);
635
- color: var(--theme-secondary-800);
636
- }
637
- body.theme-highcontrast .s-badge__moderator {
638
- border-color: currentColor;
639
- }
640
- .s-badge__moderator:before {
641
- --s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
577
+ body.theme-highcontrast .s-badge__bronze,
578
+ body.theme-highcontrast .s-badge__rep,
579
+ body.theme-highcontrast .s-badge__rep-down,
580
+ body.theme-highcontrast .s-badge__votes,
581
+ body.theme-highcontrast .s-badge__admin,
582
+ body.theme-highcontrast .s-badge__moderator,
583
+ body.theme-highcontrast .s-badge__staff {
584
+ --_ba-bc: currentColor;
585
+ }
586
+ .s-badge.s-badge__xs,
587
+ .s-badge.s-badge__sm {
588
+ --_ba-as: flex-start;
589
+ --_ba-fs: var(--fs-fine);
590
+ }
591
+ .s-badge.s-badge__xs {
592
+ --_ba-lh: 1.5;
593
+ --_ba-px: var(--su2);
594
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
595
+ }
596
+ .s-badge.s-badge__sm {
597
+ --_ba-lh: 1.8;
598
+ --_ba-px: var(--su4);
599
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
600
+ }
601
+ .s-badge.s-badge__gold,
602
+ .s-badge.s-badge__silver,
603
+ .s-badge.s-badge__bronze {
604
+ --_ba-fc: var(--black-700);
605
+ }
606
+ body.theme-highcontrast .s-badge.s-badge__gold,
607
+ body.theme-highcontrast .s-badge.s-badge__silver,
608
+ body.theme-highcontrast .s-badge.s-badge__bronze {
609
+ --_ba-fc: var(--black-900);
610
+ }
611
+ .s-badge.s-badge__gold {
612
+ --_ba-bc: var(--gold-darker);
613
+ --_ba-bg: var(--gold-lighter);
614
+ }
615
+ .s-badge.s-badge__silver {
616
+ --_ba-bc: var(--silver-darker);
617
+ --_ba-bg: var(--silver-lighter);
618
+ }
619
+ .s-badge.s-badge__bronze {
620
+ --_ba-bc: var(--bronze-darker);
621
+ --_ba-bg: var(--bronze-lighter);
622
+ }
623
+ .s-badge.s-badge__answered,
624
+ .s-badge.s-badge__bounty,
625
+ .s-badge.s-badge__important {
626
+ --_ba-bc: transparent;
627
+ --_ba-fc: var(--white);
628
+ }
629
+ .s-badge.s-badge__rep,
630
+ .s-badge.s-badge__rep-down,
631
+ .s-badge.s-badge__votes {
632
+ --_ba-bg: var(--white);
633
+ }
634
+ .s-badge.s-badge__answered {
635
+ --_ba-bg: var(--green-400);
636
+ }
637
+ .s-badge.s-badge__bounty {
638
+ --_ba-bg: var(--blue-600);
639
+ }
640
+ .s-badge.s-badge__important {
641
+ --_ba-bg: var(--red-600);
642
+ }
643
+ .s-badge.s-badge__rep {
644
+ --_ba-bc: var(--green-400);
645
+ --_ba-fc: var(--green-500);
646
+ }
647
+ .s-badge.s-badge__rep-down {
648
+ --_ba-bc: var(--red-400);
649
+ --_ba-fc: var(--red-500);
650
+ }
651
+ .s-badge.s-badge__votes {
652
+ --_ba-bc: var(--black-150);
653
+ --_ba-fc: var(--black-700);
654
+ }
655
+ .s-badge.s-badge__admin {
656
+ --_ba-bc: var(--theme-primary-200);
657
+ --_ba-bg: var(--theme-primary-075);
658
+ --_ba-fc: var(--theme-primary-800);
659
+ }
660
+ .s-badge.s-badge__moderator {
661
+ --_ba-bc: var(--theme-secondary-200);
662
+ --_ba-bg: var(--theme-secondary-075);
663
+ --_ba-fc: var(--theme-secondary-800);
664
+ --_ba-g: calc(var(--su-static4) - var(--su-static1));
665
+ --_ba-before-h: calc(var(--su-static16) - var(--su-static2));
666
+ --_ba-before-icon: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
667
+ --_ba-before-mt: calc(var(--su-static1) * -1);
668
+ --_ba-before-w: var(--su-static12);
669
+ }
670
+ .s-badge.s-badge__moderator.s-badge__xs {
671
+ --_ba-before-h: calc(var(--su-static8) + var(--su-static1));
672
+ --_ba-before-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
673
+ --_ba-before-mt: 0;
674
+ --_ba-before-w: calc(var(--su-static8) - var(--su-static1));
675
+ }
676
+ .s-badge.s-badge__moderator.s-badge__sm {
677
+ --_ba-g: var(--su-static2);
678
+ --_ba-before-h: calc(var(--su-static12) - var(--su-static1));
679
+ --_ba-before-icon: url("data:image/svg+xml,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
680
+ --_ba-before-mt: 0;
681
+ --_ba-before-w: calc(var(--su-static8) + var(--su-static1));
682
+ }
683
+ .s-badge.s-badge__moderator:before {
684
+ height: var(--_ba-before-h);
685
+ margin-top: var(--_ba-before-mt);
686
+ width: var(--_ba-before-w);
642
687
  content: "";
643
688
  display: inline-block;
644
689
  background-color: currentColor;
645
- -webkit-mask: var(--s-badge-moderator-icon) no-repeat center;
646
- mask: var(--s-badge-moderator-icon) no-repeat center;
690
+ -webkit-mask: var(--_ba-before-icon) no-repeat center;
691
+ mask: var(--_ba-before-icon) no-repeat center;
647
692
  -webkit-mask-size: contain;
648
693
  mask-size: contain;
649
- width: 12px;
650
- height: 14px;
651
- margin-top: -1px;
652
- margin-right: 3px;
653
694
  }
654
- .s-badge__moderator.s-badge__sm:before {
655
- --s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
656
- width: 9px;
657
- height: 11px;
658
- margin-top: 0;
659
- margin-right: 2px;
695
+ .s-badge.s-badge__staff {
696
+ --_ba-bc: var(--orange-300);
697
+ --_ba-bg: var(--orange-100);
698
+ --_ba-fc: var(--orange-900);
660
699
  }
661
- .s-badge__moderator.s-badge__xs:before {
662
- --s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
663
- width: 7px;
664
- height: 9px;
665
- margin-top: 0;
700
+ .s-badge.s-badge__danger.s-badge__filled,
701
+ .s-badge.s-badge__muted.s-badge__filled {
702
+ --_ba-bc: transparent;
666
703
  }
667
- .s-badge__staff {
668
- border-color: var(--orange-300);
669
- background-color: var(--orange-100);
670
- color: var(--orange-900);
704
+ .s-badge.s-badge__danger {
705
+ --_ba-bc: var(--red-600);
706
+ --_ba-bg: var(--red-100);
707
+ --_ba-fc: var(--red-900);
671
708
  }
672
- body.theme-highcontrast .s-badge__staff {
673
- border-color: currentColor;
674
- }
675
- .s-badge__danger {
676
- color: var(--red-900);
677
- background-color: var(--red-100);
678
- border-color: var(--red-600);
679
- }
680
- .s-badge__danger.s-badge__filled {
681
- color: hsl(0, 0%, 100%);
682
- background-color: var(--red-500);
683
- border-color: transparent;
709
+ .s-badge.s-badge__danger.s-badge__filled {
710
+ --_ba-bg: var(--red-500);
711
+ --_ba-fc: hsl(0, 0%, 100%);
684
712
  }
685
- body.theme-highcontrast .s-badge__danger.s-badge__filled {
686
- color: var(--white);
713
+ body.theme-highcontrast .s-badge.s-badge__danger.s-badge__filled {
714
+ --_ba-fc: var(--white);
687
715
  }
688
- .s-badge__info {
689
- color: var(--blue-900);
690
- background-color: var(--blue-100);
691
- border-color: var(--blue-600);
716
+ .s-badge.s-badge__info {
717
+ --_ba-bc: var(--blue-600);
718
+ --_ba-bg: var(--blue-100);
719
+ --_ba-fc: var(--blue-900);
692
720
  }
693
- .s-badge__warning {
694
- color: var(--yellow-900);
695
- background-color: var(--yellow-100);
696
- border-color: var(--yellow-600);
697
- }
698
- .s-badge__muted {
699
- color: var(--black-900);
700
- background-color: var(--black-100);
701
- border-color: var(--black-600);
702
- }
703
- .s-badge__muted.s-badge__filled {
704
- color: var(--white);
705
- background-color: var(--black-700);
706
- border-color: transparent;
707
- }
708
- .s-award-bling {
709
- display: flex;
710
- align-items: center;
711
- color: inherit;
721
+ .s-badge.s-badge__warning {
722
+ --_ba-bc: var(--yellow-600);
723
+ --_ba-bg: var(--yellow-100);
724
+ --_ba-fc: var(--yellow-900);
712
725
  }
713
- .s-award-bling:before {
714
- content: "";
715
- margin-right: 4px;
716
- width: 8px;
717
- height: 8px;
718
- border-radius: 100%;
726
+ .s-badge.s-badge__muted {
727
+ --_ba-bc: var(--black-600);
728
+ --_ba-bg: var(--black-100);
729
+ --_ba-fc: var(--black-900);
719
730
  }
720
- .s-award-bling.s-award-bling__gold:before {
721
- background-color: var(--gold);
731
+ .s-badge.s-badge__muted.s-badge__filled {
732
+ --_ba-bg: var(--black-700);
733
+ --_ba-fc: var(--white);
722
734
  }
723
- .s-award-bling.s-award-bling__silver:before {
724
- background-color: var(--silver);
735
+ .s-badge .s-badge--image {
736
+ display: inline-flex;
737
+ align-self: center;
738
+ margin-right: var(--su1);
739
+ margin-left: calc((var(--su4) + var(--su1)) * -1);
725
740
  }
726
- .s-award-bling.s-award-bling__bronze:before {
727
- background-color: var(--bronze);
741
+ a.s-badge:hover {
742
+ text-decoration: none;
728
743
  }
729
744
  .s-empty-state {
730
745
  color: var(--fc-light);
@@ -740,37 +755,38 @@ body.theme-highcontrast .s-badge__danger.s-badge__filled {
740
755
  color: var(--fc-dark);
741
756
  }
742
757
  .s-breadcrumbs {
758
+ --_br-divider-px: var(--su4);
759
+ --_br-link-fc: var(--fc-light);
760
+ align-items: flex-start;
761
+ color: var(--black-200);
743
762
  display: flex;
744
763
  flex-wrap: wrap;
745
- align-items: start;
746
- color: var(--black-200);
747
764
  font-size: var(--fs-caption);
748
765
  }
766
+ @media (max-width: 640px) {
767
+ .s-breadcrumbs {
768
+ --_br-divider-px: var(--su2);
769
+ }
770
+ }
749
771
  .s-breadcrumbs .s-breadcrumbs--item {
772
+ align-items: center;
750
773
  display: flex;
751
774
  flex-wrap: nowrap;
752
- align-items: center;
753
- margin-top: var(--su2);
754
775
  margin-bottom: var(--su2);
776
+ margin-top: var(--su2);
755
777
  }
756
778
  .s-breadcrumbs .s-breadcrumbs--divider {
757
- margin-right: var(--su4);
758
- margin-left: var(--su4);
779
+ margin-left: var(--_br-divider-px);
780
+ margin-right: var(--_br-divider-px);
759
781
  }
760
782
  body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
761
783
  color: var(--fc-light);
762
784
  }
763
- @media (max-width: 640px) {
764
- .s-breadcrumbs .s-breadcrumbs--divider {
765
- margin-right: var(--su2);
766
- margin-left: var(--su2);
767
- }
768
- }
769
785
  .s-breadcrumbs .s-breadcrumbs--link {
770
- color: var(--fc-light);
786
+ color: var(--_br-link-fc);
771
787
  }
772
788
  .s-breadcrumbs .s-breadcrumbs--link:hover {
773
- color: var(--fc-medium);
789
+ --_br-link-fc: var(--fc-medium);
774
790
  }
775
791
  .s-btn-group {
776
792
  display: flex;
@@ -841,22 +857,23 @@ body.theme-highcontrast .s-btn-group .s-btn.is-selected .s-btn--number {
841
857
  border-bottom-left-radius: 0;
842
858
  }
843
859
  .s-card {
844
- padding: var(--su12);
845
- border: 1px solid var(--bc-medium);
846
- border-radius: var(--br-sm);
860
+ --_ca-bc: var(--bc-medium);
861
+ border: 1px solid var(--_ca-bc);
847
862
  background-color: var(--white);
863
+ border-radius: var(--br-sm);
864
+ padding: var(--su12);
848
865
  }
849
- .s-card p:last-of-type {
850
- margin-bottom: 0;
866
+ a.s-card {
867
+ text-decoration: none !important;
851
868
  }
852
- .s-card__muted {
853
- border-color: var(--bc-light);
869
+ .s-card.s-card__muted {
870
+ --_ca-bc: var(--bc-light);
854
871
  }
855
- .s-card__muted > * {
872
+ .s-card.s-card__muted > * {
856
873
  opacity: 0.65;
857
874
  }
858
- a.s-card {
859
- text-decoration: none !important;
875
+ .s-card p:last-of-type {
876
+ margin-bottom: 0;
860
877
  }
861
878
  pre.s-code-block {
862
879
  font-size: var(--fs-body1);
@@ -1619,10 +1636,10 @@ body.theme-highcontrast .is-readonly .s-input-icon {
1619
1636
  }
1620
1637
  }
1621
1638
  .s-label {
1622
- --_fs: var(--fs-body2);
1639
+ --_la-fs: var(--fs-body2);
1640
+ font-size: var(--_la-fs);
1623
1641
  color: var(--fc-dark);
1624
1642
  font-family: inherit;
1625
- font-size: var(--_fs);
1626
1643
  font-weight: 600;
1627
1644
  padding: 0 var(--su2);
1628
1645
  }
@@ -1641,124 +1658,119 @@ fieldset[disabled] .s-label .s-description,
1641
1658
  .is-readonly .s-label {
1642
1659
  cursor: not-allowed;
1643
1660
  }
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
1661
  .s-label.s-label__sm {
1652
- --_fs: var(--fs-caption);
1662
+ --_la-fs: var(--fs-caption);
1653
1663
  }
1654
1664
  .s-label.s-label__md {
1655
- --_fs: var(--fs-body3);
1665
+ --_la-fs: var(--fs-body3);
1656
1666
  }
1657
1667
  .s-label.s-label__lg {
1658
- --_fs: var(--fs-title);
1668
+ --_la-fs: var(--fs-title);
1659
1669
  }
1660
1670
  .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);
1671
+ --_la-fs: var(--fs-headline1);
1672
+ }
1673
+ .s-label .s-label--status {
1674
+ --_la-status-b: none;
1675
+ --_la-status-bg: var(--black-050);
1676
+ --_la-status-fc: var(--fc-medium);
1677
+ background-color: var(--_la-status-bg);
1678
+ border: var(--_la-status-b);
1679
+ color: var(--_la-status-fc);
1669
1680
  border-radius: 1000px;
1670
- color: var(--_fc);
1671
1681
  font-size: var(--fs-caption);
1672
1682
  font-weight: 400;
1673
1683
  margin-left: var(--su4);
1674
1684
  padding: var(--su2) var(--su8);
1675
1685
  vertical-align: text-bottom;
1676
1686
  }
1677
- body.theme-highcontrast .s-label--status {
1678
- --_b: var(--su-static1) solid currentColor;
1687
+ body.theme-highcontrast .s-label .s-label--status {
1688
+ --_la-status-b: var(--su-static1) solid currentColor;
1679
1689
  }
1680
- .s-label--status.s-label--status__required {
1681
- --_bg: var(--red-100);
1682
- --_fc: var(--red-700);
1690
+ .s-label .s-label--status__beta {
1691
+ --_la-status-bg: var(--blue-100);
1692
+ --_la-status-fc: var(--blue-700);
1693
+ }
1694
+ .s-label .s-label--status__new {
1695
+ --_la-status-bg: var(--green-100);
1696
+ --_la-status-fc: var(--green-700);
1683
1697
  }
1684
1698
  @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);
1699
+ body.theme-system .s-label .s-label--status__new {
1700
+ --_la-status-bg: var(--green-050);
1701
+ --_la-status-fc: var(--green-800);
1688
1702
  }
1689
1703
  }
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);
1704
+ body.theme-dark .s-label .s-label--status__new,
1705
+ .theme-dark__forced .s-label .s-label--status__new,
1706
+ body.theme-system .theme-dark__forced .s-label .s-label--status__new {
1707
+ --_la-status-bg: var(--green-050);
1708
+ --_la-status-fc: var(--green-800);
1695
1709
  }
1696
- .s-label--status.s-label--status__new {
1697
- --_bg: var(--green-100);
1698
- --_fc: var(--green-700);
1710
+ .s-label .s-label--status__required {
1711
+ --_la-status-bg: var(--red-100);
1712
+ --_la-status-fc: var(--red-700);
1699
1713
  }
1700
1714
  @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);
1715
+ body.theme-system .s-label .s-label--status__required {
1716
+ --_la-status-bg: var(--red-050);
1717
+ --_la-status-fc: var(--red-800);
1704
1718
  }
1705
1719
  }
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);
1720
+ body.theme-dark .s-label .s-label--status__required,
1721
+ .theme-dark__forced .s-label .s-label--status__required,
1722
+ body.theme-system .theme-dark__forced .s-label .s-label--status__required {
1723
+ --_la-status-bg: var(--red-050);
1724
+ --_la-status-fc: var(--red-800);
1711
1725
  }
1712
- .s-label--status.s-label--status__beta {
1713
- --_bg: var(--blue-100);
1714
- --_fc: var(--blue-700);
1726
+ .s-label .s-description,
1727
+ .s-label .s-input-message {
1728
+ font-weight: normal;
1729
+ margin-bottom: 0;
1730
+ margin-top: var(--su4);
1731
+ padding: 0;
1715
1732
  }
1716
1733
  .s-menu {
1734
+ --_me-divider-bg: var(--bc-light);
1735
+ --_me-label-btc: var(--bc-light);
1736
+ --_me-label-cursor: pointer;
1717
1737
  list-style: none;
1718
1738
  margin: 0;
1719
1739
  padding: 0;
1720
1740
  }
1721
- .s-menu .s-menu--title {
1722
- padding: var(--su8) var(--su12);
1723
- text-transform: uppercase;
1724
- font-size: var(--fs-fine);
1725
- color: var(--black-600);
1741
+ @media (prefers-color-scheme: dark) {
1742
+ body.theme-system .s-menu {
1743
+ --_me-divider-bg: var(--bc-lightest);
1744
+ --_me-label-btc: var(--bc-lightest);
1745
+ }
1726
1746
  }
1727
- .s-menu li + .s-menu--title {
1728
- margin-top: var(--su12);
1747
+ body.theme-dark .s-menu,
1748
+ .theme-dark__forced .s-menu,
1749
+ body.theme-system .theme-dark__forced .s-menu {
1750
+ --_me-divider-bg: var(--bc-lightest);
1751
+ --_me-label-btc: var(--bc-lightest);
1729
1752
  }
1730
1753
  .s-menu .s-menu--divider {
1754
+ background-color: var(--_me-divider-bg);
1755
+ height: var(--su-static1);
1731
1756
  margin: var(--su8) 0;
1732
- height: 1px;
1733
- background-color: var(--bc-light);
1734
- }
1735
- @media (prefers-color-scheme: dark) {
1736
- body.theme-system .s-menu .s-menu--divider {
1737
- background-color: var(--bc-lightest);
1738
- }
1739
- }
1740
- body.theme-dark .s-menu .s-menu--divider,
1741
- .theme-dark__forced .s-menu .s-menu--divider,
1742
- body.theme-system .theme-dark__forced .s-menu .s-menu--divider {
1743
- background-color: var(--bc-lightest);
1744
1757
  }
1745
1758
  .s-menu .s-menu--label {
1746
- cursor: pointer;
1759
+ cursor: var(--_me-label-cursor);
1760
+ border-top: 1px solid var(--_me-label-btc);
1747
1761
  padding: var(--su12);
1748
- border-top: 1px solid var(--bc-light);
1749
1762
  }
1750
- @media (prefers-color-scheme: dark) {
1751
- body.theme-system .s-menu .s-menu--label {
1752
- border-top-color: var(--bc-lightest);
1753
- }
1763
+ .s-menu .s-menu--label.is-disabled {
1764
+ --_me-label-cursor: not-allowed;
1754
1765
  }
1755
- body.theme-dark .s-menu .s-menu--label,
1756
- .theme-dark__forced .s-menu .s-menu--label,
1757
- body.theme-system .theme-dark__forced .s-menu .s-menu--label {
1758
- border-top-color: var(--bc-lightest);
1766
+ .s-menu .s-menu--title {
1767
+ color: var(--black-600);
1768
+ font-size: var(--fs-fine);
1769
+ padding: var(--su8) var(--su12);
1770
+ text-transform: uppercase;
1759
1771
  }
1760
- .s-menu .s-menu--label.is-disabled {
1761
- cursor: not-allowed;
1772
+ .s-menu li + .s-menu--title {
1773
+ margin-top: var(--su12);
1762
1774
  }
1763
1775
  .s-modal {
1764
1776
  display: flex;
@@ -1882,77 +1894,21 @@ body.theme-system .theme-dark__forced .s-modal--dialog {
1882
1894
  max-height: calc(100% - var(--su48));
1883
1895
  }
1884
1896
  .s-navigation {
1897
+ --_na-fd: row;
1898
+ --_na-fw: wrap;
1899
+ --_na-p: var(--su2) 0;
1900
+ --_na-gap: var(--su4);
1901
+ flex-direction: var(--_na-fd);
1902
+ flex-wrap: var(--_na-fw);
1903
+ gap: var(--_na-gap);
1904
+ padding: var(--_na-p);
1885
1905
  display: flex;
1886
- margin: calc(var(--su2) * -1);
1887
- padding: var(--su2) 0;
1888
- flex-wrap: wrap;
1889
1906
  list-style: none;
1890
- }
1891
- .s-navigation .s-navigation--item {
1892
- display: flex;
1893
- align-items: center;
1894
- padding: var(--su6) var(--su12);
1895
- position: relative;
1896
- border: none;
1897
- font: unset;
1898
- background: none;
1899
- box-shadow: none;
1900
- cursor: pointer;
1901
- user-select: auto;
1902
- border-radius: 1000px;
1903
- margin: var(--su2);
1904
- white-space: nowrap;
1905
- color: var(--black-600);
1906
- }
1907
- .s-navigation .s-navigation--item:hover,
1908
- .s-navigation .s-navigation--item:active {
1909
- background: var(--black-075);
1910
- color: var(--black-600);
1911
- }
1912
- body.theme-highcontrast .s-navigation .s-navigation--item:hover,
1913
- body.theme-highcontrast .s-navigation .s-navigation--item:active {
1914
- background: var(--black-600);
1915
- color: var(--black-100);
1916
- }
1917
- .s-navigation .s-navigation--item:focus:not(:focus-visible) {
1918
- outline: none;
1919
- box-shadow: none;
1920
- }
1921
- .s-navigation .s-navigation--item:focus-visible {
1922
- outline: none;
1923
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1924
- }
1925
- .s-navigation .s-navigation--item.is-selected {
1926
- background: var(--theme-primary-color);
1927
- color: var(--white);
1928
- }
1929
- .s-navigation .s-navigation--item.is-selected:hover,
1930
- .s-navigation .s-navigation--item.is-selected:active {
1931
- background: var(--theme-primary-600);
1932
- color: var(--white);
1933
- }
1934
- body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
1935
- text-decoration: none;
1936
- }
1937
- .s-navigation .s-navigation--item.s-navigation--item__dropdown {
1938
- padding-right: 2em;
1939
- }
1940
- .s-navigation .s-navigation--item.s-navigation--item__dropdown:after {
1941
- content: "";
1942
- position: absolute;
1943
- z-index: var(--zi-active);
1944
- top: calc(50% - 2px);
1945
- right: 0.9em;
1946
- border-style: solid;
1947
- border-width: var(--su-static4);
1948
- border-top-width: var(--su-static4);
1949
- border-bottom-width: 0;
1950
- border-color: currentColor transparent;
1951
- pointer-events: none;
1907
+ margin: 0;
1952
1908
  }
1953
1909
  .s-navigation.s-navigation__scroll {
1910
+ --_na-fw: nowrap;
1954
1911
  overflow-x: auto;
1955
- flex-wrap: nowrap;
1956
1912
  scrollbar-color: var(--scrollbar) transparent;
1957
1913
  }
1958
1914
  .s-navigation.s-navigation__scroll::-webkit-scrollbar {
@@ -1972,86 +1928,150 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
1972
1928
  background-color: transparent;
1973
1929
  border-color: transparent;
1974
1930
  }
1931
+ .s-navigation.s-navigation__sm .s-navigation--item {
1932
+ --_na-item-fs: var(--fs-caption);
1933
+ --_na-item-p: var(--su4) var(--su12);
1934
+ }
1975
1935
  .s-navigation.s-navigation__vertical {
1976
- flex-direction: column;
1977
- padding: 0;
1978
- margin: 0;
1936
+ --_na-fd: column;
1937
+ --_na-gap: 0;
1938
+ --_na-p: 0;
1979
1939
  }
1980
1940
  .s-navigation.s-navigation__vertical .s-navigation--item {
1981
- margin: 0;
1982
- white-space: normal;
1941
+ --_na-item-ws: normal;
1942
+ }
1943
+ .s-navigation.s-navigation__muted .s-navigation--item.is-selected {
1944
+ --_na-item-bg: var(--black-050);
1945
+ --_na-item-fc: var(--black-800);
1946
+ --_na-item-bg-hover: var(--_na-item-bg);
1947
+ --_na-item-fc-hover: var(--_na-item-fc);
1948
+ }
1949
+ body.theme-highcontrast .s-navigation.s-navigation__muted .s-navigation--item.is-selected {
1950
+ --_na-item-bg: var(--black-800);
1951
+ --_na-item-fc: var(--black-050);
1952
+ }
1953
+ .s-navigation .s-navigation--item {
1954
+ --_na-item-bg: none;
1955
+ --_na-item-fc: var(--black-600);
1956
+ --_na-item-fs: unset;
1957
+ --_na-item-p: var(--su6) var(--su12);
1958
+ --_na-item-py: var(--su12);
1959
+ --_na-item-ws: nowrap;
1960
+ --_na-item-bg-hover: var(--black-075);
1961
+ --_na-item-fc-hover: var(--_na-item-fc);
1962
+ background-color: var(--_na-item-bg);
1963
+ color: var(--_na-item-fc);
1964
+ font: unset;
1965
+ font-size: var(--_na-item-fs);
1966
+ padding: var(--_na-item-p);
1967
+ white-space: var(--_na-item-ws);
1968
+ align-items: center;
1969
+ border: none;
1970
+ border-radius: 1000px;
1971
+ box-shadow: none;
1972
+ cursor: pointer;
1973
+ display: flex;
1974
+ position: relative;
1975
+ user-select: auto;
1976
+ }
1977
+ body.theme-highcontrast .s-navigation .s-navigation--item {
1978
+ --_na-item-bg-hover: var(--black-600);
1979
+ --_na-item-fc-hover: var(--black-100);
1980
+ }
1981
+ .s-navigation .s-navigation--item.is-selected {
1982
+ --_na-item-bg: var(--theme-primary-color);
1983
+ --_na-item-fc: var(--white);
1984
+ --_na-item-bg-hover: var(--theme-primary-600);
1985
+ }
1986
+ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
1987
+ text-decoration: none;
1988
+ }
1989
+ .s-navigation .s-navigation--item__dropdown {
1990
+ padding-right: 2em;
1991
+ }
1992
+ .s-navigation .s-navigation--item__dropdown:after {
1993
+ border-style: solid;
1994
+ border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
1995
+ border-color: currentColor transparent;
1996
+ content: "";
1997
+ pointer-events: none;
1998
+ position: absolute;
1999
+ right: 0.9em;
2000
+ top: calc(50% - 2px);
2001
+ z-index: var(--zi-active);
2002
+ }
2003
+ .s-navigation .s-navigation--item:hover,
2004
+ .s-navigation .s-navigation--item:active {
2005
+ background-color: var(--_na-item-bg-hover);
2006
+ color: var(--_na-item-fc-hover);
2007
+ }
2008
+ .s-navigation .s-navigation--item:focus:not(:focus-visible) {
2009
+ outline: none;
2010
+ box-shadow: none;
2011
+ }
2012
+ .s-navigation .s-navigation--item:focus-visible {
2013
+ outline: none;
2014
+ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1983
2015
  }
1984
2016
  .s-navigation .s-navigation--title {
2017
+ --_na-title-mt: var(--su16);
2018
+ margin-top: var(--_na-title-mt);
1985
2019
  font-size: var(--fs-fine);
1986
2020
  font-weight: bold;
1987
- margin-top: var(--su16);
1988
2021
  padding: var(--su6) var(--su12);
1989
2022
  text-transform: uppercase;
1990
2023
  }
1991
2024
  .s-navigation .s-navigation--title:first-child {
1992
- margin-top: 0;
1993
- }
1994
- .s-navigation.s-navigation__muted .s-navigation--item.is-selected {
1995
- background: var(--black-050);
1996
- color: var(--black-800);
1997
- }
1998
- body.theme-highcontrast .s-navigation.s-navigation__muted .s-navigation--item.is-selected {
1999
- background: var(--black-800);
2000
- color: var(--black-050);
2001
- }
2002
- .s-navigation.s-navigation__sm .s-navigation--item {
2003
- padding: var(--su4) var(--su12);
2004
- font-size: var(--fs-caption);
2005
- }
2006
- .s-navigation.s-navigation__sm .s-navigation--item.s-navigation--item__dropdown {
2007
- padding-right: 2em;
2025
+ --_na-title-mt: 0;
2008
2026
  }
2009
2027
  .s-page-title {
2028
+ --_pt-ai: flex-end;
2029
+ --_pt-fd: row;
2030
+ --_pt-actions-ml: var(--su8);
2031
+ --_pt-actions-mt: unset;
2032
+ --_pt-breadcrums-mb: var(--su8);
2033
+ align-items: var(--_pt-ai);
2034
+ flex-direction: var(--_pt-fd);
2035
+ border-bottom: 1px solid var(--bc-medium);
2010
2036
  display: flex;
2011
- flex-direction: row;
2012
2037
  justify-content: space-between;
2013
- align-items: flex-end;
2014
- width: 100%;
2015
2038
  padding-bottom: var(--su16);
2016
- border-bottom: 1px solid var(--bc-medium);
2039
+ width: 100%;
2040
+ }
2041
+ @media (max-width: 640px) {
2042
+ .s-page-title {
2043
+ --_pt-breadcrums-mb: var(--su2);
2044
+ }
2017
2045
  }
2018
2046
  @media (max-width: 980px) {
2019
2047
  .s-page-title {
2020
- flex-direction: column;
2021
- align-items: flex-start;
2048
+ --_pt-ai: flex-start;
2049
+ --_pt-fd: column;
2050
+ --_pt-actions-ml: 0;
2051
+ --_pt-actions-mt: var(--su8);
2022
2052
  }
2023
2053
  }
2024
- .s-page-title .s-page-title--header {
2025
- margin: 0;
2026
- margin-bottom: 0;
2027
- font-size: var(--fs-headline1);
2028
- color: var(--fc-dark);
2029
- line-height: var(--lh-sm);
2030
- font-weight: normal;
2054
+ .s-page-title .s-page-title--actions {
2055
+ margin-left: var(--_pt-actions-ml);
2056
+ margin-top: var(--_pt-actions-mt);
2057
+ flex-shrink: 0;
2031
2058
  }
2032
2059
  .s-page-title .s-page-title--description {
2033
2060
  color: var(--fc-light);
2034
- margin-top: var(--su4);
2035
- margin-bottom: 0;
2036
2061
  font-size: var(--fs-body2);
2062
+ margin-bottom: 0;
2063
+ margin-top: var(--su4);
2037
2064
  }
2038
- .s-page-title .s-page-title--actions {
2039
- margin-left: var(--su8);
2040
- flex-shrink: 0;
2041
- }
2042
- @media (max-width: 980px) {
2043
- .s-page-title .s-page-title--actions {
2044
- margin-top: var(--su8);
2045
- margin-left: 0;
2046
- }
2065
+ .s-page-title .s-page-title--header {
2066
+ color: var(--fc-dark);
2067
+ font-size: var(--fs-headline1);
2068
+ font-weight: normal;
2069
+ line-height: var(--lh-sm);
2070
+ margin: 0;
2071
+ margin-bottom: 0;
2047
2072
  }
2048
2073
  .s-page-title .s-breadcrumbs {
2049
- margin-bottom: var(--su8);
2050
- }
2051
- @media (max-width: 640px) {
2052
- .s-page-title .s-breadcrumbs {
2053
- margin-bottom: var(--su2);
2054
- }
2074
+ margin-bottom: var(--_pt-breadcrums-mb);
2055
2075
  }
2056
2076
  .s-popover {
2057
2077
  display: none;
@@ -2525,45 +2545,32 @@ body.theme-system .theme-dark__forced .s-post-summary__deleted .s-badge__filled
2525
2545
  color: var(--white);
2526
2546
  background-color: var(--red-600);
2527
2547
  }
2528
- .s-post-summary__deleted .s-post-summary--meta-tags > a,
2529
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag,
2530
- .s-post-summary__deleted .s-post-summary--meta-tags > a:hover,
2531
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:hover,
2532
- .s-post-summary__deleted .s-post-summary--meta-tags > a:active,
2533
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:active,
2534
- .s-post-summary__deleted .s-post-summary--meta-tags > a:focus,
2535
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:focus {
2548
+ .s-post-summary__deleted .s-post-summary--meta-tags a,
2549
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag,
2550
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag,
2551
+ .s-post-summary__deleted .s-post-summary--meta-tags a:hover,
2552
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag:hover,
2553
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag:hover,
2554
+ .s-post-summary__deleted .s-post-summary--meta-tags a:active,
2555
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag:active,
2556
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag:active,
2557
+ .s-post-summary__deleted .s-post-summary--meta-tags a:focus,
2558
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag:focus,
2559
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag:focus {
2536
2560
  background-color: var(--black-075);
2537
2561
  }
2538
- .s-post-summary__ignored .s-post-summary--stats {
2539
- color: var(--black-500);
2540
- }
2541
- .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.is-warm,
2542
- .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.is-hot,
2543
- .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.is-supernova {
2544
- color: var(--black-500);
2545
- }
2546
- .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers {
2547
- color: var(--black-600);
2548
- border: 1px solid var(--black-075);
2549
- background-color: var(--black-075);
2550
- }
2551
- .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers .has-accepted-answer {
2552
- color: var(--black-600);
2553
- background-color: var(--black-075);
2554
- border-color: var(--black-075);
2555
- }
2556
- .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item__emphasized {
2557
- color: var(--black-500);
2558
- }
2559
- .s-post-summary__ignored .s-post-summary--meta-tags > a,
2560
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag,
2561
- .s-post-summary__ignored .s-post-summary--meta-tags > a:hover,
2562
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:hover,
2563
- .s-post-summary__ignored .s-post-summary--meta-tags > a:active,
2564
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:active,
2565
- .s-post-summary__ignored .s-post-summary--meta-tags > a:focus,
2566
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:focus {
2562
+ .s-post-summary__ignored .s-post-summary--meta-tags a,
2563
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag,
2564
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag,
2565
+ .s-post-summary__ignored .s-post-summary--meta-tags a:hover,
2566
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag:hover,
2567
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag:hover,
2568
+ .s-post-summary__ignored .s-post-summary--meta-tags a:active,
2569
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag:active,
2570
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag:active,
2571
+ .s-post-summary__ignored .s-post-summary--meta-tags a:focus,
2572
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag:focus,
2573
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus {
2567
2574
  background-color: var(--black-050);
2568
2575
  }
2569
2576
  .s-post-summary__ignored .s-post-summary--content-title > a,
@@ -2586,25 +2593,61 @@ body.theme-system .theme-dark__forced .s-post-summary__deleted .s-badge__filled
2586
2593
  .s-post-summary__deleted .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
2587
2594
  color: var(--black-600);
2588
2595
  }
2589
- .s-post-summary__ignored .s-post-summary--meta-tags > a,
2590
- .s-post-summary__deleted .s-post-summary--meta-tags > a,
2591
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag,
2592
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag,
2593
- .s-post-summary__ignored .s-post-summary--meta-tags > a:hover,
2594
- .s-post-summary__deleted .s-post-summary--meta-tags > a:hover,
2595
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:hover,
2596
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:hover,
2597
- .s-post-summary__ignored .s-post-summary--meta-tags > a:active,
2598
- .s-post-summary__deleted .s-post-summary--meta-tags > a:active,
2599
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:active,
2600
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:active,
2601
- .s-post-summary__ignored .s-post-summary--meta-tags > a:focus,
2602
- .s-post-summary__deleted .s-post-summary--meta-tags > a:focus,
2603
- .s-post-summary__ignored .s-post-summary--meta-tags > .s-tag:focus,
2604
- .s-post-summary__deleted .s-post-summary--meta-tags > .s-tag:focus {
2596
+ .s-post-summary__ignored .s-post-summary--meta-tags a,
2597
+ .s-post-summary__deleted .s-post-summary--meta-tags a,
2598
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag,
2599
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag,
2600
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag,
2601
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag,
2602
+ .s-post-summary__ignored .s-post-summary--meta-tags a:hover,
2603
+ .s-post-summary__deleted .s-post-summary--meta-tags a:hover,
2604
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag:hover,
2605
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag:hover,
2606
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag:hover,
2607
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag:hover,
2608
+ .s-post-summary__ignored .s-post-summary--meta-tags a:active,
2609
+ .s-post-summary__deleted .s-post-summary--meta-tags a:active,
2610
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag:active,
2611
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag:active,
2612
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag:active,
2613
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag:active,
2614
+ .s-post-summary__ignored .s-post-summary--meta-tags a:focus,
2615
+ .s-post-summary__deleted .s-post-summary--meta-tags a:focus,
2616
+ .s-post-summary__ignored .s-post-summary--meta-tags .post-tag:focus,
2617
+ .s-post-summary__deleted .s-post-summary--meta-tags .post-tag:focus,
2618
+ .s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus,
2619
+ .s-post-summary__deleted .s-post-summary--meta-tags .s-tag:focus {
2605
2620
  border-color: transparent;
2606
2621
  color: var(--black-600);
2607
2622
  }
2623
+ .s-post-summary__ignored .s-post-summary--stats,
2624
+ .s-post-summary__deleted .s-post-summary--stats {
2625
+ color: var(--black-500);
2626
+ }
2627
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.is-warm,
2628
+ .s-post-summary__deleted .s-post-summary--stats .s-post-summary--stats-item.is-warm,
2629
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.is-hot,
2630
+ .s-post-summary__deleted .s-post-summary--stats .s-post-summary--stats-item.is-hot,
2631
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.is-supernova,
2632
+ .s-post-summary__deleted .s-post-summary--stats .s-post-summary--stats-item.is-supernova {
2633
+ color: var(--black-500);
2634
+ }
2635
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers,
2636
+ .s-post-summary__deleted .s-post-summary--stats .s-post-summary--stats-item.has-answers {
2637
+ color: var(--black-500);
2638
+ background-color: transparent;
2639
+ border-color: var(--black-300);
2640
+ }
2641
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer,
2642
+ .s-post-summary__deleted .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer {
2643
+ color: var(--black-600);
2644
+ background-color: var(--black-075);
2645
+ border-color: transparent;
2646
+ }
2647
+ .s-post-summary__ignored .s-post-summary--stats .s-post-summary--stats-item__emphasized,
2648
+ .s-post-summary__deleted .s-post-summary--stats .s-post-summary--stats-item__emphasized {
2649
+ color: var(--black-500);
2650
+ }
2608
2651
  .s-post-summary__ignored .s-user-card .s-badge,
2609
2652
  .s-post-summary__deleted .s-user-card .s-badge {
2610
2653
  filter: grayscale(100%);
@@ -3753,13 +3796,20 @@ body.theme-highcontrast .s-toggle-switch input[type="checkbox"] + .s-toggle-swit
3753
3796
  -webkit-user-select: none;
3754
3797
  user-select: none;
3755
3798
  }
3756
- .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
3757
- background-color: var(--black-300);
3758
- color: hsl(0, 0%, 100%);
3759
- }
3760
- body.theme-highcontrast .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
3799
+ .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
3800
+ background-color: var(--black-500);
3761
3801
  color: var(--white);
3762
3802
  }
3803
+ @media (prefers-color-scheme: dark) {
3804
+ body.theme-system .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
3805
+ background-color: var(--black-350);
3806
+ }
3807
+ }
3808
+ body.theme-dark .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off,
3809
+ .theme-dark__forced .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off,
3810
+ body.theme-system .theme-dark__forced .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
3811
+ background-color: var(--black-350);
3812
+ }
3763
3813
  .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label:not(.s-toggle-switch--label-off) {
3764
3814
  background-color: var(--green-400);
3765
3815
  color: hsl(0, 0%, 100%);
@@ -4108,58 +4158,58 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
4108
4158
  }
4109
4159
  }
4110
4160
  .s-uploader {
4111
- --_bg: var(--black-025);
4112
- --_bg-focus: var(--black-050);
4113
- --_bg-bc: var(--black-150);
4114
- --_focus-ring-color: var(--focus-ring);
4115
- --_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");
4161
+ --_up-bg: var(--black-025);
4162
+ --_up-bg-focus: var(--black-050);
4163
+ --_up-bg-bc: var(--black-150);
4164
+ --_up-focus-ring-color: var(--focus-ring);
4165
+ --_up-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");
4116
4166
  position: relative;
4117
4167
  }
4118
4168
  body.theme-highcontrast .s-uploader {
4119
- --_bg-bc-hc: var(--black-400);
4169
+ --_up-bg-bc-hc: var(--black-400);
4120
4170
  }
4121
4171
  .s-uploader.is-active {
4122
- --_bg: var(--black-050);
4123
- --_bg-bc: var(--black-200);
4172
+ --_up-bg: var(--black-050);
4173
+ --_up-bg-bc: var(--black-200);
4124
4174
  }
4125
4175
  .s-uploader.is-disabled {
4126
4176
  opacity: var(--_o-disabled-static);
4127
4177
  }
4128
4178
  .s-uploader.has-error {
4129
- --_bg: var(--red-050);
4130
- --_bg-focus: var(--red-100);
4131
- --_bg-bc: var(--red-400);
4132
- --_bg-bc-hc-state: var(--red-400);
4133
- --_focus-ring-color: var(--focus-ring-error);
4134
- --_link-fc: var(--red-900);
4179
+ --_up-bg: var(--red-050);
4180
+ --_up-bg-focus: var(--red-100);
4181
+ --_up-bg-bc: var(--red-400);
4182
+ --_up-bg-bc-hc-state: var(--red-400);
4183
+ --_up-focus-ring-color: var(--focus-ring-error);
4184
+ --_up-link-fc: var(--red-900);
4135
4185
  }
4136
4186
  .s-uploader.has-success {
4137
- --_bg: var(--green-025);
4138
- --_bg-focus: var(--green-050);
4139
- --_bg-bc: var(--green-400);
4140
- --_bg-bc-hc-state: var(--green-400);
4141
- --_focus-ring-color: var(--focus-ring-success);
4142
- --_link-fc: var(--green-900);
4187
+ --_up-bg: var(--green-025);
4188
+ --_up-bg-focus: var(--green-050);
4189
+ --_up-bg-bc: var(--green-400);
4190
+ --_up-bg-bc-hc-state: var(--green-400);
4191
+ --_up-focus-ring-color: var(--focus-ring-success);
4192
+ --_up-link-fc: var(--green-900);
4143
4193
  }
4144
4194
  .s-uploader.has-warning {
4145
- --_bg: var(--yellow-050);
4146
- --_bg-focus: var(--yellow-100);
4147
- --_bg-bc: var(--yellow-400);
4148
- --_bg-bc-hc-state: var(--yellow-400);
4149
- --_focus-ring-color: var(--focus-ring-warning);
4150
- --_link-fc: var(--yellow-900);
4195
+ --_up-bg: var(--yellow-050);
4196
+ --_up-bg-focus: var(--yellow-100);
4197
+ --_up-bg-bc: var(--yellow-400);
4198
+ --_up-bg-bc-hc-state: var(--yellow-400);
4199
+ --_up-focus-ring-color: var(--focus-ring-warning);
4200
+ --_up-link-fc: var(--yellow-900);
4151
4201
  }
4152
4202
  .s-uploader.has-error .s-link,
4153
4203
  .s-uploader.has-success .s-link,
4154
4204
  .s-uploader.has-warning .s-link {
4155
- color: var(--_link-fc);
4205
+ color: var(--_up-link-fc);
4156
4206
  }
4157
4207
  .s-uploader input[type="file"]::file-selector-button {
4158
4208
  cursor: pointer;
4159
4209
  }
4160
4210
  .s-uploader .s-uploader--container {
4161
4211
  align-items: center;
4162
- background-color: var(--_bg);
4212
+ background-color: var(--_up-bg);
4163
4213
  border-radius: var(--br-lg);
4164
4214
  display: flex;
4165
4215
  flex-direction: column;
@@ -4170,9 +4220,9 @@ body.theme-highcontrast .s-uploader {
4170
4220
  text-align: center;
4171
4221
  }
4172
4222
  .s-uploader .s-uploader--container:before {
4173
- -webkit-mask-image: var(--_bg-b-image);
4174
- mask-image: var(--_bg-b-image);
4175
- background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
4223
+ -webkit-mask-image: var(--_up-bg-b-image);
4224
+ mask-image: var(--_up-bg-b-image);
4225
+ background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
4176
4226
  content: '';
4177
4227
  border-radius: var(--br-lg);
4178
4228
  display: block;
@@ -4189,8 +4239,8 @@ body.theme-highcontrast .s-uploader {
4189
4239
  z-index: var(--zi-selected);
4190
4240
  }
4191
4241
  .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
4192
- background-color: var(--_bg-focus);
4193
- box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
4242
+ background-color: var(--_up-bg-focus);
4243
+ box-shadow: 0 0 0 var(--su-static4) var(--_up-focus-ring-color);
4194
4244
  }
4195
4245
  .s-uploader .s-uploader--preview {
4196
4246
  max-width: 100%;
@@ -4280,11 +4330,14 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
4280
4330
  background-color: var(--theme-secondary-050);
4281
4331
  border-radius: var(--br-md);
4282
4332
  }
4333
+ .s-user-card.s-user-card__highlighted .s-user-card--time {
4334
+ color: var(--black-600);
4335
+ }
4283
4336
  .s-user-card.s-user-card__highlighted .s-user-card--type {
4284
4337
  color: var(--black-700);
4285
4338
  }
4286
4339
  .s-user-card.s-user-card__full {
4287
- align-items: start;
4340
+ align-items: flex-start;
4288
4341
  }
4289
4342
  .s-user-card.s-user-card__full .s-user-card--link {
4290
4343
  font-size: var(--fs-body2);
@@ -11295,40 +11348,162 @@ body.theme-system .theme-dark__forced .d\:bg-theme-secondary-025 {
11295
11348
  flex-grow: 5;
11296
11349
  }
11297
11350
  .g0 {
11298
- gap: 0;
11351
+ --_gap-x: 0;
11352
+ --_gap-y: 0;
11299
11353
  }
11300
11354
  .g1 {
11301
- gap: var(--su1);
11355
+ --_gap-x: var(--su1);
11356
+ --_gap-y: var(--su1);
11302
11357
  }
11303
11358
  .g2 {
11304
- gap: var(--su2);
11359
+ --_gap-x: var(--su2);
11360
+ --_gap-y: var(--su2);
11305
11361
  }
11306
11362
  .g4 {
11307
- gap: var(--su4);
11363
+ --_gap-x: var(--su4);
11364
+ --_gap-y: var(--su4);
11308
11365
  }
11309
11366
  .g6 {
11310
- gap: var(--su6);
11367
+ --_gap-x: var(--su6);
11368
+ --_gap-y: var(--su6);
11311
11369
  }
11312
11370
  .g8 {
11313
- gap: var(--su8);
11371
+ --_gap-x: var(--su8);
11372
+ --_gap-y: var(--su8);
11314
11373
  }
11315
11374
  .g12 {
11316
- gap: var(--su12);
11375
+ --_gap-x: var(--su12);
11376
+ --_gap-y: var(--su12);
11317
11377
  }
11318
11378
  .g16 {
11319
- gap: var(--su16);
11379
+ --_gap-x: var(--su16);
11380
+ --_gap-y: var(--su16);
11320
11381
  }
11321
11382
  .g24 {
11322
- gap: var(--su24);
11383
+ --_gap-x: var(--su24);
11384
+ --_gap-y: var(--su24);
11323
11385
  }
11324
11386
  .g32 {
11325
- gap: var(--su32);
11387
+ --_gap-x: var(--su32);
11388
+ --_gap-y: var(--su32);
11326
11389
  }
11327
11390
  .g48 {
11328
- gap: var(--su48);
11391
+ --_gap-x: var(--su48);
11392
+ --_gap-y: var(--su48);
11329
11393
  }
11330
11394
  .g64 {
11331
- gap: var(--su64);
11395
+ --_gap-x: var(--su64);
11396
+ --_gap-y: var(--su64);
11397
+ }
11398
+ .gx0 {
11399
+ --_gap-x: 0;
11400
+ }
11401
+ .gx1 {
11402
+ --_gap-x: var(--su1);
11403
+ }
11404
+ .gx2 {
11405
+ --_gap-x: var(--su2);
11406
+ }
11407
+ .gx4 {
11408
+ --_gap-x: var(--su4);
11409
+ }
11410
+ .gx6 {
11411
+ --_gap-x: var(--su6);
11412
+ }
11413
+ .gx8 {
11414
+ --_gap-x: var(--su8);
11415
+ }
11416
+ .gx12 {
11417
+ --_gap-x: var(--su12);
11418
+ }
11419
+ .gx16 {
11420
+ --_gap-x: var(--su16);
11421
+ }
11422
+ .gx24 {
11423
+ --_gap-x: var(--su24);
11424
+ }
11425
+ .gx32 {
11426
+ --_gap-x: var(--su32);
11427
+ }
11428
+ .gx48 {
11429
+ --_gap-x: var(--su48);
11430
+ }
11431
+ .gx64 {
11432
+ --_gap-x: var(--su64);
11433
+ }
11434
+ .gy0 {
11435
+ --_gap-y: 0;
11436
+ }
11437
+ .gy1 {
11438
+ --_gap-y: var(--su1);
11439
+ }
11440
+ .gy2 {
11441
+ --_gap-y: var(--su2);
11442
+ }
11443
+ .gy4 {
11444
+ --_gap-y: var(--su4);
11445
+ }
11446
+ .gy6 {
11447
+ --_gap-y: var(--su6);
11448
+ }
11449
+ .gy8 {
11450
+ --_gap-y: var(--su8);
11451
+ }
11452
+ .gy12 {
11453
+ --_gap-y: var(--su12);
11454
+ }
11455
+ .gy16 {
11456
+ --_gap-y: var(--su16);
11457
+ }
11458
+ .gy24 {
11459
+ --_gap-y: var(--su24);
11460
+ }
11461
+ .gy32 {
11462
+ --_gap-y: var(--su32);
11463
+ }
11464
+ .gy48 {
11465
+ --_gap-y: var(--su48);
11466
+ }
11467
+ .gy64 {
11468
+ --_gap-y: var(--su64);
11469
+ }
11470
+ .gx0,
11471
+ .gx1,
11472
+ .gx2,
11473
+ .gx4,
11474
+ .gx6,
11475
+ .gx8,
11476
+ .gx12,
11477
+ .gx16,
11478
+ .gx24,
11479
+ .gx32,
11480
+ .gx48,
11481
+ .gx64,
11482
+ .gy0,
11483
+ .gy1,
11484
+ .gy2,
11485
+ .gy4,
11486
+ .gy6,
11487
+ .gy8,
11488
+ .gy12,
11489
+ .gy16,
11490
+ .gy24,
11491
+ .gy32,
11492
+ .gy48,
11493
+ .gy64,
11494
+ .g0,
11495
+ .g1,
11496
+ .g2,
11497
+ .g4,
11498
+ .g6,
11499
+ .g8,
11500
+ .g12,
11501
+ .g16,
11502
+ .g24,
11503
+ .g32,
11504
+ .g48,
11505
+ .g64 {
11506
+ gap: var(--_gap-x, 0) var(--_gap-y, 0);
11332
11507
  }
11333
11508
  .g-af-dense {
11334
11509
  grid-auto-flow: dense;
@@ -14654,40 +14829,124 @@ ol {
14654
14829
  flex: 1 auto !important;
14655
14830
  }
14656
14831
  .lg\:g0 {
14657
- gap: 0;
14832
+ --_gap-x: 0;
14833
+ --_gap-y: 0;
14658
14834
  }
14659
14835
  .lg\:g1 {
14660
- gap: var(--su1);
14836
+ --_gap-x: var(--su1);
14837
+ --_gap-y: var(--su1);
14661
14838
  }
14662
14839
  .lg\:g2 {
14663
- gap: var(--su2);
14840
+ --_gap-x: var(--su2);
14841
+ --_gap-y: var(--su2);
14664
14842
  }
14665
14843
  .lg\:g4 {
14666
- gap: var(--su4);
14844
+ --_gap-x: var(--su4);
14845
+ --_gap-y: var(--su4);
14667
14846
  }
14668
14847
  .lg\:g6 {
14669
- gap: var(--su6);
14848
+ --_gap-x: var(--su6);
14849
+ --_gap-y: var(--su6);
14670
14850
  }
14671
14851
  .lg\:g8 {
14672
- gap: var(--su8);
14852
+ --_gap-x: var(--su8);
14853
+ --_gap-y: var(--su8);
14673
14854
  }
14674
14855
  .lg\:g12 {
14675
- gap: var(--su12);
14856
+ --_gap-x: var(--su12);
14857
+ --_gap-y: var(--su12);
14676
14858
  }
14677
14859
  .lg\:g16 {
14678
- gap: var(--su16);
14860
+ --_gap-x: var(--su16);
14861
+ --_gap-y: var(--su16);
14679
14862
  }
14680
14863
  .lg\:g24 {
14681
- gap: var(--su24);
14864
+ --_gap-x: var(--su24);
14865
+ --_gap-y: var(--su24);
14682
14866
  }
14683
14867
  .lg\:g32 {
14684
- gap: var(--su32);
14868
+ --_gap-x: var(--su32);
14869
+ --_gap-y: var(--su32);
14685
14870
  }
14686
14871
  .lg\:g48 {
14687
- gap: var(--su48);
14872
+ --_gap-x: var(--su48);
14873
+ --_gap-y: var(--su48);
14688
14874
  }
14689
14875
  .lg\:g64 {
14690
- gap: var(--su64);
14876
+ --_gap-x: var(--su64);
14877
+ --_gap-y: var(--su64);
14878
+ }
14879
+ .lg\:gx0 {
14880
+ --_gap-x: 0;
14881
+ }
14882
+ .lg\:gx1 {
14883
+ --_gap-x: var(--su1);
14884
+ }
14885
+ .lg\:gx2 {
14886
+ --_gap-x: var(--su2);
14887
+ }
14888
+ .lg\:gx4 {
14889
+ --_gap-x: var(--su4);
14890
+ }
14891
+ .lg\:gx6 {
14892
+ --_gap-x: var(--su6);
14893
+ }
14894
+ .lg\:gx8 {
14895
+ --_gap-x: var(--su8);
14896
+ }
14897
+ .lg\:gx12 {
14898
+ --_gap-x: var(--su12);
14899
+ }
14900
+ .lg\:gx16 {
14901
+ --_gap-x: var(--su16);
14902
+ }
14903
+ .lg\:gx24 {
14904
+ --_gap-x: var(--su24);
14905
+ }
14906
+ .lg\:gx32 {
14907
+ --_gap-x: var(--su32);
14908
+ }
14909
+ .lg\:gx48 {
14910
+ --_gap-x: var(--su48);
14911
+ }
14912
+ .lg\:gx64 {
14913
+ --_gap-x: var(--su64);
14914
+ }
14915
+ .lg\:gy0 {
14916
+ --_gap-y: 0;
14917
+ }
14918
+ .lg\:gy1 {
14919
+ --_gap-y: var(--su1);
14920
+ }
14921
+ .lg\:gy2 {
14922
+ --_gap-y: var(--su2);
14923
+ }
14924
+ .lg\:gy4 {
14925
+ --_gap-y: var(--su4);
14926
+ }
14927
+ .lg\:gy6 {
14928
+ --_gap-y: var(--su6);
14929
+ }
14930
+ .lg\:gy8 {
14931
+ --_gap-y: var(--su8);
14932
+ }
14933
+ .lg\:gy12 {
14934
+ --_gap-y: var(--su12);
14935
+ }
14936
+ .lg\:gy16 {
14937
+ --_gap-y: var(--su16);
14938
+ }
14939
+ .lg\:gy24 {
14940
+ --_gap-y: var(--su24);
14941
+ }
14942
+ .lg\:gy32 {
14943
+ --_gap-y: var(--su32);
14944
+ }
14945
+ .lg\:gy48 {
14946
+ --_gap-y: var(--su48);
14947
+ }
14948
+ .lg\:gy64 {
14949
+ --_gap-y: var(--su64);
14691
14950
  }
14692
14951
  .lg\:g-af-dense {
14693
14952
  grid-auto-flow: dense;
@@ -16224,40 +16483,124 @@ ol {
16224
16483
  flex: 1 auto !important;
16225
16484
  }
16226
16485
  .md\:g0 {
16227
- gap: 0;
16486
+ --_gap-x: 0;
16487
+ --_gap-y: 0;
16228
16488
  }
16229
16489
  .md\:g1 {
16230
- gap: var(--su1);
16490
+ --_gap-x: var(--su1);
16491
+ --_gap-y: var(--su1);
16231
16492
  }
16232
16493
  .md\:g2 {
16233
- gap: var(--su2);
16494
+ --_gap-x: var(--su2);
16495
+ --_gap-y: var(--su2);
16234
16496
  }
16235
16497
  .md\:g4 {
16236
- gap: var(--su4);
16498
+ --_gap-x: var(--su4);
16499
+ --_gap-y: var(--su4);
16237
16500
  }
16238
16501
  .md\:g6 {
16239
- gap: var(--su6);
16502
+ --_gap-x: var(--su6);
16503
+ --_gap-y: var(--su6);
16240
16504
  }
16241
16505
  .md\:g8 {
16242
- gap: var(--su8);
16506
+ --_gap-x: var(--su8);
16507
+ --_gap-y: var(--su8);
16243
16508
  }
16244
16509
  .md\:g12 {
16245
- gap: var(--su12);
16510
+ --_gap-x: var(--su12);
16511
+ --_gap-y: var(--su12);
16246
16512
  }
16247
16513
  .md\:g16 {
16248
- gap: var(--su16);
16514
+ --_gap-x: var(--su16);
16515
+ --_gap-y: var(--su16);
16249
16516
  }
16250
16517
  .md\:g24 {
16251
- gap: var(--su24);
16518
+ --_gap-x: var(--su24);
16519
+ --_gap-y: var(--su24);
16252
16520
  }
16253
16521
  .md\:g32 {
16254
- gap: var(--su32);
16522
+ --_gap-x: var(--su32);
16523
+ --_gap-y: var(--su32);
16255
16524
  }
16256
16525
  .md\:g48 {
16257
- gap: var(--su48);
16526
+ --_gap-x: var(--su48);
16527
+ --_gap-y: var(--su48);
16258
16528
  }
16259
16529
  .md\:g64 {
16260
- gap: var(--su64);
16530
+ --_gap-x: var(--su64);
16531
+ --_gap-y: var(--su64);
16532
+ }
16533
+ .md\:gx0 {
16534
+ --_gap-x: 0;
16535
+ }
16536
+ .md\:gx1 {
16537
+ --_gap-x: var(--su1);
16538
+ }
16539
+ .md\:gx2 {
16540
+ --_gap-x: var(--su2);
16541
+ }
16542
+ .md\:gx4 {
16543
+ --_gap-x: var(--su4);
16544
+ }
16545
+ .md\:gx6 {
16546
+ --_gap-x: var(--su6);
16547
+ }
16548
+ .md\:gx8 {
16549
+ --_gap-x: var(--su8);
16550
+ }
16551
+ .md\:gx12 {
16552
+ --_gap-x: var(--su12);
16553
+ }
16554
+ .md\:gx16 {
16555
+ --_gap-x: var(--su16);
16556
+ }
16557
+ .md\:gx24 {
16558
+ --_gap-x: var(--su24);
16559
+ }
16560
+ .md\:gx32 {
16561
+ --_gap-x: var(--su32);
16562
+ }
16563
+ .md\:gx48 {
16564
+ --_gap-x: var(--su48);
16565
+ }
16566
+ .md\:gx64 {
16567
+ --_gap-x: var(--su64);
16568
+ }
16569
+ .md\:gy0 {
16570
+ --_gap-y: 0;
16571
+ }
16572
+ .md\:gy1 {
16573
+ --_gap-y: var(--su1);
16574
+ }
16575
+ .md\:gy2 {
16576
+ --_gap-y: var(--su2);
16577
+ }
16578
+ .md\:gy4 {
16579
+ --_gap-y: var(--su4);
16580
+ }
16581
+ .md\:gy6 {
16582
+ --_gap-y: var(--su6);
16583
+ }
16584
+ .md\:gy8 {
16585
+ --_gap-y: var(--su8);
16586
+ }
16587
+ .md\:gy12 {
16588
+ --_gap-y: var(--su12);
16589
+ }
16590
+ .md\:gy16 {
16591
+ --_gap-y: var(--su16);
16592
+ }
16593
+ .md\:gy24 {
16594
+ --_gap-y: var(--su24);
16595
+ }
16596
+ .md\:gy32 {
16597
+ --_gap-y: var(--su32);
16598
+ }
16599
+ .md\:gy48 {
16600
+ --_gap-y: var(--su48);
16601
+ }
16602
+ .md\:gy64 {
16603
+ --_gap-y: var(--su64);
16261
16604
  }
16262
16605
  .md\:g-af-dense {
16263
16606
  grid-auto-flow: dense;
@@ -17794,40 +18137,124 @@ ol {
17794
18137
  flex: 1 auto !important;
17795
18138
  }
17796
18139
  .sm\:g0 {
17797
- gap: 0;
18140
+ --_gap-x: 0;
18141
+ --_gap-y: 0;
17798
18142
  }
17799
18143
  .sm\:g1 {
17800
- gap: var(--su1);
18144
+ --_gap-x: var(--su1);
18145
+ --_gap-y: var(--su1);
17801
18146
  }
17802
18147
  .sm\:g2 {
17803
- gap: var(--su2);
18148
+ --_gap-x: var(--su2);
18149
+ --_gap-y: var(--su2);
17804
18150
  }
17805
18151
  .sm\:g4 {
17806
- gap: var(--su4);
18152
+ --_gap-x: var(--su4);
18153
+ --_gap-y: var(--su4);
17807
18154
  }
17808
18155
  .sm\:g6 {
17809
- gap: var(--su6);
18156
+ --_gap-x: var(--su6);
18157
+ --_gap-y: var(--su6);
17810
18158
  }
17811
18159
  .sm\:g8 {
17812
- gap: var(--su8);
18160
+ --_gap-x: var(--su8);
18161
+ --_gap-y: var(--su8);
17813
18162
  }
17814
18163
  .sm\:g12 {
17815
- gap: var(--su12);
18164
+ --_gap-x: var(--su12);
18165
+ --_gap-y: var(--su12);
17816
18166
  }
17817
18167
  .sm\:g16 {
17818
- gap: var(--su16);
18168
+ --_gap-x: var(--su16);
18169
+ --_gap-y: var(--su16);
17819
18170
  }
17820
18171
  .sm\:g24 {
17821
- gap: var(--su24);
18172
+ --_gap-x: var(--su24);
18173
+ --_gap-y: var(--su24);
17822
18174
  }
17823
18175
  .sm\:g32 {
17824
- gap: var(--su32);
18176
+ --_gap-x: var(--su32);
18177
+ --_gap-y: var(--su32);
17825
18178
  }
17826
18179
  .sm\:g48 {
17827
- gap: var(--su48);
18180
+ --_gap-x: var(--su48);
18181
+ --_gap-y: var(--su48);
17828
18182
  }
17829
18183
  .sm\:g64 {
17830
- gap: var(--su64);
18184
+ --_gap-x: var(--su64);
18185
+ --_gap-y: var(--su64);
18186
+ }
18187
+ .sm\:gx0 {
18188
+ --_gap-x: 0;
18189
+ }
18190
+ .sm\:gx1 {
18191
+ --_gap-x: var(--su1);
18192
+ }
18193
+ .sm\:gx2 {
18194
+ --_gap-x: var(--su2);
18195
+ }
18196
+ .sm\:gx4 {
18197
+ --_gap-x: var(--su4);
18198
+ }
18199
+ .sm\:gx6 {
18200
+ --_gap-x: var(--su6);
18201
+ }
18202
+ .sm\:gx8 {
18203
+ --_gap-x: var(--su8);
18204
+ }
18205
+ .sm\:gx12 {
18206
+ --_gap-x: var(--su12);
18207
+ }
18208
+ .sm\:gx16 {
18209
+ --_gap-x: var(--su16);
18210
+ }
18211
+ .sm\:gx24 {
18212
+ --_gap-x: var(--su24);
18213
+ }
18214
+ .sm\:gx32 {
18215
+ --_gap-x: var(--su32);
18216
+ }
18217
+ .sm\:gx48 {
18218
+ --_gap-x: var(--su48);
18219
+ }
18220
+ .sm\:gx64 {
18221
+ --_gap-x: var(--su64);
18222
+ }
18223
+ .sm\:gy0 {
18224
+ --_gap-y: 0;
18225
+ }
18226
+ .sm\:gy1 {
18227
+ --_gap-y: var(--su1);
18228
+ }
18229
+ .sm\:gy2 {
18230
+ --_gap-y: var(--su2);
18231
+ }
18232
+ .sm\:gy4 {
18233
+ --_gap-y: var(--su4);
18234
+ }
18235
+ .sm\:gy6 {
18236
+ --_gap-y: var(--su6);
18237
+ }
18238
+ .sm\:gy8 {
18239
+ --_gap-y: var(--su8);
18240
+ }
18241
+ .sm\:gy12 {
18242
+ --_gap-y: var(--su12);
18243
+ }
18244
+ .sm\:gy16 {
18245
+ --_gap-y: var(--su16);
18246
+ }
18247
+ .sm\:gy24 {
18248
+ --_gap-y: var(--su24);
18249
+ }
18250
+ .sm\:gy32 {
18251
+ --_gap-y: var(--su32);
18252
+ }
18253
+ .sm\:gy48 {
18254
+ --_gap-y: var(--su48);
18255
+ }
18256
+ .sm\:gy64 {
18257
+ --_gap-y: var(--su64);
17831
18258
  }
17832
18259
  .sm\:g-af-dense {
17833
18260
  grid-auto-flow: dense;
@@ -19297,7 +19724,8 @@ button[type="reset"] .s-btn {
19297
19724
  outline: none;
19298
19725
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
19299
19726
  }
19300
- .s-btn[disabled] {
19727
+ .s-btn[disabled],
19728
+ .s-btn[aria-disabled="true"] {
19301
19729
  opacity: var(--_o-disabled-static);
19302
19730
  pointer-events: none;
19303
19731
  box-shadow: none !important;
@@ -19827,7 +20255,7 @@ body.theme-highcontrast .s-btn__link {
19827
20255
  .s-btn__link:hover,
19828
20256
  .s-btn__link:active,
19829
20257
  .s-btn__link:focus,
19830
- .s-btn__link[disabled] {
20258
+ .s-btn__link[disabled] .s-btn__link[aria-disabled="true"] {
19831
20259
  background: none;
19832
20260
  box-shadow: none;
19833
20261
  }
@@ -20170,7 +20598,7 @@ button.s-link:focus {
20170
20598
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
20171
20599
  }
20172
20600
  .s-block-link.is-selected {
20173
- --_block-bs: inset var(--_block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
20601
+ --_li-block-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
20174
20602
  color: var(--black-800);
20175
20603
  font-weight: bold;
20176
20604
  background-color: var(--black-050);
@@ -20186,11 +20614,11 @@ body.theme-system .theme-dark__forced .s-block-link.is-selected {
20186
20614
  background-color: var(--black-025);
20187
20615
  }
20188
20616
  .s-block-link.is-selected.s-block-link__right {
20189
- --_block-bs-offset-x: -3px;
20617
+ --_li-block-bs-offset-x: -3px;
20190
20618
  }
20191
20619
  .s-block-link.is-selected.s-block-link__left,
20192
20620
  .s-block-link.is-selected.s-block-link__right {
20193
- box-shadow: var(--_block-bs);
20621
+ box-shadow: var(--_li-block-bs);
20194
20622
  }
20195
20623
  .s-block-link.is-selected.s-block-link__left:focus:not(:focus-visible),
20196
20624
  .s-block-link.is-selected.s-block-link__right:focus:not(:focus-visible),
@@ -20200,7 +20628,7 @@ body.theme-system .theme-dark__forced .s-block-link.is-selected {
20200
20628
  }
20201
20629
  .s-block-link.is-selected.s-block-link__left:focus-visible,
20202
20630
  .s-block-link.is-selected.s-block-link__right:focus-visible {
20203
- box-shadow: var(--_block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
20631
+ box-shadow: var(--_li-block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
20204
20632
  }
20205
20633
  .s-block-link.s-block-link__danger {
20206
20634
  color: var(--red-500);
@@ -20329,23 +20757,23 @@ body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
20329
20757
  color: var(--black-600);
20330
20758
  }
20331
20759
  .s-banner {
20332
- background: var(--_bg, var(--black-050));
20333
- border-color: var(--_bc, var(--bc-medium));
20760
+ background: var(--_no-bg, var(--black-050));
20761
+ border-color: var(--_no-bc, var(--bc-medium));
20334
20762
  border-style: solid;
20335
- color: var(--_fc, var(--fc-medium));
20763
+ color: var(--_no-fc, var(--fc-medium));
20336
20764
  font-size: var(--fs-body1);
20337
- --_x-offset: 0;
20765
+ --_no-x-offset: 0;
20338
20766
  border-width: var(--su-static1) 0;
20339
20767
  inset: 0 0 auto 0;
20340
20768
  padding: var(--su12);
20341
20769
  position: fixed;
20342
20770
  width: 100%;
20343
20771
  z-index: calc(var(--zi-navigation-fixed) - 1);
20344
- -webkit-transform: translate3d(0, var(--_x-offset), 0);
20345
- transform: translate3d(0, var(--_x-offset), 0);
20772
+ -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
20773
+ transform: translate3d(0, var(--_no-x-offset), 0);
20346
20774
  }
20347
20775
  .s-banner code {
20348
- background: var(--_code-bg, transparent);
20776
+ background: var(--_no-code-bg, transparent);
20349
20777
  }
20350
20778
  .s-banner .s-banner--btn {
20351
20779
  color: inherit;
@@ -20353,189 +20781,189 @@ body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
20353
20781
  }
20354
20782
  .s-banner .s-banner--btn:focus,
20355
20783
  .s-banner .s-banner--btn:hover {
20356
- background: var(--_btn-focus-bg, var(--black-100));
20784
+ background: var(--_no-btn-focus-bg, var(--black-100));
20357
20785
  }
20358
20786
  .s-banner .s-banner--btn:active {
20359
- background: var(--_btn-active-bg, var(--black-150));
20787
+ background: var(--_no-btn-active-bg, var(--black-150));
20360
20788
  }
20361
20789
  @media (prefers-color-scheme: dark) {
20362
20790
  body.theme-system .s-banner:not(.s-banner__important) {
20363
- --_bc: var(--_bg);
20791
+ --_no-bc: var(--_no-bg);
20364
20792
  }
20365
20793
  }
20366
20794
  body.theme-dark .s-banner:not(.s-banner__important),
20367
20795
  .theme-dark__forced .s-banner:not(.s-banner__important),
20368
20796
  body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
20369
- --_bc: var(--_bg);
20797
+ --_no-bc: var(--_no-bg);
20370
20798
  }
20371
20799
  body.theme-highcontrast .s-banner:not(.s-banner__important) {
20372
- --_bc: currentColor;
20800
+ --_no-bc: currentColor;
20373
20801
  }
20374
20802
  @media (prefers-color-scheme: dark) {
20375
20803
  body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
20376
- --_bc: currentColor;
20804
+ --_no-bc: currentColor;
20377
20805
  }
20378
20806
  }
20379
20807
  body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
20380
- --_bc: currentColor;
20808
+ --_no-bc: currentColor;
20381
20809
  }
20382
20810
  .s-banner__important {
20383
- --_bc: var(--_bg);
20384
- --_bg: var(--black-700);
20385
- --_fc: var(--white);
20386
- --_btn-focus-bg: var(--black-800);
20387
- --_btn-active-bg: var(--black-900);
20811
+ --_no-bc: var(--_no-bg);
20812
+ --_no-bg: var(--black-700);
20813
+ --_no-fc: var(--white);
20814
+ --_no-btn-focus-bg: var(--black-800);
20815
+ --_no-btn-active-bg: var(--black-900);
20388
20816
  }
20389
20817
  body.theme-highcontrast .s-banner__important {
20390
- --_bc: var(--_bg);
20818
+ --_no-bc: var(--_no-bg);
20391
20819
  }
20392
20820
  .s-banner__danger {
20393
- --_bc: var(--red-200);
20394
- --_bg: var(--red-050);
20395
- --_btn-focus-bg: var(--red-100);
20396
- --_btn-active-bg: var(--red-200);
20821
+ --_no-bc: var(--red-200);
20822
+ --_no-bg: var(--red-050);
20823
+ --_no-btn-focus-bg: var(--red-100);
20824
+ --_no-btn-active-bg: var(--red-200);
20397
20825
  }
20398
20826
  body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
20399
- --_bg: var(--red-200);
20827
+ --_no-bg: var(--red-200);
20400
20828
  }
20401
20829
  .s-banner__danger.s-banner__important {
20402
- --_bc: var(--_bg);
20403
- --_bg: var(--red-500);
20404
- --_btn-focus-bg: var(--red-600);
20405
- --_btn-active-bg: var(--red-700);
20830
+ --_no-bc: var(--_no-bg);
20831
+ --_no-bg: var(--red-500);
20832
+ --_no-btn-focus-bg: var(--red-600);
20833
+ --_no-btn-active-bg: var(--red-700);
20406
20834
  }
20407
20835
  @media (prefers-color-scheme: dark) {
20408
20836
  body.theme-system .s-banner__danger.s-banner__important {
20409
- --_bg: var(--red-400);
20410
- --_fc: var(--black-900);
20837
+ --_no-bg: var(--red-400);
20838
+ --_no-fc: var(--black-900);
20411
20839
  }
20412
20840
  }
20413
20841
  body.theme-dark .s-banner__danger.s-banner__important,
20414
20842
  .theme-dark__forced .s-banner__danger.s-banner__important,
20415
20843
  body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
20416
- --_bg: var(--red-400);
20417
- --_fc: var(--black-900);
20844
+ --_no-bg: var(--red-400);
20845
+ --_no-fc: var(--black-900);
20418
20846
  }
20419
20847
  @media (prefers-color-scheme: dark) {
20420
20848
  body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
20421
- --_bg: var(--red-500);
20422
- --_fc: var(--white);
20849
+ --_no-bg: var(--red-500);
20850
+ --_no-fc: var(--white);
20423
20851
  }
20424
20852
  }
20425
20853
  body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
20426
- --_bg: var(--red-500);
20427
- --_fc: var(--white);
20854
+ --_no-bg: var(--red-500);
20855
+ --_no-fc: var(--white);
20428
20856
  }
20429
20857
  .s-banner__info {
20430
- --_bc: var(--theme-secondary-150);
20431
- --_bg: var(--theme-secondary-050);
20432
- --_btn-focus-bg: var(--theme-secondary-100);
20433
- --_btn-active-bg: var(--theme-secondary-150);
20434
- --_code-bg: var(--theme-secondary-150);
20858
+ --_no-bc: var(--theme-secondary-150);
20859
+ --_no-bg: var(--theme-secondary-050);
20860
+ --_no-btn-focus-bg: var(--theme-secondary-100);
20861
+ --_no-btn-active-bg: var(--theme-secondary-150);
20862
+ --_no-code-bg: var(--theme-secondary-150);
20435
20863
  }
20436
20864
  body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
20437
- --_bg: var(--theme-secondary-100);
20865
+ --_no-bg: var(--theme-secondary-100);
20438
20866
  }
20439
20867
  @media (prefers-color-scheme: dark) {
20440
20868
  body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
20441
- --_bg: var(--theme-secondary-100);
20869
+ --_no-bg: var(--theme-secondary-100);
20442
20870
  }
20443
20871
  }
20444
20872
  body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
20445
- --_bg: var(--theme-secondary-100);
20873
+ --_no-bg: var(--theme-secondary-100);
20446
20874
  }
20447
20875
  .s-banner__info.s-banner__important {
20448
- --_bc: var(--_bg);
20449
- --_bg: var(--theme-secondary-400);
20450
- --_btn-focus-bg: var(--theme-secondary-500);
20451
- --_btn-active-bg: var(--theme-secondary-600);
20876
+ --_no-bc: var(--_no-bg);
20877
+ --_no-bg: var(--theme-secondary-400);
20878
+ --_no-btn-focus-bg: var(--theme-secondary-500);
20879
+ --_no-btn-active-bg: var(--theme-secondary-600);
20452
20880
  }
20453
20881
  @media (prefers-color-scheme: dark) {
20454
20882
  body.theme-system .s-banner__info.s-banner__important {
20455
- --_bg: var(--theme-secondary-300);
20456
- --_fc: var(--black-900);
20883
+ --_no-bg: var(--theme-secondary-300);
20884
+ --_no-fc: var(--black-900);
20457
20885
  }
20458
20886
  }
20459
20887
  body.theme-dark .s-banner__info.s-banner__important,
20460
20888
  .theme-dark__forced .s-banner__info.s-banner__important,
20461
20889
  body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
20462
- --_bg: var(--theme-secondary-300);
20463
- --_fc: var(--black-900);
20890
+ --_no-bg: var(--theme-secondary-300);
20891
+ --_no-fc: var(--black-900);
20464
20892
  }
20465
20893
  @media (prefers-color-scheme: dark) {
20466
20894
  body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
20467
- --_bg: var(--theme-secondary-400);
20468
- --_fc: var(--white);
20895
+ --_no-bg: var(--theme-secondary-400);
20896
+ --_no-fc: var(--white);
20469
20897
  }
20470
20898
  }
20471
20899
  body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
20472
- --_bg: var(--theme-secondary-400);
20473
- --_fc: var(--white);
20900
+ --_no-bg: var(--theme-secondary-400);
20901
+ --_no-fc: var(--white);
20474
20902
  }
20475
20903
  .s-banner__success {
20476
- --_bc: var(--green-200);
20477
- --_bg: var(--green-050);
20478
- --_btn-focus-bg: var(--green-100);
20479
- --_btn-active-bg: var(--green-200);
20904
+ --_no-bc: var(--green-200);
20905
+ --_no-bg: var(--green-050);
20906
+ --_no-btn-focus-bg: var(--green-100);
20907
+ --_no-btn-active-bg: var(--green-200);
20480
20908
  }
20481
20909
  body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
20482
- --_bg: var(--green-200);
20910
+ --_no-bg: var(--green-200);
20483
20911
  }
20484
20912
  .s-banner__success.s-banner__important {
20485
- --_bc: var(--_bg);
20486
- --_bg: var(--green-400);
20487
- --_fc: var(--black-900);
20488
- --_btn-focus-bg: var(--green-500);
20489
- --_btn-active-bg: var(--green-600);
20913
+ --_no-bc: var(--_no-bg);
20914
+ --_no-bg: var(--green-400);
20915
+ --_no-fc: var(--black-900);
20916
+ --_no-btn-focus-bg: var(--green-500);
20917
+ --_no-btn-active-bg: var(--green-600);
20490
20918
  }
20491
20919
  @media (prefers-color-scheme: dark) {
20492
20920
  body.theme-system .s-banner__success.s-banner__important {
20493
- --_bg: var(--green-500);
20494
- --_fc: var(--white);
20921
+ --_no-bg: var(--green-500);
20922
+ --_no-fc: var(--white);
20495
20923
  }
20496
20924
  }
20497
20925
  body.theme-dark .s-banner__success.s-banner__important,
20498
20926
  .theme-dark__forced .s-banner__success.s-banner__important,
20499
20927
  body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
20500
- --_bg: var(--green-500);
20501
- --_fc: var(--white);
20928
+ --_no-bg: var(--green-500);
20929
+ --_no-fc: var(--white);
20502
20930
  }
20503
20931
  body.theme-highcontrast .s-banner__success.s-banner__important {
20504
- --_bg: var(--green-500);
20505
- --_fc: var(--white);
20932
+ --_no-bg: var(--green-500);
20933
+ --_no-fc: var(--white);
20506
20934
  }
20507
20935
  .s-banner__warning {
20508
- --_bc: var(--yellow-300);
20509
- --_bg: var(--yellow-050);
20510
- --_btn-focus-bg: var(--yellow-200);
20511
- --_btn-active-bg: var(--yellow-300);
20512
- --_code-bg: var(--yellow-200);
20936
+ --_no-bc: var(--yellow-300);
20937
+ --_no-bg: var(--yellow-050);
20938
+ --_no-btn-focus-bg: var(--yellow-200);
20939
+ --_no-btn-active-bg: var(--yellow-300);
20940
+ --_no-code-bg: var(--yellow-200);
20513
20941
  }
20514
20942
  body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
20515
- --_bg: var(--yellow-200);
20943
+ --_no-bg: var(--yellow-200);
20516
20944
  }
20517
20945
  .s-banner__warning.s-banner__important {
20518
- --_bc: var(--_bg);
20519
- --_bg: var(--yellow-400);
20520
- --_btn-focus-bg: var(--yellow-500);
20521
- --_btn-active-bg: var(--yellow-600);
20522
- --_fc: var(--black-900);
20946
+ --_no-bc: var(--_no-bg);
20947
+ --_no-bg: var(--yellow-400);
20948
+ --_no-btn-focus-bg: var(--yellow-500);
20949
+ --_no-btn-active-bg: var(--yellow-600);
20950
+ --_no-fc: var(--black-900);
20523
20951
  }
20524
20952
  @media (prefers-color-scheme: dark) {
20525
20953
  body.theme-system .s-banner__warning.s-banner__important {
20526
- --_bg: var(--yellow-600);
20527
- --_fc: var(--white);
20954
+ --_no-bg: var(--yellow-600);
20955
+ --_no-fc: var(--white);
20528
20956
  }
20529
20957
  }
20530
20958
  body.theme-dark .s-banner__warning.s-banner__important,
20531
20959
  .theme-dark__forced .s-banner__warning.s-banner__important,
20532
20960
  body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
20533
- --_bg: var(--yellow-600);
20534
- --_fc: var(--white);
20961
+ --_no-bg: var(--yellow-600);
20962
+ --_no-fc: var(--white);
20535
20963
  }
20536
20964
  body.theme-highcontrast .s-banner__warning.s-banner__important {
20537
- --_bg: var(--yellow-700);
20538
- --_fc: var(--white);
20965
+ --_no-bg: var(--yellow-700);
20966
+ --_no-fc: var(--white);
20539
20967
  }
20540
20968
  .s-banner__body-pt {
20541
20969
  padding-top: 93px;
@@ -20544,12 +20972,12 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
20544
20972
  z-index: calc(var(--zi-navigation-fixed) + 1);
20545
20973
  }
20546
20974
  .s-banner[aria-hidden="true"] {
20547
- --_x-offset: -50px;
20975
+ --_no-x-offset: -50px;
20548
20976
  visibility: hidden;
20549
20977
  opacity: 0;
20550
20978
  }
20551
20979
  .s-banner[aria-hidden="false"] {
20552
- --_x-offset: 49px;
20980
+ --_no-x-offset: 49px;
20553
20981
  visibility: visible;
20554
20982
  opacity: 1;
20555
20983
  }
@@ -20560,17 +20988,17 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
20560
20988
  margin: 0 auto;
20561
20989
  }
20562
20990
  .s-notice {
20563
- background: var(--_bg, var(--black-050));
20564
- border-color: var(--_bc, var(--bc-medium));
20991
+ background: var(--_no-bg, var(--black-050));
20992
+ border-color: var(--_no-bc, var(--bc-medium));
20565
20993
  border-style: solid;
20566
- color: var(--_fc, var(--fc-medium));
20994
+ color: var(--_no-fc, var(--fc-medium));
20567
20995
  font-size: var(--fs-body1);
20568
20996
  border-radius: var(--br-sm);
20569
20997
  border-width: var(--su-static1);
20570
20998
  padding: var(--su16);
20571
20999
  }
20572
21000
  .s-notice code {
20573
- background: var(--_code-bg, transparent);
21001
+ background: var(--_no-code-bg, transparent);
20574
21002
  }
20575
21003
  .s-notice .s-notice--btn {
20576
21004
  color: inherit;
@@ -20578,189 +21006,189 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
20578
21006
  }
20579
21007
  .s-notice .s-notice--btn:focus,
20580
21008
  .s-notice .s-notice--btn:hover {
20581
- background: var(--_btn-focus-bg, var(--black-100));
21009
+ background: var(--_no-btn-focus-bg, var(--black-100));
20582
21010
  }
20583
21011
  .s-notice .s-notice--btn:active {
20584
- background: var(--_btn-active-bg, var(--black-150));
21012
+ background: var(--_no-btn-active-bg, var(--black-150));
20585
21013
  }
20586
21014
  @media (prefers-color-scheme: dark) {
20587
21015
  body.theme-system .s-notice:not(.s-notice__important) {
20588
- --_bc: var(--_bg);
21016
+ --_no-bc: var(--_no-bg);
20589
21017
  }
20590
21018
  }
20591
21019
  body.theme-dark .s-notice:not(.s-notice__important),
20592
21020
  .theme-dark__forced .s-notice:not(.s-notice__important),
20593
21021
  body.theme-system .theme-dark__forced .s-notice:not(.s-notice__important) {
20594
- --_bc: var(--_bg);
21022
+ --_no-bc: var(--_no-bg);
20595
21023
  }
20596
21024
  body.theme-highcontrast .s-notice:not(.s-notice__important) {
20597
- --_bc: currentColor;
21025
+ --_no-bc: currentColor;
20598
21026
  }
20599
21027
  @media (prefers-color-scheme: dark) {
20600
21028
  body.theme-highcontrast.theme-system .s-notice:not(.s-notice__important) {
20601
- --_bc: currentColor;
21029
+ --_no-bc: currentColor;
20602
21030
  }
20603
21031
  }
20604
21032
  body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
20605
- --_bc: currentColor;
21033
+ --_no-bc: currentColor;
20606
21034
  }
20607
21035
  .s-notice__important {
20608
- --_bc: var(--_bg);
20609
- --_bg: var(--black-700);
20610
- --_fc: var(--white);
20611
- --_btn-focus-bg: var(--black-800);
20612
- --_btn-active-bg: var(--black-900);
21036
+ --_no-bc: var(--_no-bg);
21037
+ --_no-bg: var(--black-700);
21038
+ --_no-fc: var(--white);
21039
+ --_no-btn-focus-bg: var(--black-800);
21040
+ --_no-btn-active-bg: var(--black-900);
20613
21041
  }
20614
21042
  body.theme-highcontrast .s-notice__important {
20615
- --_bc: var(--_bg);
21043
+ --_no-bc: var(--_no-bg);
20616
21044
  }
20617
21045
  .s-notice__danger {
20618
- --_bc: var(--red-200);
20619
- --_bg: var(--red-050);
20620
- --_btn-focus-bg: var(--red-100);
20621
- --_btn-active-bg: var(--red-200);
21046
+ --_no-bc: var(--red-200);
21047
+ --_no-bg: var(--red-050);
21048
+ --_no-btn-focus-bg: var(--red-100);
21049
+ --_no-btn-active-bg: var(--red-200);
20622
21050
  }
20623
21051
  body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
20624
- --_bg: var(--red-200);
21052
+ --_no-bg: var(--red-200);
20625
21053
  }
20626
21054
  .s-notice__danger.s-notice__important {
20627
- --_bc: var(--_bg);
20628
- --_bg: var(--red-500);
20629
- --_btn-focus-bg: var(--red-600);
20630
- --_btn-active-bg: var(--red-700);
21055
+ --_no-bc: var(--_no-bg);
21056
+ --_no-bg: var(--red-500);
21057
+ --_no-btn-focus-bg: var(--red-600);
21058
+ --_no-btn-active-bg: var(--red-700);
20631
21059
  }
20632
21060
  @media (prefers-color-scheme: dark) {
20633
21061
  body.theme-system .s-notice__danger.s-notice__important {
20634
- --_bg: var(--red-400);
20635
- --_fc: var(--black-900);
21062
+ --_no-bg: var(--red-400);
21063
+ --_no-fc: var(--black-900);
20636
21064
  }
20637
21065
  }
20638
21066
  body.theme-dark .s-notice__danger.s-notice__important,
20639
21067
  .theme-dark__forced .s-notice__danger.s-notice__important,
20640
21068
  body.theme-system .theme-dark__forced .s-notice__danger.s-notice__important {
20641
- --_bg: var(--red-400);
20642
- --_fc: var(--black-900);
21069
+ --_no-bg: var(--red-400);
21070
+ --_no-fc: var(--black-900);
20643
21071
  }
20644
21072
  @media (prefers-color-scheme: dark) {
20645
21073
  body.theme-highcontrast.theme-system .s-notice__danger.s-notice__important {
20646
- --_bg: var(--red-500);
20647
- --_fc: var(--white);
21074
+ --_no-bg: var(--red-500);
21075
+ --_no-fc: var(--white);
20648
21076
  }
20649
21077
  }
20650
21078
  body.theme-highcontrast.theme-dark .s-notice__danger.s-notice__important {
20651
- --_bg: var(--red-500);
20652
- --_fc: var(--white);
21079
+ --_no-bg: var(--red-500);
21080
+ --_no-fc: var(--white);
20653
21081
  }
20654
21082
  .s-notice__info {
20655
- --_bc: var(--theme-secondary-150);
20656
- --_bg: var(--theme-secondary-050);
20657
- --_btn-focus-bg: var(--theme-secondary-100);
20658
- --_btn-active-bg: var(--theme-secondary-150);
20659
- --_code-bg: var(--theme-secondary-150);
21083
+ --_no-bc: var(--theme-secondary-150);
21084
+ --_no-bg: var(--theme-secondary-050);
21085
+ --_no-btn-focus-bg: var(--theme-secondary-100);
21086
+ --_no-btn-active-bg: var(--theme-secondary-150);
21087
+ --_no-code-bg: var(--theme-secondary-150);
20660
21088
  }
20661
21089
  body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
20662
- --_bg: var(--theme-secondary-100);
21090
+ --_no-bg: var(--theme-secondary-100);
20663
21091
  }
20664
21092
  @media (prefers-color-scheme: dark) {
20665
21093
  body.theme-highcontrast.theme-system .s-notice__info:not(.s-notice__important) {
20666
- --_bg: var(--theme-secondary-100);
21094
+ --_no-bg: var(--theme-secondary-100);
20667
21095
  }
20668
21096
  }
20669
21097
  body.theme-highcontrast.theme-dark .s-notice__info:not(.s-notice__important) {
20670
- --_bg: var(--theme-secondary-100);
21098
+ --_no-bg: var(--theme-secondary-100);
20671
21099
  }
20672
21100
  .s-notice__info.s-notice__important {
20673
- --_bc: var(--_bg);
20674
- --_bg: var(--theme-secondary-400);
20675
- --_btn-focus-bg: var(--theme-secondary-500);
20676
- --_btn-active-bg: var(--theme-secondary-600);
21101
+ --_no-bc: var(--_no-bg);
21102
+ --_no-bg: var(--theme-secondary-400);
21103
+ --_no-btn-focus-bg: var(--theme-secondary-500);
21104
+ --_no-btn-active-bg: var(--theme-secondary-600);
20677
21105
  }
20678
21106
  @media (prefers-color-scheme: dark) {
20679
21107
  body.theme-system .s-notice__info.s-notice__important {
20680
- --_bg: var(--theme-secondary-300);
20681
- --_fc: var(--black-900);
21108
+ --_no-bg: var(--theme-secondary-300);
21109
+ --_no-fc: var(--black-900);
20682
21110
  }
20683
21111
  }
20684
21112
  body.theme-dark .s-notice__info.s-notice__important,
20685
21113
  .theme-dark__forced .s-notice__info.s-notice__important,
20686
21114
  body.theme-system .theme-dark__forced .s-notice__info.s-notice__important {
20687
- --_bg: var(--theme-secondary-300);
20688
- --_fc: var(--black-900);
21115
+ --_no-bg: var(--theme-secondary-300);
21116
+ --_no-fc: var(--black-900);
20689
21117
  }
20690
21118
  @media (prefers-color-scheme: dark) {
20691
21119
  body.theme-highcontrast.theme-system .s-notice__info.s-notice__important {
20692
- --_bg: var(--theme-secondary-400);
20693
- --_fc: var(--white);
21120
+ --_no-bg: var(--theme-secondary-400);
21121
+ --_no-fc: var(--white);
20694
21122
  }
20695
21123
  }
20696
21124
  body.theme-highcontrast.theme-dark .s-notice__info.s-notice__important {
20697
- --_bg: var(--theme-secondary-400);
20698
- --_fc: var(--white);
21125
+ --_no-bg: var(--theme-secondary-400);
21126
+ --_no-fc: var(--white);
20699
21127
  }
20700
21128
  .s-notice__success {
20701
- --_bc: var(--green-200);
20702
- --_bg: var(--green-050);
20703
- --_btn-focus-bg: var(--green-100);
20704
- --_btn-active-bg: var(--green-200);
21129
+ --_no-bc: var(--green-200);
21130
+ --_no-bg: var(--green-050);
21131
+ --_no-btn-focus-bg: var(--green-100);
21132
+ --_no-btn-active-bg: var(--green-200);
20705
21133
  }
20706
21134
  body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
20707
- --_bg: var(--green-200);
21135
+ --_no-bg: var(--green-200);
20708
21136
  }
20709
21137
  .s-notice__success.s-notice__important {
20710
- --_bc: var(--_bg);
20711
- --_bg: var(--green-400);
20712
- --_fc: var(--black-900);
20713
- --_btn-focus-bg: var(--green-500);
20714
- --_btn-active-bg: var(--green-600);
21138
+ --_no-bc: var(--_no-bg);
21139
+ --_no-bg: var(--green-400);
21140
+ --_no-fc: var(--black-900);
21141
+ --_no-btn-focus-bg: var(--green-500);
21142
+ --_no-btn-active-bg: var(--green-600);
20715
21143
  }
20716
21144
  @media (prefers-color-scheme: dark) {
20717
21145
  body.theme-system .s-notice__success.s-notice__important {
20718
- --_bg: var(--green-500);
20719
- --_fc: var(--white);
21146
+ --_no-bg: var(--green-500);
21147
+ --_no-fc: var(--white);
20720
21148
  }
20721
21149
  }
20722
21150
  body.theme-dark .s-notice__success.s-notice__important,
20723
21151
  .theme-dark__forced .s-notice__success.s-notice__important,
20724
21152
  body.theme-system .theme-dark__forced .s-notice__success.s-notice__important {
20725
- --_bg: var(--green-500);
20726
- --_fc: var(--white);
21153
+ --_no-bg: var(--green-500);
21154
+ --_no-fc: var(--white);
20727
21155
  }
20728
21156
  body.theme-highcontrast .s-notice__success.s-notice__important {
20729
- --_bg: var(--green-500);
20730
- --_fc: var(--white);
21157
+ --_no-bg: var(--green-500);
21158
+ --_no-fc: var(--white);
20731
21159
  }
20732
21160
  .s-notice__warning {
20733
- --_bc: var(--yellow-300);
20734
- --_bg: var(--yellow-050);
20735
- --_btn-focus-bg: var(--yellow-200);
20736
- --_btn-active-bg: var(--yellow-300);
20737
- --_code-bg: var(--yellow-200);
21161
+ --_no-bc: var(--yellow-300);
21162
+ --_no-bg: var(--yellow-050);
21163
+ --_no-btn-focus-bg: var(--yellow-200);
21164
+ --_no-btn-active-bg: var(--yellow-300);
21165
+ --_no-code-bg: var(--yellow-200);
20738
21166
  }
20739
21167
  body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
20740
- --_bg: var(--yellow-200);
21168
+ --_no-bg: var(--yellow-200);
20741
21169
  }
20742
21170
  .s-notice__warning.s-notice__important {
20743
- --_bc: var(--_bg);
20744
- --_bg: var(--yellow-400);
20745
- --_btn-focus-bg: var(--yellow-500);
20746
- --_btn-active-bg: var(--yellow-600);
20747
- --_fc: var(--black-900);
21171
+ --_no-bc: var(--_no-bg);
21172
+ --_no-bg: var(--yellow-400);
21173
+ --_no-btn-focus-bg: var(--yellow-500);
21174
+ --_no-btn-active-bg: var(--yellow-600);
21175
+ --_no-fc: var(--black-900);
20748
21176
  }
20749
21177
  @media (prefers-color-scheme: dark) {
20750
21178
  body.theme-system .s-notice__warning.s-notice__important {
20751
- --_bg: var(--yellow-600);
20752
- --_fc: var(--white);
21179
+ --_no-bg: var(--yellow-600);
21180
+ --_no-fc: var(--white);
20753
21181
  }
20754
21182
  }
20755
21183
  body.theme-dark .s-notice__warning.s-notice__important,
20756
21184
  .theme-dark__forced .s-notice__warning.s-notice__important,
20757
21185
  body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
20758
- --_bg: var(--yellow-600);
20759
- --_fc: var(--white);
21186
+ --_no-bg: var(--yellow-600);
21187
+ --_no-fc: var(--white);
20760
21188
  }
20761
21189
  body.theme-highcontrast .s-notice__warning.s-notice__important {
20762
- --_bg: var(--yellow-700);
20763
- --_fc: var(--white);
21190
+ --_no-bg: var(--yellow-700);
21191
+ --_no-fc: var(--white);
20764
21192
  }
20765
21193
  .s-toast {
20766
21194
  visibility: hidden;
@@ -20796,290 +21224,229 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
20796
21224
  pointer-events: all;
20797
21225
  }
20798
21226
  .s-tag {
20799
- display: inline-flex;
21227
+ --_ta-bc: var(--theme-tag-border-color);
21228
+ --_ta-bg: var(--theme-tag-background-color);
21229
+ --_ta-br: var(--br-sm);
21230
+ --_ta-fc: var(--theme-tag-color);
21231
+ --_ta-fs: var(--fs-caption);
21232
+ --_ta-lh: 1.84615385;
21233
+ --_ta-pl: var(--_ta-px);
21234
+ --_ta-pr: var(--_ta-px);
21235
+ --_ta-px: var(--su4);
21236
+ --_ta-bc-hover: var(--theme-tag-hover-border-color);
21237
+ --_ta-bg-hover: var(--theme-tag-hover-background-color);
21238
+ --_ta-fc-hover: var(--theme-tag-hover-color);
21239
+ --_ta-bc-selected: transparent;
21240
+ --_ta-bg-selected: var(--theme-secondary-200);
21241
+ --_ta-fc-selected: var(--theme-secondary-900);
21242
+ background-color: var(--_ta-bg);
21243
+ border: var(--su-static1) solid var(--_ta-bc);
21244
+ border-radius: var(--_ta-br);
21245
+ color: var(--_ta-fc);
21246
+ font-size: var(--_ta-fs);
21247
+ line-height: var(--_ta-lh);
21248
+ padding-left: var(--_ta-pl);
21249
+ padding-right: var(--_ta-pr);
20800
21250
  align-items: center;
21251
+ display: inline-flex;
20801
21252
  justify-content: center;
20802
21253
  min-width: 0;
20803
- padding-left: var(--su4);
20804
- padding-right: var(--su4);
20805
- border-style: solid;
20806
- border-width: 1px;
20807
- border-radius: var(--br-sm);
20808
- font-size: var(--fs-caption);
20809
- line-height: 1.84615385;
20810
21254
  text-decoration: none;
20811
21255
  vertical-align: middle;
20812
21256
  white-space: nowrap;
20813
- border-color: var(--theme-tag-border-color);
20814
- background-color: var(--theme-tag-background-color);
20815
- color: var(--theme-tag-color);
20816
- }
20817
- body.theme-highcontrast .s-tag {
20818
- border-color: currentColor;
20819
- }
20820
- .s-tag .s-tag--dismiss {
20821
- color: inherit;
20822
- background-color: transparent;
20823
- }
20824
- .s-tag .s-tag--dismiss:hover {
20825
- color: var(--theme-tag-background-color);
20826
- background-color: var(--theme-tag-color);
20827
- }
20828
- body.theme-highcontrast .s-tag .s-tag--dismiss:hover {
20829
- color: var(--white);
20830
21257
  }
20831
21258
  body.theme-highcontrast .s-tag {
21259
+ --_ta-bc: currentColor;
20832
21260
  text-decoration: none;
20833
21261
  }
20834
- .s-tag.is-selected {
20835
- border-color: transparent;
20836
- background-color: var(--theme-secondary-200);
20837
- color: var(--theme-secondary-900);
20838
- }
20839
- body.theme-highcontrast .s-tag.is-selected {
20840
- border-color: currentColor;
20841
- }
20842
21262
  .s-tag.s-tag__xs {
20843
- font-size: var(--fs-fine);
20844
- line-height: 1.4;
20845
- padding-left: var(--su2);
20846
- padding-right: var(--su2);
21263
+ --_ta-fs: var(--fs-fine);
21264
+ --_ta-lh: 1.4;
21265
+ --_ta-px: var(--su2);
20847
21266
  }
20848
21267
  .s-tag.s-tag__sm {
20849
- font-size: var(--fs-caption);
20850
- line-height: 1.5;
21268
+ --_ta-fs: var(--fs-caption);
21269
+ --_ta-lh: 1.5;
20851
21270
  }
20852
21271
  .s-tag.s-tag__md {
20853
- padding-left: var(--su6);
20854
- padding-right: var(--su6);
20855
- font-size: var(--fs-body2);
20856
- line-height: 1.73333333;
21272
+ --_ta-px: var(--su6);
21273
+ --_ta-fs: var(--fs-body2);
21274
+ --_ta-lh: 1.73333333;
20857
21275
  }
20858
21276
  .s-tag.s-tag__lg {
20859
- padding-left: var(--su6);
20860
- padding-right: var(--su6);
20861
- border-radius: calc(var(--br-sm) + 1px);
20862
- font-size: var(--fs-subheading);
20863
- line-height: 1.68421053;
21277
+ --_ta-br: calc(var(--br-sm) + 1px);
21278
+ --_ta-fs: var(--fs-subheading);
21279
+ --_ta-lh: 1.68421053;
21280
+ --_ta-px: var(--su6);
21281
+ }
21282
+ .s-tag.s-tag__ignored,
21283
+ .s-tag.s-tag__watched {
21284
+ --_ta-pl: calc(var(--su-static24) - var(--su-static2));
21285
+ --_ta-before-size: calc(var(--su-static16) - var(--su-static2));
21286
+ position: relative;
20864
21287
  }
20865
- a.s-tag:not(.is-selected):hover,
20866
- a.s-tag:not(.is-selected):focus,
20867
- a.s-tag:not(.is-selected):active {
20868
- border-color: var(--theme-tag-hover-border-color);
20869
- background-color: var(--theme-tag-hover-background-color);
20870
- color: var(--theme-tag-hover-color);
21288
+ .s-tag.s-tag__ignored:before,
21289
+ .s-tag.s-tag__watched:before {
21290
+ height: var(--_ta-before-size);
21291
+ width: var(--_ta-before-size);
21292
+ -webkit-mask: var(--_ta-before-icon) no-repeat center;
21293
+ mask: var(--_ta-before-icon) no-repeat center;
21294
+ background-color: currentColor;
21295
+ content: "";
21296
+ display: block;
21297
+ left: var(--su-static4);
21298
+ margin-right: var(--su2);
21299
+ position: absolute;
21300
+ top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
21301
+ -webkit-mask-size: contain;
21302
+ mask-size: contain;
20871
21303
  }
20872
- body.theme-highcontrast a.s-tag:not(.is-selected):hover,
20873
- body.theme-highcontrast a.s-tag:not(.is-selected):focus,
20874
- body.theme-highcontrast a.s-tag:not(.is-selected):active {
20875
- border-color: currentColor;
21304
+ .s-tag.s-tag__ignored {
21305
+ --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
21306
+ }
21307
+ .s-tag.s-tag__moderator {
21308
+ --_ta-bc: var(--red-200);
21309
+ --_ta-bg: var(--red-050);
21310
+ --_ta-fc: var(--red-800);
21311
+ --_ta-bc-hover: var(--red-300);
21312
+ --_ta-bg-hover: var(--red-100);
21313
+ --_ta-fc-hover: var(--red-900);
21314
+ --_ta-bc-selected: var(--red-400);
21315
+ --_ta-bg-selected: var(--red-200);
21316
+ --_ta-fc-selected: var(--red-800);
21317
+ }
21318
+ .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__required) {
21319
+ --_ta-bc: transparent;
21320
+ --_ta-bg: var(--black-075);
21321
+ --_ta-fc: var(--black-700);
21322
+ --_ta-bc-hover: transparent;
21323
+ --_ta-bg-hover: var(--black-100);
21324
+ --_ta-fc-hover: var(--black-800);
21325
+ --_ta-bc-selected: transparent;
21326
+ --_ta-bg-selected: var(--black-200);
21327
+ --_ta-fc-selected: var(--black-900);
21328
+ }
21329
+ body.theme-highcontrast .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__required) {
21330
+ --_ta-bc: currentColor;
21331
+ }
21332
+ .s-tag.s-tag__required:not(.s-tag__moderator) {
21333
+ --_ta-bc: var(--bc-darker);
21334
+ --_ta-bg: var(--black-075);
21335
+ --_ta-fc: var(--black-700);
21336
+ --_ta-bc-hover: var(--black-300);
21337
+ --_ta-bg-hover: var(--black-100);
21338
+ --_ta-fc-hover: var(--black-800);
21339
+ --_ta-bc-selected: var(--black-500);
21340
+ --_ta-bg-selected: var(--black-200);
21341
+ --_ta-fc-selected: var(--black-900);
21342
+ }
21343
+ .s-tag.s-tag__watched {
21344
+ --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
20876
21345
  }
20877
- .s-tag--dismiss {
20878
- display: flex;
21346
+ .s-tag .s-tag--dismiss {
20879
21347
  align-content: center;
20880
21348
  align-self: center;
20881
- justify-content: center;
20882
- width: var(--su-static16);
21349
+ background-color: transparent;
21350
+ border-radius: var(--br-sm);
21351
+ color: inherit;
21352
+ cursor: pointer;
21353
+ display: flex;
20883
21354
  height: var(--su-static16);
21355
+ justify-content: center;
20884
21356
  margin-left: var(--su4);
20885
21357
  padding: var(--su1);
20886
- border-radius: var(--br-sm);
20887
- cursor: pointer;
21358
+ width: var(--su-static16);
21359
+ }
21360
+ .s-tag .s-tag--dismiss:hover {
21361
+ background-color: var(--_ta-fc);
21362
+ color: var(--_ta-bg);
20888
21363
  }
20889
- .s-tag--dismiss:hover {
21364
+ body.theme-highcontrast .s-tag .s-tag--dismiss:hover {
20890
21365
  color: var(--white);
20891
21366
  }
20892
- .s-tag--sponsor {
20893
- display: inline-flex;
21367
+ .s-tag .s-tag--sponsor {
20894
21368
  align-self: center;
21369
+ border-radius: calc(var(--br-sm) - var(--su-static1));
21370
+ display: inline-flex;
20895
21371
  margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
20896
21372
  max-width: calc(var(--su-static16) + var(--su-static2));
20897
- border-radius: calc(var(--br-sm) - 1px);
20898
21373
  }
20899
- .s-tag--sponsor .svg-icon,
20900
- .s-tag--sponsor img {
21374
+ .s-tag .s-tag--sponsor img,
21375
+ .s-tag .s-tag--sponsor .svg-icon {
20901
21376
  width: 100%;
20902
21377
  height: 100%;
20903
21378
  }
20904
- .s-tag__required {
20905
- border-color: var(--bc-darker);
20906
- background-color: var(--black-075);
20907
- color: var(--black-700);
20908
- }
20909
- body.theme-highcontrast .s-tag__required {
20910
- border-color: currentColor;
20911
- }
20912
- .s-tag__required .s-tag--dismiss {
20913
- color: inherit;
20914
- background-color: transparent;
20915
- }
20916
- .s-tag__required .s-tag--dismiss:hover {
20917
- color: var(--black-075);
20918
- background-color: var(--black-700);
20919
- }
20920
- body.theme-highcontrast .s-tag__required .s-tag--dismiss:hover {
20921
- color: var(--white);
20922
- }
20923
- .s-tag__required.is-selected {
20924
- border-color: var(--black-500);
20925
- background-color: var(--black-200);
20926
- color: var(--black-900);
20927
- }
20928
- body.theme-highcontrast .s-tag__required.is-selected {
20929
- border-color: currentColor;
20930
- }
20931
- a.s-tag__required:not(.is-selected):hover,
20932
- a.s-tag__required:not(.is-selected):focus,
20933
- a.s-tag__required:not(.is-selected):active {
20934
- border-color: var(--black-300);
20935
- background-color: var(--black-100);
20936
- color: var(--black-800);
20937
- }
20938
- body.theme-highcontrast a.s-tag__required:not(.is-selected):hover,
20939
- body.theme-highcontrast a.s-tag__required:not(.is-selected):focus,
20940
- body.theme-highcontrast a.s-tag__required:not(.is-selected):active {
20941
- border-color: currentColor;
20942
- }
20943
- .s-tag__moderator {
20944
- border-color: var(--red-200);
20945
- background-color: var(--red-050);
20946
- color: var(--red-800);
20947
- }
20948
- body.theme-highcontrast .s-tag__moderator {
20949
- border-color: currentColor;
20950
- }
20951
- .s-tag__moderator .s-tag--dismiss {
20952
- color: inherit;
20953
- background-color: transparent;
20954
- }
20955
- .s-tag__moderator .s-tag--dismiss:hover {
20956
- color: var(--red-050);
20957
- background-color: var(--red-800);
20958
- }
20959
- body.theme-highcontrast .s-tag__moderator .s-tag--dismiss:hover {
20960
- color: var(--white);
20961
- }
20962
- .s-tag__moderator.is-selected {
20963
- border-color: var(--red-400);
20964
- background-color: var(--red-200);
20965
- color: var(--red-800);
20966
- }
20967
- body.theme-highcontrast .s-tag__moderator.is-selected {
20968
- border-color: currentColor;
20969
- }
20970
- a.s-tag__moderator:not(.is-selected):hover,
20971
- a.s-tag__moderator:not(.is-selected):focus,
20972
- a.s-tag__moderator:not(.is-selected):active {
20973
- border-color: var(--red-300);
20974
- background-color: var(--red-100);
20975
- color: var(--red-900);
20976
- }
20977
- body.theme-highcontrast a.s-tag__moderator:not(.is-selected):hover,
20978
- body.theme-highcontrast a.s-tag__moderator:not(.is-selected):focus,
20979
- body.theme-highcontrast a.s-tag__moderator:not(.is-selected):active {
20980
- border-color: currentColor;
20981
- }
20982
- .s-tag__muted {
20983
- border-color: transparent;
20984
- background-color: var(--black-075);
20985
- color: var(--black-700);
20986
- }
20987
- body.theme-highcontrast .s-tag__muted {
20988
- border-color: currentColor;
20989
- }
20990
- .s-tag__muted .s-tag--dismiss {
20991
- color: inherit;
20992
- background-color: transparent;
20993
- }
20994
- .s-tag__muted .s-tag--dismiss:hover {
20995
- color: var(--black-075);
20996
- background-color: var(--black-700);
20997
- }
20998
- body.theme-highcontrast .s-tag__muted .s-tag--dismiss:hover {
20999
- color: var(--white);
21000
- }
21001
- .s-tag__muted.is-selected {
21002
- border-color: transparent;
21003
- background-color: var(--black-200);
21004
- color: var(--black-900);
21379
+ a.s-tag:not(.is-selected):hover,
21380
+ a.s-tag:not(.is-selected):focus,
21381
+ a.s-tag:not(.is-selected):active {
21382
+ background-color: var(--_ta-bg-hover);
21383
+ border-color: var(--_ta-bc-hover);
21384
+ color: var(--_ta-fc-hover);
21005
21385
  }
21006
- body.theme-highcontrast .s-tag__muted.is-selected {
21386
+ body.theme-highcontrast a.s-tag:not(.is-selected):hover,
21387
+ body.theme-highcontrast a.s-tag:not(.is-selected):focus,
21388
+ body.theme-highcontrast a.s-tag:not(.is-selected):active {
21007
21389
  border-color: currentColor;
21008
21390
  }
21009
- a.s-tag__muted:not(.is-selected):hover,
21010
- a.s-tag__muted:not(.is-selected):focus,
21011
- a.s-tag__muted:not(.is-selected):active {
21012
- border-color: transparent;
21013
- background-color: var(--black-100);
21014
- color: var(--black-800);
21015
- }
21016
- body.theme-highcontrast a.s-tag__muted:not(.is-selected):hover,
21017
- body.theme-highcontrast a.s-tag__muted:not(.is-selected):focus,
21018
- body.theme-highcontrast a.s-tag__muted:not(.is-selected):active {
21391
+ .s-tag.is-selected,
21392
+ a.s-tag.is-selected,
21393
+ a.s-tag.is-selected:active,
21394
+ a.s-tag.is-selected:hover,
21395
+ a.s-tag.is-selected:focus {
21396
+ background-color: var(--_ta-bg-selected);
21397
+ border-color: var(--_ta-bc-selected);
21398
+ color: var(--_ta-fc-selected);
21399
+ }
21400
+ body.theme-highcontrast .s-tag.is-selected,
21401
+ body.theme-highcontrast a.s-tag.is-selected,
21402
+ body.theme-highcontrast a.s-tag.is-selected:active,
21403
+ body.theme-highcontrast a.s-tag.is-selected:hover,
21404
+ body.theme-highcontrast a.s-tag.is-selected:focus {
21019
21405
  border-color: currentColor;
21020
21406
  }
21021
- .s-tag__watched,
21022
- .s-tag__ignored {
21023
- position: relative;
21024
- padding-left: 22px;
21025
- }
21026
- .s-tag__watched:before,
21027
- .s-tag__ignored:before {
21028
- content: "";
21029
- display: block;
21030
- width: 14px;
21031
- height: 14px;
21032
- margin-right: var(--su2);
21033
- background-color: currentColor;
21034
- position: absolute;
21035
- left: 4px;
21036
- top: calc(50% - 7px);
21037
- -webkit-mask: var(--s-tag-icon) no-repeat center;
21038
- mask: var(--s-tag-icon) no-repeat center;
21039
- -webkit-mask-size: contain;
21040
- mask-size: contain;
21041
- }
21042
- .s-tag__watched {
21043
- --s-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
21044
- }
21045
- .s-tag__ignored {
21046
- --s-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
21047
- }
21048
21407
  .s-pagination {
21049
21408
  display: flex;
21050
21409
  flex-wrap: wrap;
21051
- margin-left: calc(var(--su2) * -1);
21052
- margin-right: calc(var(--su2) * -1);
21410
+ gap: var(--su4);
21053
21411
  }
21054
- .s-pagination--item {
21055
- margin-left: var(--su2);
21056
- margin-right: var(--su2);
21057
- padding: 0 var(--su8);
21058
- background-color: transparent;
21412
+ .s-pagination .s-pagination--item {
21413
+ --_pa-item-bg: transparent;
21414
+ --_pa-item-bc: var(--bc-medium);
21415
+ --_pa-item-fc: var(--fc-medium);
21416
+ --_pa-item-bg-hover: var(--black-100);
21417
+ --_pa-item-bc-hover: var(--bc-darker);
21418
+ --_pa-item-fc-hover: var(--fc-dark);
21419
+ background-color: var(--_pa-item-bg);
21420
+ border: 1px solid var(--_pa-item-bc);
21421
+ color: var(--_pa-item-fc);
21059
21422
  border-radius: var(--br-sm);
21060
- border: 1px solid var(--bc-medium);
21061
21423
  font-size: var(--fs-body1);
21062
21424
  line-height: var(--lh-xl);
21063
- color: var(--fc-medium);
21425
+ padding: 0 var(--su8);
21064
21426
  }
21065
- body.theme-highcontrast .s-pagination--item {
21427
+ body.theme-highcontrast .s-pagination .s-pagination--item {
21066
21428
  text-decoration: none;
21067
21429
  }
21068
- .s-pagination--item:hover {
21069
- border-color: var(--bc-darker);
21070
- background-color: var(--black-100);
21071
- color: var(--fc-dark);
21072
- }
21073
- .s-pagination--item.is-selected {
21074
- border-color: transparent;
21075
- background-color: var(--theme-primary-color);
21076
- color: var(--white);
21077
- }
21078
- .s-pagination--item.s-pagination--item__clear,
21079
- .s-pagination--item.s-pagination--item__clear:hover {
21080
- color: inherit;
21081
- border-color: transparent;
21082
- background-color: transparent;
21430
+ .s-pagination .s-pagination--item.is-selected {
21431
+ --_pa-item-bg: var(--theme-primary-color);
21432
+ --_pa-item-bc: transparent;
21433
+ --_pa-item-fc: var(--white);
21434
+ }
21435
+ .s-pagination .s-pagination--item.s-pagination .s-pagination--item__clear {
21436
+ --_pa-item-bg: transparent;
21437
+ --_pa-item-bc: transparent;
21438
+ --_pa-item-fc: inherit;
21439
+ }
21440
+ .s-pagination .s-pagination--item.is-selected,
21441
+ .s-pagination .s-pagination--item.s-pagination .s-pagination--item__clear {
21442
+ --_pa-item-bc-hover: var(--_pa-item-bc);
21443
+ --_pa-item-bg-hover: var(--_pa-item-bg);
21444
+ --_pa-item-fc-hover: var(--_pa-item-fc);
21445
+ }
21446
+ .s-pagination .s-pagination--item:hover {
21447
+ background-color: var(--_pa-item-bg-hover);
21448
+ border-color: var(--_pa-item-bc-hover);
21449
+ color: var(--_pa-item-fc-hover);
21083
21450
  }
21084
21451
  .s-sidebarwidget--item[aria-current="true"]:before,
21085
21452
  .s-sidebarwidget--item > :first-child[aria-current="true"]:before,