@stackoverflow/stacks 1.8.0 → 1.9.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 (137) hide show
  1. package/dist/components/activity-indicator/activity-indicator.a11y.test.d.ts +1 -0
  2. package/dist/components/activity-indicator/activity-indicator.visual.test.d.ts +1 -0
  3. package/dist/components/avatar/avatar.a11y.test.d.ts +1 -0
  4. package/dist/components/avatar/avatar.visual.test.d.ts +1 -0
  5. package/dist/{controllers/s-banner.d.ts → components/banner/banner.d.ts} +1 -1
  6. package/dist/components/banner/banner.test.d.ts +1 -0
  7. package/dist/components/banner/banner.visual.test.d.ts +1 -0
  8. package/dist/components/button/button.a11y.test.d.ts +1 -0
  9. package/dist/components/button/button.visual.test.d.ts +1 -0
  10. package/dist/{controllers/s-expandable-control.d.ts → components/expandable/expandable.d.ts} +1 -1
  11. package/dist/components/expandable/expandable.test.d.ts +1 -0
  12. package/dist/{controllers/s-modal.d.ts → components/modal/modal.d.ts} +1 -1
  13. package/dist/{controllers/s-navigation-tablist.d.ts → components/navigation/navigation.d.ts} +1 -1
  14. package/dist/{controllers/s-popover.d.ts → components/popover/popover.d.ts} +1 -1
  15. package/dist/{controllers/s-tooltip.d.ts → components/popover/tooltip.d.ts} +1 -1
  16. package/dist/components/popover/tooltip.test.d.ts +1 -0
  17. package/dist/components/popover/tooltip.visual.test.d.ts +1 -0
  18. package/dist/{controllers/s-table.d.ts → components/table/table.d.ts} +1 -1
  19. package/dist/{controllers/s-toast.d.ts → components/toast/toast.d.ts} +1 -1
  20. package/dist/components/toast/toast.test.d.ts +1 -0
  21. package/dist/components/toast/toast.visual.test.d.ts +1 -0
  22. package/dist/{controllers/s-uploader.d.ts → components/uploader/uploader.d.ts} +1 -1
  23. package/dist/controllers.d.ts +9 -0
  24. package/dist/css/stacks.css +2043 -1989
  25. package/dist/css/stacks.min.css +1 -1
  26. package/dist/index.d.ts +1 -1
  27. package/dist/js/stacks.js +545 -545
  28. package/dist/js/stacks.min.js +1 -1
  29. package/dist/test/test-utils.d.ts +136 -0
  30. package/lib/{css/atomic/borders.less → atomic/border.less} +18 -0
  31. package/lib/{css/base/icons.less → base/icon.less} +0 -9
  32. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +21 -0
  33. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +23 -0
  34. package/lib/components/avatar/avatar.a11y.test.ts +36 -0
  35. package/lib/components/avatar/avatar.visual.test.ts +54 -0
  36. package/lib/components/banner/banner.less +51 -0
  37. package/lib/{test/s-banner.test.ts → components/banner/banner.test.ts} +7 -3
  38. package/lib/{ts/controllers/s-banner.ts → components/banner/banner.ts} +1 -1
  39. package/lib/components/banner/banner.visual.test.ts +36 -0
  40. package/lib/components/button/button.a11y.test.ts +32 -0
  41. package/lib/{css/components/buttons.less → components/button/button.less} +3 -2
  42. package/lib/components/button/button.visual.test.ts +52 -0
  43. package/lib/{css/components/cards.less → components/card/card.less} +1 -1
  44. package/lib/components/check-control/check-control.less +17 -0
  45. package/lib/components/check-group/check-group.less +19 -0
  46. package/lib/{css/components → components/expandable}/expandable.less +3 -0
  47. package/lib/components/expandable/expandable.test.ts +53 -0
  48. package/lib/{ts/controllers/s-expandable-control.ts → components/expandable/expandable.ts} +1 -1
  49. package/lib/components/input-fill/input-fill.less +35 -0
  50. package/lib/components/input-icon/input-icon.less +45 -0
  51. package/lib/components/input-message/input-message.less +48 -0
  52. package/lib/{css/components/inputs.less → components/input_textarea/input_textarea.less} +0 -131
  53. package/lib/{css/components → components/link}/link.less +2 -2
  54. package/lib/{ts/controllers/s-modal.ts → components/modal/modal.ts} +1 -1
  55. package/lib/{ts/controllers/s-navigation-tablist.ts → components/navigation/navigation.ts} +1 -1
  56. package/lib/{css/components/notices.less → components/notice/notice.less} +0 -89
  57. package/lib/{css/components/popovers.less → components/popover/popover.less} +1 -0
  58. package/lib/{ts/controllers/s-popover.ts → components/popover/popover.ts} +1 -1
  59. package/lib/{test/s-tooltip.test.ts → components/popover/tooltip.test.ts} +6 -2
  60. package/lib/{ts/controllers/s-tooltip.ts → components/popover/tooltip.ts} +2 -2
  61. package/lib/{test/s-tooltip.visual.test.ts → components/popover/tooltip.visual.test.ts} +2 -2
  62. package/lib/{css/components/sidebar-widgets.less → components/sidebar-widget/sidebar-widget.less} +0 -1
  63. package/lib/{css/components → components/table}/table.less +0 -5
  64. package/lib/{ts/controllers/s-table.ts → components/table/table.ts} +1 -1
  65. package/lib/components/table-container/table-container.less +4 -0
  66. package/lib/components/toast/toast.less +35 -0
  67. package/lib/{test/s-toast.test.ts → components/toast/toast.test.ts} +7 -3
  68. package/lib/{ts/controllers/s-toast.ts → components/toast/toast.ts} +1 -1
  69. package/lib/components/toast/toast.visual.test.ts +27 -0
  70. package/lib/{ts/controllers/s-uploader.ts → components/uploader/uploader.ts} +1 -1
  71. package/lib/controllers.ts +33 -0
  72. package/lib/{ts/index.ts → index.ts} +1 -1
  73. package/lib/{css/stacks-dynamic.less → stacks-dynamic.less} +1 -2
  74. package/lib/stacks-static.less +93 -0
  75. package/lib/test/test-utils.ts +444 -0
  76. package/lib/tsconfig.json +1 -1
  77. package/package.json +17 -17
  78. package/dist/controllers/index.d.ts +0 -9
  79. package/lib/css/stacks-static.less +0 -87
  80. package/lib/test/s-avatar.a11y.test.ts +0 -77
  81. package/lib/test/s-banner.visual.test.ts +0 -61
  82. package/lib/test/s-btn.a11y.test.ts +0 -123
  83. package/lib/test/s-btn.visual.test.ts +0 -16
  84. package/lib/test/s-toast.visual.test.ts +0 -48
  85. package/lib/ts/controllers/index.ts +0 -17
  86. /package/lib/{css/atomic/colors.less → atomic/color.less} +0 -0
  87. /package/lib/{css/atomic → atomic}/flex.less +0 -0
  88. /package/lib/{css/atomic → atomic}/gap.less +0 -0
  89. /package/lib/{css/atomic → atomic}/grid.less +0 -0
  90. /package/lib/{css/atomic → atomic}/misc.less +0 -0
  91. /package/lib/{css/atomic → atomic}/spacing.less +0 -0
  92. /package/lib/{css/atomic → atomic}/typography.less +0 -0
  93. /package/lib/{css/atomic → atomic}/width-height.less +0 -0
  94. /package/lib/{css/base → base}/body.less +0 -0
  95. /package/lib/{css/base → base}/configuration-static.less +0 -0
  96. /package/lib/{css/base → base}/fieldset.less +0 -0
  97. /package/lib/{css/base/internals.less → base/internal.less} +0 -0
  98. /package/lib/{css/base → base}/reset-meyer.less +0 -0
  99. /package/lib/{css/base → base}/reset-normalize.less +0 -0
  100. /package/lib/{css/base → base}/reset.less +0 -0
  101. /package/lib/{css/components → components/activity-indicator}/activity-indicator.less +0 -0
  102. /package/lib/{css/components/anchors.less → components/anchor/anchor.less} +0 -0
  103. /package/lib/{css/components/avatars.less → components/avatar/avatar.less} +0 -0
  104. /package/lib/{css/components → components/award-bling}/award-bling.less +0 -0
  105. /package/lib/{css/components/badges.less → components/badge/badge.less} +0 -0
  106. /package/lib/{css/components → components/block-link}/block-link.less +0 -0
  107. /package/lib/{css/components → components/breadcrumbs}/breadcrumbs.less +0 -0
  108. /package/lib/{css/components/button-groups.less → components/button-group/button-group.less} +0 -0
  109. /package/lib/{css/components/checkboxes-radios.less → components/checkbox_radio/checkbox_radio.less} +0 -0
  110. /package/lib/{css/components/code-blocks.less → components/code-block/code-block.less} +0 -0
  111. /package/lib/{css/components → components/description}/description.less +0 -0
  112. /package/lib/{css/components/empty-states.less → components/empty-state/empty-state.less} +0 -0
  113. /package/lib/{css/components/labels.less → components/label/label.less} +0 -0
  114. /package/lib/{css/components/link-previews.less → components/link-preview/link-preview.less} +0 -0
  115. /package/lib/{css/components → components/menu}/menu.less +0 -0
  116. /package/lib/{css/components/modals.less → components/modal/modal.less} +0 -0
  117. /package/lib/{css/components → components/navigation}/navigation.less +0 -0
  118. /package/lib/{css/components/page-titles.less → components/page-title/page-title.less} +0 -0
  119. /package/lib/{css/components → components/pagination}/pagination.less +0 -0
  120. /package/lib/{css/components → components/post-summary}/post-summary.less +0 -0
  121. /package/lib/{css/components/progress-bars.less → components/progress-bar/progress-bar.less} +0 -0
  122. /package/lib/{css/components → components/prose}/prose.less +0 -0
  123. /package/lib/{css/components → components/select}/select.less +0 -0
  124. /package/lib/{css/components → components/spinner}/spinner.less +0 -0
  125. /package/lib/{css/components/tags.less → components/tag/tag.less} +0 -0
  126. /package/lib/{css/components/toggle-switches.less → components/toggle-switch/toggle-switch.less} +0 -0
  127. /package/lib/{css/components → components/topbar}/topbar.less +0 -0
  128. /package/lib/{css/components → components/uploader}/uploader.less +0 -0
  129. /package/lib/{css/components/user-cards.less → components/user-card/user-card.less} +0 -0
  130. /package/lib/{css/exports → exports}/constants-colors.less +0 -0
  131. /package/lib/{css/exports → exports}/constants-helpers.less +0 -0
  132. /package/lib/{css/exports → exports}/constants-type.less +0 -0
  133. /package/lib/{css/exports → exports}/exports.less +0 -0
  134. /package/lib/{css/exports → exports}/mixins.less +0 -0
  135. /package/lib/{css/input-utils.less → input-utils.less} +0 -0
  136. /package/lib/{css/stacks.less → stacks.less} +0 -0
  137. /package/lib/{ts/stacks.ts → stacks.ts} +0 -0
package/dist/css/stacks.css CHANGED
@@ -531,29 +531,6 @@ body.theme-highcontrast .s-activity-indicator {
531
531
  .s-anchors.s-anchors__muted .s-btn.s-btn__link:visited {
532
532
  color: var(--_an-a-fc, inherit);
533
533
  }
534
- .s-award-bling {
535
- --_ab-before-bg: unset;
536
- align-items: center;
537
- color: inherit;
538
- display: flex;
539
- }
540
- .s-award-bling.s-award-bling__gold {
541
- --_ab-before-bg: var(--gold);
542
- }
543
- .s-award-bling.s-award-bling__silver {
544
- --_ab-before-bg: var(--silver);
545
- }
546
- .s-award-bling.s-award-bling__bronze {
547
- --_ab-before-bg: var(--bronze);
548
- }
549
- .s-award-bling:before {
550
- background-color: var(--_ab-before-bg);
551
- border-radius: 100%;
552
- content: "";
553
- margin-right: var(--su4);
554
- height: var(--su8);
555
- width: var(--su8);
556
- }
557
534
  .s-avatar {
558
535
  --_av-size: var(--su-static16);
559
536
  --_av-bg: hsl(0, 0%, 100%);
@@ -642,6 +619,29 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
642
619
  -ms-user-select: none;
643
620
  user-select: none;
644
621
  }
622
+ .s-award-bling {
623
+ --_ab-before-bg: unset;
624
+ align-items: center;
625
+ color: inherit;
626
+ display: flex;
627
+ }
628
+ .s-award-bling.s-award-bling__gold {
629
+ --_ab-before-bg: var(--gold);
630
+ }
631
+ .s-award-bling.s-award-bling__silver {
632
+ --_ab-before-bg: var(--silver);
633
+ }
634
+ .s-award-bling.s-award-bling__bronze {
635
+ --_ab-before-bg: var(--bronze);
636
+ }
637
+ .s-award-bling:before {
638
+ background-color: var(--_ab-before-bg);
639
+ border-radius: 100%;
640
+ content: "";
641
+ margin-right: var(--su4);
642
+ height: var(--su8);
643
+ width: var(--su8);
644
+ }
645
645
  .s-badge,
646
646
  .s-topbar--notice {
647
647
  --_ba-as: unset;
@@ -842,578 +842,244 @@ body.theme-highcontrast .s-badge.s-badge__danger.s-badge__filled {
842
842
  a.s-badge:hover {
843
843
  text-decoration: none;
844
844
  }
845
- .s-btn {
846
- --_bu-baw: var(--su-static1);
847
- --_bu-bc: transparent;
848
- --_bu-bg: transparent;
849
- --_bu-br: var(--br-sm);
850
- --_bu-bs: none;
851
- --_bu-fc: var(--theme-button-color);
852
- --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
853
- --_bu-fs: var(--fs-body1);
854
- --_bu-p: 0.8em;
855
- --_bu-bc-selected: transparent;
856
- --_bu-bg-active: var(--theme-button-active-background-color);
857
- --_bu-bg-hover: var(--theme-button-hover-background-color);
858
- --_bu-bg-selected: var(--theme-button-selected-background-color);
859
- --_bu-fc-active: var(--theme-button-hover-color);
860
- --_bu-fc-hover: var(--theme-button-hover-color);
861
- --_bu-fc-selected: var(--theme-button-selected-color);
862
- --_bu-filled-bc: var(--theme-button-filled-border-color);
863
- --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
864
- --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
865
- --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
866
- --_bu-filled-bg: var(--theme-button-filled-background-color);
867
- --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
868
- --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
869
- --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
870
- --_bu-filled-fc: var(--theme-button-filled-color);
871
- --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
872
- --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
873
- --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
874
- --_bu-outlined-bc: var(--theme-button-outlined-border-color);
875
- --_bu-outlined-bg: var(--theme-button-outlined-background-color);
876
- --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
877
- --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
878
- --_bu-outlined-fc-selected: var(--theme-button-selected-color);
879
- --_bu-badge-o: 0.5;
880
- --_bu-dropdown-bw: var(--su-static4);
881
- --_bu-number-fc: var(--white);
882
- --_bu-number-fc-selected: var(--_bu-number-fc);
883
- background-color: var(--_bu-bg);
884
- border: var(--_bu-baw) solid var(--_bu-bc);
885
- border-radius: var(--_bu-br);
886
- box-shadow: var(--_bu-bs);
887
- color: var(--_bu-fc);
888
- font-size: var(--_bu-fs);
889
- padding: var(--_bu-p);
890
- cursor: pointer;
891
- display: inline-block;
892
- font-family: inherit;
893
- font-weight: normal;
894
- line-height: var(--lh-sm);
895
- position: relative;
896
- outline: none;
897
- text-align: center;
898
- text-decoration: none;
899
- user-select: none;
845
+ .s-banner {
846
+ --_no-x-offset: 0;
847
+ --_no-bc: var(--bc-medium);
848
+ --_no-bg: var(--black-050);
849
+ --_no-fc: var(--fc-medium);
850
+ --_no-btn-bg-focus: var(--black-100);
851
+ --_no-btn-bg-active: var(--black-150);
852
+ background: var(--_no-bg);
853
+ border-color: var(--_no-bc);
854
+ color: var(--_no-fc);
855
+ border-style: solid;
856
+ font-size: var(--fs-body1);
857
+ border-width: var(--su-static1) 0;
858
+ inset: 0 0 auto 0;
859
+ padding: var(--su12);
860
+ position: fixed;
861
+ -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
862
+ transform: translate3d(0, var(--_no-x-offset), 0);
863
+ width: 100%;
864
+ z-index: calc(var(--zi-navigation-fixed) - 1);
900
865
  }
901
866
  @media (prefers-color-scheme: dark) {
902
- body.theme-system .s-btn {
903
- --_bu-bs: none;
904
- --_bu-filled-bs: var(--_bu-bs);
867
+ body.theme-system .s-banner:not(.s-banner__important) {
868
+ --_no-bc: var(--_no-bg);
905
869
  }
906
870
  }
907
- body.theme-dark .s-btn,
908
- .theme-dark__forced .s-btn,
909
- body.theme-system .theme-dark__forced .s-btn {
910
- --_bu-bs: none;
911
- --_bu-filled-bs: var(--_bu-bs);
871
+ body.theme-dark .s-banner:not(.s-banner__important),
872
+ .theme-dark__forced .s-banner:not(.s-banner__important),
873
+ body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
874
+ --_no-bc: var(--_no-bg);
912
875
  }
913
- body.theme-highcontrast .s-btn {
914
- --_bu-bc: currentColor;
915
- --_bu-filled-bc: var(--_bu-bc);
916
- --_bu-outlined-bc: var(--_bu-bc);
917
- --_bu-bc-selected: var(--_bu-bc);
918
- --_bu-badge-o: 0.8;
876
+ body.theme-highcontrast .s-banner:not(.s-banner__important) {
877
+ --_no-bc: currentColor;
919
878
  }
920
- fieldset[disabled] .s-btn,
921
- .s-btn[disabled],
922
- .s-btn[aria-disabled="true"] {
923
- --_bu-bs: none !important;
924
- --_bu-filled-bs: var(--_bu-bs);
925
- opacity: var(--_o-disabled-static);
926
- pointer-events: none;
927
- text-decoration: none;
879
+ @media (prefers-color-scheme: dark) {
880
+ body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
881
+ --_no-bc: currentColor;
882
+ }
928
883
  }
929
- button .s-btn,
930
- button[type="submit"] .s-btn,
931
- button[type="reset"] .s-btn {
932
- -webkit-appearance: button;
884
+ body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
885
+ --_no-bc: currentColor;
933
886
  }
934
- .s-btn.grid {
935
- display: flex;
887
+ .s-banner__important {
888
+ --_no-bc: var(--_no-bg);
889
+ --_no-bg: var(--black-700);
890
+ --_no-fc: var(--white);
891
+ --_no-btn-bg-focus: var(--black-800);
892
+ --_no-btn-bg-active: var(--black-900);
936
893
  }
937
- .s-btn.is-loading {
938
- padding-left: 2.2em;
894
+ body.theme-highcontrast .s-banner__important {
895
+ --_no-bc: var(--_no-bg);
939
896
  }
940
- .s-btn.is-loading .svg-icon:first-child {
941
- margin-left: -23px;
942
- opacity: 0;
897
+ .s-banner__danger {
898
+ --_no-bc: var(--red-200);
899
+ --_no-bg: var(--red-050);
900
+ --_no-btn-bg-active: var(--red-200);
901
+ --_no-btn-bg-focus: var(--red-100);
943
902
  }
944
- .s-btn.is-selected,
945
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn {
946
- background-color: var(--_bu-bg-selected);
947
- border-color: var(--_bu-bc-selected);
948
- color: var(--_bu-fc-selected);
903
+ body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
904
+ --_no-bg: var(--red-200);
949
905
  }
950
- .s-btn.is-selected .s-btn--number,
951
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn .s-btn--number {
952
- color: var(--_bu-number-fc-selected);
906
+ .s-banner__danger.s-banner__important {
907
+ --_no-bc: var(--_no-bg);
908
+ --_no-bg: var(--red-500);
909
+ --_no-btn-bg-active: var(--red-700);
910
+ --_no-btn-bg-focus: var(--red-600);
953
911
  }
954
- .s-btn.is-selected.s-btn__filled,
955
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__filled {
956
- border-color: var(--_bu-filled-bc-selected);
957
- background-color: var(--_bu-filled-bg-selected);
958
- color: var(--_bu-filled-fc-selected);
912
+ @media (prefers-color-scheme: dark) {
913
+ body.theme-system .s-banner__danger.s-banner__important {
914
+ --_no-bg: var(--red-400);
915
+ --_no-fc: var(--black-900);
916
+ }
959
917
  }
960
- .s-btn.is-selected.s-btn__outlined,
961
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined {
962
- border-color: var(--_bu-outlined-bc-selected);
963
- background-color: var(--_bu-outlined-bg-selected);
964
- color: var(--_bu-outlined-fc-selected);
918
+ body.theme-dark .s-banner__danger.s-banner__important,
919
+ .theme-dark__forced .s-banner__danger.s-banner__important,
920
+ body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
921
+ --_no-bg: var(--red-400);
922
+ --_no-fc: var(--black-900);
965
923
  }
966
- body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
967
- body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
968
- --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
969
- --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
970
- --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
971
- --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
924
+ @media (prefers-color-scheme: dark) {
925
+ body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
926
+ --_no-bg: var(--red-500);
927
+ --_no-fc: var(--white);
928
+ }
972
929
  }
973
- .s-btn.is-selected:not(:focus),
974
- .s-btn-group.s-btn-group--radio .s-btn--radio:checked:not(:focus) + .s-btn {
975
- box-shadow: none;
930
+ body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
931
+ --_no-bg: var(--red-500);
932
+ --_no-fc: var(--white);
976
933
  }
977
- .s-btn.s-btn__filled {
978
- border-color: var(--_bu-filled-bc);
979
- background-color: var(--_bu-filled-bg);
980
- box-shadow: var(--_bu-filled-bs);
981
- color: var(--_bu-filled-fc);
934
+ .s-banner__info {
935
+ --_no-bc: var(--theme-secondary-150);
936
+ --_no-bg: var(--theme-secondary-050);
937
+ --_no-btn-bg-focus: var(--theme-secondary-100);
938
+ --_no-btn-bg-active: var(--theme-secondary-150);
939
+ --_no-code-bg: var(--theme-secondary-150);
982
940
  }
983
- .s-btn.s-btn__outlined {
984
- border-color: var(--_bu-outlined-bc);
985
- background-color: var(--_bu-outlined-bg);
941
+ body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
942
+ --_no-bg: var(--theme-secondary-100);
986
943
  }
987
- .s-btn.s-btn__link,
988
- .s-btn.s-btn__unset {
989
- outline: initial;
944
+ @media (prefers-color-scheme: dark) {
945
+ body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
946
+ --_no-bg: var(--theme-secondary-100);
947
+ }
990
948
  }
991
- .s-btn.s-btn__link:focus,
992
- .s-btn.s-btn__unset:focus,
993
- .s-btn.s-btn__link:focus-visible,
994
- .s-btn.s-btn__unset:focus-visible {
995
- outline-style: auto;
949
+ body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
950
+ --_no-bg: var(--theme-secondary-100);
996
951
  }
997
- .s-btn.s-btn__link {
998
- --_bu-baw: 0;
999
- --_bu-br: 0;
1000
- --_bu-bs: none;
1001
- --_bu-filled-bs: var(--_bu-bs);
1002
- --_bu-focus-ring: none;
1003
- --_bu-p: 0;
1004
- --_li-fc: var(--theme-link-color);
1005
- --_li-fc-hover: var(--theme-link-color-hover);
1006
- --_li-fc-visited: var(--theme-link-color-visited);
1007
- color: var(--_li-fc);
1008
- cursor: pointer;
1009
- text-decoration: none;
1010
- user-select: auto;
1011
- display: inline;
1012
- font: inherit;
1013
- text-align: inherit;
952
+ .s-banner__info.s-banner__important {
953
+ --_no-bc: var(--_no-bg);
954
+ --_no-bg: var(--theme-secondary-400);
955
+ --_no-btn-bg-active: var(--theme-secondary-600);
956
+ --_no-btn-bg-focus: var(--theme-secondary-500);
1014
957
  }
1015
- .s-btn.s-btn__link,
1016
- .s-btn.s-btn__link:hover,
1017
- .s-btn.s-btn__link:active,
1018
- .s-btn.s-btn__link:focus,
1019
- .s-btn.s-btn__link[disabled],
1020
- .s-btn.s-btn__link[aria-disabled="true"] {
1021
- --_bu-bg: none;
958
+ @media (prefers-color-scheme: dark) {
959
+ body.theme-system .s-banner__info.s-banner__important {
960
+ --_no-bg: var(--theme-secondary-300);
961
+ --_no-fc: var(--black-900);
962
+ }
1022
963
  }
1023
- .s-btn.s-btn__link.s-btn__dropdown {
1024
- padding-right: 0.9em;
964
+ body.theme-dark .s-banner__info.s-banner__important,
965
+ .theme-dark__forced .s-banner__info.s-banner__important,
966
+ body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
967
+ --_no-bg: var(--theme-secondary-300);
968
+ --_no-fc: var(--black-900);
1025
969
  }
1026
- body.theme-highcontrast .s-btn.s-btn__link {
1027
- text-decoration: underline;
970
+ @media (prefers-color-scheme: dark) {
971
+ body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
972
+ --_no-bg: var(--theme-secondary-400);
973
+ --_no-fc: var(--white);
974
+ }
1028
975
  }
1029
- .s-btn.s-btn__link.s-link__danger:visited,
1030
- .s-btn.s-btn__link.s-link__grayscale:visited,
1031
- .s-btn.s-btn__link.s-link__inherit:visited,
1032
- .s-btn.s-btn__link.s-link__muted:visited,
1033
- .s-btn.s-btn__link.s-link__visited:visited {
1034
- color: var(--_li-fc-visited);
976
+ body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
977
+ --_no-bg: var(--theme-secondary-400);
978
+ --_no-fc: var(--white);
1035
979
  }
1036
- .s-btn.s-btn__link.s-link__danger:visited:active,
1037
- .s-btn.s-btn__link.s-link__grayscale:visited:active,
1038
- .s-btn.s-btn__link.s-link__inherit:visited:active,
1039
- .s-btn.s-btn__link.s-link__muted:visited:active,
1040
- .s-btn.s-btn__link.s-link__visited:visited:active,
1041
- .s-btn.s-btn__link.s-link__danger:visited:hover,
1042
- .s-btn.s-btn__link.s-link__grayscale:visited:hover,
1043
- .s-btn.s-btn__link.s-link__inherit:visited:hover,
1044
- .s-btn.s-btn__link.s-link__muted:visited:hover,
1045
- .s-btn.s-btn__link.s-link__visited:visited:hover {
1046
- color: var(--_li-fc-hover);
980
+ .s-banner__success {
981
+ --_no-bc: var(--green-200);
982
+ --_no-bg: var(--green-050);
983
+ --_no-btn-bg-active: var(--green-200);
984
+ --_no-btn-bg-focus: var(--green-100);
1047
985
  }
1048
- .s-btn.s-btn__link.s-link__dropdown {
1049
- padding-right: 0.9em;
1050
- position: relative;
986
+ body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
987
+ --_no-bg: var(--green-200);
1051
988
  }
1052
- .s-btn.s-btn__link.s-link__dropdown:after {
1053
- border-width: var(--su-static4);
1054
- border-bottom-width: 0;
1055
- border-color: currentColor transparent;
1056
- border-style: solid;
1057
- border-top-width: var(--su-static4);
1058
- content: "";
1059
- pointer-events: none;
1060
- position: absolute;
1061
- right: 0;
1062
- top: calc(50% - var(--su-static2));
1063
- z-index: var(--zi-active);
989
+ .s-banner__success.s-banner__important {
990
+ --_no-bc: var(--_no-bg);
991
+ --_no-bg: var(--green-400);
992
+ --_no-fc: var(--black-900);
993
+ --_no-btn-bg-active: var(--green-600);
994
+ --_no-btn-bg-focus: var(--green-500);
1064
995
  }
1065
- .s-btn.s-btn__link.s-link__underlined {
1066
- text-decoration: underline !important;
996
+ @media (prefers-color-scheme: dark) {
997
+ body.theme-system .s-banner__success.s-banner__important {
998
+ --_no-bg: var(--green-500);
999
+ --_no-fc: var(--white);
1000
+ }
1067
1001
  }
1068
- .s-btn.s-btn__link.s-link__visited {
1069
- --_li-fc-hover: var(--theme-link-color-hover);
1070
- --_li-fc-visited: var(--theme-link-color-visited);
1002
+ body.theme-dark .s-banner__success.s-banner__important,
1003
+ .theme-dark__forced .s-banner__success.s-banner__important,
1004
+ body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
1005
+ --_no-bg: var(--green-500);
1006
+ --_no-fc: var(--white);
1071
1007
  }
1072
- .s-btn.s-btn__link.s-link__danger {
1073
- --_li-fc: var(--red-500);
1074
- --_li-fc-hover: var(--red-400);
1075
- --_li-fc-visited: var(--red-600);
1008
+ body.theme-highcontrast .s-banner__success.s-banner__important {
1009
+ --_no-bg: var(--green-500);
1010
+ --_no-fc: var(--white);
1076
1011
  }
1077
- .s-btn.s-btn__link.s-link__grayscale {
1078
- --_li-fc: var(--black-800);
1079
- --_li-fc-hover: var(--black-900);
1080
- --_li-fc-visited: var(--black-700);
1012
+ .s-banner__warning {
1013
+ --_no-bc: var(--yellow-300);
1014
+ --_no-bg: var(--yellow-050);
1015
+ --_no-btn-bg-active: var(--yellow-300);
1016
+ --_no-btn-bg-focus: var(--yellow-200);
1017
+ --_no-code-bg: var(--yellow-200);
1081
1018
  }
1082
- .s-btn.s-btn__link.s-link__inherit {
1083
- --_li-fc: inherit !important;
1084
- --_li-fc-hover: inherit !important;
1085
- --_li-fc-visited: inherit !important;
1019
+ body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
1020
+ --_no-bg: var(--yellow-200);
1086
1021
  }
1087
- .s-btn.s-btn__link.s-link__muted {
1088
- --_li-fc: var(--black-500);
1089
- --_li-fc-hover: var(--black-600);
1090
- --_li-fc-visited: var(--black-700);
1022
+ .s-banner__warning.s-banner__important {
1023
+ --_no-bc: var(--_no-bg);
1024
+ --_no-bg: var(--yellow-400);
1025
+ --_no-fc: var(--black-900);
1026
+ --_no-btn-bg-active: var(--yellow-600);
1027
+ --_no-btn-bg-focus: var(--yellow-500);
1091
1028
  }
1092
- fieldset[disabled] .s-btn.s-btn__link {
1093
- box-shadow: none !important;
1094
- opacity: var(--_o-disabled-static);
1095
- pointer-events: none;
1029
+ @media (prefers-color-scheme: dark) {
1030
+ body.theme-system .s-banner__warning.s-banner__important {
1031
+ --_no-bg: var(--yellow-600);
1032
+ --_no-fc: var(--white);
1033
+ }
1096
1034
  }
1097
- .s-btn.s-btn__link:active,
1098
- .s-btn.s-btn__link:hover {
1099
- color: var(--_li-fc-hover);
1035
+ body.theme-dark .s-banner__warning.s-banner__important,
1036
+ .theme-dark__forced .s-banner__warning.s-banner__important,
1037
+ body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
1038
+ --_no-bg: var(--yellow-600);
1039
+ --_no-fc: var(--white);
1100
1040
  }
1101
- button.s-btn.s-btn__link {
1102
- appearance: none;
1103
- background: transparent;
1104
- border: 0;
1105
- font-family: inherit;
1106
- line-height: inherit;
1107
- padding: 0;
1108
- user-select: auto;
1041
+ body.theme-highcontrast .s-banner__warning.s-banner__important {
1042
+ --_no-bg: var(--yellow-700);
1043
+ --_no-fc: var(--white);
1109
1044
  }
1110
- button.s-btn.s-btn__link:focus {
1111
- outline: none;
1045
+ .s-banner code {
1046
+ background: var(--_no-code-bg, transparent);
1112
1047
  }
1113
- .s-btn.s-btn__unset,
1114
- .s-btn.s-btn__unset:hover,
1115
- .s-btn.s-btn__unset:active,
1116
- .s-btn.s-btn__unset:focus {
1117
- --_bu-baw: 0;
1118
- --_bu-bg: none;
1119
- --_bu-br: 0;
1120
- --_bu-bs: none;
1121
- --_bu-filled-bs: var(--_bu-bs);
1122
- --_bu-fc: unset;
1123
- --_bu-focus-ring: none;
1124
- --_bu-p: 0;
1125
- cursor: default;
1126
- font: unset;
1127
- user-select: auto;
1048
+ .s-banner .s-banner--btn {
1049
+ color: inherit;
1050
+ padding: var(--su8);
1128
1051
  }
1129
- .s-btn.s-btn__dropdown {
1130
- padding-right: calc(var(--_bu-p) * 2.5);
1052
+ .s-banner .s-banner--btn:not(:focus) {
1053
+ box-shadow: none;
1131
1054
  }
1132
- .s-btn.s-btn__dropdown:after {
1133
- border-color: currentColor transparent;
1134
- border-style: solid;
1135
- border-width: var(--_bu-dropdown-bw);
1136
- border-bottom-width: 0;
1137
- content: "";
1138
- pointer-events: none;
1139
- position: absolute;
1140
- right: var(--_bu-p);
1141
- top: calc(50% - var(--su-static2));
1142
- z-index: var(--zi-active);
1055
+ .s-banner .s-banner--btn:active {
1056
+ background: var(--_no-btn-bg-active);
1143
1057
  }
1144
- .s-btn.s-btn__icon .svg-icon {
1145
- vertical-align: baseline;
1146
- margin-top: -0.3em;
1147
- margin-bottom: -0.3em;
1148
- transition: opacity 200ms var(--te-smooth);
1058
+ .s-banner .s-banner--btn:focus,
1059
+ .s-banner .s-banner--btn:hover {
1060
+ background: var(--_no-btn-bg-focus);
1149
1061
  }
1150
- .s-btn.s-btn__xs {
1151
- --_bu-fs: var(--fs-fine);
1152
- --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1153
- --_bu-p: 0.6em;
1062
+ .s-banner[aria-hidden="true"] {
1063
+ --_no-x-offset: calc(var(--su48) + var(--su2) * -1);
1064
+ opacity: 0;
1065
+ visibility: hidden;
1154
1066
  }
1155
- .s-btn.s-btn__sm {
1156
- --_bu-fs: var(--fs-caption);
1067
+ .s-banner[aria-hidden="false"] {
1068
+ --_no-x-offset: calc(var(--su48) + var(--su1));
1069
+ opacity: 1;
1070
+ visibility: visible;
1157
1071
  }
1158
- .s-btn.s-btn__md {
1159
- --_bu-fs: var(--fs-body3);
1160
- --_bu-br: calc(var(--br-sm) + var(--su-static1));
1161
- --_bu-p: 0.7em;
1072
+ .s-banner.is-pinned {
1073
+ z-index: calc(var(--zi-navigation-fixed) + 1);
1162
1074
  }
1163
- body.theme-highcontrast .s-btn.s-btn__danger,
1164
- body.theme-highcontrast .s-btn.s-btn__muted {
1165
- --_bu-filled-bc: transparent;
1075
+ .s-banner__body-pt {
1076
+ padding-top: 93px;
1166
1077
  }
1167
- .s-btn.s-btn__danger {
1168
- --_bu-bg-active: var(--red-100);
1169
- --_bu-bg-hover: var(--red-050);
1170
- --_bu-bg-selected: var(--red-200);
1171
- --_bu-fc: var(--red-600);
1172
- --_bu-fc-active: var(--_bu-fc);
1173
- --_bu-fc-hover: var(--red-700);
1174
- --_bu-fc-selected: var(--red-900);
1175
- --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
1176
- --_bu-filled-bc: transparent;
1177
- --_bu-filled-bc-selected: var(--_bu-filled-bc);
1178
- --_bu-filled-bg: var(--red-500);
1179
- --_bu-filled-bg-active: var(--red-700);
1180
- --_bu-filled-bg-hover: var(--red-600);
1181
- --_bu-filled-bg-selected: var(--red-800);
1182
- --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
1183
- --_bu-filled-fc: var(--white);
1184
- --_bu-filled-fc-active: var(--_bu-filled-fc);
1185
- --_bu-filled-fc-hover: var(--_bu-filled-fc);
1186
- --_bu-filled-fc-selected: var(--_bu-filled-fc);
1187
- --_bu-outlined-bc: var(--red-500);
1188
- --_bu-outlined-bc-selected: var(--red-700);
1189
- --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1190
- --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1191
- }
1192
- .s-btn.s-btn__danger.s-btn__filled {
1193
- --_bu-number-fc: var(--black);
1194
- }
1195
- @media (prefers-color-scheme: dark) {
1196
- body.theme-system .s-btn.s-btn__danger.s-btn__filled {
1197
- --_bu-filled-fc: var(--black);
1198
- --_bu-filled-fc-selected: var(--white);
1199
- --_bu-number-fc: var(--white);
1200
- --_bu-number-fc-selected: var(--black);
1201
- }
1202
- }
1203
- body.theme-dark .s-btn.s-btn__danger.s-btn__filled,
1204
- .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled,
1205
- body.theme-system .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled {
1206
- --_bu-filled-fc: var(--black);
1207
- --_bu-filled-fc-selected: var(--white);
1208
- --_bu-number-fc: var(--white);
1209
- --_bu-number-fc-selected: var(--black);
1210
- }
1211
- @media (prefers-color-scheme: dark) {
1212
- body.theme-highcontrast.theme-system .s-btn.s-btn__danger.s-btn__filled {
1213
- --_bu-filled-fc: var(--white);
1214
- --_bu-number-fc: var(--black);
1215
- --_bu-number-fc-selected: var(--black);
1216
- }
1217
- }
1218
- body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
1219
- --_bu-filled-fc: var(--white);
1220
- --_bu-number-fc: var(--black);
1221
- --_bu-number-fc-selected: var(--black);
1222
- }
1223
- .s-btn.s-btn__muted {
1224
- --_bu-bg-active: var(--black-050);
1225
- --_bu-bg-hover: var(--black-025);
1226
- --_bu-bg-selected: var(--black-075);
1227
- --_bu-fc: var(--black-500);
1228
- --_bu-fc-active: var(--_bu-fc);
1229
- --_bu-fc-hover: var(--black-600);
1230
- --_bu-fc-selected: var(--black-700);
1231
- --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1232
- --_bu-filled-bc: transparent;
1233
- --_bu-filled-bc-selected: var(--_bu-filled-bc);
1234
- --_bu-filled-bg: var(--black-100);
1235
- --_bu-filled-bg-active: var(--black-200);
1236
- --_bu-filled-bg-hover: var(--black-150);
1237
- --_bu-filled-bg-selected: var(--black-350);
1238
- --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
1239
- --_bu-filled-fc: var(--black-700);
1240
- --_bu-filled-fc-active: var(--_bu-filled-fc);
1241
- --_bu-filled-fc-hover: var(--_bu-filled-fc);
1242
- --_bu-filled-fc-selected: var(--black-800);
1243
- --_bu-outlined-bc: var(--black-300);
1244
- --_bu-outlined-bc-selected: var(--black-400);
1245
- --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1246
- --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1247
- }
1248
- body.theme-highcontrast .s-btn.s-btn__muted {
1249
- --_bu-filled-bg: var(--black-400);
1250
- --_bu-filled-bg-active: var(--black-600);
1251
- --_bu-filled-bg-hover: var(--black-500);
1252
- --_bu-filled-bg-selected: var(--black-700);
1253
- --_bu-filled-fc: var(--white);
1254
- --_bu-filled-fc-selected: var(--_bu-filled-fc);
1255
- }
1256
- body.theme-highcontrast .s-btn.s-btn__muted.s-btn__filled {
1257
- --_bu-number-fc: var(--black);
1258
- }
1259
- .s-btn.s-btn__primary {
1260
- --_bu-bg: var(--theme-button-primary-background-color);
1261
- --_bu-bg-active: var(--theme-button-primary-active-background-color);
1262
- --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
1263
- --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
1264
- --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
1265
- --_bu-fc: var(--theme-button-primary-color);
1266
- --_bu-fc-active: var(--theme-button-primary-hover-color);
1267
- --_bu-fc-hover: var(--theme-button-primary-hover-color);
1268
- --_bu-fc-selected: var(--theme-button-primary-selected-color);
1269
- --_bu-number-fc: var(--theme-button-primary-number-color);
1270
- }
1271
- @media (prefers-color-scheme: dark) {
1272
- body.theme-system .s-btn.s-btn__primary {
1273
- --_bu-bg: var(--theme-secondary-300);
1274
- --_bu-bg-active: var(--theme-secondary-400);
1275
- --_bu-bg-hover: var(--theme-secondary-350);
1276
- --_bu-fc: var(--black);
1277
- --_bu-fc-active: var(--_bu-fc);
1278
- --_bu-fc-hover: var(--_bu-fc);
1279
- --_bu-fc-selected: var(--white);
1280
- --_bu-number-fc: var(--white);
1281
- --_bu-number-fc-selected: var(--black);
1282
- }
1283
- }
1284
- body.theme-dark .s-btn.s-btn__primary,
1285
- .theme-dark__forced .s-btn.s-btn__primary,
1286
- body.theme-system .theme-dark__forced .s-btn.s-btn__primary {
1287
- --_bu-bg: var(--theme-secondary-300);
1288
- --_bu-bg-active: var(--theme-secondary-400);
1289
- --_bu-bg-hover: var(--theme-secondary-350);
1290
- --_bu-fc: var(--black);
1291
- --_bu-fc-active: var(--_bu-fc);
1292
- --_bu-fc-hover: var(--_bu-fc);
1293
- --_bu-fc-selected: var(--white);
1294
- --_bu-number-fc: var(--white);
1295
- --_bu-number-fc-selected: var(--black);
1296
- }
1297
- body.theme-highcontrast .s-btn.s-btn__primary {
1298
- --_bu-bc: transparent;
1299
- }
1300
- @media (prefers-color-scheme: dark) {
1301
- body.theme-highcontrast.theme-system .s-btn.s-btn__primary {
1302
- --_bu-bg: var(--theme-secondary-400);
1303
- --_bu-bg-active: var(--theme-secondary-600);
1304
- --_bu-bg-hover: var(--theme-secondary-500);
1305
- --_bu-fc: var(--white);
1306
- --_bu-number-fc: var(--black);
1307
- }
1308
- }
1309
- body.theme-highcontrast.theme-dark .s-btn.s-btn__primary {
1310
- --_bu-bg: var(--theme-secondary-400);
1311
- --_bu-bg-active: var(--theme-secondary-600);
1312
- --_bu-bg-hover: var(--theme-secondary-500);
1313
- --_bu-fc: var(--white);
1314
- --_bu-number-fc: var(--black);
1315
- }
1316
- body.theme-highcontrast .s-btn.s-btn__facebook,
1317
- body.theme-highcontrast .s-btn.s-btn__github {
1318
- --_bu-bc: transparent;
1319
- }
1320
- .s-btn.s-btn__facebook {
1321
- --_bu-bc: transparent;
1322
- --_bu-bg: #385499;
1323
- --_bu-bg-active: #2a4074;
1324
- --_bu-bg-hover: #314a86;
1325
- --_bu-fc: #fff;
1326
- --_bu-fc-active: var(--_bu-fc);
1327
- --_bu-fc-hover: var(--_bu-fc);
1328
- --_bu-hc-bc: transparent;
1329
- }
1330
- .s-btn.s-btn__google {
1331
- --_bu-bc: var(--bc-medium);
1332
- --_bu-bg: var(--white);
1333
- --_bu-bg-active: var(--black-050);
1334
- --_bu-bg-hover: var(--black-025);
1335
- --_bu-fc: var(--fc-medium);
1336
- --_bu-fc-active: var(--fc-dark);
1337
- --_bu-fc-hover: var(--black-800);
1338
- --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1339
- }
1340
- .s-btn.s-btn__github {
1341
- --_bu-bg: var(--black-750);
1342
- --_bu-bg-active: var(--black);
1343
- --_bu-bg-hover: var(--black-800);
1344
- --_bu-fc: var(--white);
1345
- --_bu-fc-active: var(--white);
1346
- --_bu-fc-hover: var(--white);
1347
- --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1348
- --_bu-hc-bc: transparent;
1349
- }
1350
- .s-btn .s-btn--badge {
1351
- opacity: var(--_bu-badge-o);
1352
- display: inline-block;
1353
- border-radius: var(--br-sm);
1354
- padding: var(--su2) calc(var(--su4) - var(--su1));
1355
- font-size: var(--fs-caption);
1356
- line-height: var(--lh-xs);
1357
- background-color: currentColor;
1358
- }
1359
- .s-btn .s-btn--number {
1360
- color: var(--_bu-number-fc);
1361
- }
1362
- .s-btn--radio {
1363
- border: 0;
1364
- clip-path: inset(50%);
1365
- clip: rect(1px, 1px, 1px, 1px);
1366
- height: 1px;
1367
- margin: -1px;
1368
- overflow-wrap: normal;
1369
- overflow: hidden;
1370
- padding: 0;
1371
- position: absolute;
1372
- width: 1px;
1373
- }
1374
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover,
1375
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus {
1376
- background-color: var(--_bu-bg-hover);
1377
- color: var(--_bu-fc-hover);
1378
- }
1379
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover.s-btn__filled,
1380
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus.s-btn__filled {
1381
- background-color: var(--_bu-filled-bg-hover);
1382
- color: var(--_bu-filled-fc-hover);
1383
- }
1384
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active {
1385
- background-color: var(--_bu-bg-active);
1386
- color: var(--_bu-fc-active);
1387
- }
1388
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active.s-btn__filled {
1389
- background-color: var(--_bu-filled-bg-active);
1390
- color: var(--_bu-filled-fc-active);
1391
- }
1392
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):visited:not(:hover):not(:focus) {
1393
- background-color: var(--_bu-bg);
1394
- color: var(--_bu-fc);
1395
- }
1396
- .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):visited:not(:hover):not(:focus).s-btn__filled {
1397
- background-color: var(--_bu-filled-bg);
1398
- color: var(--_bu-filled-fc);
1399
- }
1400
- .s-btn:focus,
1401
- .s-btn--radio:focus + .s-btn {
1402
- box-shadow: var(--_bu-focus-ring);
1403
- outline: none;
1404
- }
1405
- .s-empty-state {
1406
- color: var(--fc-light);
1407
- text-align: center;
1408
- margin-left: auto;
1409
- margin-right: auto;
1410
- }
1411
- .s-empty-state p {
1412
- font-size: var(--fs-body1);
1413
- margin-bottom: var(--su12);
1414
- }
1415
- .s-empty-state p strong {
1416
- color: var(--fc-dark);
1078
+ .s-banner .s-banner--container {
1079
+ margin: 0 auto;
1080
+ max-width: calc(var(--s-step) * 10);
1081
+ position: relative;
1082
+ width: 100%;
1417
1083
  }
1418
1084
  a.s-block-link,
1419
1085
  .s-block-link {
@@ -1562,1688 +1228,2049 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1562
1228
  .s-breadcrumbs .s-breadcrumbs--link:hover {
1563
1229
  --_br-link-fc: var(--fc-medium);
1564
1230
  }
1565
- .s-btn-group {
1566
- display: flex;
1567
- flex-wrap: wrap;
1568
- margin-bottom: var(--su-static1);
1569
- }
1570
- @media (max-width: 640px) {
1571
- html .s-btn-group .s-btn {
1572
- padding-left: 0.4em;
1573
- padding-right: 0.4em;
1574
- }
1575
- html .s-btn-group .s-btn.s-btn__dropdown {
1576
- padding-right: 1.2em;
1577
- }
1578
- html .s-btn-group .s-btn.s-btn__dropdown:after {
1579
- right: 0.4em;
1231
+ .s-btn {
1232
+ --_bu-baw: var(--su-static1);
1233
+ --_bu-bc: transparent;
1234
+ --_bu-bg: transparent;
1235
+ --_bu-br: var(--br-sm);
1236
+ --_bu-bs: none;
1237
+ --_bu-fc: var(--theme-button-color);
1238
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
1239
+ --_bu-fs: var(--fs-body1);
1240
+ --_bu-p: 0.8em;
1241
+ --_bu-bc-selected: transparent;
1242
+ --_bu-bg-active: var(--theme-button-active-background-color);
1243
+ --_bu-bg-hover: var(--theme-button-hover-background-color);
1244
+ --_bu-bg-selected: var(--theme-button-selected-background-color);
1245
+ --_bu-fc-active: var(--theme-button-hover-color);
1246
+ --_bu-fc-hover: var(--theme-button-hover-color);
1247
+ --_bu-fc-selected: var(--theme-button-selected-color);
1248
+ --_bu-filled-bc: var(--theme-button-filled-border-color);
1249
+ --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
1250
+ --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
1251
+ --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
1252
+ --_bu-filled-bg: var(--theme-button-filled-background-color);
1253
+ --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
1254
+ --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
1255
+ --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
1256
+ --_bu-filled-fc: var(--theme-button-filled-color);
1257
+ --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
1258
+ --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
1259
+ --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
1260
+ --_bu-outlined-bc: var(--theme-button-outlined-border-color);
1261
+ --_bu-outlined-bg: var(--theme-button-outlined-background-color);
1262
+ --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
1263
+ --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
1264
+ --_bu-outlined-fc-selected: var(--theme-button-selected-color);
1265
+ --_bu-badge-o: 0.5;
1266
+ --_bu-dropdown-bw: var(--su-static4);
1267
+ --_bu-number-fc: var(--white);
1268
+ --_bu-number-fc-selected: var(--_bu-number-fc);
1269
+ background-color: var(--_bu-bg);
1270
+ border: var(--_bu-baw) solid var(--_bu-bc);
1271
+ border-radius: var(--_bu-br);
1272
+ box-shadow: var(--_bu-bs);
1273
+ color: var(--_bu-fc);
1274
+ font-size: var(--_bu-fs);
1275
+ padding: var(--_bu-p);
1276
+ cursor: pointer;
1277
+ display: inline-block;
1278
+ font-family: inherit;
1279
+ font-weight: normal;
1280
+ line-height: var(--lh-sm);
1281
+ position: relative;
1282
+ outline: none;
1283
+ text-align: center;
1284
+ text-decoration: none;
1285
+ user-select: none;
1286
+ }
1287
+ @media (prefers-color-scheme: dark) {
1288
+ body.theme-system .s-btn {
1289
+ --_bu-bs: none;
1290
+ --_bu-filled-bs: var(--_bu-bs);
1580
1291
  }
1581
1292
  }
1582
- .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:first-child):not(:last-child),
1583
- .s-btn-group.s-btn-group--radio .s-btn:not(:first-of-type):not(:last-of-type) {
1584
- border-radius: 0;
1293
+ body.theme-dark .s-btn,
1294
+ .theme-dark__forced .s-btn,
1295
+ body.theme-system .theme-dark__forced .s-btn {
1296
+ --_bu-bs: none;
1297
+ --_bu-filled-bs: var(--_bu-bs);
1585
1298
  }
1586
- .s-btn-group:not(.s-btn-group--radio) .s-btn:first-child:not(:only-child),
1587
- .s-btn-group.s-btn-group--radio .s-btn:first-of-type:not(:last-of-type) {
1588
- border-top-right-radius: 0;
1589
- border-bottom-right-radius: 0;
1299
+ body.theme-highcontrast .s-btn {
1300
+ --_bu-bc: currentColor;
1301
+ --_bu-filled-bc: var(--_bu-bc);
1302
+ --_bu-outlined-bc: var(--_bu-bc);
1303
+ --_bu-bc-selected: var(--_bu-bc);
1304
+ --_bu-badge-o: 0.8;
1590
1305
  }
1591
- .s-btn-group:not(.s-btn-group--radio) .s-btn:last-child:not(:only-child),
1592
- .s-btn-group.s-btn-group--radio .s-btn:last-of-type:not(:first-of-type) {
1593
- border-top-left-radius: 0;
1594
- border-bottom-left-radius: 0;
1306
+ fieldset[disabled] .s-btn,
1307
+ .s-btn[disabled],
1308
+ .s-btn[aria-disabled="true"] {
1309
+ --_bu-bs: none !important;
1310
+ --_bu-filled-bs: var(--_bu-bs);
1311
+ opacity: var(--_o-disabled-static);
1312
+ pointer-events: none;
1313
+ text-decoration: none;
1595
1314
  }
1596
- .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:last-child),
1597
- .s-btn-group.s-btn-group--radio .s-btn:not(:last-of-type) {
1598
- margin-right: calc(var(--su-static1) * -1);
1315
+ button .s-btn,
1316
+ button[type="submit"] .s-btn,
1317
+ button[type="reset"] .s-btn {
1318
+ -webkit-appearance: button;
1599
1319
  }
1600
- .s-btn-group form {
1320
+ .s-btn.grid {
1601
1321
  display: flex;
1602
- margin-right: calc(var(--su-static1) * -1);
1603
1322
  }
1604
- .s-btn-group form:not(:first-child):not(:last-child) .s-btn {
1605
- border-radius: 0;
1323
+ .s-btn.is-loading {
1324
+ padding-left: 2.2em;
1606
1325
  }
1607
- .s-btn-group form:last-child:not(:only-child) .s-btn:not(:last-child) {
1608
- border-radius: 0;
1326
+ .s-btn.is-loading .svg-icon:first-child {
1327
+ margin-left: -23px;
1328
+ opacity: 0;
1609
1329
  }
1610
- .s-btn-group form:first-child:not(:only-child) .s-btn:not(:first-child) {
1611
- border-radius: 0;
1330
+ .s-btn.is-selected,
1331
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn {
1332
+ background-color: var(--_bu-bg-selected);
1333
+ border-color: var(--_bu-bc-selected);
1334
+ color: var(--_bu-fc-selected);
1612
1335
  }
1613
- .s-btn-group .s-btn {
1614
- margin-bottom: calc(var(--su-static1) * -1);
1615
- white-space: nowrap;
1336
+ .s-btn.is-selected .s-btn--number,
1337
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn .s-btn--number {
1338
+ color: var(--_bu-number-fc-selected);
1616
1339
  }
1617
- .s-btn-group .s-btn:active {
1618
- z-index: var(--zi-active);
1340
+ .s-btn.is-selected.s-btn__filled,
1341
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__filled {
1342
+ border-color: var(--_bu-filled-bc-selected);
1343
+ background-color: var(--_bu-filled-bg-selected);
1344
+ color: var(--_bu-filled-fc-selected);
1619
1345
  }
1620
- .s-btn-group .s-btn.is-selected,
1621
- .s-btn-group .s-btn--radio:checked + .s-btn {
1622
- z-index: var(--zi-selected);
1346
+ .s-btn.is-selected.s-btn__outlined,
1347
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined {
1348
+ border-color: var(--_bu-outlined-bc-selected);
1349
+ background-color: var(--_bu-outlined-bg-selected);
1350
+ color: var(--_bu-outlined-fc-selected);
1623
1351
  }
1624
- .s-card {
1625
- --_ca-bc: var(--bc-medium);
1626
- border: var(--su-static1) solid var(--_ca-bc);
1627
- background-color: var(--white);
1628
- border-radius: var(--br-sm);
1629
- padding: var(--su12);
1352
+ body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
1353
+ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
1354
+ --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
1355
+ --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
1356
+ --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
1357
+ --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
1630
1358
  }
1631
- a.s-card {
1632
- text-decoration: none !important;
1359
+ .s-btn.is-selected:not(:focus),
1360
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked:not(:focus) + .s-btn {
1361
+ box-shadow: none;
1633
1362
  }
1634
- .s-card.s-card__muted {
1635
- --_ca-bc: var(--bc-light);
1363
+ .s-btn.s-btn__filled {
1364
+ border-color: var(--_bu-filled-bc);
1365
+ background-color: var(--_bu-filled-bg);
1366
+ box-shadow: var(--_bu-filled-bs);
1367
+ color: var(--_bu-filled-fc);
1636
1368
  }
1637
- .s-card.s-card__muted > * {
1638
- opacity: 0.65;
1369
+ .s-btn.s-btn__outlined {
1370
+ border-color: var(--_bu-outlined-bc);
1371
+ background-color: var(--_bu-outlined-bg);
1639
1372
  }
1640
- .s-card p:last-of-type {
1641
- margin-bottom: 0;
1373
+ .s-btn.s-btn__link:focus,
1374
+ .s-btn.s-btn__unset:focus,
1375
+ .s-btn.s-btn__link:focus-visible,
1376
+ .s-btn.s-btn__unset:focus-visible {
1377
+ outline-style: auto;
1642
1378
  }
1643
- .s-checkbox,
1644
- .s-radio {
1645
- --_ch-baw: var(--su-static1);
1646
- --_ch-bc: var(--bc-darker);
1647
- --_ch-bc-focus: var(--theme-secondary-300);
1648
- --_ch-bg: var(--white);
1649
- --_ch-bg-image: unset;
1650
- --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
1651
- background-color: var(--_ch-bg);
1652
- border: var(--_ch-baw) solid var(--_ch-bc);
1653
- appearance: none;
1379
+ .s-btn.s-btn__link {
1380
+ --_bu-baw: 0;
1381
+ --_bu-br: 0;
1382
+ --_bu-bs: none;
1383
+ --_bu-filled-bs: var(--_bu-bs);
1384
+ --_bu-focus-ring: none;
1385
+ --_bu-p: 0;
1386
+ --_li-fc: var(--theme-link-color);
1387
+ --_li-fc-hover: var(--theme-link-color-hover);
1388
+ --_li-fc-visited: var(--theme-link-color-visited);
1389
+ color: var(--_li-fc);
1654
1390
  cursor: pointer;
1655
- font-size: inherit;
1656
- height: 1em;
1657
- margin: 0;
1658
- outline: 0;
1659
- vertical-align: middle;
1660
- width: 1em;
1661
- }
1662
- fieldset[disabled] .s-checkbox,
1663
- fieldset[disabled] .s-radio,
1664
- .s-checkbox[disabled],
1665
- .s-radio[disabled] {
1666
- cursor: not-allowed;
1667
- opacity: var(--_o-disabled-static);
1391
+ text-decoration: none;
1392
+ user-select: auto;
1393
+ display: inline;
1394
+ font: inherit;
1395
+ outline: revert;
1396
+ text-align: inherit;
1668
1397
  }
1669
- .s-check-group .s-checkbox,
1670
- .s-check-group .s-radio {
1671
- margin-top: calc(var(--su2) + var(--su1));
1398
+ .s-btn.s-btn__link,
1399
+ .s-btn.s-btn__link:hover,
1400
+ .s-btn.s-btn__link:active,
1401
+ .s-btn.s-btn__link:focus,
1402
+ .s-btn.s-btn__link[disabled],
1403
+ .s-btn.s-btn__link[aria-disabled="true"] {
1404
+ --_bu-bg: none;
1672
1405
  }
1673
- input.s-checkbox,
1674
- input.s-radio {
1675
- flex-shrink: 0;
1406
+ .s-btn.s-btn__link.s-btn__dropdown {
1407
+ padding-right: 0.9em;
1676
1408
  }
1677
- .s-checkbox:focus,
1678
- .s-radio:focus {
1679
- box-shadow: var(--_ch-bs-focus);
1409
+ body.theme-highcontrast .s-btn.s-btn__link {
1410
+ text-decoration: underline;
1680
1411
  }
1681
- .s-checkbox {
1682
- background-image: var(--_ch-bg-image);
1683
- background-position: center center;
1684
- background-repeat: no-repeat;
1685
- background-size: contain;
1686
- border-radius: var(--br-sm);
1412
+ .s-btn.s-btn__link.s-link__danger:visited,
1413
+ .s-btn.s-btn__link.s-link__grayscale:visited,
1414
+ .s-btn.s-btn__link.s-link__inherit:visited,
1415
+ .s-btn.s-btn__link.s-link__muted:visited,
1416
+ .s-btn.s-btn__link.s-link__visited:visited {
1417
+ color: var(--_li-fc-visited);
1687
1418
  }
1688
- @media (prefers-color-scheme: dark) {
1689
- body.theme-highcontrast.theme-system .s-checkbox:checked,
1690
- body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
1691
- --_ch-bc: var(--blue-700) !important;
1692
- --_ch-bc-focus: var(--_ch-bc);
1693
- --_ch-bg: var(--blue-300);
1694
- }
1419
+ .s-btn.s-btn__link.s-link__danger:visited:active,
1420
+ .s-btn.s-btn__link.s-link__grayscale:visited:active,
1421
+ .s-btn.s-btn__link.s-link__inherit:visited:active,
1422
+ .s-btn.s-btn__link.s-link__muted:visited:active,
1423
+ .s-btn.s-btn__link.s-link__visited:visited:active,
1424
+ .s-btn.s-btn__link.s-link__danger:visited:hover,
1425
+ .s-btn.s-btn__link.s-link__grayscale:visited:hover,
1426
+ .s-btn.s-btn__link.s-link__inherit:visited:hover,
1427
+ .s-btn.s-btn__link.s-link__muted:visited:hover,
1428
+ .s-btn.s-btn__link.s-link__visited:visited:hover {
1429
+ color: var(--_li-fc-hover);
1695
1430
  }
1696
- body.theme-highcontrast.theme-dark .s-checkbox:checked,
1697
- body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1698
- --_ch-bc: var(--blue-700) !important;
1699
- --_ch-bc-focus: var(--_ch-bc);
1700
- --_ch-bg: var(--blue-300);
1431
+ .s-btn.s-btn__link.s-link__dropdown {
1432
+ padding-right: 0.9em;
1433
+ position: relative;
1701
1434
  }
1702
- .s-checkbox:checked,
1703
- .s-checkbox:indeterminate {
1704
- --_ch-bc: var(--theme-secondary-400) !important;
1705
- --_ch-bg: var(--theme-secondary-400);
1435
+ .s-btn.s-btn__link.s-link__dropdown:after {
1436
+ border-width: var(--su-static4);
1437
+ border-bottom-width: 0;
1438
+ border-color: currentColor transparent;
1439
+ border-style: solid;
1440
+ border-top-width: var(--su-static4);
1441
+ content: "";
1442
+ pointer-events: none;
1443
+ position: absolute;
1444
+ right: 0;
1445
+ top: calc(50% - var(--su-static2));
1446
+ z-index: var(--zi-active);
1706
1447
  }
1707
- .s-checkbox:checked:focus,
1708
- .s-checkbox:indeterminate:focus {
1709
- --_ch-bc-focus: var(--theme-secondary-400);
1448
+ .s-btn.s-btn__link.s-link__underlined {
1449
+ text-decoration: underline !important;
1710
1450
  }
1711
- .s-checkbox:checked {
1712
- --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
1451
+ .s-btn.s-btn__link.s-link__visited {
1452
+ --_li-fc-hover: var(--theme-link-color-hover);
1453
+ --_li-fc-visited: var(--theme-link-color-visited);
1713
1454
  }
1714
- .s-checkbox:indeterminate {
1715
- --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
1455
+ .s-btn.s-btn__link.s-link__danger {
1456
+ --_li-fc: var(--red-500);
1457
+ --_li-fc-hover: var(--red-400);
1458
+ --_li-fc-visited: var(--red-600);
1716
1459
  }
1717
- .s-checkbox:focus {
1718
- border-color: var(--_ch-bc-focus);
1460
+ .s-btn.s-btn__link.s-link__grayscale {
1461
+ --_li-fc: var(--black-800);
1462
+ --_li-fc-hover: var(--black-900);
1463
+ --_li-fc-visited: var(--black-700);
1719
1464
  }
1720
- .s-radio {
1721
- border-radius: var(--br-circle);
1465
+ .s-btn.s-btn__link.s-link__inherit {
1466
+ --_li-fc: inherit !important;
1467
+ --_li-fc-hover: inherit !important;
1468
+ --_li-fc-visited: inherit !important;
1722
1469
  }
1723
- @media (prefers-color-scheme: dark) {
1724
- body.theme-highcontrast.theme-system .s-radio:checked {
1725
- --_ch-bc: var(--blue-300);
1726
- outline: var(--su-static1) solid var(--black);
1727
- }
1470
+ .s-btn.s-btn__link.s-link__muted {
1471
+ --_li-fc: var(--black-500);
1472
+ --_li-fc-hover: var(--black-600);
1473
+ --_li-fc-visited: var(--black-700);
1728
1474
  }
1729
- body.theme-highcontrast.theme-dark .s-radio:checked {
1730
- --_ch-bc: var(--blue-300);
1731
- outline: var(--su-static1) solid var(--black);
1475
+ fieldset[disabled] .s-btn.s-btn__link {
1476
+ box-shadow: none !important;
1477
+ opacity: var(--_o-disabled-static);
1478
+ pointer-events: none;
1732
1479
  }
1733
- @media (prefers-color-scheme: dark) {
1734
- body.theme-system .s-radio:checked {
1735
- --_ch-bg: var(--black);
1736
- }
1480
+ .s-btn.s-btn__link:active,
1481
+ .s-btn.s-btn__link:hover {
1482
+ color: var(--_li-fc-hover);
1737
1483
  }
1738
- body.theme-dark .s-radio:checked,
1739
- .theme-dark__forced .s-radio:checked,
1740
- body.theme-system .theme-dark__forced .s-radio:checked {
1741
- --_ch-bg: var(--black);
1484
+ button.s-btn.s-btn__link {
1485
+ appearance: none;
1486
+ background: transparent;
1487
+ border: 0;
1488
+ font-family: inherit;
1489
+ line-height: inherit;
1490
+ padding: 0;
1491
+ user-select: auto;
1742
1492
  }
1743
- .s-radio:checked {
1744
- --_ch-baw: 0.30769231em;
1745
- --_ch-bc: var(--theme-secondary-400);
1746
- --_ch-bg: var(--white);
1493
+ button.s-btn.s-btn__link:focus {
1494
+ outline: revert;
1747
1495
  }
1748
- .has-error .s-checkbox,
1749
- .has-error .s-radio:not(:checked),
1750
- .has-success .s-checkbox,
1751
- .has-success .s-radio:not(:checked),
1752
- .has-warning .s-checkbox,
1753
- .has-warning .s-radio:not(:checked) {
1754
- --_ch-bc-focus: var(--_ch-bc);
1496
+ .s-btn.s-btn__unset {
1497
+ outline: initial;
1755
1498
  }
1756
- .has-error .s-checkbox,
1757
- .has-error .s-radio:not(:checked) {
1758
- --_ch-bc: var(--red-400);
1759
- --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
1499
+ .s-btn.s-btn__unset,
1500
+ .s-btn.s-btn__unset:hover,
1501
+ .s-btn.s-btn__unset:active,
1502
+ .s-btn.s-btn__unset:focus {
1503
+ --_bu-baw: 0;
1504
+ --_bu-bg: none;
1505
+ --_bu-br: 0;
1506
+ --_bu-bs: none;
1507
+ --_bu-filled-bs: var(--_bu-bs);
1508
+ --_bu-fc: unset;
1509
+ --_bu-focus-ring: none;
1510
+ --_bu-p: 0;
1511
+ cursor: default;
1512
+ font: unset;
1513
+ user-select: auto;
1760
1514
  }
1761
- .has-success .s-checkbox,
1762
- .has-success .s-radio:not(:checked) {
1763
- --_ch-bc: var(--green-400);
1764
- --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
1515
+ .s-btn.s-btn__dropdown {
1516
+ padding-right: calc(var(--_bu-p) * 2.5);
1765
1517
  }
1766
- .has-warning .s-checkbox,
1767
- .has-warning .s-radio:not(:checked) {
1768
- --_ch-bc: var(--yellow-600);
1769
- --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
1518
+ .s-btn.s-btn__dropdown:after {
1519
+ border-color: currentColor transparent;
1520
+ border-style: solid;
1521
+ border-width: var(--_bu-dropdown-bw);
1522
+ border-bottom-width: 0;
1523
+ content: "";
1524
+ pointer-events: none;
1525
+ position: absolute;
1526
+ right: var(--_bu-p);
1527
+ top: calc(50% - var(--su-static2));
1528
+ z-index: var(--zi-active);
1770
1529
  }
1771
- .s-check-control {
1772
- --_cc-ai: center;
1773
- align-items: var(--_cc-ai);
1774
- display: flex;
1775
- gap: var(--su8);
1530
+ .s-btn.s-btn__icon .svg-icon {
1531
+ vertical-align: baseline;
1532
+ margin-top: -0.3em;
1533
+ margin-bottom: -0.3em;
1534
+ transition: opacity 200ms var(--te-smooth);
1776
1535
  }
1777
- .s-check-group .s-check-control {
1778
- --_cc-ai: flex-start;
1536
+ .s-btn.s-btn__xs {
1537
+ --_bu-fs: var(--fs-fine);
1538
+ --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1539
+ --_bu-p: 0.6em;
1779
1540
  }
1780
- .s-check-control .s-label {
1781
- font-weight: normal;
1541
+ .s-btn.s-btn__sm {
1542
+ --_bu-fs: var(--fs-caption);
1782
1543
  }
1783
- .s-check-group {
1784
- --_cg-fd: column;
1785
- flex-direction: var(--_cg-fd);
1786
- display: flex;
1787
- gap: var(--su8);
1544
+ .s-btn.s-btn__md {
1545
+ --_bu-fs: var(--fs-body3);
1546
+ --_bu-br: calc(var(--br-sm) + var(--su-static1));
1547
+ --_bu-p: 0.7em;
1788
1548
  }
1789
- .s-check-group.s-check-group__horizontal {
1790
- --_cg-fd: row;
1549
+ body.theme-highcontrast .s-btn.s-btn__danger,
1550
+ body.theme-highcontrast .s-btn.s-btn__muted {
1551
+ --_bu-filled-bc: transparent;
1791
1552
  }
1792
- .s-check-group legend.s-label {
1793
- margin-bottom: var(--su8);
1553
+ .s-btn.s-btn__danger {
1554
+ --_bu-bg-active: var(--red-100);
1555
+ --_bu-bg-hover: var(--red-050);
1556
+ --_bu-bg-selected: var(--red-200);
1557
+ --_bu-fc: var(--red-600);
1558
+ --_bu-fc-active: var(--_bu-fc);
1559
+ --_bu-fc-hover: var(--red-700);
1560
+ --_bu-fc-selected: var(--red-900);
1561
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
1562
+ --_bu-filled-bc: transparent;
1563
+ --_bu-filled-bc-selected: var(--_bu-filled-bc);
1564
+ --_bu-filled-bg: var(--red-500);
1565
+ --_bu-filled-bg-active: var(--red-700);
1566
+ --_bu-filled-bg-hover: var(--red-600);
1567
+ --_bu-filled-bg-selected: var(--red-800);
1568
+ --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
1569
+ --_bu-filled-fc: var(--white);
1570
+ --_bu-filled-fc-active: var(--_bu-filled-fc);
1571
+ --_bu-filled-fc-hover: var(--_bu-filled-fc);
1572
+ --_bu-filled-fc-selected: var(--_bu-filled-fc);
1573
+ --_bu-outlined-bc: var(--red-500);
1574
+ --_bu-outlined-bc-selected: var(--red-700);
1575
+ --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1576
+ --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1794
1577
  }
1795
- .s-code-block {
1796
- --_cb-line-numbers-bg: var(--black-050);
1578
+ .s-btn.s-btn__danger.s-btn__filled {
1579
+ --_bu-number-fc: var(--black);
1797
1580
  }
1798
1581
  @media (prefers-color-scheme: dark) {
1799
- body.theme-system .s-code-block {
1800
- --_cb-line-numbers-bg: var(--black-025);
1582
+ body.theme-system .s-btn.s-btn__danger.s-btn__filled {
1583
+ --_bu-filled-fc: var(--black);
1584
+ --_bu-filled-fc-selected: var(--white);
1585
+ --_bu-number-fc: var(--white);
1586
+ --_bu-number-fc-selected: var(--black);
1801
1587
  }
1802
1588
  }
1803
- body.theme-dark .s-code-block,
1804
- .theme-dark__forced .s-code-block,
1805
- body.theme-system .theme-dark__forced .s-code-block {
1806
- --_cb-line-numbers-bg: var(--black-025);
1807
- }
1808
- code[class*="language-"] .s-code-block,
1809
- pre.s-code-block > code {
1810
- font-family: inherit;
1589
+ body.theme-dark .s-btn.s-btn__danger.s-btn__filled,
1590
+ .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled,
1591
+ body.theme-system .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled {
1592
+ --_bu-filled-fc: var(--black);
1593
+ --_bu-filled-fc-selected: var(--white);
1594
+ --_bu-number-fc: var(--white);
1595
+ --_bu-number-fc-selected: var(--black);
1811
1596
  }
1812
- code[class*="language-"] .s-code-block .hljs-built_in,
1813
- pre.s-code-block > code .hljs-built_in,
1814
- code[class*="language-"] .s-code-block .hljs-literal,
1815
- pre.s-code-block > code .hljs-literal,
1816
- code[class*="language-"] .s-code-block .hljs-title,
1817
- pre.s-code-block > code .hljs-title {
1818
- color: var(--highlight-literal);
1597
+ @media (prefers-color-scheme: dark) {
1598
+ body.theme-highcontrast.theme-system .s-btn.s-btn__danger.s-btn__filled {
1599
+ --_bu-filled-fc: var(--white);
1600
+ --_bu-number-fc: var(--black);
1601
+ --_bu-number-fc-selected: var(--black);
1602
+ }
1819
1603
  }
1820
- code[class*="language-"] .s-code-block .hljs-bullet,
1821
- pre.s-code-block > code .hljs-bullet,
1822
- code[class*="language-"] .s-code-block .hljs-code,
1823
- pre.s-code-block > code .hljs-code {
1824
- color: var(--highlight-punctuation);
1604
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
1605
+ --_bu-filled-fc: var(--white);
1606
+ --_bu-number-fc: var(--black);
1607
+ --_bu-number-fc-selected: var(--black);
1825
1608
  }
1826
- code[class*="language-"] .s-code-block .hljs-doctag,
1827
- pre.s-code-block > code .hljs-doctag,
1828
- code[class*="language-"] .s-code-block .hljs-keyword,
1829
- pre.s-code-block > code .hljs-keyword,
1830
- code[class*="language-"] .s-code-block .hljs-meta-keyword,
1831
- pre.s-code-block > code .hljs-meta-keyword,
1832
- code[class*="language-"] .s-code-block .hljs-meta,
1833
- pre.s-code-block > code .hljs-meta,
1834
- code[class*="language-"] .s-code-block .hljs-section,
1835
- pre.s-code-block > code .hljs-section,
1836
- code[class*="language-"] .s-code-block .hljs-selector-class,
1837
- pre.s-code-block > code .hljs-selector-class,
1838
- code[class*="language-"] .s-code-block .hljs-selector-pseudo,
1839
- pre.s-code-block > code .hljs-selector-pseudo,
1840
- code[class*="language-"] .s-code-block .hljs-selector-tag,
1841
- pre.s-code-block > code .hljs-selector-tag {
1842
- color: var(--highlight-keyword);
1609
+ .s-btn.s-btn__muted {
1610
+ --_bu-bg-active: var(--black-050);
1611
+ --_bu-bg-hover: var(--black-025);
1612
+ --_bu-bg-selected: var(--black-075);
1613
+ --_bu-fc: var(--black-500);
1614
+ --_bu-fc-active: var(--_bu-fc);
1615
+ --_bu-fc-hover: var(--black-600);
1616
+ --_bu-fc-selected: var(--black-700);
1617
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1618
+ --_bu-filled-bc: transparent;
1619
+ --_bu-filled-bc-selected: var(--_bu-filled-bc);
1620
+ --_bu-filled-bg: var(--black-100);
1621
+ --_bu-filled-bg-active: var(--black-200);
1622
+ --_bu-filled-bg-hover: var(--black-150);
1623
+ --_bu-filled-bg-selected: var(--black-350);
1624
+ --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
1625
+ --_bu-filled-fc: var(--black-700);
1626
+ --_bu-filled-fc-active: var(--_bu-filled-fc);
1627
+ --_bu-filled-fc-hover: var(--_bu-filled-fc);
1628
+ --_bu-filled-fc-selected: var(--black-800);
1629
+ --_bu-outlined-bc: var(--black-300);
1630
+ --_bu-outlined-bc-selected: var(--black-400);
1631
+ --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1632
+ --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1843
1633
  }
1844
- code[class*="language-"] .s-code-block .hljs-name,
1845
- pre.s-code-block > code .hljs-name,
1846
- code[class*="language-"] .s-code-block .hljs-number,
1847
- pre.s-code-block > code .hljs-number,
1848
- code[class*="language-"] .s-code-block .hljs-quote,
1849
- pre.s-code-block > code .hljs-quote,
1850
- code[class*="language-"] .s-code-block .hljs-selector-id,
1851
- pre.s-code-block > code .hljs-selector-id,
1852
- code[class*="language-"] .s-code-block .hljs-template-tag,
1853
- pre.s-code-block > code .hljs-template-tag,
1854
- code[class*="language-"] .s-code-block .hljs-type,
1855
- pre.s-code-block > code .hljs-type {
1856
- color: var(--highlight-namespace);
1634
+ body.theme-highcontrast .s-btn.s-btn__muted {
1635
+ --_bu-filled-bg: var(--black-400);
1636
+ --_bu-filled-bg-active: var(--black-600);
1637
+ --_bu-filled-bg-hover: var(--black-500);
1638
+ --_bu-filled-bg-selected: var(--black-700);
1639
+ --_bu-filled-fc: var(--white);
1640
+ --_bu-filled-fc-selected: var(--_bu-filled-fc);
1857
1641
  }
1858
- code[class*="language-"] .s-code-block .hljs-link,
1859
- pre.s-code-block > code .hljs-link,
1860
- code[class*="language-"] .s-code-block .hljs-meta-string,
1861
- pre.s-code-block > code .hljs-meta-string,
1862
- code[class*="language-"] .s-code-block .hljs-regexp,
1863
- pre.s-code-block > code .hljs-regexp,
1864
- code[class*="language-"] .s-code-block .hljs-selector-attr,
1865
- pre.s-code-block > code .hljs-selector-attr,
1866
- code[class*="language-"] .s-code-block .hljs-string,
1867
- pre.s-code-block > code .hljs-string,
1868
- code[class*="language-"] .s-code-block .hljs-symbol,
1869
- pre.s-code-block > code .hljs-symbol,
1870
- code[class*="language-"] .s-code-block .hljs-template-variable,
1871
- pre.s-code-block > code .hljs-template-variable,
1872
- code[class*="language-"] .s-code-block .hljs-variable,
1873
- pre.s-code-block > code .hljs-variable {
1874
- color: var(--highlight-variable);
1642
+ body.theme-highcontrast .s-btn.s-btn__muted.s-btn__filled {
1643
+ --_bu-number-fc: var(--black);
1875
1644
  }
1876
- code[class*="language-"] .s-code-block .hljs-addition,
1877
- pre.s-code-block > code .hljs-addition {
1878
- color: var(--highlight-addition);
1645
+ .s-btn.s-btn__primary {
1646
+ --_bu-bg: var(--theme-button-primary-background-color);
1647
+ --_bu-bg-active: var(--theme-button-primary-active-background-color);
1648
+ --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
1649
+ --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
1650
+ --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
1651
+ --_bu-fc: var(--theme-button-primary-color);
1652
+ --_bu-fc-active: var(--theme-button-primary-hover-color);
1653
+ --_bu-fc-hover: var(--theme-button-primary-hover-color);
1654
+ --_bu-fc-selected: var(--theme-button-primary-selected-color);
1655
+ --_bu-number-fc: var(--theme-button-primary-number-color);
1879
1656
  }
1880
- code[class*="language-"] .s-code-block .hljs-attr,
1881
- pre.s-code-block > code .hljs-attr {
1882
- color: var(--highlight-attribute);
1657
+ @media (prefers-color-scheme: dark) {
1658
+ body.theme-system .s-btn.s-btn__primary {
1659
+ --_bu-bg: var(--theme-secondary-300);
1660
+ --_bu-bg-active: var(--theme-secondary-400);
1661
+ --_bu-bg-hover: var(--theme-secondary-350);
1662
+ --_bu-fc: var(--black);
1663
+ --_bu-fc-active: var(--_bu-fc);
1664
+ --_bu-fc-hover: var(--_bu-fc);
1665
+ --_bu-fc-selected: var(--white);
1666
+ --_bu-number-fc: var(--white);
1667
+ --_bu-number-fc-selected: var(--black);
1668
+ }
1883
1669
  }
1884
- code[class*="language-"] .s-code-block .hljs-attribute,
1885
- pre.s-code-block > code .hljs-attribute {
1886
- color: var(--highlight-symbol);
1670
+ body.theme-dark .s-btn.s-btn__primary,
1671
+ .theme-dark__forced .s-btn.s-btn__primary,
1672
+ body.theme-system .theme-dark__forced .s-btn.s-btn__primary {
1673
+ --_bu-bg: var(--theme-secondary-300);
1674
+ --_bu-bg-active: var(--theme-secondary-400);
1675
+ --_bu-bg-hover: var(--theme-secondary-350);
1676
+ --_bu-fc: var(--black);
1677
+ --_bu-fc-active: var(--_bu-fc);
1678
+ --_bu-fc-hover: var(--_bu-fc);
1679
+ --_bu-fc-selected: var(--white);
1680
+ --_bu-number-fc: var(--white);
1681
+ --_bu-number-fc-selected: var(--black);
1887
1682
  }
1888
- code[class*="language-"] .s-code-block .hljs-comment,
1889
- pre.s-code-block > code .hljs-comment {
1890
- color: var(--highlight-comment);
1683
+ body.theme-highcontrast .s-btn.s-btn__primary {
1684
+ --_bu-bc: transparent;
1891
1685
  }
1892
- code[class*="language-"] .s-code-block .hljs-deletion,
1893
- pre.s-code-block > code .hljs-deletion {
1894
- color: var(--highlight-deletion);
1686
+ @media (prefers-color-scheme: dark) {
1687
+ body.theme-highcontrast.theme-system .s-btn.s-btn__primary {
1688
+ --_bu-bg: var(--theme-secondary-400);
1689
+ --_bu-bg-active: var(--theme-secondary-600);
1690
+ --_bu-bg-hover: var(--theme-secondary-500);
1691
+ --_bu-fc: var(--white);
1692
+ --_bu-number-fc: var(--black);
1693
+ }
1895
1694
  }
1896
- code[class*="language-"] .s-code-block .hljs-emphasis,
1897
- pre.s-code-block > code .hljs-emphasis {
1898
- font-style: italic;
1695
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__primary {
1696
+ --_bu-bg: var(--theme-secondary-400);
1697
+ --_bu-bg-active: var(--theme-secondary-600);
1698
+ --_bu-bg-hover: var(--theme-secondary-500);
1699
+ --_bu-fc: var(--white);
1700
+ --_bu-number-fc: var(--black);
1899
1701
  }
1900
- code[class*="language-"] .s-code-block .hljs-strong,
1901
- pre.s-code-block > code .hljs-strong {
1902
- font-weight: bold;
1702
+ body.theme-highcontrast .s-btn.s-btn__facebook,
1703
+ body.theme-highcontrast .s-btn.s-btn__github {
1704
+ --_bu-bc: transparent;
1903
1705
  }
1904
- code[class*="language-"] .s-code-block .hljs-subst,
1905
- pre.s-code-block > code .hljs-subst {
1906
- color: var(--highlight-color);
1706
+ .s-btn.s-btn__facebook {
1707
+ --_bu-bc: transparent;
1708
+ --_bu-bg: #385499;
1709
+ --_bu-bg-active: #2a4074;
1710
+ --_bu-bg-hover: #314a86;
1711
+ --_bu-fc: #fff;
1712
+ --_bu-fc-active: var(--_bu-fc);
1713
+ --_bu-fc-hover: var(--_bu-fc);
1714
+ --_bu-hc-bc: transparent;
1907
1715
  }
1908
- pre.s-code-block {
1909
- scrollbar-color: var(--scrollbar) transparent;
1910
- background-color: var(--highlight-bg);
1911
- border-radius: var(--br-md);
1912
- color: var(--highlight-color);
1913
- font-family: var(--ff-mono);
1914
- font-size: var(--fs-body1);
1915
- line-height: var(--lh-md);
1916
- margin: 0;
1917
- overflow: auto;
1918
- padding: var(--su12);
1716
+ .s-btn.s-btn__google {
1717
+ --_bu-bc: var(--bc-medium);
1718
+ --_bu-bg: var(--white);
1719
+ --_bu-bg-active: var(--black-050);
1720
+ --_bu-bg-hover: var(--black-025);
1721
+ --_bu-fc: var(--fc-medium);
1722
+ --_bu-fc-active: var(--fc-dark);
1723
+ --_bu-fc-hover: var(--black-800);
1724
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1919
1725
  }
1920
- pre.s-code-block .s-code-block--line-numbers {
1921
- background-color: var(--_cb-line-numbers-bg);
1922
- border-color: var(--bc-medium);
1923
- border-style: solid;
1924
- border-width: 0 var(--su-static1) 0 0;
1925
- color: var(--black-300);
1926
- float: left;
1927
- margin: calc(var(--su12) * -1);
1928
- margin-right: var(--su12);
1929
- padding: var(--su12);
1930
- padding-right: var(--su6);
1931
- text-align: right;
1726
+ .s-btn.s-btn__github {
1727
+ --_bu-bg: var(--black-750);
1728
+ --_bu-bg-active: var(--black);
1729
+ --_bu-bg-hover: var(--black-800);
1730
+ --_bu-fc: var(--white);
1731
+ --_bu-fc-active: var(--white);
1732
+ --_bu-fc-hover: var(--white);
1733
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
1734
+ --_bu-hc-bc: transparent;
1932
1735
  }
1933
- pre.s-code-block::-webkit-scrollbar {
1934
- width: calc(var(--su-static12) - var(--su-static2));
1935
- height: calc(var(--su-static12) - var(--su-static2));
1936
- background-color: transparent;
1736
+ .s-btn .s-btn--badge {
1737
+ opacity: var(--_bu-badge-o);
1738
+ display: inline-block;
1739
+ border-radius: var(--br-sm);
1740
+ padding: var(--su2) calc(var(--su4) - var(--su1));
1741
+ font-size: var(--fs-caption);
1742
+ line-height: var(--lh-xs);
1743
+ background-color: currentColor;
1937
1744
  }
1938
- pre.s-code-block::-webkit-scrollbar-track {
1939
- border-radius: calc(var(--su-static12) - var(--su-static2));
1940
- background-color: transparent;
1745
+ .s-btn .s-btn--number {
1746
+ color: var(--_bu-number-fc);
1941
1747
  }
1942
- pre.s-code-block::-webkit-scrollbar-thumb {
1943
- border-radius: calc(var(--su-static12) - var(--su-static2));
1944
- background-color: var(--scrollbar);
1748
+ .s-btn--radio {
1749
+ border: 0;
1750
+ clip-path: inset(50%);
1751
+ clip: rect(1px, 1px, 1px, 1px);
1752
+ height: 1px;
1753
+ margin: -1px;
1754
+ overflow-wrap: normal;
1755
+ overflow: hidden;
1756
+ padding: 0;
1757
+ position: absolute;
1758
+ width: 1px;
1945
1759
  }
1946
- pre.s-code-block::-webkit-scrollbar-corner {
1947
- background-color: transparent;
1948
- border-color: transparent;
1760
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover,
1761
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus {
1762
+ background-color: var(--_bu-bg-hover);
1763
+ color: var(--_bu-fc-hover);
1949
1764
  }
1950
- .s-description {
1951
- color: var(--fc-medium);
1952
- font-size: var(--fs-caption);
1953
- padding: 0 var(--su2);
1765
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover.s-btn__filled,
1766
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus.s-btn__filled {
1767
+ background-color: var(--_bu-filled-bg-hover);
1768
+ color: var(--_bu-filled-fc-hover);
1954
1769
  }
1955
- .is-disabled .s-description {
1956
- opacity: var(--_o-disabled-static);
1770
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active {
1771
+ background-color: var(--_bu-bg-active);
1772
+ color: var(--_bu-fc-active);
1957
1773
  }
1958
- .s-expandable {
1959
- --_ex-after-h: 10px;
1960
- --_ex-after-hmx: 0;
1961
- --_ex-after-transition: height 100ms linear,
1962
- max-height 0s 100ms linear;
1963
- --_ex-content-hmx: 1000000px;
1964
- --_ex-content-mb: 0;
1965
- --_ex-content-o: unset;
1966
- --_ex-content-transform: unset;
1967
- --_ex-content-transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),
1968
- transform 100ms cubic-bezier(1, 0, 1, 1),
1969
- opacity 100ms cubic-bezier(1, 0, 1, 1);
1970
- align-items: flex-start;
1971
- display: flex;
1972
- -webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
1973
- clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
1974
- transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
1774
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active.s-btn__filled {
1775
+ background-color: var(--_bu-filled-bg-active);
1776
+ color: var(--_bu-filled-fc-active);
1975
1777
  }
1976
- .s-expandable:not(.is-expanded) {
1977
- --_ex-after-h: 0;
1978
- --_ex-after-hmx: 10px;
1979
- --_ex-after-transition: height 10px linear;
1980
- --_ex-content-hmx: 0;
1981
- --_ex-content-mb: -1500px;
1982
- --_ex-content-o: 0;
1983
- --_ex-content-transform: scaleY(0);
1984
- --_ex-content-transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1),
1985
- visibility 0s 100ms,
1986
- max-height 0s 100ms,
1987
- transform 100ms cubic-bezier(0, 1, 1, 1),
1988
- opacity 100ms cubic-bezier(0, 1, 1, 1);
1989
- -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
1990
- clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
1991
- overflow: hidden;
1992
- transition: none;
1778
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):visited:not(:hover):not(:focus) {
1779
+ background-color: var(--_bu-bg);
1780
+ color: var(--_bu-fc);
1993
1781
  }
1994
- @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
1995
- .s-expandable:not(.is-expanded) .s-expandable--content {
1996
- --_ex-content-o: 0;
1997
- --_ex-content-transform: none;
1782
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):visited:not(:hover):not(:focus).s-btn__filled {
1783
+ background-color: var(--_bu-filled-bg);
1784
+ color: var(--_bu-filled-fc);
1785
+ }
1786
+ .s-btn:focus,
1787
+ .s-btn--radio:focus + .s-btn {
1788
+ box-shadow: var(--_bu-focus-ring);
1789
+ outline: none;
1790
+ }
1791
+ .s-btn-group {
1792
+ display: flex;
1793
+ flex-wrap: wrap;
1794
+ margin-bottom: var(--su-static1);
1795
+ }
1796
+ @media (max-width: 640px) {
1797
+ html .s-btn-group .s-btn {
1798
+ padding-left: 0.4em;
1799
+ padding-right: 0.4em;
1800
+ }
1801
+ html .s-btn-group .s-btn.s-btn__dropdown {
1802
+ padding-right: 1.2em;
1803
+ }
1804
+ html .s-btn-group .s-btn.s-btn__dropdown:after {
1805
+ right: 0.4em;
1998
1806
  }
1999
1807
  }
2000
- .s-expandable:after {
2001
- height: var(--_ex-after-h);
2002
- max-height: var(--_ex-after-hmx);
2003
- transition: var(--_ex-after-transition);
2004
- -ms-flex-preferred-size: 0;
2005
- content: '';
2006
- flex-basis: 0;
1808
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:first-child):not(:last-child),
1809
+ .s-btn-group.s-btn-group--radio .s-btn:not(:first-of-type):not(:last-of-type) {
1810
+ border-radius: 0;
2007
1811
  }
2008
- .s-expandable .s-expandable--content {
2009
- max-height: var(--_ex-content-hmx);
2010
- margin-bottom: var(--_ex-content-mb);
2011
- opacity: var(--_ex-content-o);
2012
- -webkit-transform: var(--_ex-content-transform);
2013
- transform: var(--_ex-content-transform);
2014
- -ms-flex-preferred-size: 100%;
2015
- flex-basis: 100%;
2016
- -webkit-transform-origin: 0 0;
2017
- transform-origin: 0 0;
2018
- transition: var(--_ex-content-transition);
1812
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:first-child:not(:only-child),
1813
+ .s-btn-group.s-btn-group--radio .s-btn:first-of-type:not(:last-of-type) {
1814
+ border-top-right-radius: 0;
1815
+ border-bottom-right-radius: 0;
1816
+ }
1817
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:last-child:not(:only-child),
1818
+ .s-btn-group.s-btn-group--radio .s-btn:last-of-type:not(:first-of-type) {
1819
+ border-top-left-radius: 0;
1820
+ border-bottom-left-radius: 0;
1821
+ }
1822
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:last-child),
1823
+ .s-btn-group.s-btn-group--radio .s-btn:not(:last-of-type) {
1824
+ margin-right: calc(var(--su-static1) * -1);
1825
+ }
1826
+ .s-btn-group form {
1827
+ display: flex;
1828
+ margin-right: calc(var(--su-static1) * -1);
1829
+ }
1830
+ .s-btn-group form:not(:first-child):not(:last-child) .s-btn {
1831
+ border-radius: 0;
1832
+ }
1833
+ .s-btn-group form:last-child:not(:only-child) .s-btn:not(:last-child) {
1834
+ border-radius: 0;
1835
+ }
1836
+ .s-btn-group form:first-child:not(:only-child) .s-btn:not(:first-child) {
1837
+ border-radius: 0;
1838
+ }
1839
+ .s-btn-group .s-btn {
1840
+ margin-bottom: calc(var(--su-static1) * -1);
1841
+ white-space: nowrap;
1842
+ }
1843
+ .s-btn-group .s-btn:active {
1844
+ z-index: var(--zi-active);
1845
+ }
1846
+ .s-btn-group .s-btn.is-selected,
1847
+ .s-btn-group .s-btn--radio:checked + .s-btn {
1848
+ z-index: var(--zi-selected);
1849
+ }
1850
+ .s-card {
1851
+ --_ca-bc: var(--bc-medium);
1852
+ border: var(--su-static1) solid var(--_ca-bc);
1853
+ background-color: var(--white);
1854
+ border-radius: var(--br-sm);
1855
+ padding: var(--su12);
1856
+ }
1857
+ a.s-card {
1858
+ text-decoration: none !important;
1859
+ }
1860
+ .s-card.s-card__muted {
1861
+ --_ca-bc: var(--bc-light);
1862
+ }
1863
+ .s-card.s-card__muted > * {
1864
+ opacity: 0.65;
1865
+ }
1866
+ .s-card > :last-child {
1867
+ margin-bottom: 0;
1868
+ }
1869
+ .s-check-control {
1870
+ --_cc-ai: center;
1871
+ align-items: var(--_cc-ai);
1872
+ display: flex;
1873
+ gap: var(--su8);
1874
+ }
1875
+ .s-check-group .s-check-control {
1876
+ --_cc-ai: flex-start;
1877
+ }
1878
+ .s-check-control .s-label {
1879
+ font-weight: normal;
2019
1880
  }
2020
- .s-input,
2021
- .s-textarea {
2022
- --_in-bc: var(--bc-darker);
2023
- --_in-bc-focus: var(--theme-secondary-300);
2024
- --_in-bg: var(--white);
2025
- --_in-br: var(--br-sm);
2026
- --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
2027
- --_in-c: unset;
2028
- --_in-fc: var(--fc-dark);
2029
- --_in-fc-focus: var(--black);
2030
- --_in-fs: var(--fs-body1);
2031
- --_in-o: unset;
2032
- --_in-px: 0.7em;
2033
- --_in-py: 0.6em;
2034
- --_in-placeholder-fc: var(--black-200);
2035
- scrollbar-color: var(--scrollbar) transparent;
2036
- background-color: var(--_in-bg);
2037
- border: var(--su-static1) solid var(--_in-bc);
2038
- border-radius: var(--_in-br);
2039
- color: var(--_in-fc);
2040
- cursor: var(--_in-c);
2041
- font-size: var(--_in-fs);
2042
- opacity: var(--_in-o);
2043
- padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
2044
- -webkit-appearance: none;
2045
- font-family: inherit;
2046
- margin: 0;
2047
- width: 100%;
1881
+ .s-check-group {
1882
+ --_cg-fd: column;
1883
+ flex-direction: var(--_cg-fd);
1884
+ display: flex;
1885
+ gap: var(--su8);
2048
1886
  }
2049
- @supports (-webkit-overflow-scrolling: touch) {
2050
- .s-input,
2051
- .s-textarea {
2052
- --_in-fs: var(--su-static16);
2053
- --_in-px: 0.55em;
2054
- --_in-py: 0.36em;
2055
- }
2056
- .s-input::-webkit-input-placeholder,
2057
- .s-textarea::-webkit-input-placeholder {
2058
- line-height: normal !important;
2059
- }
1887
+ .s-check-group.s-check-group__horizontal {
1888
+ --_cg-fd: row;
2060
1889
  }
2061
- body.theme-highcontrast .s-input,
2062
- body.theme-highcontrast .s-textarea {
2063
- --_in-bc: var(--black);
2064
- --_in-placeholder-fc: var(--black-400);
1890
+ .s-check-group legend.s-label {
1891
+ margin-bottom: var(--su8);
2065
1892
  }
2066
- fieldset[disabled] .s-input,
2067
- fieldset[disabled] .s-textarea,
2068
- .s-input[disabled],
2069
- .s-textarea[disabled],
2070
- .s-input[readonly],
2071
- .s-textarea[readonly],
2072
- .is-readonly .s-input,
2073
- .is-readonly .s-textarea {
2074
- --_in-c: not-allowed;
1893
+ .s-checkbox,
1894
+ .s-radio {
1895
+ --_ch-baw: var(--su-static1);
1896
+ --_ch-bc: var(--bc-darker);
1897
+ --_ch-bc-focus: var(--theme-secondary-300);
1898
+ --_ch-bg: var(--white);
1899
+ --_ch-bg-image: unset;
1900
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
1901
+ background-color: var(--_ch-bg);
1902
+ border: var(--_ch-baw) solid var(--_ch-bc);
1903
+ appearance: none;
1904
+ cursor: pointer;
1905
+ font-size: inherit;
1906
+ height: 1em;
1907
+ margin: 0;
1908
+ outline: 0;
1909
+ vertical-align: middle;
1910
+ width: 1em;
2075
1911
  }
2076
- fieldset[disabled] .s-input,
2077
- fieldset[disabled] .s-textarea,
2078
- .s-input[disabled],
2079
- .s-textarea[disabled] {
2080
- --_in-o: var(--_o-disabled-static);
1912
+ fieldset[disabled] .s-checkbox,
1913
+ fieldset[disabled] .s-radio,
1914
+ .s-checkbox[disabled],
1915
+ .s-radio[disabled] {
1916
+ cursor: not-allowed;
1917
+ opacity: var(--_o-disabled-static);
2081
1918
  }
2082
- .s-input[readonly],
2083
- .s-textarea[readonly],
2084
- .is-readonly .s-input,
2085
- .is-readonly .s-textarea {
2086
- --_in-bg: var(--black-050);
2087
- --_in-bc: var(--bc-light);
2088
- --_in-fc: var(--black-200);
2089
- --_in-fc-focus: var(--_in-fc);
1919
+ .s-check-group .s-checkbox,
1920
+ .s-check-group .s-radio {
1921
+ margin-top: calc(var(--su2) + var(--su1));
2090
1922
  }
2091
- body.theme-highcontrast .s-input[readonly],
2092
- body.theme-highcontrast .s-textarea[readonly],
2093
- body.theme-highcontrast .is-readonly .s-input,
2094
- body.theme-highcontrast .is-readonly .s-textarea {
2095
- --_in-fc: var(--fc-light);
1923
+ input.s-checkbox,
1924
+ input.s-radio {
1925
+ flex-shrink: 0;
2096
1926
  }
2097
- .has-error .s-input,
2098
- .has-error .s-textarea,
2099
- .has-success .s-input,
2100
- .has-success .s-textarea,
2101
- .has-warning .s-input,
2102
- .has-warning .s-textarea {
2103
- --_in-bc-focus: var(--_in-bc);
1927
+ .s-checkbox:focus,
1928
+ .s-radio:focus {
1929
+ box-shadow: var(--_ch-bs-focus);
2104
1930
  }
2105
- .has-error .s-input,
2106
- .has-error .s-textarea {
2107
- --_in-bc: var(--red-400);
2108
- --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
1931
+ .s-checkbox {
1932
+ background-image: var(--_ch-bg-image);
1933
+ background-position: center center;
1934
+ background-repeat: no-repeat;
1935
+ background-size: contain;
1936
+ border-radius: var(--br-sm);
2109
1937
  }
2110
- body.theme-highcontrast .has-error .s-input,
2111
- body.theme-highcontrast .has-error .s-textarea {
2112
- --_in-bc: var(--red-400);
1938
+ @media (prefers-color-scheme: dark) {
1939
+ body.theme-highcontrast.theme-system .s-checkbox:checked,
1940
+ body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
1941
+ --_ch-bc: var(--blue-700) !important;
1942
+ --_ch-bc-focus: var(--_ch-bc);
1943
+ --_ch-bg: var(--blue-300);
1944
+ }
2113
1945
  }
2114
- .has-success .s-input,
2115
- .has-success .s-textarea {
2116
- --_in-bc: var(--green-400);
2117
- --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
1946
+ body.theme-highcontrast.theme-dark .s-checkbox:checked,
1947
+ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1948
+ --_ch-bc: var(--blue-700) !important;
1949
+ --_ch-bc-focus: var(--_ch-bc);
1950
+ --_ch-bg: var(--blue-300);
2118
1951
  }
2119
- body.theme-highcontrast .has-success .s-input,
2120
- body.theme-highcontrast .has-success .s-textarea {
2121
- --_in-bc: var(--green-400);
1952
+ .s-checkbox:checked,
1953
+ .s-checkbox:indeterminate {
1954
+ --_ch-bc: var(--theme-secondary-400) !important;
1955
+ --_ch-bg: var(--theme-secondary-400);
2122
1956
  }
2123
- .has-warning .s-input,
2124
- .has-warning .s-textarea {
2125
- --_in-bc: var(--yellow-600);
2126
- --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
1957
+ .s-checkbox:checked:focus,
1958
+ .s-checkbox:indeterminate:focus {
1959
+ --_ch-bc-focus: var(--theme-secondary-400);
2127
1960
  }
2128
- body.theme-highcontrast .has-warning .s-input,
2129
- body.theme-highcontrast .has-warning .s-textarea {
2130
- --_in-bc: var(--yellow-600);
1961
+ .s-checkbox:checked {
1962
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
2131
1963
  }
2132
- .s-input.s-input__sm,
2133
- .s-input.s-textarea__sm,
2134
- .s-textarea.s-input__sm,
2135
- .s-textarea.s-textarea__sm {
2136
- --_in-fs: var(--fs-caption);
1964
+ .s-checkbox:indeterminate {
1965
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
2137
1966
  }
2138
- .s-input.s-input__md,
2139
- .s-input.s-textarea__md,
2140
- .s-textarea.s-input__md,
2141
- .s-textarea.s-textarea__md {
2142
- --_in-fs: var(--fs-body3);
2143
- --_in-br: calc(var(--br-sm) + var(--su-static1));
1967
+ .s-checkbox:focus {
1968
+ border-color: var(--_ch-bc-focus);
2144
1969
  }
2145
- @supports (-webkit-overflow-scrolling: touch) {
2146
- .s-input.s-input__md,
2147
- .s-input.s-textarea__md,
2148
- .s-textarea.s-input__md,
2149
- .s-textarea.s-textarea__md {
2150
- --_in-fs: 17px;
2151
- --_in-py: 0.4em;
1970
+ .s-radio {
1971
+ border-radius: var(--br-circle);
1972
+ }
1973
+ @media (prefers-color-scheme: dark) {
1974
+ body.theme-highcontrast.theme-system .s-radio:checked {
1975
+ --_ch-bc: var(--blue-300);
1976
+ outline: var(--su-static1) solid var(--black);
2152
1977
  }
2153
1978
  }
2154
- .s-input.s-input__lg,
2155
- .s-input.s-textarea__lg,
2156
- .s-textarea.s-input__lg,
2157
- .s-textarea.s-textarea__lg {
2158
- --_in-fs: var(--fs-title);
2159
- --_in-br: calc(var(--br-sm) + var(--su-static1));
2160
- --_in-px: 0.6em;
2161
- --_in-py: 0.45em;
1979
+ body.theme-highcontrast.theme-dark .s-radio:checked {
1980
+ --_ch-bc: var(--blue-300);
1981
+ outline: var(--su-static1) solid var(--black);
2162
1982
  }
2163
- .s-input.s-input__xl,
2164
- .s-input.s-textarea__xl,
2165
- .s-textarea.s-input__xl,
2166
- .s-textarea.s-textarea__xl {
2167
- --_in-fs: var(--fs-headline1);
2168
- --_in-br: var(--br-md);
2169
- --_in-px: 0.5em;
2170
- --_in-py: 0.4em;
1983
+ @media (prefers-color-scheme: dark) {
1984
+ body.theme-system .s-radio:checked {
1985
+ --_ch-bg: var(--black);
1986
+ }
2171
1987
  }
2172
- .s-input:-webkit-autofill,
2173
- .s-textarea:-webkit-autofill {
2174
- -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
2175
- -webkit-text-fill-color: var(--black);
2176
- border-color: var(--blue-300);
2177
- transition: background-color 0s 50000s;
1988
+ body.theme-dark .s-radio:checked,
1989
+ .theme-dark__forced .s-radio:checked,
1990
+ body.theme-system .theme-dark__forced .s-radio:checked {
1991
+ --_ch-bg: var(--black);
2178
1992
  }
2179
- .s-input:-webkit-autofill:focus,
2180
- .s-textarea:-webkit-autofill:focus {
2181
- border-color: var(--blue-300);
2182
- -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
1993
+ .s-radio:checked {
1994
+ --_ch-baw: 0.30769231em;
1995
+ --_ch-bc: var(--theme-secondary-400);
1996
+ --_ch-bg: var(--white);
2183
1997
  }
2184
- .s-input::-webkit-contacts-auto-fill-button,
2185
- .s-textarea::-webkit-contacts-auto-fill-button {
2186
- background-color: var(--black);
1998
+ .has-error .s-checkbox,
1999
+ .has-error .s-radio:not(:checked),
2000
+ .has-success .s-checkbox,
2001
+ .has-success .s-radio:not(:checked),
2002
+ .has-warning .s-checkbox,
2003
+ .has-warning .s-radio:not(:checked) {
2004
+ --_ch-bc-focus: var(--_ch-bc);
2187
2005
  }
2188
- .s-input::placeholder,
2189
- .s-textarea::placeholder,
2190
- .s-input::-webkit-input-placeholder,
2191
- .s-textarea::-webkit-input-placeholder {
2192
- color: var(--_in-placeholder-fc);
2006
+ .has-error .s-checkbox,
2007
+ .has-error .s-radio:not(:checked) {
2008
+ --_ch-bc: var(--red-400);
2009
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
2193
2010
  }
2194
- .s-input::placeholder,
2195
- .s-textarea::placeholder {
2196
- opacity: 1;
2011
+ .has-success .s-checkbox,
2012
+ .has-success .s-radio:not(:checked) {
2013
+ --_ch-bc: var(--green-400);
2014
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
2197
2015
  }
2198
- .s-input.s-input__creditcard,
2199
- .s-input.s-textarea__creditcard,
2200
- .s-textarea.s-input__creditcard,
2201
- .s-textarea.s-textarea__creditcard,
2202
- .s-input.s-input__search,
2203
- .s-input.s-textarea__search,
2204
- .s-textarea.s-input__search,
2205
- .s-textarea.s-textarea__search {
2206
- --_in-pl: var(--su-static32);
2016
+ .has-warning .s-checkbox,
2017
+ .has-warning .s-radio:not(:checked) {
2018
+ --_ch-bc: var(--yellow-600);
2019
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2207
2020
  }
2208
- .s-input:focus,
2209
- .s-textarea:focus {
2210
- border-color: var(--_in-bc-focus);
2211
- box-shadow: var(--_in-bs-focus);
2212
- color: var(--_in-fc-focus);
2213
- outline: 0;
2021
+ .s-check-control {
2022
+ --_cc-ai: center;
2023
+ align-items: var(--_cc-ai);
2024
+ display: flex;
2025
+ gap: var(--su8);
2214
2026
  }
2215
- .s-input::-webkit-scrollbar,
2216
- .s-textarea::-webkit-scrollbar {
2217
- width: calc(var(--su-static12) - var(--su-static2));
2218
- height: calc(var(--su-static12) - var(--su-static2));
2219
- background-color: transparent;
2027
+ .s-check-group .s-check-control {
2028
+ --_cc-ai: flex-start;
2220
2029
  }
2221
- .s-input::-webkit-scrollbar-track,
2222
- .s-textarea::-webkit-scrollbar-track {
2223
- border-radius: calc(var(--su-static12) - var(--su-static2));
2224
- background-color: transparent;
2030
+ .s-check-control .s-label {
2031
+ font-weight: normal;
2225
2032
  }
2226
- .s-input::-webkit-scrollbar-thumb,
2227
- .s-textarea::-webkit-scrollbar-thumb {
2228
- border-radius: calc(var(--su-static12) - var(--su-static2));
2229
- background-color: var(--scrollbar);
2033
+ .s-check-group {
2034
+ --_cg-fd: column;
2035
+ flex-direction: var(--_cg-fd);
2036
+ display: flex;
2037
+ gap: var(--su8);
2230
2038
  }
2231
- .s-input::-webkit-scrollbar-corner,
2232
- .s-textarea::-webkit-scrollbar-corner {
2233
- background-color: transparent;
2234
- border-color: transparent;
2039
+ .s-check-group.s-check-group__horizontal {
2040
+ --_cg-fd: row;
2235
2041
  }
2236
- .is-disabled .s-input,
2237
- .is-readonly .s-input,
2238
- .has-success .s-input,
2239
- .has-error .s-input,
2240
- .has-warning .s-input {
2241
- padding-right: var(--su32);
2042
+ .s-check-group legend.s-label {
2043
+ margin-bottom: var(--su8);
2242
2044
  }
2243
- .s-input:focus-within {
2244
- border-color: var(--_in-bc-focus);
2245
- box-shadow: var(--_in-bs-focus);
2246
- color: var(--_in-fc-focus);
2247
- outline: 0;
2045
+ .s-code-block {
2046
+ --_cb-line-numbers-bg: var(--black-050);
2248
2047
  }
2249
- body.theme-highcontrast .s-input:focus-within {
2250
- --_in-bc-focus: var(--black);
2048
+ @media (prefers-color-scheme: dark) {
2049
+ body.theme-system .s-code-block {
2050
+ --_cb-line-numbers-bg: var(--black-025);
2051
+ }
2251
2052
  }
2252
- .s-input.s-input__md {
2253
- --_in-py: 0.5em;
2053
+ body.theme-dark .s-code-block,
2054
+ .theme-dark__forced .s-code-block,
2055
+ body.theme-system .theme-dark__forced .s-code-block {
2056
+ --_cb-line-numbers-bg: var(--black-025);
2254
2057
  }
2255
- .is-disabled .s-textarea,
2256
- .is-readonly .s-textarea,
2257
- .has-success .s-textarea,
2258
- .has-error .s-textarea,
2259
- .has-warning .s-textarea {
2260
- padding-right: var(--su48);
2058
+ code[class*="language-"] .s-code-block,
2059
+ pre.s-code-block > code {
2060
+ font-family: inherit;
2261
2061
  }
2262
- .s-textarea.s-textarea__md {
2263
- --_in-py: 0.72em;
2062
+ code[class*="language-"] .s-code-block .hljs-built_in,
2063
+ pre.s-code-block > code .hljs-built_in,
2064
+ code[class*="language-"] .s-code-block .hljs-literal,
2065
+ pre.s-code-block > code .hljs-literal,
2066
+ code[class*="language-"] .s-code-block .hljs-title,
2067
+ pre.s-code-block > code .hljs-title {
2068
+ color: var(--highlight-literal);
2264
2069
  }
2265
- .s-textarea ~ .s-input-icon {
2266
- right: 1.5em;
2267
- top: 1.5em;
2070
+ code[class*="language-"] .s-code-block .hljs-bullet,
2071
+ pre.s-code-block > code .hljs-bullet,
2072
+ code[class*="language-"] .s-code-block .hljs-code,
2073
+ pre.s-code-block > code .hljs-code {
2074
+ color: var(--highlight-punctuation);
2268
2075
  }
2269
- .s-input-fill {
2270
- --_if-bc: var(--bc-darker);
2271
- --_if-bg: var(--black-050);
2272
- --_if-blw: 0;
2273
- --_if-blr: 0;
2274
- --_if-brr: 0;
2275
- --_if-brw: 0;
2276
- background-color: var(--_if-bg);
2277
- border: var(--su-static1) solid var(--_if-bc);
2278
- border-left-width: var(--_if-blw);
2279
- border-right-width: var(--_if-brw);
2280
- border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
2281
- color: var(--fc-medium);
2282
- font-family: inherit;
2283
- line-height: var(--lh-sm);
2284
- padding: 0.6em 0.7em;
2285
- white-space: nowrap;
2076
+ code[class*="language-"] .s-code-block .hljs-doctag,
2077
+ pre.s-code-block > code .hljs-doctag,
2078
+ code[class*="language-"] .s-code-block .hljs-keyword,
2079
+ pre.s-code-block > code .hljs-keyword,
2080
+ code[class*="language-"] .s-code-block .hljs-meta-keyword,
2081
+ pre.s-code-block > code .hljs-meta-keyword,
2082
+ code[class*="language-"] .s-code-block .hljs-meta,
2083
+ pre.s-code-block > code .hljs-meta,
2084
+ code[class*="language-"] .s-code-block .hljs-section,
2085
+ pre.s-code-block > code .hljs-section,
2086
+ code[class*="language-"] .s-code-block .hljs-selector-class,
2087
+ pre.s-code-block > code .hljs-selector-class,
2088
+ code[class*="language-"] .s-code-block .hljs-selector-pseudo,
2089
+ pre.s-code-block > code .hljs-selector-pseudo,
2090
+ code[class*="language-"] .s-code-block .hljs-selector-tag,
2091
+ pre.s-code-block > code .hljs-selector-tag {
2092
+ color: var(--highlight-keyword);
2286
2093
  }
2287
- .s-input-fill.s-input-fill__clear {
2288
- --_if-bc: transparent;
2289
- --_if-bg: transparent;
2094
+ code[class*="language-"] .s-code-block .hljs-name,
2095
+ pre.s-code-block > code .hljs-name,
2096
+ code[class*="language-"] .s-code-block .hljs-number,
2097
+ pre.s-code-block > code .hljs-number,
2098
+ code[class*="language-"] .s-code-block .hljs-quote,
2099
+ pre.s-code-block > code .hljs-quote,
2100
+ code[class*="language-"] .s-code-block .hljs-selector-id,
2101
+ pre.s-code-block > code .hljs-selector-id,
2102
+ code[class*="language-"] .s-code-block .hljs-template-tag,
2103
+ pre.s-code-block > code .hljs-template-tag,
2104
+ code[class*="language-"] .s-code-block .hljs-type,
2105
+ pre.s-code-block > code .hljs-type {
2106
+ color: var(--highlight-namespace);
2290
2107
  }
2291
- .s-input-fill.order-first {
2292
- --_if-blw: var(--su-static1);
2293
- --_if-blr: var(--br-sm);
2108
+ code[class*="language-"] .s-code-block .hljs-link,
2109
+ pre.s-code-block > code .hljs-link,
2110
+ code[class*="language-"] .s-code-block .hljs-meta-string,
2111
+ pre.s-code-block > code .hljs-meta-string,
2112
+ code[class*="language-"] .s-code-block .hljs-regexp,
2113
+ pre.s-code-block > code .hljs-regexp,
2114
+ code[class*="language-"] .s-code-block .hljs-selector-attr,
2115
+ pre.s-code-block > code .hljs-selector-attr,
2116
+ code[class*="language-"] .s-code-block .hljs-string,
2117
+ pre.s-code-block > code .hljs-string,
2118
+ code[class*="language-"] .s-code-block .hljs-symbol,
2119
+ pre.s-code-block > code .hljs-symbol,
2120
+ code[class*="language-"] .s-code-block .hljs-template-variable,
2121
+ pre.s-code-block > code .hljs-template-variable,
2122
+ code[class*="language-"] .s-code-block .hljs-variable,
2123
+ pre.s-code-block > code .hljs-variable {
2124
+ color: var(--highlight-variable);
2294
2125
  }
2295
- .s-input-fill.order-last {
2296
- --_if-brw: var(--su-static1);
2297
- --_if-brr: var(--br-sm);
2126
+ code[class*="language-"] .s-code-block .hljs-addition,
2127
+ pre.s-code-block > code .hljs-addition {
2128
+ color: var(--highlight-addition);
2298
2129
  }
2299
- .s-input-icon {
2300
- --_ii-fc: unset;
2301
- --_ii-r: 0.7em;
2302
- color: var(--_ii-fc);
2303
- right: var(--_ii-r);
2304
- margin-top: -9px;
2305
- pointer-events: none;
2306
- position: absolute;
2307
- top: 50%;
2130
+ code[class*="language-"] .s-code-block .hljs-attr,
2131
+ pre.s-code-block > code .hljs-attr {
2132
+ color: var(--highlight-attribute);
2308
2133
  }
2309
- .has-error .s-input-icon {
2310
- --_ii-fc: var(--red-400);
2134
+ code[class*="language-"] .s-code-block .hljs-attribute,
2135
+ pre.s-code-block > code .hljs-attribute {
2136
+ color: var(--highlight-symbol);
2311
2137
  }
2312
- .has-success .s-input-icon {
2313
- --_ii-fc: var(--green-400);
2138
+ code[class*="language-"] .s-code-block .hljs-comment,
2139
+ pre.s-code-block > code .hljs-comment {
2140
+ color: var(--highlight-comment);
2314
2141
  }
2315
- .has-warning .s-input-icon {
2316
- --_ii-fc: var(--yellow-600);
2142
+ code[class*="language-"] .s-code-block .hljs-deletion,
2143
+ pre.s-code-block > code .hljs-deletion {
2144
+ color: var(--highlight-deletion);
2317
2145
  }
2318
- .is-disabled .s-input-icon {
2319
- --_ii-fc: var(--black-400);
2146
+ code[class*="language-"] .s-code-block .hljs-emphasis,
2147
+ pre.s-code-block > code .hljs-emphasis {
2148
+ font-style: italic;
2320
2149
  }
2321
- .is-readonly .s-input-icon {
2322
- --_ii-fc: var(--black-200);
2150
+ code[class*="language-"] .s-code-block .hljs-strong,
2151
+ pre.s-code-block > code .hljs-strong {
2152
+ font-weight: bold;
2323
2153
  }
2324
- body.theme-highcontrast .is-readonly .s-input-icon {
2325
- --_ii-fc: var(--fc-light);
2154
+ code[class*="language-"] .s-code-block .hljs-subst,
2155
+ pre.s-code-block > code .hljs-subst {
2156
+ color: var(--highlight-color);
2326
2157
  }
2327
- .s-input-icon.s-input-icon__creditcard,
2328
- .s-input-icon.s-input-icon__search {
2329
- --_ii-r: auto;
2330
- color: var(--black-400);
2331
- left: 0.7em;
2158
+ pre.s-code-block {
2159
+ scrollbar-color: var(--scrollbar) transparent;
2160
+ background-color: var(--highlight-bg);
2161
+ border-radius: var(--br-md);
2162
+ color: var(--highlight-color);
2163
+ font-family: var(--ff-mono);
2164
+ font-size: var(--fs-body1);
2165
+ line-height: var(--lh-md);
2166
+ margin: 0;
2167
+ overflow: auto;
2168
+ padding: var(--su12);
2169
+ }
2170
+ pre.s-code-block .s-code-block--line-numbers {
2171
+ background-color: var(--_cb-line-numbers-bg);
2172
+ border-color: var(--bc-medium);
2173
+ border-style: solid;
2174
+ border-width: 0 var(--su-static1) 0 0;
2175
+ color: var(--black-300);
2176
+ float: left;
2177
+ margin: calc(var(--su12) * -1);
2178
+ margin-right: var(--su12);
2179
+ padding: var(--su12);
2180
+ padding-right: var(--su6);
2181
+ text-align: right;
2332
2182
  }
2333
- .s-input-message {
2334
- --_im-fc: unset;
2335
- --_im-a-fc: unset;
2336
- --_im-a-fc-hover: unset;
2337
- color: var(--_im-fc);
2338
- font-size: var(--fs-caption);
2339
- padding: var(--su2);
2183
+ pre.s-code-block::-webkit-scrollbar {
2184
+ width: calc(var(--su-static12) - var(--su-static2));
2185
+ height: calc(var(--su-static12) - var(--su-static2));
2186
+ background-color: transparent;
2340
2187
  }
2341
- .is-disabled .s-input-message a,
2342
- .is-readonly .s-input-message a,
2343
- .has-success .s-input-message a,
2344
- .has-error .s-input-message a,
2345
- .has-warning .s-input-message a {
2346
- text-decoration: underline;
2188
+ pre.s-code-block::-webkit-scrollbar-track {
2189
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2190
+ background-color: transparent;
2347
2191
  }
2348
- fieldset[disabled] .s-input-message {
2349
- cursor: not-allowed;
2350
- opacity: var(--_o-disabled-static);
2192
+ pre.s-code-block::-webkit-scrollbar-thumb {
2193
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2194
+ background-color: var(--scrollbar);
2351
2195
  }
2352
- .has-error .s-input-message {
2353
- --_im-fc: var(--red-500);
2354
- --_im-a-fc: var(--red-800);
2355
- --_im-a-fc-hover: var(--red-900);
2196
+ pre.s-code-block::-webkit-scrollbar-corner {
2197
+ background-color: transparent;
2198
+ border-color: transparent;
2356
2199
  }
2357
- .has-success .s-input-message {
2358
- --_im-fc: var(--green-500);
2359
- --_im-a-fc: var(--green-800);
2360
- --_im-a-fc-hover: var(--green-900);
2200
+ .s-description {
2201
+ color: var(--fc-medium);
2202
+ font-size: var(--fs-caption);
2203
+ padding: 0 var(--su2);
2361
2204
  }
2362
- .has-warning .s-input-message {
2363
- --_im-fc: var(--yellow-800);
2364
- --_im-a-fc: var(--yellow-900);
2205
+ .is-disabled .s-description {
2206
+ opacity: var(--_o-disabled-static);
2365
2207
  }
2366
- .s-input-message a {
2367
- color: var(--_im-a-fc);
2208
+ .s-empty-state {
2209
+ color: var(--fc-light);
2210
+ text-align: center;
2211
+ margin-left: auto;
2212
+ margin-right: auto;
2368
2213
  }
2369
- .s-input-message a:hover {
2370
- color: var(--_im-a-fc-hover);
2214
+ .s-empty-state p {
2215
+ font-size: var(--fs-body1);
2216
+ margin-bottom: var(--su12);
2371
2217
  }
2372
- .s-label {
2373
- --_la-fs: var(--fs-body2);
2374
- font-size: var(--_la-fs);
2218
+ .s-empty-state p strong {
2375
2219
  color: var(--fc-dark);
2376
- font-family: inherit;
2377
- font-weight: 600;
2378
- padding: 0 var(--su2);
2379
- }
2380
- .s-label[for] {
2381
- cursor: pointer;
2382
2220
  }
2383
- fieldset[disabled] .s-label,
2384
- .is-disabled .s-label,
2385
- .s-check-control .s-checkbox[disabled] + .s-label,
2386
- .s-check-control .s-radio[disabled] + .s-label {
2387
- cursor: not-allowed;
2388
- opacity: var(--_o-disabled-static);
2221
+ .s-expandable {
2222
+ --_ex-after-h: 10px;
2223
+ --_ex-after-hmx: 0;
2224
+ --_ex-after-transition: height 100ms linear,
2225
+ max-height 0s 100ms linear;
2226
+ --_ex-content-hmx: 1000000px;
2227
+ --_ex-content-mb: 0;
2228
+ --_ex-content-o: unset;
2229
+ --_ex-content-transform: unset;
2230
+ --_ex-content-transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),
2231
+ transform 100ms cubic-bezier(1, 0, 1, 1),
2232
+ opacity 100ms cubic-bezier(1, 0, 1, 1);
2233
+ --_ex-content-v: unset;
2234
+ align-items: flex-start;
2235
+ display: flex;
2236
+ -webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
2237
+ clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
2238
+ transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
2389
2239
  }
2390
- fieldset[disabled] .s-label .s-description,
2391
- .is-disabled .s-label .s-description {
2392
- opacity: unset;
2240
+ .s-expandable:not(.is-expanded) {
2241
+ --_ex-after-h: 0;
2242
+ --_ex-after-hmx: 10px;
2243
+ --_ex-after-transition: height 10px linear;
2244
+ --_ex-content-hmx: 0;
2245
+ --_ex-content-mb: -1500px;
2246
+ --_ex-content-o: 0;
2247
+ --_ex-content-transform: scaleY(0);
2248
+ --_ex-content-transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1),
2249
+ visibility 0s 100ms,
2250
+ max-height 0s 100ms,
2251
+ transform 100ms cubic-bezier(0, 1, 1, 1),
2252
+ opacity 100ms cubic-bezier(0, 1, 1, 1);
2253
+ --_ex-content-v: hidden;
2254
+ -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
2255
+ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
2256
+ overflow: hidden;
2257
+ transition: none;
2393
2258
  }
2394
- .is-readonly .s-label {
2395
- cursor: not-allowed;
2259
+ @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
2260
+ .s-expandable:not(.is-expanded) .s-expandable--content {
2261
+ --_ex-content-o: 0;
2262
+ --_ex-content-transform: none;
2263
+ }
2396
2264
  }
2397
- .s-label.s-label__sm {
2398
- --_la-fs: var(--fs-caption);
2265
+ .s-expandable:after {
2266
+ height: var(--_ex-after-h);
2267
+ max-height: var(--_ex-after-hmx);
2268
+ transition: var(--_ex-after-transition);
2269
+ -ms-flex-preferred-size: 0;
2270
+ content: '';
2271
+ flex-basis: 0;
2399
2272
  }
2400
- .s-label.s-label__md {
2401
- --_la-fs: var(--fs-body3);
2273
+ .s-expandable .s-expandable--content {
2274
+ max-height: var(--_ex-content-hmx);
2275
+ margin-bottom: var(--_ex-content-mb);
2276
+ opacity: var(--_ex-content-o);
2277
+ -webkit-transform: var(--_ex-content-transform);
2278
+ transform: var(--_ex-content-transform);
2279
+ visibility: var(--_ex-content-v);
2280
+ -ms-flex-preferred-size: 100%;
2281
+ flex-basis: 100%;
2282
+ -webkit-transform-origin: 0 0;
2283
+ transform-origin: 0 0;
2284
+ transition: var(--_ex-content-transition);
2402
2285
  }
2403
- .s-label.s-label__lg {
2404
- --_la-fs: var(--fs-title);
2286
+ .s-input,
2287
+ .s-textarea {
2288
+ --_in-bc: var(--bc-darker);
2289
+ --_in-bc-focus: var(--theme-secondary-300);
2290
+ --_in-bg: var(--white);
2291
+ --_in-br: var(--br-sm);
2292
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
2293
+ --_in-c: unset;
2294
+ --_in-fc: var(--fc-dark);
2295
+ --_in-fc-focus: var(--black);
2296
+ --_in-fs: var(--fs-body1);
2297
+ --_in-o: unset;
2298
+ --_in-px: 0.7em;
2299
+ --_in-py: 0.6em;
2300
+ --_in-placeholder-fc: var(--black-200);
2301
+ scrollbar-color: var(--scrollbar) transparent;
2302
+ background-color: var(--_in-bg);
2303
+ border: var(--su-static1) solid var(--_in-bc);
2304
+ border-radius: var(--_in-br);
2305
+ color: var(--_in-fc);
2306
+ cursor: var(--_in-c);
2307
+ font-size: var(--_in-fs);
2308
+ opacity: var(--_in-o);
2309
+ padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
2310
+ -webkit-appearance: none;
2311
+ font-family: inherit;
2312
+ margin: 0;
2313
+ width: 100%;
2405
2314
  }
2406
- .s-label.s-label__xl {
2407
- --_la-fs: var(--fs-headline1);
2315
+ @supports (-webkit-overflow-scrolling: touch) {
2316
+ .s-input,
2317
+ .s-textarea {
2318
+ --_in-fs: var(--su-static16);
2319
+ --_in-px: 0.55em;
2320
+ --_in-py: 0.36em;
2321
+ }
2322
+ .s-input::-webkit-input-placeholder,
2323
+ .s-textarea::-webkit-input-placeholder {
2324
+ line-height: normal !important;
2325
+ }
2408
2326
  }
2409
- .s-label--status {
2410
- --_la-status-b: none;
2411
- --_la-status-bg: var(--black-050);
2412
- --_la-status-fc: var(--fc-medium);
2413
- background-color: var(--_la-status-bg);
2414
- border: var(--_la-status-b);
2415
- color: var(--_la-status-fc);
2416
- border-radius: 1000px;
2417
- font-size: var(--fs-caption);
2418
- font-weight: 400;
2419
- margin-left: var(--su4);
2420
- padding: var(--su2) var(--su8);
2421
- vertical-align: text-bottom;
2327
+ body.theme-highcontrast .s-input,
2328
+ body.theme-highcontrast .s-textarea {
2329
+ --_in-bc: var(--black);
2330
+ --_in-placeholder-fc: var(--black-400);
2422
2331
  }
2423
- body.theme-highcontrast .s-label--status {
2424
- --_la-status-b: var(--su-static1) solid currentColor;
2332
+ fieldset[disabled] .s-input,
2333
+ fieldset[disabled] .s-textarea,
2334
+ .s-input[disabled],
2335
+ .s-textarea[disabled],
2336
+ .s-input[readonly],
2337
+ .s-textarea[readonly],
2338
+ .is-readonly .s-input,
2339
+ .is-readonly .s-textarea {
2340
+ --_in-c: not-allowed;
2425
2341
  }
2426
- .s-label--status__beta {
2427
- --_la-status-bg: var(--blue-100);
2428
- --_la-status-fc: var(--blue-700);
2342
+ fieldset[disabled] .s-input,
2343
+ fieldset[disabled] .s-textarea,
2344
+ .s-input[disabled],
2345
+ .s-textarea[disabled] {
2346
+ --_in-o: var(--_o-disabled-static);
2429
2347
  }
2430
- .s-label--status__new {
2431
- --_la-status-bg: var(--green-100);
2432
- --_la-status-fc: var(--green-700);
2348
+ .s-input[readonly],
2349
+ .s-textarea[readonly],
2350
+ .is-readonly .s-input,
2351
+ .is-readonly .s-textarea {
2352
+ --_in-bg: var(--black-050);
2353
+ --_in-bc: var(--bc-light);
2354
+ --_in-fc: var(--black-200);
2355
+ --_in-fc-focus: var(--_in-fc);
2433
2356
  }
2434
- @media (prefers-color-scheme: dark) {
2435
- body.theme-system .s-label--status__new {
2436
- --_la-status-bg: var(--green-050);
2437
- --_la-status-fc: var(--green-800);
2438
- }
2357
+ body.theme-highcontrast .s-input[readonly],
2358
+ body.theme-highcontrast .s-textarea[readonly],
2359
+ body.theme-highcontrast .is-readonly .s-input,
2360
+ body.theme-highcontrast .is-readonly .s-textarea {
2361
+ --_in-fc: var(--fc-light);
2439
2362
  }
2440
- body.theme-dark .s-label--status__new,
2441
- .theme-dark__forced .s-label--status__new,
2442
- body.theme-system .theme-dark__forced .s-label--status__new {
2443
- --_la-status-bg: var(--green-050);
2444
- --_la-status-fc: var(--green-800);
2363
+ .has-error .s-input,
2364
+ .has-error .s-textarea,
2365
+ .has-success .s-input,
2366
+ .has-success .s-textarea,
2367
+ .has-warning .s-input,
2368
+ .has-warning .s-textarea {
2369
+ --_in-bc-focus: var(--_in-bc);
2445
2370
  }
2446
- .s-label--status__required {
2447
- --_la-status-bg: var(--red-100);
2448
- --_la-status-fc: var(--red-700);
2371
+ .has-error .s-input,
2372
+ .has-error .s-textarea {
2373
+ --_in-bc: var(--red-400);
2374
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
2449
2375
  }
2450
- @media (prefers-color-scheme: dark) {
2451
- body.theme-system .s-label--status__required {
2452
- --_la-status-bg: var(--red-050);
2453
- --_la-status-fc: var(--red-800);
2454
- }
2376
+ body.theme-highcontrast .has-error .s-input,
2377
+ body.theme-highcontrast .has-error .s-textarea {
2378
+ --_in-bc: var(--red-400);
2455
2379
  }
2456
- body.theme-dark .s-label--status__required,
2457
- .theme-dark__forced .s-label--status__required,
2458
- body.theme-system .theme-dark__forced .s-label--status__required {
2459
- --_la-status-bg: var(--red-050);
2460
- --_la-status-fc: var(--red-800);
2380
+ .has-success .s-input,
2381
+ .has-success .s-textarea {
2382
+ --_in-bc: var(--green-400);
2383
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
2461
2384
  }
2462
- .s-label .s-description,
2463
- .s-label .s-input-message {
2464
- font-weight: normal;
2465
- margin-bottom: 0;
2466
- margin-top: var(--su4);
2467
- padding: 0;
2385
+ body.theme-highcontrast .has-success .s-input,
2386
+ body.theme-highcontrast .has-success .s-textarea {
2387
+ --_in-bc: var(--green-400);
2468
2388
  }
2469
- a,
2470
- .s-link {
2471
- --_li-fc: var(--theme-link-color);
2472
- --_li-fc-hover: var(--theme-link-color-hover);
2473
- --_li-fc-visited: var(--theme-link-color-visited);
2474
- color: var(--_li-fc);
2475
- cursor: pointer;
2476
- text-decoration: none;
2477
- user-select: auto;
2389
+ .has-warning .s-input,
2390
+ .has-warning .s-textarea {
2391
+ --_in-bc: var(--yellow-600);
2392
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2478
2393
  }
2479
- body.theme-highcontrast a,
2480
- body.theme-highcontrast .s-link {
2481
- text-decoration: underline;
2394
+ body.theme-highcontrast .has-warning .s-input,
2395
+ body.theme-highcontrast .has-warning .s-textarea {
2396
+ --_in-bc: var(--yellow-600);
2482
2397
  }
2483
- a.s-link__danger:visited,
2484
- .s-link.s-link__danger:visited,
2485
- a.s-link__grayscale:visited,
2486
- .s-link.s-link__grayscale:visited,
2487
- a.s-link__inherit:visited,
2488
- .s-link.s-link__inherit:visited,
2489
- a.s-link__muted:visited,
2490
- .s-link.s-link__muted:visited,
2491
- a.s-link__visited:visited,
2492
- .s-link.s-link__visited:visited {
2493
- color: var(--_li-fc-visited);
2398
+ .s-input.s-input__sm,
2399
+ .s-input.s-textarea__sm,
2400
+ .s-textarea.s-input__sm,
2401
+ .s-textarea.s-textarea__sm {
2402
+ --_in-fs: var(--fs-caption);
2494
2403
  }
2495
- a.s-link__danger:visited:active,
2496
- .s-link.s-link__danger:visited:active,
2497
- a.s-link__grayscale:visited:active,
2498
- .s-link.s-link__grayscale:visited:active,
2499
- a.s-link__inherit:visited:active,
2500
- .s-link.s-link__inherit:visited:active,
2501
- a.s-link__muted:visited:active,
2502
- .s-link.s-link__muted:visited:active,
2503
- a.s-link__visited:visited:active,
2504
- .s-link.s-link__visited:visited:active,
2505
- a.s-link__danger:visited:hover,
2506
- .s-link.s-link__danger:visited:hover,
2507
- a.s-link__grayscale:visited:hover,
2508
- .s-link.s-link__grayscale:visited:hover,
2509
- a.s-link__inherit:visited:hover,
2510
- .s-link.s-link__inherit:visited:hover,
2511
- a.s-link__muted:visited:hover,
2512
- .s-link.s-link__muted:visited:hover,
2513
- a.s-link__visited:visited:hover,
2514
- .s-link.s-link__visited:visited:hover {
2515
- color: var(--_li-fc-hover);
2404
+ .s-input.s-input__md,
2405
+ .s-input.s-textarea__md,
2406
+ .s-textarea.s-input__md,
2407
+ .s-textarea.s-textarea__md {
2408
+ --_in-fs: var(--fs-body3);
2409
+ --_in-br: calc(var(--br-sm) + var(--su-static1));
2516
2410
  }
2517
- a.s-link__dropdown,
2518
- .s-link.s-link__dropdown {
2519
- padding-right: 0.9em;
2520
- position: relative;
2411
+ @supports (-webkit-overflow-scrolling: touch) {
2412
+ .s-input.s-input__md,
2413
+ .s-input.s-textarea__md,
2414
+ .s-textarea.s-input__md,
2415
+ .s-textarea.s-textarea__md {
2416
+ --_in-fs: 17px;
2417
+ --_in-py: 0.4em;
2418
+ }
2521
2419
  }
2522
- a.s-link__dropdown:after,
2523
- .s-link.s-link__dropdown:after {
2524
- border-width: var(--su-static4);
2525
- border-bottom-width: 0;
2526
- border-color: currentColor transparent;
2527
- border-style: solid;
2528
- border-top-width: var(--su-static4);
2529
- content: "";
2530
- pointer-events: none;
2531
- position: absolute;
2532
- right: 0;
2533
- top: calc(50% - var(--su-static2));
2534
- z-index: var(--zi-active);
2420
+ .s-input.s-input__lg,
2421
+ .s-input.s-textarea__lg,
2422
+ .s-textarea.s-input__lg,
2423
+ .s-textarea.s-textarea__lg {
2424
+ --_in-fs: var(--fs-title);
2425
+ --_in-br: calc(var(--br-sm) + var(--su-static1));
2426
+ --_in-px: 0.6em;
2427
+ --_in-py: 0.45em;
2535
2428
  }
2536
- a.s-link__underlined,
2537
- .s-link.s-link__underlined {
2538
- text-decoration: underline !important;
2429
+ .s-input.s-input__xl,
2430
+ .s-input.s-textarea__xl,
2431
+ .s-textarea.s-input__xl,
2432
+ .s-textarea.s-textarea__xl {
2433
+ --_in-fs: var(--fs-headline1);
2434
+ --_in-br: var(--br-md);
2435
+ --_in-px: 0.5em;
2436
+ --_in-py: 0.4em;
2539
2437
  }
2540
- a.s-link__visited,
2541
- .s-link.s-link__visited {
2542
- --_li-fc-hover: var(--theme-link-color-hover);
2543
- --_li-fc-visited: var(--theme-link-color-visited);
2438
+ .s-input:-webkit-autofill,
2439
+ .s-textarea:-webkit-autofill {
2440
+ -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
2441
+ -webkit-text-fill-color: var(--black);
2442
+ border-color: var(--blue-300);
2443
+ transition: background-color 0s 50000s;
2544
2444
  }
2545
- a.s-link__danger,
2546
- .s-link.s-link__danger {
2547
- --_li-fc: var(--red-500);
2548
- --_li-fc-hover: var(--red-400);
2549
- --_li-fc-visited: var(--red-600);
2445
+ .s-input:-webkit-autofill:focus,
2446
+ .s-textarea:-webkit-autofill:focus {
2447
+ border-color: var(--blue-300);
2448
+ -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
2550
2449
  }
2551
- a.s-link__grayscale,
2552
- .s-link.s-link__grayscale {
2553
- --_li-fc: var(--black-800);
2554
- --_li-fc-hover: var(--black-900);
2555
- --_li-fc-visited: var(--black-700);
2450
+ .s-input::-webkit-contacts-auto-fill-button,
2451
+ .s-textarea::-webkit-contacts-auto-fill-button {
2452
+ background-color: var(--black);
2556
2453
  }
2557
- a.s-link__inherit,
2558
- .s-link.s-link__inherit {
2559
- --_li-fc: inherit !important;
2560
- --_li-fc-hover: inherit !important;
2561
- --_li-fc-visited: inherit !important;
2454
+ .s-input::placeholder,
2455
+ .s-textarea::placeholder,
2456
+ .s-input::-webkit-input-placeholder,
2457
+ .s-textarea::-webkit-input-placeholder {
2458
+ color: var(--_in-placeholder-fc);
2562
2459
  }
2563
- a.s-link__muted,
2564
- .s-link.s-link__muted {
2565
- --_li-fc: var(--black-500);
2566
- --_li-fc-hover: var(--black-600);
2567
- --_li-fc-visited: var(--black-700);
2460
+ .s-input::placeholder,
2461
+ .s-textarea::placeholder {
2462
+ opacity: 1;
2568
2463
  }
2569
- fieldset[disabled] a,
2570
- fieldset[disabled] .s-link {
2571
- box-shadow: none !important;
2572
- opacity: var(--_o-disabled-static);
2573
- pointer-events: none;
2464
+ .s-input.s-input__creditcard,
2465
+ .s-input.s-textarea__creditcard,
2466
+ .s-textarea.s-input__creditcard,
2467
+ .s-textarea.s-textarea__creditcard,
2468
+ .s-input.s-input__search,
2469
+ .s-input.s-textarea__search,
2470
+ .s-textarea.s-input__search,
2471
+ .s-textarea.s-textarea__search {
2472
+ --_in-pl: var(--su-static32);
2574
2473
  }
2575
- a:active,
2576
- .s-link:active,
2577
- a:hover,
2578
- .s-link:hover {
2579
- color: var(--_li-fc-hover);
2474
+ .s-input:focus,
2475
+ .s-textarea:focus {
2476
+ border-color: var(--_in-bc-focus);
2477
+ box-shadow: var(--_in-bs-focus);
2478
+ color: var(--_in-fc-focus);
2479
+ outline: 0;
2580
2480
  }
2581
- button.s-link {
2582
- appearance: none;
2583
- background: transparent;
2584
- border: 0;
2585
- font-family: inherit;
2586
- line-height: inherit;
2587
- padding: 0;
2588
- user-select: auto;
2481
+ .s-input::-webkit-scrollbar,
2482
+ .s-textarea::-webkit-scrollbar {
2483
+ width: calc(var(--su-static12) - var(--su-static2));
2484
+ height: calc(var(--su-static12) - var(--su-static2));
2485
+ background-color: transparent;
2589
2486
  }
2590
- button.s-link:focus {
2591
- outline: none;
2487
+ .s-input::-webkit-scrollbar-track,
2488
+ .s-textarea::-webkit-scrollbar-track {
2489
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2490
+ background-color: transparent;
2592
2491
  }
2593
- .s-link-preview {
2594
- --_lp-details-mt: var(--su2);
2595
- --_lp-footer-fd: unset;
2596
- --_lp-misc-pl: var(--su4);
2597
- --_lp-misc-pt: unset;
2598
- border: var(--su-static1) solid var(--bc-medium);
2599
- border-radius: var(--br-sm);
2600
- box-shadow: var(--bs-sm);
2601
- text-align: left;
2492
+ .s-input::-webkit-scrollbar-thumb,
2493
+ .s-textarea::-webkit-scrollbar-thumb {
2494
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2495
+ background-color: var(--scrollbar);
2602
2496
  }
2603
- @media (max-width: 640px) {
2604
- .s-link-preview {
2605
- --_lp-details-mt: var(--su4);
2606
- --_lp-footer-fd: column;
2607
- --_lp-misc-pl: 0;
2608
- --_lp-misc-pt: var(--su2);
2609
- }
2497
+ .s-input::-webkit-scrollbar-corner,
2498
+ .s-textarea::-webkit-scrollbar-corner {
2499
+ background-color: transparent;
2500
+ border-color: transparent;
2501
+ }
2502
+ .is-disabled .s-input,
2503
+ .is-readonly .s-input,
2504
+ .has-success .s-input,
2505
+ .has-error .s-input,
2506
+ .has-warning .s-input {
2507
+ padding-right: var(--su32);
2610
2508
  }
2611
- .s-link-preview .s-link-preview--details a,
2612
- .s-link-preview .s-link-preview--footer a {
2613
- color: var(--black-500);
2614
- cursor: pointer;
2615
- text-decoration: none;
2509
+ .s-input:focus-within {
2510
+ border-color: var(--_in-bc-focus);
2511
+ box-shadow: var(--_in-bs-focus);
2512
+ color: var(--_in-fc-focus);
2513
+ outline: 0;
2616
2514
  }
2617
- .s-link-preview .s-link-preview--details a:visited,
2618
- .s-link-preview .s-link-preview--footer a:visited {
2619
- color: var(--black-700);
2515
+ body.theme-highcontrast .s-input:focus-within {
2516
+ --_in-bc-focus: var(--black);
2620
2517
  }
2621
- .s-link-preview .s-link-preview--details a:hover,
2622
- .s-link-preview .s-link-preview--footer a:hover,
2623
- .s-link-preview .s-link-preview--details a:active,
2624
- .s-link-preview .s-link-preview--footer a:active,
2625
- .s-link-preview .s-link-preview--details a:focus,
2626
- .s-link-preview .s-link-preview--footer a:focus {
2627
- color: var(--black-600);
2518
+ .s-input.s-input__md {
2519
+ --_in-py: 0.5em;
2628
2520
  }
2629
- .s-link-preview .s-link-preview--body {
2630
- font-size: var(--fs-body2);
2631
- padding: var(--su12);
2521
+ .is-disabled .s-textarea,
2522
+ .is-readonly .s-textarea,
2523
+ .has-success .s-textarea,
2524
+ .has-error .s-textarea,
2525
+ .has-warning .s-textarea {
2526
+ padding-right: var(--su48);
2632
2527
  }
2633
- .s-link-preview .s-link-preview--body *:last-child {
2634
- margin-bottom: 0;
2528
+ .s-textarea.s-textarea__md {
2529
+ --_in-py: 0.72em;
2635
2530
  }
2636
- .s-link-preview .s-link-preview--code pre {
2637
- border-radius: 0 !important;
2638
- margin: 0;
2639
- max-height: 400px;
2531
+ .s-textarea ~ .s-input-icon {
2532
+ right: 1.5em;
2533
+ top: 1.5em;
2640
2534
  }
2641
- .s-link-preview .s-link-preview--details {
2642
- margin-top: var(--_lp-details-mt);
2643
- color: var(--black-500);
2644
- font-size: var(--fs-caption);
2535
+ .s-input-fill {
2536
+ --_if-bc: var(--bc-darker);
2537
+ --_if-bg: var(--black-050);
2538
+ --_if-blw: 0;
2539
+ --_if-blr: 0;
2540
+ --_if-brr: 0;
2541
+ --_if-brw: 0;
2542
+ background-color: var(--_if-bg);
2543
+ border: var(--su-static1) solid var(--_if-bc);
2544
+ border-left-width: var(--_if-blw);
2545
+ border-right-width: var(--_if-brw);
2546
+ border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
2547
+ color: var(--fc-medium);
2548
+ font-family: inherit;
2549
+ line-height: var(--lh-sm);
2550
+ padding: 0.6em 0.7em;
2551
+ white-space: nowrap;
2645
2552
  }
2646
- .s-link-preview .s-link-preview--footer {
2647
- flex-direction: var(--_lp-footer-fd);
2648
- background: var(--black-025);
2649
- border-bottom-left-radius: var(--br-sm);
2650
- border-bottom-right-radius: var(--br-sm);
2651
- border-top: var(--su-static1) solid var(--bc-medium);
2652
- display: flex;
2653
- font-size: var(--fs-caption);
2654
- justify-content: space-between;
2655
- padding: var(--su12);
2553
+ .s-input-fill.s-input-fill__clear {
2554
+ --_if-bc: transparent;
2555
+ --_if-bg: transparent;
2656
2556
  }
2657
- .s-link-preview .s-link-preview--header {
2658
- background: var(--black-025);
2659
- border-bottom: var(--su-static1) solid var(--bc-medium);
2660
- border-top-left-radius: var(--br-sm);
2661
- border-top-right-radius: var(--br-sm);
2662
- display: flex;
2663
- padding: var(--su12) var(--su8);
2557
+ .s-input-fill.order-first {
2558
+ --_if-blw: var(--su-static1);
2559
+ --_if-blr: var(--br-sm);
2664
2560
  }
2665
- .s-link-preview .s-link-preview--icon {
2666
- color: var(--black-800);
2667
- margin-right: var(--su8);
2561
+ .s-input-fill.order-last {
2562
+ --_if-brw: var(--su-static1);
2563
+ --_if-brr: var(--br-sm);
2668
2564
  }
2669
- .s-link-preview .s-link-preview--misc {
2670
- padding-left: var(--_lp-misc-pl);
2671
- padding-top: var(--_lp-misc-pt);
2672
- color: var(--black-500);
2565
+ .s-input-icon {
2566
+ --_ii-fc: unset;
2567
+ --_ii-r: 0.7em;
2568
+ color: var(--_ii-fc);
2569
+ right: var(--_ii-r);
2570
+ margin-top: -9px;
2571
+ pointer-events: none;
2572
+ position: absolute;
2573
+ top: 50%;
2673
2574
  }
2674
- .s-link-preview .s-link-preview--title {
2675
- color: var(--black-900);
2676
- font-size: var(--fs-body3);
2677
- font-weight: bold;
2575
+ .has-error .s-input-icon {
2576
+ --_ii-fc: var(--red-400);
2678
2577
  }
2679
- .s-link-preview a.s-link-preview--title {
2680
- color: var(--theme-link-color);
2681
- cursor: pointer;
2682
- text-decoration: none;
2578
+ .has-success .s-input-icon {
2579
+ --_ii-fc: var(--green-400);
2683
2580
  }
2684
- .s-link-preview a.s-link-preview--title:active,
2685
- .s-link-preview a.s-link-preview--title:hover,
2686
- .s-link-preview a.s-link-preview--title:active.s-link__visited,
2687
- .s-link-preview a.s-link-preview--title:hover.s-link__visited {
2688
- color: var(--theme-link-color-hover);
2581
+ .has-warning .s-input-icon {
2582
+ --_ii-fc: var(--yellow-600);
2689
2583
  }
2690
- .s-link-preview a.s-link-preview--title:active,
2691
- .s-link-preview a.s-link-preview--title:hover,
2692
- .s-link-preview a.s-link-preview--title.s-link__visited:active,
2693
- .s-link-preview a.s-link-preview--title.s-link__visited:hover,
2694
- .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2695
- text-decoration: none;
2584
+ .is-disabled .s-input-icon {
2585
+ --_ii-fc: var(--black-400);
2696
2586
  }
2697
- body.theme-highcontrast .s-link-preview a.s-link-preview--title:active,
2698
- body.theme-highcontrast .s-link-preview a.s-link-preview--title:hover,
2699
- body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:active,
2700
- body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:hover,
2701
- body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2702
- text-decoration: underline;
2587
+ .is-readonly .s-input-icon {
2588
+ --_ii-fc: var(--black-200);
2703
2589
  }
2704
- .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2705
- color: var(--theme-link-color);
2590
+ body.theme-highcontrast .is-readonly .s-input-icon {
2591
+ --_ii-fc: var(--fc-light);
2706
2592
  }
2707
- .s-link-preview .s-link-preview--url {
2708
- max-width: 100%;
2709
- overflow: hidden;
2710
- text-overflow: ellipsis !important;
2711
- white-space: nowrap;
2593
+ .s-input-icon.s-input-icon__creditcard,
2594
+ .s-input-icon.s-input-icon__search {
2595
+ --_ii-r: auto;
2596
+ color: var(--black-400);
2597
+ left: 0.7em;
2712
2598
  }
2713
- .s-menu {
2714
- --_me-divider-bg: var(--bc-light);
2715
- --_me-label-btc: var(--bc-light);
2716
- --_me-label-cursor: pointer;
2717
- list-style: none;
2718
- margin: 0;
2719
- padding: 0;
2599
+ .s-input-message {
2600
+ --_im-fc: unset;
2601
+ --_im-a-fc: unset;
2602
+ --_im-a-fc-hover: unset;
2603
+ color: var(--_im-fc);
2604
+ font-size: var(--fs-caption);
2605
+ padding: var(--su2);
2720
2606
  }
2721
- @media (prefers-color-scheme: dark) {
2722
- body.theme-system .s-menu {
2723
- --_me-divider-bg: var(--bc-lightest);
2724
- --_me-label-btc: var(--bc-lightest);
2725
- }
2607
+ .is-disabled .s-input-message a,
2608
+ .is-readonly .s-input-message a,
2609
+ .has-success .s-input-message a,
2610
+ .has-error .s-input-message a,
2611
+ .has-warning .s-input-message a {
2612
+ text-decoration: underline;
2726
2613
  }
2727
- body.theme-dark .s-menu,
2728
- .theme-dark__forced .s-menu,
2729
- body.theme-system .theme-dark__forced .s-menu {
2730
- --_me-divider-bg: var(--bc-lightest);
2731
- --_me-label-btc: var(--bc-lightest);
2614
+ fieldset[disabled] .s-input-message {
2615
+ cursor: not-allowed;
2616
+ opacity: var(--_o-disabled-static);
2732
2617
  }
2733
- .s-menu .s-menu--divider {
2734
- background-color: var(--_me-divider-bg);
2735
- height: var(--su-static1);
2736
- margin: var(--su8) 0;
2618
+ .has-error .s-input-message {
2619
+ --_im-fc: var(--red-500);
2620
+ --_im-a-fc: var(--red-800);
2621
+ --_im-a-fc-hover: var(--red-900);
2737
2622
  }
2738
- .s-menu .s-menu--label {
2739
- border-top: var(--su-static1) solid var(--_me-label-btc);
2740
- cursor: var(--_me-label-cursor);
2741
- padding: var(--su12);
2623
+ .has-success .s-input-message {
2624
+ --_im-fc: var(--green-500);
2625
+ --_im-a-fc: var(--green-800);
2626
+ --_im-a-fc-hover: var(--green-900);
2742
2627
  }
2743
- .s-menu .s-menu--label.is-disabled {
2744
- --_me-label-cursor: not-allowed;
2628
+ .has-warning .s-input-message {
2629
+ --_im-fc: var(--yellow-800);
2630
+ --_im-a-fc: var(--yellow-900);
2745
2631
  }
2746
- .s-menu .s-menu--title {
2747
- color: var(--black-600);
2748
- font-size: var(--fs-fine);
2749
- padding: var(--su8) var(--su12);
2750
- text-transform: uppercase;
2632
+ .s-input-message a {
2633
+ color: var(--_im-a-fc);
2751
2634
  }
2752
- .s-menu li + .s-menu--title {
2753
- margin-top: var(--su12);
2635
+ .s-input-message a:hover {
2636
+ color: var(--_im-a-fc-hover);
2754
2637
  }
2755
- .s-modal {
2756
- --_mo-bg: hsla(210, 8%, 5%, 0.5);
2757
- --_mo-hmx: unset;
2758
- --_mo-wmx: unset;
2759
- --_mo-close-t: var(--su8);
2760
- --_mo-dialog-bg: var(--white);
2761
- --_mo-dialog-pt: var(--su24);
2762
- --_mo-header-fc: var(--fc-dark);
2763
- background-color: var(--_mo-bg);
2764
- max-height: var(--_mo-hmx);
2765
- max-width: var(--_mo-wmx);
2766
- align-items: center;
2767
- backface-visibility: hidden;
2768
- display: flex;
2769
- inset: 0;
2770
- justify-content: center;
2771
- opacity: 0;
2772
- position: fixed;
2773
- transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms;
2774
- visibility: hidden;
2775
- will-change: visibility, z-index, opacity;
2776
- z-index: var(--zi-hide);
2638
+ .s-label {
2639
+ --_la-fs: var(--fs-body2);
2640
+ font-size: var(--_la-fs);
2641
+ color: var(--fc-dark);
2642
+ font-family: inherit;
2643
+ font-weight: 600;
2644
+ padding: 0 var(--su2);
2645
+ }
2646
+ .s-label[for] {
2647
+ cursor: pointer;
2777
2648
  }
2778
- .s-modal[aria-hidden="false"],
2779
- .s-modal[aria-hidden="false"] .s-modal--dialog {
2780
- opacity: 1;
2781
- transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
2782
- transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--te-smooth) 10ms, transform 100ms var(--te-smooth) 10ms;
2783
- visibility: visible;
2784
- z-index: var(--zi-modals);
2649
+ fieldset[disabled] .s-label,
2650
+ .is-disabled .s-label,
2651
+ .s-check-control .s-checkbox[disabled] + .s-label,
2652
+ .s-check-control .s-radio[disabled] + .s-label {
2653
+ cursor: not-allowed;
2654
+ opacity: var(--_o-disabled-static);
2785
2655
  }
2786
- .s-modal.s-modal__celebration {
2787
- --_mo-close-t: var(--su48);
2788
- --_mo-dialog-pt: var(--su64);
2656
+ fieldset[disabled] .s-label .s-description,
2657
+ .is-disabled .s-label .s-description {
2658
+ opacity: unset;
2789
2659
  }
2790
- .s-modal.s-modal__celebration .s-modal--dialog {
2791
- background-repeat: repeat-x;
2792
- background-position: top -10px center;
2793
- background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
2660
+ .is-readonly .s-label {
2661
+ cursor: not-allowed;
2794
2662
  }
2795
- @media (prefers-reduced-motion) {
2796
- .s-modal.s-modal__celebration .s-modal--dialog {
2797
- background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
2798
- }
2663
+ .s-label.s-label__sm {
2664
+ --_la-fs: var(--fs-caption);
2799
2665
  }
2800
- .s-modal.s-modal__full {
2801
- --_mo-hmx: calc(100% - var(--su48));
2802
- --_mo-wmx: calc(100% - var(--su48));
2666
+ .s-label.s-label__md {
2667
+ --_la-fs: var(--fs-body3);
2803
2668
  }
2804
- .s-modal.has-danger,
2805
- .s-modal.s-modal__danger {
2806
- --_mo-bg: hsla(358, 67%, 6%, 0.5);
2807
- --_mo-header-fc: var(--red-600);
2669
+ .s-label.s-label__lg {
2670
+ --_la-fs: var(--fs-title);
2808
2671
  }
2809
- .s-modal .s-modal--body {
2810
- color: var(--fc-medium);
2811
- margin-bottom: var(--su24);
2672
+ .s-label.s-label__xl {
2673
+ --_la-fs: var(--fs-headline1);
2812
2674
  }
2813
- .s-modal .s-modal--close {
2814
- padding: var(--su12) !important;
2815
- position: absolute !important;
2816
- right: var(--su8);
2817
- top: var(--_mo-close-t);
2675
+ .s-label--status {
2676
+ --_la-status-b: none;
2677
+ --_la-status-bg: var(--black-050);
2678
+ --_la-status-fc: var(--fc-medium);
2679
+ background-color: var(--_la-status-bg);
2680
+ border: var(--_la-status-b);
2681
+ color: var(--_la-status-fc);
2682
+ border-radius: 1000px;
2683
+ font-size: var(--fs-caption);
2684
+ font-weight: 400;
2685
+ margin-left: var(--su4);
2686
+ padding: var(--su2) var(--su8);
2687
+ vertical-align: text-bottom;
2818
2688
  }
2819
- .s-modal .s-modal--close .svg-icon {
2820
- margin: 0 !important;
2689
+ body.theme-highcontrast .s-label--status {
2690
+ --_la-status-b: var(--su-static1) solid currentColor;
2821
2691
  }
2822
- .s-modal .s-modal--dialog {
2823
- padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
2824
- scrollbar-color: var(--scrollbar) transparent;
2825
- backface-visibility: hidden;
2826
- background-color: var(--_mo-dialog-bg);
2827
- border-radius: var(--br-lg);
2828
- box-shadow: var(--bs-lg);
2829
- max-height: 100%;
2830
- max-width: 600px;
2831
- opacity: 0;
2832
- overflow-y: auto;
2833
- transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
2834
- transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
2835
- visibility: hidden;
2836
- will-change: visibility, z-index, opacity, transform;
2837
- z-index: var(--zi-hide);
2692
+ .s-label--status__beta {
2693
+ --_la-status-bg: var(--blue-100);
2694
+ --_la-status-fc: var(--blue-700);
2695
+ }
2696
+ .s-label--status__new {
2697
+ --_la-status-bg: var(--green-100);
2698
+ --_la-status-fc: var(--green-700);
2838
2699
  }
2839
2700
  @media (prefers-color-scheme: dark) {
2840
- body.theme-system .s-modal .s-modal--dialog {
2841
- --_mo-dialog-bg: var(--black-100);
2701
+ body.theme-system .s-label--status__new {
2702
+ --_la-status-bg: var(--green-050);
2703
+ --_la-status-fc: var(--green-800);
2842
2704
  }
2843
2705
  }
2844
- body.theme-dark .s-modal .s-modal--dialog,
2845
- .theme-dark__forced .s-modal .s-modal--dialog,
2846
- body.theme-system .theme-dark__forced .s-modal .s-modal--dialog {
2847
- --_mo-dialog-bg: var(--black-100);
2706
+ body.theme-dark .s-label--status__new,
2707
+ .theme-dark__forced .s-label--status__new,
2708
+ body.theme-system .theme-dark__forced .s-label--status__new {
2709
+ --_la-status-bg: var(--green-050);
2710
+ --_la-status-fc: var(--green-800);
2848
2711
  }
2849
- .s-modal .s-modal--dialog::-webkit-scrollbar {
2850
- width: calc(var(--su-static12) - var(--su-static2));
2851
- height: calc(var(--su-static12) - var(--su-static2));
2852
- background-color: transparent;
2712
+ .s-label--status__required {
2713
+ --_la-status-bg: var(--red-100);
2714
+ --_la-status-fc: var(--red-700);
2853
2715
  }
2854
- .s-modal .s-modal--dialog::-webkit-scrollbar-track {
2855
- border-radius: calc(var(--su-static12) - var(--su-static2));
2856
- background-color: transparent;
2716
+ @media (prefers-color-scheme: dark) {
2717
+ body.theme-system .s-label--status__required {
2718
+ --_la-status-bg: var(--red-050);
2719
+ --_la-status-fc: var(--red-800);
2720
+ }
2857
2721
  }
2858
- .s-modal .s-modal--dialog::-webkit-scrollbar-thumb {
2859
- border-radius: calc(var(--su-static12) - var(--su-static2));
2860
- background-color: var(--scrollbar);
2722
+ body.theme-dark .s-label--status__required,
2723
+ .theme-dark__forced .s-label--status__required,
2724
+ body.theme-system .theme-dark__forced .s-label--status__required {
2725
+ --_la-status-bg: var(--red-050);
2726
+ --_la-status-fc: var(--red-800);
2861
2727
  }
2862
- .s-modal .s-modal--dialog::-webkit-scrollbar-corner {
2863
- background-color: transparent;
2864
- border-color: transparent;
2728
+ .s-label .s-description,
2729
+ .s-label .s-input-message {
2730
+ font-weight: normal;
2731
+ margin-bottom: 0;
2732
+ margin-top: var(--su4);
2733
+ padding: 0;
2865
2734
  }
2866
- .s-modal .s-modal--footer {
2867
- margin-top: var(--su24);
2735
+ a,
2736
+ .s-link {
2737
+ --_li-fc: var(--theme-link-color);
2738
+ --_li-fc-hover: var(--theme-link-color-hover);
2739
+ --_li-fc-visited: var(--theme-link-color-visited);
2740
+ color: var(--_li-fc);
2741
+ cursor: pointer;
2742
+ text-decoration: none;
2743
+ user-select: auto;
2868
2744
  }
2869
- .s-modal .s-modal--header {
2870
- color: var(--_mo-header-fc);
2871
- font-size: var(--fs-headline1);
2872
- font-weight: normal;
2873
- line-height: var(--lh-sm);
2874
- margin-bottom: var(--su16);
2745
+ body.theme-highcontrast a,
2746
+ body.theme-highcontrast .s-link {
2747
+ text-decoration: underline;
2875
2748
  }
2876
- .s-navigation {
2877
- --_na-fd: row;
2878
- --_na-fw: wrap;
2879
- --_na-p: var(--su2) 0;
2880
- --_na-gap: var(--su4);
2881
- --_na-item-bg: none;
2882
- --_na-item-fc: var(--black-600);
2883
- --_na-item-fs: unset;
2884
- --_na-item-p: var(--su6) var(--su12);
2885
- --_na-item-py: var(--su12);
2886
- --_na-item-ws: nowrap;
2887
- --_na-item-bg-hover: var(--black-075);
2888
- --_na-item-fc-hover: var(--_na-item-fc);
2889
- --_na-item-selected-bg: var(--theme-primary-color);
2890
- --_na-item-selected-fc: var(--white);
2891
- --_na-item-selected-bg-hover: var(--theme-primary-600);
2892
- --_na-title-mt: var(--su16);
2893
- flex-direction: var(--_na-fd);
2894
- flex-wrap: var(--_na-fw);
2895
- gap: var(--_na-gap);
2896
- padding: var(--_na-p);
2897
- display: flex;
2898
- list-style: none;
2899
- margin: 0;
2749
+ a.s-link__danger:visited,
2750
+ .s-link.s-link__danger:visited,
2751
+ a.s-link__grayscale:visited,
2752
+ .s-link.s-link__grayscale:visited,
2753
+ a.s-link__inherit:visited,
2754
+ .s-link.s-link__inherit:visited,
2755
+ a.s-link__muted:visited,
2756
+ .s-link.s-link__muted:visited,
2757
+ a.s-link__visited:visited,
2758
+ .s-link.s-link__visited:visited {
2759
+ color: var(--_li-fc-visited);
2760
+ }
2761
+ a.s-link__danger:visited:active,
2762
+ .s-link.s-link__danger:visited:active,
2763
+ a.s-link__grayscale:visited:active,
2764
+ .s-link.s-link__grayscale:visited:active,
2765
+ a.s-link__inherit:visited:active,
2766
+ .s-link.s-link__inherit:visited:active,
2767
+ a.s-link__muted:visited:active,
2768
+ .s-link.s-link__muted:visited:active,
2769
+ a.s-link__visited:visited:active,
2770
+ .s-link.s-link__visited:visited:active,
2771
+ a.s-link__danger:visited:hover,
2772
+ .s-link.s-link__danger:visited:hover,
2773
+ a.s-link__grayscale:visited:hover,
2774
+ .s-link.s-link__grayscale:visited:hover,
2775
+ a.s-link__inherit:visited:hover,
2776
+ .s-link.s-link__inherit:visited:hover,
2777
+ a.s-link__muted:visited:hover,
2778
+ .s-link.s-link__muted:visited:hover,
2779
+ a.s-link__visited:visited:hover,
2780
+ .s-link.s-link__visited:visited:hover {
2781
+ color: var(--_li-fc-hover);
2782
+ }
2783
+ a.s-link__dropdown,
2784
+ .s-link.s-link__dropdown {
2785
+ padding-right: 0.9em;
2786
+ position: relative;
2787
+ }
2788
+ a.s-link__dropdown:after,
2789
+ .s-link.s-link__dropdown:after {
2790
+ border-width: var(--su-static4);
2791
+ border-bottom-width: 0;
2792
+ border-color: currentColor transparent;
2793
+ border-style: solid;
2794
+ border-top-width: var(--su-static4);
2795
+ content: "";
2796
+ pointer-events: none;
2797
+ position: absolute;
2798
+ right: 0;
2799
+ top: calc(50% - var(--su-static2));
2800
+ z-index: var(--zi-active);
2801
+ }
2802
+ a.s-link__underlined,
2803
+ .s-link.s-link__underlined {
2804
+ text-decoration: underline !important;
2805
+ }
2806
+ a.s-link__visited,
2807
+ .s-link.s-link__visited {
2808
+ --_li-fc-hover: var(--theme-link-color-hover);
2809
+ --_li-fc-visited: var(--theme-link-color-visited);
2810
+ }
2811
+ a.s-link__danger,
2812
+ .s-link.s-link__danger {
2813
+ --_li-fc: var(--red-500);
2814
+ --_li-fc-hover: var(--red-400);
2815
+ --_li-fc-visited: var(--red-600);
2816
+ }
2817
+ a.s-link__grayscale,
2818
+ .s-link.s-link__grayscale {
2819
+ --_li-fc: var(--black-800);
2820
+ --_li-fc-hover: var(--black-900);
2821
+ --_li-fc-visited: var(--black-700);
2822
+ }
2823
+ a.s-link__inherit,
2824
+ .s-link.s-link__inherit {
2825
+ --_li-fc: inherit !important;
2826
+ --_li-fc-hover: inherit !important;
2827
+ --_li-fc-visited: inherit !important;
2900
2828
  }
2901
- body.theme-highcontrast .s-navigation {
2902
- --_na-item-bg-hover: var(--black-600);
2903
- --_na-item-fc-hover: var(--black-100);
2829
+ a.s-link__muted,
2830
+ .s-link.s-link__muted {
2831
+ --_li-fc: var(--black-500);
2832
+ --_li-fc-hover: var(--black-600);
2833
+ --_li-fc-visited: var(--black-700);
2904
2834
  }
2905
- .s-navigation.s-navigation__scroll {
2906
- --_na-fw: nowrap;
2907
- overflow-x: auto;
2908
- scrollbar-color: var(--scrollbar) transparent;
2835
+ fieldset[disabled] a,
2836
+ fieldset[disabled] .s-link {
2837
+ box-shadow: none !important;
2838
+ opacity: var(--_o-disabled-static);
2839
+ pointer-events: none;
2909
2840
  }
2910
- .s-navigation.s-navigation__scroll::-webkit-scrollbar {
2911
- width: calc(var(--su-static12) - var(--su-static2));
2912
- height: calc(var(--su-static12) - var(--su-static2));
2913
- background-color: transparent;
2841
+ a:active,
2842
+ .s-link:active,
2843
+ a:hover,
2844
+ .s-link:hover {
2845
+ color: var(--_li-fc-hover);
2914
2846
  }
2915
- .s-navigation.s-navigation__scroll::-webkit-scrollbar-track {
2916
- border-radius: calc(var(--su-static12) - var(--su-static2));
2917
- background-color: transparent;
2847
+ button.s-link {
2848
+ appearance: none;
2849
+ background: transparent;
2850
+ border: 0;
2851
+ font-family: inherit;
2852
+ line-height: inherit;
2853
+ padding: 0;
2854
+ user-select: auto;
2918
2855
  }
2919
- .s-navigation.s-navigation__scroll::-webkit-scrollbar-thumb {
2920
- border-radius: calc(var(--su-static12) - var(--su-static2));
2921
- background-color: var(--scrollbar);
2856
+ button.s-link:focus {
2857
+ outline: revert;
2922
2858
  }
2923
- .s-navigation.s-navigation__scroll::-webkit-scrollbar-corner {
2924
- background-color: transparent;
2925
- border-color: transparent;
2859
+ .s-link-preview {
2860
+ --_lp-details-mt: var(--su2);
2861
+ --_lp-footer-fd: unset;
2862
+ --_lp-misc-pl: var(--su4);
2863
+ --_lp-misc-pt: unset;
2864
+ border: var(--su-static1) solid var(--bc-medium);
2865
+ border-radius: var(--br-sm);
2866
+ box-shadow: var(--bs-sm);
2867
+ text-align: left;
2926
2868
  }
2927
- .s-navigation.s-navigation__sm {
2928
- --_na-item-fs: var(--fs-caption);
2929
- --_na-item-p: var(--su4) var(--su12);
2869
+ @media (max-width: 640px) {
2870
+ .s-link-preview {
2871
+ --_lp-details-mt: var(--su4);
2872
+ --_lp-footer-fd: column;
2873
+ --_lp-misc-pl: 0;
2874
+ --_lp-misc-pt: var(--su2);
2875
+ }
2930
2876
  }
2931
- .s-navigation.s-navigation__vertical {
2932
- --_na-fd: column;
2933
- --_na-gap: 0;
2934
- --_na-p: 0;
2935
- --_na-item-ws: normal;
2877
+ .s-link-preview .s-link-preview--details a,
2878
+ .s-link-preview .s-link-preview--footer a {
2879
+ color: var(--black-500);
2880
+ cursor: pointer;
2881
+ text-decoration: none;
2936
2882
  }
2937
- .s-navigation.s-navigation__muted {
2938
- --_na-item-selected-bg: var(--black-050);
2939
- --_na-item-selected-fc: var(--black-800);
2940
- --_na-item-selected-bg-hover: var(--_na-item-bg);
2883
+ .s-link-preview .s-link-preview--details a:visited,
2884
+ .s-link-preview .s-link-preview--footer a:visited {
2885
+ color: var(--black-700);
2941
2886
  }
2942
- body.theme-highcontrast .s-navigation.s-navigation__muted {
2943
- --_na-item-selected-bg: var(--black-800);
2944
- --_na-item-selected-fc: var(--black-050);
2945
- --_na-item-selected-bg-hover: var(--black-900);
2887
+ .s-link-preview .s-link-preview--details a:hover,
2888
+ .s-link-preview .s-link-preview--footer a:hover,
2889
+ .s-link-preview .s-link-preview--details a:active,
2890
+ .s-link-preview .s-link-preview--footer a:active,
2891
+ .s-link-preview .s-link-preview--details a:focus,
2892
+ .s-link-preview .s-link-preview--footer a:focus {
2893
+ color: var(--black-600);
2946
2894
  }
2947
- .s-navigation .s-navigation--item {
2948
- background-color: var(--_na-item-bg);
2949
- color: var(--_na-item-fc);
2950
- font: unset;
2951
- font-size: var(--_na-item-fs);
2952
- padding: var(--_na-item-p);
2953
- white-space: var(--_na-item-ws);
2954
- align-items: center;
2955
- border: none;
2956
- border-radius: 1000px;
2957
- box-shadow: none;
2958
- cursor: pointer;
2959
- display: flex;
2960
- position: relative;
2961
- user-select: auto;
2895
+ .s-link-preview .s-link-preview--body {
2896
+ font-size: var(--fs-body2);
2897
+ padding: var(--su12);
2962
2898
  }
2963
- .s-navigation .s-navigation--item.is-selected {
2964
- --_na-item-bg: var(--_na-item-selected-bg);
2965
- --_na-item-fc: var(--_na-item-selected-fc);
2966
- --_na-item-fc-hover: var(--_na-item-fc);
2967
- --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
2899
+ .s-link-preview .s-link-preview--body *:last-child {
2900
+ margin-bottom: 0;
2968
2901
  }
2969
- body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
2970
- text-decoration: none;
2902
+ .s-link-preview .s-link-preview--code pre {
2903
+ border-radius: 0 !important;
2904
+ margin: 0;
2905
+ max-height: 400px;
2971
2906
  }
2972
- .s-navigation .s-navigation--item__dropdown {
2973
- padding-right: 2em;
2907
+ .s-link-preview .s-link-preview--details {
2908
+ margin-top: var(--_lp-details-mt);
2909
+ color: var(--black-500);
2910
+ font-size: var(--fs-caption);
2974
2911
  }
2975
- .s-navigation .s-navigation--item__dropdown:after {
2976
- border-style: solid;
2977
- border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
2978
- border-color: currentColor transparent;
2979
- content: "";
2980
- pointer-events: none;
2981
- position: absolute;
2982
- right: 0.9em;
2983
- top: calc(50% - 2px);
2984
- z-index: var(--zi-active);
2912
+ .s-link-preview .s-link-preview--footer {
2913
+ flex-direction: var(--_lp-footer-fd);
2914
+ background: var(--black-025);
2915
+ border-bottom-left-radius: var(--br-sm);
2916
+ border-bottom-right-radius: var(--br-sm);
2917
+ border-top: var(--su-static1) solid var(--bc-medium);
2918
+ display: flex;
2919
+ font-size: var(--fs-caption);
2920
+ justify-content: space-between;
2921
+ padding: var(--su12);
2985
2922
  }
2986
- .s-navigation .s-navigation--item:hover,
2987
- .s-navigation .s-navigation--item:active {
2988
- background-color: var(--_na-item-bg-hover);
2989
- color: var(--_na-item-fc-hover);
2923
+ .s-link-preview .s-link-preview--header {
2924
+ background: var(--black-025);
2925
+ border-bottom: var(--su-static1) solid var(--bc-medium);
2926
+ border-top-left-radius: var(--br-sm);
2927
+ border-top-right-radius: var(--br-sm);
2928
+ display: flex;
2929
+ padding: var(--su12) var(--su8);
2990
2930
  }
2991
- .s-navigation .s-navigation--item:focus:not(:focus-visible) {
2992
- outline: none;
2993
- box-shadow: none;
2931
+ .s-link-preview .s-link-preview--icon {
2932
+ color: var(--black-800);
2933
+ margin-right: var(--su8);
2994
2934
  }
2995
- .s-navigation .s-navigation--item:focus-visible {
2996
- outline: none;
2997
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
2935
+ .s-link-preview .s-link-preview--misc {
2936
+ padding-left: var(--_lp-misc-pl);
2937
+ padding-top: var(--_lp-misc-pt);
2938
+ color: var(--black-500);
2998
2939
  }
2999
- .s-navigation .s-navigation--title {
3000
- margin-top: var(--_na-title-mt);
3001
- font-size: var(--fs-fine);
2940
+ .s-link-preview .s-link-preview--title {
2941
+ color: var(--black-900);
2942
+ font-size: var(--fs-body3);
3002
2943
  font-weight: bold;
3003
- padding: var(--su6) var(--su12);
3004
- text-transform: uppercase;
3005
2944
  }
3006
- .s-navigation .s-navigation--title:first-child {
3007
- --_na-title-mt: 0;
2945
+ .s-link-preview a.s-link-preview--title {
2946
+ color: var(--theme-link-color);
2947
+ cursor: pointer;
2948
+ text-decoration: none;
3008
2949
  }
3009
- .s-banner {
3010
- --_no-x-offset: 0;
3011
- --_no-bc: var(--bc-medium);
3012
- --_no-bg: var(--black-050);
3013
- --_no-fc: var(--fc-medium);
3014
- --_no-btn-bg-focus: var(--black-100);
3015
- --_no-btn-bg-active: var(--black-150);
3016
- background: var(--_no-bg);
3017
- border-color: var(--_no-bc);
3018
- color: var(--_no-fc);
3019
- border-style: solid;
3020
- font-size: var(--fs-body1);
3021
- border-width: var(--su-static1) 0;
3022
- inset: 0 0 auto 0;
3023
- padding: var(--su12);
3024
- position: fixed;
3025
- -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
3026
- transform: translate3d(0, var(--_no-x-offset), 0);
3027
- width: 100%;
3028
- z-index: calc(var(--zi-navigation-fixed) - 1);
2950
+ .s-link-preview a.s-link-preview--title:active,
2951
+ .s-link-preview a.s-link-preview--title:hover,
2952
+ .s-link-preview a.s-link-preview--title:active.s-link__visited,
2953
+ .s-link-preview a.s-link-preview--title:hover.s-link__visited {
2954
+ color: var(--theme-link-color-hover);
3029
2955
  }
3030
- @media (prefers-color-scheme: dark) {
3031
- body.theme-system .s-banner:not(.s-banner__important) {
3032
- --_no-bc: var(--_no-bg);
3033
- }
2956
+ .s-link-preview a.s-link-preview--title:active,
2957
+ .s-link-preview a.s-link-preview--title:hover,
2958
+ .s-link-preview a.s-link-preview--title.s-link__visited:active,
2959
+ .s-link-preview a.s-link-preview--title.s-link__visited:hover,
2960
+ .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2961
+ text-decoration: none;
3034
2962
  }
3035
- body.theme-dark .s-banner:not(.s-banner__important),
3036
- .theme-dark__forced .s-banner:not(.s-banner__important),
3037
- body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
3038
- --_no-bc: var(--_no-bg);
2963
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title:active,
2964
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title:hover,
2965
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:active,
2966
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:hover,
2967
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2968
+ text-decoration: underline;
3039
2969
  }
3040
- body.theme-highcontrast .s-banner:not(.s-banner__important) {
3041
- --_no-bc: currentColor;
2970
+ .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2971
+ color: var(--theme-link-color);
2972
+ }
2973
+ .s-link-preview .s-link-preview--url {
2974
+ max-width: 100%;
2975
+ overflow: hidden;
2976
+ text-overflow: ellipsis !important;
2977
+ white-space: nowrap;
2978
+ }
2979
+ .s-menu {
2980
+ --_me-divider-bg: var(--bc-light);
2981
+ --_me-label-btc: var(--bc-light);
2982
+ --_me-label-cursor: pointer;
2983
+ list-style: none;
2984
+ margin: 0;
2985
+ padding: 0;
3042
2986
  }
3043
2987
  @media (prefers-color-scheme: dark) {
3044
- body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
3045
- --_no-bc: currentColor;
2988
+ body.theme-system .s-menu {
2989
+ --_me-divider-bg: var(--bc-lightest);
2990
+ --_me-label-btc: var(--bc-lightest);
3046
2991
  }
3047
2992
  }
3048
- body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
3049
- --_no-bc: currentColor;
2993
+ body.theme-dark .s-menu,
2994
+ .theme-dark__forced .s-menu,
2995
+ body.theme-system .theme-dark__forced .s-menu {
2996
+ --_me-divider-bg: var(--bc-lightest);
2997
+ --_me-label-btc: var(--bc-lightest);
3050
2998
  }
3051
- .s-banner__important {
3052
- --_no-bc: var(--_no-bg);
3053
- --_no-bg: var(--black-700);
3054
- --_no-fc: var(--white);
3055
- --_no-btn-bg-focus: var(--black-800);
3056
- --_no-btn-bg-active: var(--black-900);
2999
+ .s-menu .s-menu--divider {
3000
+ background-color: var(--_me-divider-bg);
3001
+ height: var(--su-static1);
3002
+ margin: var(--su8) 0;
3057
3003
  }
3058
- body.theme-highcontrast .s-banner__important {
3059
- --_no-bc: var(--_no-bg);
3004
+ .s-menu .s-menu--label {
3005
+ border-top: var(--su-static1) solid var(--_me-label-btc);
3006
+ cursor: var(--_me-label-cursor);
3007
+ padding: var(--su12);
3060
3008
  }
3061
- .s-banner__danger {
3062
- --_no-bc: var(--red-200);
3063
- --_no-bg: var(--red-050);
3064
- --_no-btn-bg-active: var(--red-200);
3065
- --_no-btn-bg-focus: var(--red-100);
3009
+ .s-menu .s-menu--label.is-disabled {
3010
+ --_me-label-cursor: not-allowed;
3066
3011
  }
3067
- body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
3068
- --_no-bg: var(--red-200);
3012
+ .s-menu .s-menu--title {
3013
+ color: var(--black-600);
3014
+ font-size: var(--fs-fine);
3015
+ padding: var(--su8) var(--su12);
3016
+ text-transform: uppercase;
3069
3017
  }
3070
- .s-banner__danger.s-banner__important {
3071
- --_no-bc: var(--_no-bg);
3072
- --_no-bg: var(--red-500);
3073
- --_no-btn-bg-active: var(--red-700);
3074
- --_no-btn-bg-focus: var(--red-600);
3018
+ .s-menu li + .s-menu--title {
3019
+ margin-top: var(--su12);
3075
3020
  }
3076
- @media (prefers-color-scheme: dark) {
3077
- body.theme-system .s-banner__danger.s-banner__important {
3078
- --_no-bg: var(--red-400);
3079
- --_no-fc: var(--black-900);
3080
- }
3021
+ .s-modal {
3022
+ --_mo-bg: hsla(210, 8%, 5%, 0.5);
3023
+ --_mo-hmx: unset;
3024
+ --_mo-wmx: unset;
3025
+ --_mo-close-t: var(--su8);
3026
+ --_mo-dialog-bg: var(--white);
3027
+ --_mo-dialog-pt: var(--su24);
3028
+ --_mo-header-fc: var(--fc-dark);
3029
+ background-color: var(--_mo-bg);
3030
+ max-height: var(--_mo-hmx);
3031
+ max-width: var(--_mo-wmx);
3032
+ align-items: center;
3033
+ backface-visibility: hidden;
3034
+ display: flex;
3035
+ inset: 0;
3036
+ justify-content: center;
3037
+ opacity: 0;
3038
+ position: fixed;
3039
+ transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms;
3040
+ visibility: hidden;
3041
+ will-change: visibility, z-index, opacity;
3042
+ z-index: var(--zi-hide);
3081
3043
  }
3082
- body.theme-dark .s-banner__danger.s-banner__important,
3083
- .theme-dark__forced .s-banner__danger.s-banner__important,
3084
- body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
3085
- --_no-bg: var(--red-400);
3086
- --_no-fc: var(--black-900);
3044
+ .s-modal[aria-hidden="false"],
3045
+ .s-modal[aria-hidden="false"] .s-modal--dialog {
3046
+ opacity: 1;
3047
+ transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
3048
+ transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--te-smooth) 10ms, transform 100ms var(--te-smooth) 10ms;
3049
+ visibility: visible;
3050
+ z-index: var(--zi-modals);
3087
3051
  }
3088
- @media (prefers-color-scheme: dark) {
3089
- body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
3090
- --_no-bg: var(--red-500);
3091
- --_no-fc: var(--white);
3052
+ .s-modal.s-modal__celebration {
3053
+ --_mo-close-t: var(--su48);
3054
+ --_mo-dialog-pt: var(--su64);
3055
+ }
3056
+ .s-modal.s-modal__celebration .s-modal--dialog {
3057
+ background-repeat: repeat-x;
3058
+ background-position: top -10px center;
3059
+ background-image: url("data:image/svg+xml,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
3060
+ }
3061
+ @media (prefers-reduced-motion) {
3062
+ .s-modal.s-modal__celebration .s-modal--dialog {
3063
+ background-image: url("data:image/svg+xml,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
3092
3064
  }
3093
3065
  }
3094
- body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
3095
- --_no-bg: var(--red-500);
3096
- --_no-fc: var(--white);
3066
+ .s-modal.s-modal__full {
3067
+ --_mo-hmx: calc(100% - var(--su48));
3068
+ --_mo-wmx: calc(100% - var(--su48));
3097
3069
  }
3098
- .s-banner__info {
3099
- --_no-bc: var(--theme-secondary-150);
3100
- --_no-bg: var(--theme-secondary-050);
3101
- --_no-btn-bg-focus: var(--theme-secondary-100);
3102
- --_no-btn-bg-active: var(--theme-secondary-150);
3103
- --_no-code-bg: var(--theme-secondary-150);
3070
+ .s-modal.has-danger,
3071
+ .s-modal.s-modal__danger {
3072
+ --_mo-bg: hsla(358, 67%, 6%, 0.5);
3073
+ --_mo-header-fc: var(--red-600);
3104
3074
  }
3105
- body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
3106
- --_no-bg: var(--theme-secondary-100);
3075
+ .s-modal .s-modal--body {
3076
+ color: var(--fc-medium);
3077
+ margin-bottom: var(--su24);
3107
3078
  }
3108
- @media (prefers-color-scheme: dark) {
3109
- body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
3110
- --_no-bg: var(--theme-secondary-100);
3111
- }
3079
+ .s-modal .s-modal--close {
3080
+ padding: var(--su12) !important;
3081
+ position: absolute !important;
3082
+ right: var(--su8);
3083
+ top: var(--_mo-close-t);
3112
3084
  }
3113
- body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
3114
- --_no-bg: var(--theme-secondary-100);
3085
+ .s-modal .s-modal--close .svg-icon {
3086
+ margin: 0 !important;
3115
3087
  }
3116
- .s-banner__info.s-banner__important {
3117
- --_no-bc: var(--_no-bg);
3118
- --_no-bg: var(--theme-secondary-400);
3119
- --_no-btn-bg-active: var(--theme-secondary-600);
3120
- --_no-btn-bg-focus: var(--theme-secondary-500);
3088
+ .s-modal .s-modal--dialog {
3089
+ padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
3090
+ scrollbar-color: var(--scrollbar) transparent;
3091
+ backface-visibility: hidden;
3092
+ background-color: var(--_mo-dialog-bg);
3093
+ border-radius: var(--br-lg);
3094
+ box-shadow: var(--bs-lg);
3095
+ max-height: 100%;
3096
+ max-width: 600px;
3097
+ opacity: 0;
3098
+ overflow-y: auto;
3099
+ transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
3100
+ transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
3101
+ visibility: hidden;
3102
+ will-change: visibility, z-index, opacity, transform;
3103
+ z-index: var(--zi-hide);
3121
3104
  }
3122
3105
  @media (prefers-color-scheme: dark) {
3123
- body.theme-system .s-banner__info.s-banner__important {
3124
- --_no-bg: var(--theme-secondary-300);
3125
- --_no-fc: var(--black-900);
3106
+ body.theme-system .s-modal .s-modal--dialog {
3107
+ --_mo-dialog-bg: var(--black-100);
3126
3108
  }
3127
3109
  }
3128
- body.theme-dark .s-banner__info.s-banner__important,
3129
- .theme-dark__forced .s-banner__info.s-banner__important,
3130
- body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
3131
- --_no-bg: var(--theme-secondary-300);
3132
- --_no-fc: var(--black-900);
3110
+ body.theme-dark .s-modal .s-modal--dialog,
3111
+ .theme-dark__forced .s-modal .s-modal--dialog,
3112
+ body.theme-system .theme-dark__forced .s-modal .s-modal--dialog {
3113
+ --_mo-dialog-bg: var(--black-100);
3133
3114
  }
3134
- @media (prefers-color-scheme: dark) {
3135
- body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
3136
- --_no-bg: var(--theme-secondary-400);
3137
- --_no-fc: var(--white);
3138
- }
3115
+ .s-modal .s-modal--dialog::-webkit-scrollbar {
3116
+ width: calc(var(--su-static12) - var(--su-static2));
3117
+ height: calc(var(--su-static12) - var(--su-static2));
3118
+ background-color: transparent;
3139
3119
  }
3140
- body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
3141
- --_no-bg: var(--theme-secondary-400);
3142
- --_no-fc: var(--white);
3120
+ .s-modal .s-modal--dialog::-webkit-scrollbar-track {
3121
+ border-radius: calc(var(--su-static12) - var(--su-static2));
3122
+ background-color: transparent;
3143
3123
  }
3144
- .s-banner__success {
3145
- --_no-bc: var(--green-200);
3146
- --_no-bg: var(--green-050);
3147
- --_no-btn-bg-active: var(--green-200);
3148
- --_no-btn-bg-focus: var(--green-100);
3124
+ .s-modal .s-modal--dialog::-webkit-scrollbar-thumb {
3125
+ border-radius: calc(var(--su-static12) - var(--su-static2));
3126
+ background-color: var(--scrollbar);
3149
3127
  }
3150
- body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
3151
- --_no-bg: var(--green-200);
3128
+ .s-modal .s-modal--dialog::-webkit-scrollbar-corner {
3129
+ background-color: transparent;
3130
+ border-color: transparent;
3152
3131
  }
3153
- .s-banner__success.s-banner__important {
3154
- --_no-bc: var(--_no-bg);
3155
- --_no-bg: var(--green-400);
3156
- --_no-fc: var(--black-900);
3157
- --_no-btn-bg-active: var(--green-600);
3158
- --_no-btn-bg-focus: var(--green-500);
3132
+ .s-modal .s-modal--footer {
3133
+ margin-top: var(--su24);
3159
3134
  }
3160
- @media (prefers-color-scheme: dark) {
3161
- body.theme-system .s-banner__success.s-banner__important {
3162
- --_no-bg: var(--green-500);
3163
- --_no-fc: var(--white);
3164
- }
3135
+ .s-modal .s-modal--header {
3136
+ color: var(--_mo-header-fc);
3137
+ font-size: var(--fs-headline1);
3138
+ font-weight: normal;
3139
+ line-height: var(--lh-sm);
3140
+ margin-bottom: var(--su16);
3165
3141
  }
3166
- body.theme-dark .s-banner__success.s-banner__important,
3167
- .theme-dark__forced .s-banner__success.s-banner__important,
3168
- body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
3169
- --_no-bg: var(--green-500);
3170
- --_no-fc: var(--white);
3142
+ .s-navigation {
3143
+ --_na-fd: row;
3144
+ --_na-fw: wrap;
3145
+ --_na-p: var(--su2) 0;
3146
+ --_na-gap: var(--su4);
3147
+ --_na-item-bg: none;
3148
+ --_na-item-fc: var(--black-600);
3149
+ --_na-item-fs: unset;
3150
+ --_na-item-p: var(--su6) var(--su12);
3151
+ --_na-item-py: var(--su12);
3152
+ --_na-item-ws: nowrap;
3153
+ --_na-item-bg-hover: var(--black-075);
3154
+ --_na-item-fc-hover: var(--_na-item-fc);
3155
+ --_na-item-selected-bg: var(--theme-primary-color);
3156
+ --_na-item-selected-fc: var(--white);
3157
+ --_na-item-selected-bg-hover: var(--theme-primary-600);
3158
+ --_na-title-mt: var(--su16);
3159
+ flex-direction: var(--_na-fd);
3160
+ flex-wrap: var(--_na-fw);
3161
+ gap: var(--_na-gap);
3162
+ padding: var(--_na-p);
3163
+ display: flex;
3164
+ list-style: none;
3165
+ margin: 0;
3171
3166
  }
3172
- body.theme-highcontrast .s-banner__success.s-banner__important {
3173
- --_no-bg: var(--green-500);
3174
- --_no-fc: var(--white);
3167
+ body.theme-highcontrast .s-navigation {
3168
+ --_na-item-bg-hover: var(--black-600);
3169
+ --_na-item-fc-hover: var(--black-100);
3170
+ }
3171
+ .s-navigation.s-navigation__scroll {
3172
+ --_na-fw: nowrap;
3173
+ overflow-x: auto;
3174
+ scrollbar-color: var(--scrollbar) transparent;
3175
3175
  }
3176
- .s-banner__warning {
3177
- --_no-bc: var(--yellow-300);
3178
- --_no-bg: var(--yellow-050);
3179
- --_no-btn-bg-active: var(--yellow-300);
3180
- --_no-btn-bg-focus: var(--yellow-200);
3181
- --_no-code-bg: var(--yellow-200);
3176
+ .s-navigation.s-navigation__scroll::-webkit-scrollbar {
3177
+ width: calc(var(--su-static12) - var(--su-static2));
3178
+ height: calc(var(--su-static12) - var(--su-static2));
3179
+ background-color: transparent;
3182
3180
  }
3183
- body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
3184
- --_no-bg: var(--yellow-200);
3181
+ .s-navigation.s-navigation__scroll::-webkit-scrollbar-track {
3182
+ border-radius: calc(var(--su-static12) - var(--su-static2));
3183
+ background-color: transparent;
3185
3184
  }
3186
- .s-banner__warning.s-banner__important {
3187
- --_no-bc: var(--_no-bg);
3188
- --_no-bg: var(--yellow-400);
3189
- --_no-fc: var(--black-900);
3190
- --_no-btn-bg-active: var(--yellow-600);
3191
- --_no-btn-bg-focus: var(--yellow-500);
3185
+ .s-navigation.s-navigation__scroll::-webkit-scrollbar-thumb {
3186
+ border-radius: calc(var(--su-static12) - var(--su-static2));
3187
+ background-color: var(--scrollbar);
3192
3188
  }
3193
- @media (prefers-color-scheme: dark) {
3194
- body.theme-system .s-banner__warning.s-banner__important {
3195
- --_no-bg: var(--yellow-600);
3196
- --_no-fc: var(--white);
3197
- }
3189
+ .s-navigation.s-navigation__scroll::-webkit-scrollbar-corner {
3190
+ background-color: transparent;
3191
+ border-color: transparent;
3198
3192
  }
3199
- body.theme-dark .s-banner__warning.s-banner__important,
3200
- .theme-dark__forced .s-banner__warning.s-banner__important,
3201
- body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
3202
- --_no-bg: var(--yellow-600);
3203
- --_no-fc: var(--white);
3193
+ .s-navigation.s-navigation__sm {
3194
+ --_na-item-fs: var(--fs-caption);
3195
+ --_na-item-p: var(--su4) var(--su12);
3204
3196
  }
3205
- body.theme-highcontrast .s-banner__warning.s-banner__important {
3206
- --_no-bg: var(--yellow-700);
3207
- --_no-fc: var(--white);
3197
+ .s-navigation.s-navigation__vertical {
3198
+ --_na-fd: column;
3199
+ --_na-gap: 0;
3200
+ --_na-p: 0;
3201
+ --_na-item-ws: normal;
3208
3202
  }
3209
- .s-banner code {
3210
- background: var(--_no-code-bg, transparent);
3203
+ .s-navigation.s-navigation__muted {
3204
+ --_na-item-selected-bg: var(--black-050);
3205
+ --_na-item-selected-fc: var(--black-800);
3206
+ --_na-item-selected-bg-hover: var(--_na-item-bg);
3211
3207
  }
3212
- .s-banner .s-banner--btn {
3213
- color: inherit;
3214
- padding: var(--su8);
3208
+ body.theme-highcontrast .s-navigation.s-navigation__muted {
3209
+ --_na-item-selected-bg: var(--black-800);
3210
+ --_na-item-selected-fc: var(--black-050);
3211
+ --_na-item-selected-bg-hover: var(--black-900);
3215
3212
  }
3216
- .s-banner .s-banner--btn:not(:focus) {
3213
+ .s-navigation .s-navigation--item {
3214
+ background-color: var(--_na-item-bg);
3215
+ color: var(--_na-item-fc);
3216
+ font: unset;
3217
+ font-size: var(--_na-item-fs);
3218
+ padding: var(--_na-item-p);
3219
+ white-space: var(--_na-item-ws);
3220
+ align-items: center;
3221
+ border: none;
3222
+ border-radius: 1000px;
3217
3223
  box-shadow: none;
3224
+ cursor: pointer;
3225
+ display: flex;
3226
+ position: relative;
3227
+ user-select: auto;
3218
3228
  }
3219
- .s-banner .s-banner--btn:active {
3220
- background: var(--_no-btn-bg-active);
3229
+ .s-navigation .s-navigation--item.is-selected {
3230
+ --_na-item-bg: var(--_na-item-selected-bg);
3231
+ --_na-item-fc: var(--_na-item-selected-fc);
3232
+ --_na-item-fc-hover: var(--_na-item-fc);
3233
+ --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
3221
3234
  }
3222
- .s-banner .s-banner--btn:focus,
3223
- .s-banner .s-banner--btn:hover {
3224
- background: var(--_no-btn-bg-focus);
3235
+ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3236
+ text-decoration: none;
3225
3237
  }
3226
- .s-banner[aria-hidden="true"] {
3227
- --_no-x-offset: calc(var(--su48) + var(--su2) * -1);
3228
- opacity: 0;
3229
- visibility: hidden;
3238
+ .s-navigation .s-navigation--item__dropdown {
3239
+ padding-right: 2em;
3230
3240
  }
3231
- .s-banner[aria-hidden="false"] {
3232
- --_no-x-offset: calc(var(--su48) + var(--su1));
3233
- opacity: 1;
3234
- visibility: visible;
3241
+ .s-navigation .s-navigation--item__dropdown:after {
3242
+ border-style: solid;
3243
+ border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
3244
+ border-color: currentColor transparent;
3245
+ content: "";
3246
+ pointer-events: none;
3247
+ position: absolute;
3248
+ right: 0.9em;
3249
+ top: calc(50% - 2px);
3250
+ z-index: var(--zi-active);
3235
3251
  }
3236
- .s-banner.is-pinned {
3237
- z-index: calc(var(--zi-navigation-fixed) + 1);
3252
+ .s-navigation .s-navigation--item:hover,
3253
+ .s-navigation .s-navigation--item:active {
3254
+ background-color: var(--_na-item-bg-hover);
3255
+ color: var(--_na-item-fc-hover);
3238
3256
  }
3239
- .s-banner__body-pt {
3240
- padding-top: 93px;
3257
+ .s-navigation .s-navigation--item:focus:not(:focus-visible) {
3258
+ outline: none;
3259
+ box-shadow: none;
3241
3260
  }
3242
- .s-banner .s-banner--container {
3243
- margin: 0 auto;
3244
- max-width: calc(var(--s-step) * 10);
3245
- position: relative;
3246
- width: 100%;
3261
+ .s-navigation .s-navigation--item:focus-visible {
3262
+ outline: none;
3263
+ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
3264
+ }
3265
+ .s-navigation .s-navigation--title {
3266
+ margin-top: var(--_na-title-mt);
3267
+ font-size: var(--fs-fine);
3268
+ font-weight: bold;
3269
+ padding: var(--su6) var(--su12);
3270
+ text-transform: uppercase;
3271
+ }
3272
+ .s-navigation .s-navigation--title:first-child {
3273
+ --_na-title-mt: 0;
3247
3274
  }
3248
3275
  .s-notice {
3249
3276
  --_no-bc: var(--bc-medium);
@@ -3456,39 +3483,6 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
3456
3483
  .s-notice .s-notice--btn:hover {
3457
3484
  background: var(--_no-btn-bg-focus);
3458
3485
  }
3459
- .s-toast {
3460
- display: flex;
3461
- justify-content: center;
3462
- left: var(--su8);
3463
- opacity: 0;
3464
- pointer-events: none;
3465
- position: fixed;
3466
- right: var(--su8);
3467
- top: var(--su16);
3468
- transform: translate3d(0, -66px, 0);
3469
- transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
3470
- visibility: hidden;
3471
- z-index: calc(var(--zi-modals) + 1);
3472
- }
3473
- @media (prefers-reduced-motion) {
3474
- .s-toast {
3475
- transform: none !important;
3476
- }
3477
- }
3478
- .s-toast[aria-hidden="false"] {
3479
- opacity: 1;
3480
- transform: translate3d(0, 0, 0);
3481
- transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
3482
- visibility: visible;
3483
- }
3484
- .s-toast .s-notice {
3485
- box-shadow: var(--bs-sm);
3486
- max-width: 44rem;
3487
- padding-bottom: var(--su8);
3488
- padding-top: var(--su8);
3489
- pointer-events: all;
3490
- width: 100%;
3491
- }
3492
3486
  .s-page-title {
3493
3487
  --_pt-ai: flex-end;
3494
3488
  --_pt-fd: row;
@@ -5297,27 +5291,6 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5297
5291
  transform: rotate(360deg);
5298
5292
  }
5299
5293
  }
5300
- .s-table-container {
5301
- overflow-x: auto;
5302
- scrollbar-color: var(--scrollbar) transparent;
5303
- }
5304
- .s-table-container::-webkit-scrollbar {
5305
- width: calc(var(--su-static12) - var(--su-static2));
5306
- height: calc(var(--su-static12) - var(--su-static2));
5307
- background-color: transparent;
5308
- }
5309
- .s-table-container::-webkit-scrollbar-track {
5310
- border-radius: calc(var(--su-static12) - var(--su-static2));
5311
- background-color: transparent;
5312
- }
5313
- .s-table-container::-webkit-scrollbar-thumb {
5314
- border-radius: calc(var(--su-static12) - var(--su-static2));
5315
- background-color: var(--scrollbar);
5316
- }
5317
- .s-table-container::-webkit-scrollbar-corner {
5318
- background-color: transparent;
5319
- border-color: transparent;
5320
- }
5321
5294
  .s-table {
5322
5295
  --_ta-tbody-tbody-bc: var(--bc-medium);
5323
5296
  --_ta-tbody-tbody-bw: var(--su-static2);
@@ -5575,6 +5548,27 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5575
5548
  .s-table tr.is-disabled td:not(.is-enabled) {
5576
5549
  opacity: calc(var(--_o-disabled) * 0.6);
5577
5550
  }
5551
+ .s-table-container {
5552
+ overflow-x: auto;
5553
+ scrollbar-color: var(--scrollbar) transparent;
5554
+ }
5555
+ .s-table-container::-webkit-scrollbar {
5556
+ width: calc(var(--su-static12) - var(--su-static2));
5557
+ height: calc(var(--su-static12) - var(--su-static2));
5558
+ background-color: transparent;
5559
+ }
5560
+ .s-table-container::-webkit-scrollbar-track {
5561
+ border-radius: calc(var(--su-static12) - var(--su-static2));
5562
+ background-color: transparent;
5563
+ }
5564
+ .s-table-container::-webkit-scrollbar-thumb {
5565
+ border-radius: calc(var(--su-static12) - var(--su-static2));
5566
+ background-color: var(--scrollbar);
5567
+ }
5568
+ .s-table-container::-webkit-scrollbar-corner {
5569
+ background-color: transparent;
5570
+ border-color: transparent;
5571
+ }
5578
5572
  .s-tag {
5579
5573
  --_ta-bc: var(--theme-tag-border-color);
5580
5574
  --_ta-bc-hover: var(--theme-tag-hover-border-color);
@@ -5762,6 +5756,39 @@ body.theme-highcontrast a.s-tag:not(.is-selected):focus,
5762
5756
  body.theme-highcontrast a.s-tag:not(.is-selected):active {
5763
5757
  border-color: currentColor;
5764
5758
  }
5759
+ .s-toast {
5760
+ display: flex;
5761
+ justify-content: center;
5762
+ left: var(--su8);
5763
+ opacity: 0;
5764
+ pointer-events: none;
5765
+ position: fixed;
5766
+ right: var(--su8);
5767
+ top: var(--su16);
5768
+ transform: translate3d(0, -66px, 0);
5769
+ transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
5770
+ visibility: hidden;
5771
+ z-index: calc(var(--zi-modals) + 1);
5772
+ }
5773
+ @media (prefers-reduced-motion) {
5774
+ .s-toast {
5775
+ transform: none !important;
5776
+ }
5777
+ }
5778
+ .s-toast[aria-hidden="false"] {
5779
+ opacity: 1;
5780
+ transform: translate3d(0, 0, 0);
5781
+ transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
5782
+ visibility: visible;
5783
+ }
5784
+ .s-toast .s-notice {
5785
+ box-shadow: var(--bs-sm);
5786
+ max-width: 44rem;
5787
+ padding-bottom: var(--su8);
5788
+ padding-top: var(--su8);
5789
+ pointer-events: all;
5790
+ width: 100%;
5791
+ }
5765
5792
  .s-toggle-switch {
5766
5793
  --_ts-bg: var(--black-300);
5767
5794
  --_ts-bg-ps: left center;
@@ -8203,6 +8230,33 @@ body.theme-highcontrast .bc-black-200 {
8203
8230
  .bc-yellow-900 {
8204
8231
  border-color: var(--yellow-900) !important;
8205
8232
  }
8233
+ .bc-gold-lighter {
8234
+ border-color: var(--gold-lighter) !important;
8235
+ }
8236
+ .bc-gold {
8237
+ border-color: var(--gold) !important;
8238
+ }
8239
+ .bc-gold-darker {
8240
+ border-color: var(--gold-darker) !important;
8241
+ }
8242
+ .bc-silver-lighter {
8243
+ border-color: var(--silver-lighter) !important;
8244
+ }
8245
+ .bc-silver {
8246
+ border-color: var(--silver) !important;
8247
+ }
8248
+ .bc-silver-darker {
8249
+ border-color: var(--silver-darker) !important;
8250
+ }
8251
+ .bc-bronze-lighter {
8252
+ border-color: var(--bronze-lighter) !important;
8253
+ }
8254
+ .bc-bronze {
8255
+ border-color: var(--bronze) !important;
8256
+ }
8257
+ .bc-bronze-darker {
8258
+ border-color: var(--bronze-darker) !important;
8259
+ }
8206
8260
  .bc-theme-primary-025 {
8207
8261
  border-color: var(--theme-primary-025) !important;
8208
8262
  }