@stackoverflow/stacks 1.5.0 → 1.6.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.
@@ -577,7 +577,7 @@ body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__silver,
577
577
  body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__bronze,
578
578
  body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__rep,
579
579
  body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__rep-down,
580
- body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__votes,
580
+ body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__votes:not(body.theme-highcontrast .s-badge__answered),
581
581
  body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__admin,
582
582
  body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__moderator,
583
583
  body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__staff {
@@ -628,7 +628,7 @@ body.theme-highcontrast .s-badge.s-badge__bronze {
628
628
  }
629
629
  .s-badge.s-badge__rep,
630
630
  .s-badge.s-badge__rep-down,
631
- .s-badge.s-badge__votes {
631
+ .s-badge.s-badge__votes:not(.s-badge__answered) {
632
632
  --_ba-bg: var(--white);
633
633
  }
634
634
  .s-badge.s-badge__answered {
@@ -648,7 +648,7 @@ body.theme-highcontrast .s-badge.s-badge__bronze {
648
648
  --_ba-bc: var(--red-400);
649
649
  --_ba-fc: var(--red-500);
650
650
  }
651
- .s-badge.s-badge__votes {
651
+ .s-badge.s-badge__votes:not(.s-badge__answered) {
652
652
  --_ba-bc: var(--black-150);
653
653
  --_ba-fc: var(--black-700);
654
654
  }
@@ -791,46 +791,13 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
791
791
  .s-btn-group {
792
792
  display: flex;
793
793
  flex-wrap: wrap;
794
- margin-bottom: 1px;
795
- }
796
- .s-btn-group .s-btn {
797
- margin-bottom: -1px;
798
- white-space: nowrap;
799
- }
800
- .s-btn-group .s-btn:not(:last-child) {
801
- margin-right: -1px;
802
- }
803
- .s-btn-group .s-btn:not(:first-child):not(:last-child) {
804
- border-radius: 0;
805
- }
806
- .s-btn-group .s-btn:first-child:not(:only-child) {
807
- border-top-right-radius: 0;
808
- border-bottom-right-radius: 0;
809
- }
810
- .s-btn-group .s-btn:last-child:not(:only-child) {
811
- border-top-left-radius: 0;
812
- border-bottom-left-radius: 0;
813
- }
814
- .s-btn-group .s-btn.is-selected {
815
- z-index: var(--zi-selected);
816
- }
817
- body.theme-highcontrast .s-btn-group .s-btn.is-selected {
818
- background-color: var(--black-400);
819
- color: var(--white);
820
- }
821
- body.theme-highcontrast .s-btn-group .s-btn.is-selected .s-btn--number {
822
- color: var(--black);
823
- }
824
- .s-btn-group .s-btn:active {
825
- z-index: var(--zi-active);
794
+ margin-bottom: var(--su-static1);
826
795
  }
827
796
  @media (max-width: 640px) {
828
797
  html .s-btn-group .s-btn {
829
798
  padding-left: 0.4em;
830
799
  padding-right: 0.4em;
831
800
  }
832
- }
833
- @media (max-width: 640px) {
834
801
  html .s-btn-group .s-btn.s-btn__dropdown {
835
802
  padding-right: 1.2em;
836
803
  }
@@ -838,24 +805,48 @@ body.theme-highcontrast .s-btn-group .s-btn.is-selected .s-btn--number {
838
805
  right: 0.4em;
839
806
  }
840
807
  }
841
- .s-btn-group .s-btn-group--container {
842
- display: flex;
843
- }
844
- .s-btn-group .s-btn-group--container .s-btn {
845
- margin-right: -1px;
846
- }
847
- .s-btn-group .s-btn-group--container:not(:first-child):not(:last-child) .s-btn {
808
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:first-child):not(:last-child),
809
+ .s-btn-group.s-btn-group--radio .s-btn:not(:first-of-type):not(:last-of-type) {
848
810
  border-radius: 0;
849
811
  }
850
- .s-btn-group .s-btn-group--container:first-child .s-btn {
812
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:first-child:not(:only-child),
813
+ .s-btn-group.s-btn-group--radio .s-btn:first-of-type:not(:last-of-type) {
851
814
  border-top-right-radius: 0;
852
815
  border-bottom-right-radius: 0;
853
- margin-left: 0;
854
816
  }
855
- .s-btn-group .s-btn-group--container:last-child .s-btn {
817
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:last-child:not(:only-child),
818
+ .s-btn-group.s-btn-group--radio .s-btn:last-of-type:not(:first-of-type) {
856
819
  border-top-left-radius: 0;
857
820
  border-bottom-left-radius: 0;
858
821
  }
822
+ .s-btn-group:not(.s-btn-group--radio) .s-btn:not(:last-child),
823
+ .s-btn-group.s-btn-group--radio .s-btn:not(:last-of-type) {
824
+ margin-right: calc(var(--su-static1) * -1);
825
+ }
826
+ .s-btn-group form {
827
+ display: flex;
828
+ margin-right: calc(var(--su-static1) * -1);
829
+ }
830
+ .s-btn-group form:not(:first-child):not(:last-child) .s-btn {
831
+ border-radius: 0;
832
+ }
833
+ .s-btn-group form:last-child:not(:only-child) .s-btn:not(:last-child) {
834
+ border-radius: 0;
835
+ }
836
+ .s-btn-group form:first-child:not(:only-child) .s-btn:not(:first-child) {
837
+ border-radius: 0;
838
+ }
839
+ .s-btn-group .s-btn {
840
+ margin-bottom: calc(var(--su-static1) * -1);
841
+ white-space: nowrap;
842
+ }
843
+ .s-btn-group .s-btn:active {
844
+ z-index: var(--zi-active);
845
+ }
846
+ .s-btn-group .s-btn.is-selected,
847
+ .s-btn-group .s-btn--radio:checked + .s-btn {
848
+ z-index: var(--zi-selected);
849
+ }
859
850
  .s-card {
860
851
  --_ca-bc: var(--bc-medium);
861
852
  border: var(--su-static1) solid var(--_ca-bc);
@@ -875,164 +866,160 @@ a.s-card {
875
866
  .s-card p:last-of-type {
876
867
  margin-bottom: 0;
877
868
  }
878
- pre.s-code-block {
879
- font-size: var(--fs-body1);
880
- font-family: var(--ff-mono);
881
- line-height: var(--lh-md);
882
- color: var(--highlight-color);
883
- background-color: var(--highlight-bg);
884
- border-radius: var(--br-md);
885
- margin: 0;
886
- padding: var(--su12);
887
- overflow: auto;
888
- scrollbar-color: var(--scrollbar) transparent;
889
- }
890
- pre.s-code-block::-webkit-scrollbar {
891
- width: calc(var(--su-static12) - var(--su-static2));
892
- height: calc(var(--su-static12) - var(--su-static2));
893
- background-color: transparent;
894
- }
895
- pre.s-code-block::-webkit-scrollbar-track {
896
- border-radius: calc(var(--su-static12) - var(--su-static2));
897
- background-color: transparent;
869
+ .s-code-block {
870
+ --_cb-line-numbers-bg: var(--black-050);
898
871
  }
899
- pre.s-code-block::-webkit-scrollbar-thumb {
900
- border-radius: calc(var(--su-static12) - var(--su-static2));
901
- background-color: var(--scrollbar);
872
+ @media (prefers-color-scheme: dark) {
873
+ body.theme-system .s-code-block {
874
+ --_cb-line-numbers-bg: var(--black-025);
875
+ }
902
876
  }
903
- pre.s-code-block::-webkit-scrollbar-corner {
904
- background-color: transparent;
905
- border-color: transparent;
877
+ body.theme-dark .s-code-block,
878
+ .theme-dark__forced .s-code-block,
879
+ body.theme-system .theme-dark__forced .s-code-block {
880
+ --_cb-line-numbers-bg: var(--black-025);
906
881
  }
907
- code[class*="language-"],
882
+ code[class*="language-"] .s-code-block,
908
883
  pre.s-code-block > code {
909
884
  font-family: inherit;
910
885
  }
911
- code[class*="language-"] .hljs-subst,
912
- pre.s-code-block > code .hljs-subst {
913
- color: var(--highlight-color);
886
+ code[class*="language-"] .s-code-block .hljs-built_in,
887
+ pre.s-code-block > code .hljs-built_in,
888
+ code[class*="language-"] .s-code-block .hljs-literal,
889
+ pre.s-code-block > code .hljs-literal,
890
+ code[class*="language-"] .s-code-block .hljs-title,
891
+ pre.s-code-block > code .hljs-title {
892
+ color: var(--highlight-literal);
914
893
  }
915
- code[class*="language-"] .hljs-comment,
916
- pre.s-code-block > code .hljs-comment {
917
- color: var(--highlight-comment);
894
+ code[class*="language-"] .s-code-block .hljs-bullet,
895
+ pre.s-code-block > code .hljs-bullet,
896
+ code[class*="language-"] .s-code-block .hljs-code,
897
+ pre.s-code-block > code .hljs-code {
898
+ color: var(--highlight-punctuation);
918
899
  }
919
- code[class*="language-"] .hljs-keyword,
900
+ code[class*="language-"] .s-code-block .hljs-doctag,
901
+ pre.s-code-block > code .hljs-doctag,
902
+ code[class*="language-"] .s-code-block .hljs-keyword,
920
903
  pre.s-code-block > code .hljs-keyword,
921
- code[class*="language-"] .hljs-selector-tag,
922
- pre.s-code-block > code .hljs-selector-tag,
923
- code[class*="language-"] .hljs-meta-keyword,
904
+ code[class*="language-"] .s-code-block .hljs-meta-keyword,
924
905
  pre.s-code-block > code .hljs-meta-keyword,
925
- code[class*="language-"] .hljs-doctag,
926
- pre.s-code-block > code .hljs-doctag,
927
- code[class*="language-"] .hljs-section,
928
- pre.s-code-block > code .hljs-section {
906
+ code[class*="language-"] .s-code-block .hljs-meta,
907
+ pre.s-code-block > code .hljs-meta,
908
+ code[class*="language-"] .s-code-block .hljs-section,
909
+ pre.s-code-block > code .hljs-section,
910
+ code[class*="language-"] .s-code-block .hljs-selector-class,
911
+ pre.s-code-block > code .hljs-selector-class,
912
+ code[class*="language-"] .s-code-block .hljs-selector-pseudo,
913
+ pre.s-code-block > code .hljs-selector-pseudo,
914
+ code[class*="language-"] .s-code-block .hljs-selector-tag,
915
+ pre.s-code-block > code .hljs-selector-tag {
929
916
  color: var(--highlight-keyword);
930
917
  }
931
- code[class*="language-"] .hljs-attr,
932
- pre.s-code-block > code .hljs-attr {
933
- color: var(--highlight-attribute);
934
- }
935
- code[class*="language-"] .hljs-attribute,
936
- pre.s-code-block > code .hljs-attribute {
937
- color: var(--highlight-symbol);
938
- }
939
- code[class*="language-"] .hljs-name,
918
+ code[class*="language-"] .s-code-block .hljs-name,
940
919
  pre.s-code-block > code .hljs-name,
941
- code[class*="language-"] .hljs-type,
942
- pre.s-code-block > code .hljs-type,
943
- code[class*="language-"] .hljs-number,
920
+ code[class*="language-"] .s-code-block .hljs-number,
944
921
  pre.s-code-block > code .hljs-number,
945
- code[class*="language-"] .hljs-selector-id,
946
- pre.s-code-block > code .hljs-selector-id,
947
- code[class*="language-"] .hljs-quote,
922
+ code[class*="language-"] .s-code-block .hljs-quote,
948
923
  pre.s-code-block > code .hljs-quote,
949
- code[class*="language-"] .hljs-template-tag,
950
- pre.s-code-block > code .hljs-template-tag {
924
+ code[class*="language-"] .s-code-block .hljs-selector-id,
925
+ pre.s-code-block > code .hljs-selector-id,
926
+ code[class*="language-"] .s-code-block .hljs-template-tag,
927
+ pre.s-code-block > code .hljs-template-tag,
928
+ code[class*="language-"] .s-code-block .hljs-type,
929
+ pre.s-code-block > code .hljs-type {
951
930
  color: var(--highlight-namespace);
952
931
  }
953
- code[class*="language-"] .hljs-selector-class,
954
- pre.s-code-block > code .hljs-selector-class {
955
- color: var(--highlight-keyword);
956
- }
957
- code[class*="language-"] .hljs-string,
958
- pre.s-code-block > code .hljs-string,
959
- code[class*="language-"] .hljs-regexp,
932
+ code[class*="language-"] .s-code-block .hljs-link,
933
+ pre.s-code-block > code .hljs-link,
934
+ code[class*="language-"] .s-code-block .hljs-meta-string,
935
+ pre.s-code-block > code .hljs-meta-string,
936
+ code[class*="language-"] .s-code-block .hljs-regexp,
960
937
  pre.s-code-block > code .hljs-regexp,
961
- code[class*="language-"] .hljs-symbol,
938
+ code[class*="language-"] .s-code-block .hljs-selector-attr,
939
+ pre.s-code-block > code .hljs-selector-attr,
940
+ code[class*="language-"] .s-code-block .hljs-string,
941
+ pre.s-code-block > code .hljs-string,
942
+ code[class*="language-"] .s-code-block .hljs-symbol,
962
943
  pre.s-code-block > code .hljs-symbol,
963
- code[class*="language-"] .hljs-variable,
964
- pre.s-code-block > code .hljs-variable,
965
- code[class*="language-"] .hljs-template-variable,
944
+ code[class*="language-"] .s-code-block .hljs-template-variable,
966
945
  pre.s-code-block > code .hljs-template-variable,
967
- code[class*="language-"] .hljs-link,
968
- pre.s-code-block > code .hljs-link,
969
- code[class*="language-"] .hljs-selector-attr,
970
- pre.s-code-block > code .hljs-selector-attr {
946
+ code[class*="language-"] .s-code-block .hljs-variable,
947
+ pre.s-code-block > code .hljs-variable {
971
948
  color: var(--highlight-variable);
972
949
  }
973
- code[class*="language-"] .hljs-meta,
974
- pre.s-code-block > code .hljs-meta,
975
- code[class*="language-"] .hljs-selector-pseudo,
976
- pre.s-code-block > code .hljs-selector-pseudo {
977
- color: var(--highlight-keyword);
950
+ code[class*="language-"] .s-code-block .hljs-addition,
951
+ pre.s-code-block > code .hljs-addition {
952
+ color: var(--highlight-addition);
978
953
  }
979
- code[class*="language-"] .hljs-built_in,
980
- pre.s-code-block > code .hljs-built_in,
981
- code[class*="language-"] .hljs-title,
982
- pre.s-code-block > code .hljs-title,
983
- code[class*="language-"] .hljs-literal,
984
- pre.s-code-block > code .hljs-literal {
985
- color: var(--highlight-literal);
954
+ code[class*="language-"] .s-code-block .hljs-attr,
955
+ pre.s-code-block > code .hljs-attr {
956
+ color: var(--highlight-attribute);
986
957
  }
987
- code[class*="language-"] .hljs-bullet,
988
- pre.s-code-block > code .hljs-bullet,
989
- code[class*="language-"] .hljs-code,
990
- pre.s-code-block > code .hljs-code {
991
- color: var(--highlight-punctuation);
958
+ code[class*="language-"] .s-code-block .hljs-attribute,
959
+ pre.s-code-block > code .hljs-attribute {
960
+ color: var(--highlight-symbol);
992
961
  }
993
- code[class*="language-"] .hljs-meta-string,
994
- pre.s-code-block > code .hljs-meta-string {
995
- color: var(--highlight-variable);
962
+ code[class*="language-"] .s-code-block .hljs-comment,
963
+ pre.s-code-block > code .hljs-comment {
964
+ color: var(--highlight-comment);
996
965
  }
997
- code[class*="language-"] .hljs-deletion,
966
+ code[class*="language-"] .s-code-block .hljs-deletion,
998
967
  pre.s-code-block > code .hljs-deletion {
999
968
  color: var(--highlight-deletion);
1000
969
  }
1001
- code[class*="language-"] .hljs-addition,
1002
- pre.s-code-block > code .hljs-addition {
1003
- color: var(--highlight-addition);
1004
- }
1005
- code[class*="language-"] .hljs-emphasis,
970
+ code[class*="language-"] .s-code-block .hljs-emphasis,
1006
971
  pre.s-code-block > code .hljs-emphasis {
1007
972
  font-style: italic;
1008
973
  }
1009
- code[class*="language-"] .hljs-strong,
974
+ code[class*="language-"] .s-code-block .hljs-strong,
1010
975
  pre.s-code-block > code .hljs-strong {
1011
976
  font-weight: bold;
1012
977
  }
978
+ code[class*="language-"] .s-code-block .hljs-subst,
979
+ pre.s-code-block > code .hljs-subst {
980
+ color: var(--highlight-color);
981
+ }
982
+ pre.s-code-block {
983
+ scrollbar-color: var(--scrollbar) transparent;
984
+ background-color: var(--highlight-bg);
985
+ border-radius: var(--br-md);
986
+ color: var(--highlight-color);
987
+ font-family: var(--ff-mono);
988
+ font-size: var(--fs-body1);
989
+ line-height: var(--lh-md);
990
+ margin: 0;
991
+ overflow: auto;
992
+ padding: var(--su12);
993
+ }
1013
994
  pre.s-code-block .s-code-block--line-numbers {
1014
- float: left;
1015
- color: var(--black-300);
1016
- text-align: right;
1017
- border-width: 0;
1018
- border-style: solid;
995
+ background-color: var(--_cb-line-numbers-bg);
1019
996
  border-color: var(--bc-medium);
1020
- border-right-width: 1px;
997
+ border-style: solid;
998
+ border-width: 0 var(--su-static1) 0 0;
999
+ color: var(--black-300);
1000
+ float: left;
1021
1001
  margin: calc(var(--su12) * -1);
1022
1002
  margin-right: var(--su12);
1023
1003
  padding: var(--su12);
1024
1004
  padding-right: var(--su6);
1025
- background-color: var(--black-050);
1005
+ text-align: right;
1026
1006
  }
1027
- @media (prefers-color-scheme: dark) {
1028
- body.theme-system pre.s-code-block .s-code-block--line-numbers {
1029
- background-color: var(--black-025);
1030
- }
1007
+ pre.s-code-block::-webkit-scrollbar {
1008
+ width: calc(var(--su-static12) - var(--su-static2));
1009
+ height: calc(var(--su-static12) - var(--su-static2));
1010
+ background-color: transparent;
1031
1011
  }
1032
- body.theme-dark pre.s-code-block .s-code-block--line-numbers,
1033
- .theme-dark__forced pre.s-code-block .s-code-block--line-numbers,
1034
- body.theme-system .theme-dark__forced pre.s-code-block .s-code-block--line-numbers {
1035
- background-color: var(--black-025);
1012
+ pre.s-code-block::-webkit-scrollbar-track {
1013
+ border-radius: calc(var(--su-static12) - var(--su-static2));
1014
+ background-color: transparent;
1015
+ }
1016
+ pre.s-code-block::-webkit-scrollbar-thumb {
1017
+ border-radius: calc(var(--su-static12) - var(--su-static2));
1018
+ background-color: var(--scrollbar);
1019
+ }
1020
+ pre.s-code-block::-webkit-scrollbar-corner {
1021
+ background-color: transparent;
1022
+ border-color: transparent;
1036
1023
  }
1037
1024
  .s-expandable {
1038
1025
  --_ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
@@ -1310,6 +1297,32 @@ fieldset[disabled] .s-select > select {
1310
1297
  border-color: var(--blue-300);
1311
1298
  -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
1312
1299
  }
1300
+ .s-check-control {
1301
+ display: flex;
1302
+ gap: var(--su8);
1303
+ align-items: center;
1304
+ }
1305
+ .s-check-control .s-label {
1306
+ font-weight: normal;
1307
+ }
1308
+ .s-check-group {
1309
+ display: flex;
1310
+ flex-direction: column;
1311
+ gap: var(--su8);
1312
+ }
1313
+ .s-check-group.s-check-group__horizontal {
1314
+ flex-direction: row;
1315
+ }
1316
+ .s-check-group legend.s-label {
1317
+ margin-bottom: var(--su8);
1318
+ }
1319
+ .s-check-group .s-check-control {
1320
+ align-items: flex-start;
1321
+ }
1322
+ .s-check-group .s-checkbox,
1323
+ .s-check-group .s-radio {
1324
+ margin-top: calc(var(--su2) + var(--su1));
1325
+ }
1313
1326
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
1314
1327
  .s-checkbox,
1315
1328
  .s-radio {
@@ -1661,7 +1674,8 @@ body.theme-highcontrast .is-readonly .s-input-icon {
1661
1674
  cursor: pointer;
1662
1675
  }
1663
1676
  fieldset[disabled] .s-label,
1664
- .is-disabled .s-label {
1677
+ .is-disabled .s-label,
1678
+ .s-check-control [disabled] + .s-label {
1665
1679
  cursor: not-allowed;
1666
1680
  opacity: var(--_o-disabled-static);
1667
1681
  }
@@ -2673,188 +2687,158 @@ body.theme-system .theme-dark__forced .s-post-summary__deleted .s-badge__filled
2673
2687
  .s-post-summary__deleted .s-user-card .s-user-card--time {
2674
2688
  color: var(--black-500);
2675
2689
  }
2676
- .s-progress,
2677
- .s-progress--bar {
2678
- position: relative;
2679
- min-height: var(--su-static4);
2680
- min-width: var(--su-static6);
2681
- border-radius: var(--br-sm);
2682
- }
2683
2690
  .s-progress {
2684
- width: 100%;
2685
- background-color: var(--black-200);
2686
- }
2687
- .s-progress--bar {
2688
- height: 100%;
2689
- background-color: var(--green-400);
2690
- }
2691
- .s-progress--label {
2692
- position: absolute;
2693
- width: 100%;
2694
- height: 100%;
2695
- border-radius: var(--br-md);
2696
- border: 1px solid transparent;
2697
- font-size: var(--fs-caption);
2698
- line-height: var(--lh-xs);
2699
- color: var(--fc-dark);
2700
- z-index: calc(var(--zi-base) + 2);
2701
- }
2702
- .s-progress__brand .s-progress--bar {
2703
- background-color: var(--orange-500);
2691
+ --_pr-bar: var(--br-sm);
2692
+ --_pr-bg: var(--black-200);
2693
+ --_pr-h: unset;
2694
+ --_pr-size: unset;
2695
+ --_pr-w: 100%;
2696
+ --_pr-hmn: var(--su-static4);
2697
+ --_pr-bar-bar: var(--br-sm);
2698
+ --_pr-bar-bg: var(--green-400);
2699
+ --_pr-bar-hmn: var(--su-static4);
2700
+ --_pr-label-ai: unset;
2701
+ --_pr-label-bc: transparent;
2702
+ --_pr-label-d: unset;
2703
+ --_pr-label-g: unset;
2704
+ --_pr-label-jc: unset;
2705
+ --_pr-label-px: unset;
2706
+ background-color: var(--_pr-bg);
2707
+ border-radius: var(--_pr-bar);
2708
+ height: var(--_pr-size, var(--_pr-h));
2709
+ min-height: var(--_pr-hmn);
2710
+ min-width: var(--su-static6);
2711
+ position: relative;
2712
+ width: var(--_pr-size, var(--_pr-w));
2704
2713
  }
2705
- .s-progress__info .s-progress--bar {
2706
- background-color: var(--blue-500);
2714
+ .s-progress.s-progress__brand {
2715
+ --_pr-bar-bg: var(--orange-500);
2707
2716
  }
2708
- .s-progress__privilege .s-progress--bar {
2709
- background-color: var(--green-050);
2717
+ .s-progress.s-progress__bronze {
2718
+ --_pr-bar-bg: var(--bronze-lighter);
2719
+ --_pr-label-bc: var(--bronze-darker);
2710
2720
  }
2711
- body.theme-highcontrast .s-progress__privilege .s-progress--bar {
2712
- background-color: var(--green-200);
2721
+ .s-progress.s-progress__gold {
2722
+ --_pr-bar-bg: var(--gold-lighter);
2723
+ --_pr-label-bc: var(--gold-darker);
2713
2724
  }
2714
- .s-progress__privilege .s-progress--label {
2715
- border-color: var(--green-400);
2716
- display: flex;
2717
- gap: var(--su4);
2718
- align-items: center;
2719
- justify-content: center;
2725
+ .s-progress.s-progress__info {
2726
+ --_pr-bar-bg: var(--blue-500);
2720
2727
  }
2721
- .s-progress__privilege,
2722
- .s-progress__privilege .s-progress--bar,
2723
- .s-progress__badge,
2724
- .s-progress__badge .s-progress--bar {
2725
- min-height: 2em;
2726
- border-radius: var(--br-md);
2728
+ .s-progress.s-progress__silver {
2729
+ --_pr-bar-bg: var(--silver-lighter);
2730
+ --_pr-label-bc: var(--silver-darker);
2727
2731
  }
2728
- .s-progress__privilege,
2729
- .s-progress__badge {
2730
- background-color: transparent;
2732
+ .s-progress.s-progress__badge,
2733
+ .s-progress.s-progress__privilege {
2734
+ --_pr-bar: var(--br-md);
2735
+ --_pr-bg: transparent;
2736
+ --_pr-hmn: 2em;
2737
+ --_pr-bar-bar: var(--br-md);
2738
+ --_pr-bar-hmn: 2em;
2739
+ --_pr-label-d: flex;
2740
+ --_pr-label-g: var(--su4);
2731
2741
  }
2732
- .s-progress__badge .s-progress--label {
2733
- display: flex;
2734
- gap: var(--su4);
2735
- align-items: center;
2736
- padding-left: 1em;
2737
- padding-right: 1em;
2742
+ .s-progress.s-progress__badge {
2743
+ --_pr-label-ai: center;
2744
+ --_pr-label-px: 1em;
2738
2745
  }
2739
- .s-progress__badge .s-progress--label .s-badge--label {
2740
- text-align: center;
2746
+ .s-progress.s-progress__badge .s-progress--label .s-badge--label {
2741
2747
  flex-grow: 1;
2748
+ text-align: center;
2742
2749
  }
2743
- .s-progress__gold .s-progress--bar {
2744
- background-color: var(--gold-lighter);
2750
+ .s-progress.s-progress__circular {
2751
+ --_pr-bg: transparent;
2752
+ --_pr-size: var(--su-static32);
2753
+ --s-progress-value: 0;
2745
2754
  }
2746
- .s-progress__gold .s-progress--label {
2747
- border-color: var(--gold-darker);
2755
+ .s-progress.s-progress__circular.s-progress__sm {
2756
+ --_pr-size: var(--su-static24);
2748
2757
  }
2749
- .s-progress__silver .s-progress--bar {
2750
- background-color: var(--silver-lighter);
2758
+ .s-progress.s-progress__circular.s-progress__md {
2759
+ --_pr-size: var(--su-static48);
2751
2760
  }
2752
- .s-progress__silver .s-progress--label {
2753
- border-color: var(--silver-darker);
2761
+ .s-progress.s-progress__circular.s-progress__lg {
2762
+ --_pr-size: var(--su-static64);
2754
2763
  }
2755
- .s-progress__bronze .s-progress--bar {
2756
- background-color: var(--bronze-lighter);
2764
+ .s-progress.s-progress__circular .s-progress-bar {
2765
+ transform: rotate(270deg);
2757
2766
  }
2758
- .s-progress__bronze .s-progress--label {
2759
- border-color: var(--bronze-darker);
2767
+ .s-progress.s-progress__circular .s-progress-bar circle {
2768
+ fill: none;
2769
+ stroke-linecap: round;
2770
+ stroke-width: var(--su-static4);
2760
2771
  }
2761
- .s-progress.s-progress__segmented {
2762
- position: relative;
2772
+ .s-progress.s-progress__circular .s-progress-bar circle:nth-of-type(1) {
2773
+ opacity: 0.4;
2774
+ stroke: currentColor;
2763
2775
  }
2764
- .s-progress.s-progress__segmented .s-progress--segments {
2765
- margin: 0;
2766
- padding: 0;
2767
- position: absolute;
2768
- top: 0;
2769
- width: 100%;
2770
- height: 100%;
2771
- display: flex;
2772
- justify-content: space-between;
2773
- list-style: none;
2776
+ .s-progress.s-progress__circular .s-progress-bar circle:nth-of-type(2) {
2777
+ stroke: currentColor;
2778
+ stroke-dasharray: 87.9645943;
2779
+ stroke-dashoffset: calc(((1 - var(--s-progress-value)) * 87.9645943) * 1px);
2774
2780
  }
2775
- .s-progress.s-progress__segmented .s-progress--segments li {
2776
- display: block;
2777
- padding-top: 4px;
2778
- position: relative;
2779
- text-align: center;
2781
+ .s-progress.s-progress__privilege {
2782
+ --_pr-bar-bg: var(--green-050);
2783
+ --_pr-label-ai: center;
2784
+ --_pr-label-bc: var(--green-400);
2785
+ --_pr-label-jc: center;
2780
2786
  }
2781
- .s-progress.s-progress__segmented .s-progress--segments li:not(:first-child):not(:last-child):before {
2782
- display: block;
2783
- content: "";
2784
- height: 100%;
2785
- width: 4px;
2786
- position: absolute;
2787
- top: 0;
2788
- left: -1px;
2789
- background-color: var(--white);
2787
+ body.theme-highcontrast .s-progress.s-progress__privilege {
2788
+ --_pr-bar-bg: var(--green-200);
2790
2789
  }
2791
2790
  .s-progress.s-progress__stepped {
2792
2791
  background: transparent;
2793
2792
  display: flex;
2794
2793
  }
2795
- .s-progress.s-progress__stepped .s-progress--step {
2796
- display: flex;
2797
- flex-grow: 1;
2798
- flex-shrink: 1;
2799
- flex-basis: 0;
2800
- flex-direction: column;
2801
- align-items: center;
2802
- position: relative;
2794
+ .s-progress.s-progress__stepped .s-progress--bar {
2795
+ background: var(--black-300);
2796
+ border-radius: 0;
2797
+ height: var(--su-static6);
2798
+ position: absolute;
2799
+ top: calc(var(--su-static8) + var(--su-static1));
2800
+ z-index: var(--zi-base);
2803
2801
  }
2804
- .s-progress.s-progress__stepped .s-progress--label {
2805
- position: static;
2806
- display: block;
2807
- width: auto;
2808
- height: auto;
2809
- font-size: var(--fs-body1);
2802
+ .s-progress.s-progress__stepped .s-progress--bar.s-progress--bar__left {
2803
+ left: 0;
2804
+ right: 50%;
2805
+ }
2806
+ .s-progress.s-progress__stepped .s-progress--bar.s-progress--bar__right {
2807
+ left: 50%;
2808
+ right: 0;
2809
+ }
2810
+ .s-progress.s-progress__stepped .s-progress--label {
2810
2811
  border: 0;
2811
2812
  border-radius: 0;
2813
+ color: var(--black-500);
2814
+ display: block;
2815
+ font-size: var(--fs-body1);
2816
+ height: auto;
2812
2817
  padding: var(--su12) var(--su6) 0 var(--su6);
2818
+ position: static;
2813
2819
  text-align: center;
2814
- color: var(--black-500);
2820
+ width: auto;
2815
2821
  z-index: var(--zi-base);
2816
2822
  }
2817
- .s-progress.s-progress__stepped .s-progress--stop {
2818
- position: relative;
2819
- display: flex;
2823
+ .s-progress.s-progress__stepped .s-progress--step {
2820
2824
  align-items: center;
2821
- justify-content: center;
2822
- background: var(--black-300);
2823
- border-radius: 100%;
2824
- width: var(--su-static24);
2825
- height: var(--su-static24);
2826
- z-index: var(--zi-selected);
2827
- color: hsl(0, 0%, 100%);
2828
- }
2829
- body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
2830
- color: var(--white);
2831
- }
2832
- .s-progress.s-progress__stepped .s-progress--bar {
2833
- position: absolute;
2834
- top: calc(var(--su-static8) + var(--su-static1));
2835
- height: var(--su-static6);
2836
- background: var(--black-300);
2837
- z-index: var(--zi-base);
2838
- border-radius: 0;
2839
- }
2840
- .s-progress.s-progress__stepped .s-progress--bar.s-progress--bar__left {
2841
- left: 0;
2842
- right: 50%;
2843
- }
2844
- .s-progress.s-progress__stepped .s-progress--bar.s-progress--bar__right {
2845
- right: 0;
2846
- left: 50%;
2825
+ display: flex;
2826
+ flex-basis: 0;
2827
+ flex-direction: column;
2828
+ flex-grow: 1;
2829
+ flex-shrink: 1;
2830
+ position: relative;
2847
2831
  }
2848
2832
  .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--bar.s-progress--bar__left {
2849
2833
  background: var(--theme-secondary-400);
2850
2834
  }
2835
+ .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--label {
2836
+ color: var(--fc-dark);
2837
+ }
2851
2838
  .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--stop {
2852
2839
  background: var(--theme-secondary-400);
2853
2840
  box-shadow: 0 0 0 var(--su-static6) var(--focus-ring);
2854
2841
  }
2855
- .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--label {
2856
- color: var(--fc-dark);
2857
- }
2858
2842
  .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--bar,
2859
2843
  .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--stop {
2860
2844
  background: var(--theme-secondary-400);
@@ -2862,482 +2846,482 @@ body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
2862
2846
  .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--label {
2863
2847
  color: var(--fc-dark);
2864
2848
  }
2865
- .s-progress__circular {
2866
- --s-progress-value: 0;
2867
- background: none;
2868
- width: var(--su-static32);
2869
- height: var(--su-static32);
2870
- }
2871
- .s-progress__circular .s-progress-bar {
2872
- transform: rotate(270deg);
2849
+ .s-progress.s-progress__stepped .s-progress--stop {
2850
+ align-items: center;
2851
+ background: var(--black-300);
2852
+ border-radius: 100%;
2853
+ color: hsl(0, 0%, 100%);
2854
+ display: flex;
2855
+ height: var(--su-static24);
2856
+ justify-content: center;
2857
+ position: relative;
2858
+ width: var(--su-static24);
2859
+ z-index: var(--zi-selected);
2873
2860
  }
2874
- .s-progress__circular .s-progress-bar circle {
2875
- stroke-width: var(--su-static4);
2876
- fill: none;
2877
- stroke-linecap: round;
2861
+ body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
2862
+ color: var(--white);
2878
2863
  }
2879
- .s-progress__circular .s-progress-bar circle:nth-of-type(1) {
2880
- stroke: currentColor;
2881
- opacity: 0.4;
2864
+ .s-progress .s-progress--bar {
2865
+ background-color: var(--_pr-bar-bg);
2866
+ border-radius: var(--_pr-bar);
2867
+ min-height: var(--_pr-hmn);
2868
+ height: 100%;
2869
+ min-width: var(--su-static6);
2870
+ position: relative;
2882
2871
  }
2883
- .s-progress__circular .s-progress-bar circle:nth-of-type(2) {
2884
- stroke: currentColor;
2885
- stroke-dasharray: 87.9645943;
2886
- stroke-dashoffset: calc(((1 - var(--s-progress-value)) * 87.9645943) * 1px);
2872
+ .s-progress .s-progress--label {
2873
+ align-items: var(--_pr-label-ai);
2874
+ border: var(--su-static1) solid var(--_pr-label-bc);
2875
+ display: var(--_pr-label-d);
2876
+ gap: var(--_pr-label-g);
2877
+ justify-content: var(--_pr-label-jc);
2878
+ padding-left: var(--_pr-label-px);
2879
+ padding-right: var(--_pr-label-px);
2880
+ border-radius: var(--br-md);
2881
+ color: var(--fc-dark);
2882
+ font-size: var(--fs-caption);
2883
+ height: 100%;
2884
+ line-height: var(--lh-xs);
2885
+ position: absolute;
2886
+ width: 100%;
2887
+ z-index: calc(var(--zi-base) + 2);
2887
2888
  }
2888
- .s-progress__circular.s-progress__sm {
2889
- width: var(--su-static24);
2890
- height: var(--su-static24);
2889
+ .s-progress .s-progress--segments {
2890
+ display: flex;
2891
+ height: 100%;
2892
+ justify-content: space-between;
2893
+ list-style: none;
2894
+ margin: 0;
2895
+ padding: 0;
2896
+ position: absolute;
2897
+ top: 0;
2898
+ width: 100%;
2891
2899
  }
2892
- .s-progress__circular.s-progress__md {
2893
- width: var(--su-static48);
2894
- height: var(--su-static48);
2900
+ .s-progress .s-progress--segments li {
2901
+ display: block;
2902
+ padding-top: var(--su-static4);
2903
+ position: relative;
2904
+ text-align: center;
2895
2905
  }
2896
- .s-progress__circular.s-progress__lg {
2897
- width: var(--su-static64);
2898
- height: var(--su-static64);
2906
+ .s-progress .s-progress--segments li:not(:first-child):not(:last-child):before {
2907
+ background-color: var(--white);
2908
+ content: "";
2909
+ display: block;
2910
+ height: 100%;
2911
+ left: calc(var(--su-static) * -1);
2912
+ position: absolute;
2913
+ top: 0;
2914
+ width: var(--su-static4);
2899
2915
  }
2900
2916
  .s-prose {
2901
- --s-prose-line-height: 1.5;
2902
- --s-prose-spacing: 1.1em;
2903
- --s-prose-spacing-condensed: calc(var(--s-prose-spacing) / 2);
2904
- font-size: 15px;
2905
- line-height: var(--s-prose-line-height);
2917
+ --_pr-fs: calc(var(--su-static16) - var(--su-static1));
2918
+ --_pr-lh: 1.5;
2919
+ --_pr-blockquote-ml: 1em;
2920
+ --_pr-blockquote-mt: 0;
2921
+ --_pr-blockquote-before-bg: var(--black-150);
2922
+ --_pr-code-fs: var(--fs-body1);
2923
+ --_pr-h1-fs: var(--fs-headline1);
2924
+ --_pr-h2-fs: var(--fs-title);
2925
+ --_pr-h3-fs: var(--fs-subheading);
2926
+ --_pr-h4-fs: var(--fs-body3);
2927
+ --_pr-h5-fs: var(--fs-body2);
2928
+ --_pr-h6-fs: var(--fs-body1);
2929
+ --_pr-hr-bg: var(--black-100);
2930
+ --_pr-img-mb: var(--_pr-spacing);
2931
+ --_pr-kbd-bc: var(--black-300);
2932
+ --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0, 0%, 100%);
2933
+ --_pr-spoiler-cursor: pointer;
2934
+ --_pr-spoiler-after-t: 1em;
2935
+ --_pr-soiler-after-o: unset;
2936
+ --_pr-soiler-child-o: 0;
2937
+ --_pr-soiler-child-visibility: hidden;
2938
+ --_pr-spacing: 1.1em;
2939
+ --_pr-spacing-condensed: calc(var(--_pr-spacing) / 2);
2940
+ --_pr-spoiler-transition: opacity 0.1s ease-in-out;
2941
+ font-size: var(--_pr-fs);
2942
+ line-height: var(--_pr-lh);
2906
2943
  overflow-wrap: break-word;
2907
2944
  }
2908
- .s-prose p {
2909
- margin-bottom: var(--s-prose-spacing);
2945
+ @media (prefers-color-scheme: dark) {
2946
+ body.theme-system .s-prose {
2947
+ --_pr-kbd-bc: transparent;
2948
+ --_pr-kbd-btc: hsl(210, 8%, 45%);
2949
+ --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
2950
+ }
2910
2951
  }
2911
- .s-prose pre {
2912
- overflow-wrap: normal;
2952
+ body.theme-dark .s-prose,
2953
+ .theme-dark__forced .s-prose,
2954
+ body.theme-system .theme-dark__forced .s-prose {
2955
+ --_pr-kbd-bc: transparent;
2956
+ --_pr-kbd-btc: hsl(210, 8%, 45%);
2957
+ --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
2913
2958
  }
2914
- .s-prose code {
2915
- font-size: var(--fs-body1);
2916
- font-family: var(--ff-mono);
2959
+ body.theme-highcontrast .s-prose {
2960
+ --_pr-blockquote-before-bg: var(--black-600);
2961
+ --_pr-hr-bg: var(--black-500);
2917
2962
  }
2918
- .s-prose sub code,
2919
- .s-prose sup code {
2920
- font-size: 90%;
2963
+ @media (max-width: 640px) {
2964
+ .s-prose {
2965
+ --_pr-spoiler-after-t: calc(var(--su8) + var(--su1));
2966
+ }
2921
2967
  }
2922
- .s-prose hr {
2923
- border: 0;
2924
- color: var(--black-100);
2925
- background-color: var(--black-100);
2926
- height: 1px;
2927
- margin-bottom: var(--s-prose-spacing);
2968
+ .s-prose.s-prose__xs,
2969
+ .s-prose.s-prose__sm,
2970
+ .s-prose.s-prose__md {
2971
+ --_pr-h1-fs: var(--fs-headline1-relative);
2972
+ --_pr-h2-fs: var(--fs-title-relative);
2973
+ --_pr-h3-fs: var(--fs-subheading-relative);
2974
+ --_pr-h4-fs: var(--fs-body3-relative);
2975
+ --_pr-h5-fs: var(--fs-body2-relative);
2928
2976
  }
2929
- body.theme-highcontrast .s-prose hr {
2930
- color: var(--black-500);
2931
- background-color: var(--black-500);
2977
+ .s-prose.s-prose__xs {
2978
+ --_pr-fs: var(--fs-caption);
2979
+ --_pr-lh: var(--lh-sm);
2932
2980
  }
2933
- .s-prose li {
2934
- overflow-wrap: break-word;
2981
+ .s-prose.s-prose__sm {
2982
+ --_pr-fs: var(--fs-body1);
2983
+ --_pr-lh: var(--lh-md);
2935
2984
  }
2936
- .s-prose li pre {
2937
- overflow-wrap: normal;
2985
+ .s-prose.s-prose__md {
2986
+ --_pr-fs: var(--fs-body3);
2987
+ --_pr-lh: var(--lh-xl);
2988
+ }
2989
+ .s-prose *:not(.s-code-block) > code {
2990
+ padding: var(--su2) var(--su4);
2991
+ color: var(--black-800);
2992
+ background-color: var(--black-075);
2993
+ border-radius: var(--br-sm);
2994
+ }
2995
+ .s-prose *:not(.s-code-block) > a code {
2996
+ color: var(--theme-link-color);
2938
2997
  }
2939
- .s-prose p:last-child,
2940
- .s-prose dl:last-child,
2941
2998
  .s-prose blockquote:last-child,
2942
- .s-prose table:last-child,
2943
- .s-prose .s-table-container:last-child,
2944
- .s-prose .s-link-preview:last-child,
2945
- .s-prose hr:last-child,
2946
- .s-prose ol:last-child,
2947
- .s-prose ul:last-child,
2948
- .s-prose img:last-child,
2949
- .s-prose pre:last-child,
2999
+ .s-prose dl:last-child,
2950
3000
  .s-prose h1:last-child,
2951
3001
  .s-prose h2:last-child,
2952
3002
  .s-prose h3:last-child,
2953
3003
  .s-prose h4:last-child,
2954
3004
  .s-prose h5:last-child,
2955
3005
  .s-prose h6:last-child,
2956
- .s-prose p:only-child,
2957
- .s-prose dl:only-child,
3006
+ .s-prose hr:last-child,
3007
+ .s-prose img:last-child,
3008
+ .s-prose ol:last-child,
3009
+ .s-prose p:last-child,
3010
+ .s-prose pre:last-child,
3011
+ .s-prose table:last-child,
3012
+ .s-prose ul:last-child,
3013
+ .s-prose .s-link-preview:last-child,
3014
+ .s-prose .s-table-container:last-child,
2958
3015
  .s-prose blockquote:only-child,
2959
- .s-prose table:only-child,
2960
- .s-prose .s-table-container:only-child,
2961
- .s-prose .s-link-preview:only-child,
2962
- .s-prose hr:only-child,
2963
- .s-prose ol:only-child,
2964
- .s-prose ul:only-child,
2965
- .s-prose img:only-child,
2966
- .s-prose pre:only-child,
3016
+ .s-prose dl:only-child,
2967
3017
  .s-prose h1:only-child,
2968
3018
  .s-prose h2:only-child,
2969
3019
  .s-prose h3:only-child,
2970
3020
  .s-prose h4:only-child,
2971
3021
  .s-prose h5:only-child,
2972
- .s-prose h6:only-child {
3022
+ .s-prose h6:only-child,
3023
+ .s-prose hr:only-child,
3024
+ .s-prose img:only-child,
3025
+ .s-prose ol:only-child,
3026
+ .s-prose p:only-child,
3027
+ .s-prose pre:only-child,
3028
+ .s-prose table:only-child,
3029
+ .s-prose ul:only-child,
3030
+ .s-prose .s-link-preview:only-child,
3031
+ .s-prose .s-table-container:only-child {
2973
3032
  margin-bottom: 0;
2974
3033
  }
2975
- .s-prose h1,
2976
- .s-prose h2,
2977
- .s-prose h3,
2978
- .s-prose h4,
2979
- .s-prose h5,
2980
- .s-prose h6 {
2981
- font-weight: bold !important;
2982
- margin-bottom: 0.5em;
2983
- }
2984
- .s-prose h1 code,
2985
- .s-prose h2 code,
2986
- .s-prose h3 code,
2987
- .s-prose h4 code,
2988
- .s-prose h5 code,
2989
- .s-prose h6 code {
2990
- font-size: 0.9em;
2991
- }
2992
- .s-prose h1 {
2993
- font-size: var(--fs-headline1);
2994
- margin-bottom: 0.6em;
2995
- }
2996
- .s-prose h2 {
2997
- font-size: var(--fs-title);
2998
- margin-bottom: 0.7em;
2999
- }
3000
- .s-prose h3 {
3001
- font-size: var(--fs-subheading);
3002
- margin-bottom: 0.74em;
3003
- }
3004
- .s-prose h4 {
3005
- font-size: var(--fs-body3);
3006
- margin-bottom: 1em;
3007
- }
3008
- .s-prose h5 {
3009
- font-size: var(--fs-body2);
3010
- }
3011
- .s-prose h6 {
3012
- font-size: var(--fs-body1);
3013
- }
3014
- .s-prose img + h1,
3034
+ .s-prose blockquote + h1,
3035
+ .s-prose dd + h1,
3015
3036
  .s-prose dl + h1,
3037
+ .s-prose img + h1,
3038
+ .s-prose ol + h1,
3016
3039
  .s-prose p + h1,
3017
3040
  .s-prose pre + h1,
3018
- .s-prose blockquote + h1,
3019
3041
  .s-prose table + h1,
3020
- .s-prose .s-table-container + h1,
3021
- .s-prose .s-link-preview + h1,
3022
- .s-prose dd + h1,
3023
3042
  .s-prose ul + h1,
3024
- .s-prose ol + h1 {
3043
+ .s-prose .s-link-preview + h1,
3044
+ .s-prose .s-table-container + h1 {
3025
3045
  margin-top: 1.5667em;
3026
3046
  }
3027
- .s-prose img + h2,
3047
+ .s-prose blockquote + h2,
3048
+ .s-prose dd + h2,
3028
3049
  .s-prose dl + h2,
3050
+ .s-prose img + h2,
3051
+ .s-prose ol + h2,
3029
3052
  .s-prose p + h2,
3030
3053
  .s-prose pre + h2,
3031
- .s-prose blockquote + h2,
3032
3054
  .s-prose table + h2,
3033
- .s-prose .s-table-container + h2,
3034
- .s-prose .s-link-preview + h2,
3035
- .s-prose dd + h2,
3036
3055
  .s-prose ul + h2,
3037
- .s-prose ol + h2 {
3056
+ .s-prose .s-link-preview + h2,
3057
+ .s-prose .s-table-container + h2 {
3038
3058
  margin-top: 1.667em;
3039
3059
  }
3040
- .s-prose img + h3,
3060
+ .s-prose blockquote + h3,
3061
+ .s-prose dd + h3,
3041
3062
  .s-prose dl + h3,
3063
+ .s-prose img + h3,
3064
+ .s-prose ol + h3,
3042
3065
  .s-prose p + h3,
3043
3066
  .s-prose pre + h3,
3044
- .s-prose blockquote + h3,
3045
3067
  .s-prose table + h3,
3046
- .s-prose .s-table-container + h3,
3047
- .s-prose .s-link-preview + h3,
3048
- .s-prose dd + h3,
3049
3068
  .s-prose ul + h3,
3050
- .s-prose ol + h3 {
3069
+ .s-prose .s-link-preview + h3,
3070
+ .s-prose .s-table-container + h3 {
3051
3071
  margin-top: 1.4667em;
3052
3072
  }
3053
- .s-prose img + h4,
3073
+ .s-prose blockquote + h4,
3074
+ .s-prose dd + h4,
3054
3075
  .s-prose dl + h4,
3076
+ .s-prose img + h4,
3077
+ .s-prose ol + h4,
3055
3078
  .s-prose p + h4,
3056
3079
  .s-prose pre + h4,
3057
- .s-prose blockquote + h4,
3058
3080
  .s-prose table + h4,
3059
- .s-prose .s-table-container + h4,
3060
- .s-prose .s-link-preview + h4,
3061
- .s-prose dd + h4,
3062
3081
  .s-prose ul + h4,
3063
- .s-prose ol + h4,
3064
- .s-prose img + h5,
3082
+ .s-prose .s-link-preview + h4,
3083
+ .s-prose .s-table-container + h4,
3084
+ .s-prose blockquote + h5,
3085
+ .s-prose dd + h5,
3065
3086
  .s-prose dl + h5,
3087
+ .s-prose img + h5,
3088
+ .s-prose ol + h5,
3066
3089
  .s-prose p + h5,
3067
3090
  .s-prose pre + h5,
3068
- .s-prose blockquote + h5,
3069
3091
  .s-prose table + h5,
3070
- .s-prose .s-table-container + h5,
3071
- .s-prose .s-link-preview + h5,
3072
- .s-prose dd + h5,
3073
3092
  .s-prose ul + h5,
3074
- .s-prose ol + h5,
3075
- .s-prose img + h6,
3093
+ .s-prose .s-link-preview + h5,
3094
+ .s-prose .s-table-container + h5,
3095
+ .s-prose blockquote + h6,
3096
+ .s-prose dd + h6,
3076
3097
  .s-prose dl + h6,
3098
+ .s-prose img + h6,
3099
+ .s-prose ol + h6,
3077
3100
  .s-prose p + h6,
3078
3101
  .s-prose pre + h6,
3079
- .s-prose blockquote + h6,
3080
3102
  .s-prose table + h6,
3081
- .s-prose .s-table-container + h6,
3082
- .s-prose .s-link-preview + h6,
3083
- .s-prose dd + h6,
3084
3103
  .s-prose ul + h6,
3085
- .s-prose ol + h6 {
3104
+ .s-prose .s-link-preview + h6,
3105
+ .s-prose .s-table-container + h6 {
3086
3106
  margin-top: 1.6667em;
3087
3107
  }
3088
- .s-prose img {
3089
- max-width: 100%;
3090
- margin-bottom: var(--s-prose-spacing);
3091
- vertical-align: bottom;
3108
+ .s-prose h1,
3109
+ .s-prose h2,
3110
+ .s-prose h3,
3111
+ .s-prose h4,
3112
+ .s-prose h5,
3113
+ .s-prose h6 {
3114
+ --_pr-code-fs: 0.9em;
3115
+ font-weight: bold !important;
3116
+ margin-bottom: 0.5em;
3092
3117
  }
3093
- .s-prose blockquote img,
3094
- .s-prose li img,
3095
- .s-prose p img {
3096
- margin-bottom: 0;
3118
+ .s-prose h1 {
3119
+ font-size: var(--_pr-h1-fs);
3120
+ margin-bottom: 0.6em;
3121
+ }
3122
+ .s-prose h2 {
3123
+ font-size: var(--_pr-h2-fs);
3124
+ margin-bottom: 0.7em;
3125
+ }
3126
+ .s-prose h3 {
3127
+ font-size: var(--_pr-h3-fs);
3128
+ margin-bottom: 0.74em;
3129
+ }
3130
+ .s-prose h4 {
3131
+ font-size: var(--_pr-h4-fs);
3132
+ margin-bottom: 1em;
3133
+ }
3134
+ .s-prose h5 {
3135
+ font-size: var(--_pr-h5-fs);
3136
+ }
3137
+ .s-prose h6 {
3138
+ font-size: var(--_pr-h6-fs);
3139
+ }
3140
+ .s-prose blockquote,
3141
+ .s-prose q {
3142
+ quotes: none;
3143
+ }
3144
+ .s-prose dd,
3145
+ .s-prose dl,
3146
+ .s-prose .s-table-container,
3147
+ .s-prose .s-link-preview {
3148
+ margin-bottom: var(--_pr-spacing);
3097
3149
  }
3098
3150
  .s-prose ol,
3099
3151
  .s-prose ul {
3152
+ margin-bottom: var(--_pr-spacing);
3100
3153
  margin-top: 0;
3101
- margin-bottom: var(--s-prose-spacing);
3102
3154
  }
3103
- .s-prose ol p:last-child,
3104
- .s-prose ul p:last-child,
3105
- .s-prose ol dl:last-child,
3106
- .s-prose ul dl:last-child,
3107
3155
  .s-prose ol blockquote:last-child,
3108
3156
  .s-prose ul blockquote:last-child,
3109
- .s-prose ol table:last-child,
3110
- .s-prose ul table:last-child,
3157
+ .s-prose ol dl:last-child,
3158
+ .s-prose ul dl:last-child,
3111
3159
  .s-prose ol hr:last-child,
3112
3160
  .s-prose ul hr:last-child,
3113
3161
  .s-prose ol ol:last-child,
3114
3162
  .s-prose ul ol:last-child,
3163
+ .s-prose ol p:last-child,
3164
+ .s-prose ul p:last-child,
3165
+ .s-prose ol table:last-child,
3166
+ .s-prose ul table:last-child,
3115
3167
  .s-prose ol ul:last-child,
3116
3168
  .s-prose ul ul:last-child,
3117
- .s-prose ol p:only-child,
3118
- .s-prose ul p:only-child,
3119
- .s-prose ol dl:only-child,
3120
- .s-prose ul dl:only-child,
3121
3169
  .s-prose ol blockquote:only-child,
3122
3170
  .s-prose ul blockquote:only-child,
3123
- .s-prose ol table:only-child,
3124
- .s-prose ul table:only-child,
3171
+ .s-prose ol dl:only-child,
3172
+ .s-prose ul dl:only-child,
3125
3173
  .s-prose ol hr:only-child,
3126
3174
  .s-prose ul hr:only-child,
3127
3175
  .s-prose ol ol:only-child,
3128
3176
  .s-prose ul ol:only-child,
3177
+ .s-prose ol p:only-child,
3178
+ .s-prose ul p:only-child,
3179
+ .s-prose ol table:only-child,
3180
+ .s-prose ul table:only-child,
3129
3181
  .s-prose ol ul:only-child,
3130
3182
  .s-prose ul ul:only-child {
3131
3183
  margin-bottom: 0;
3132
3184
  }
3185
+ .s-prose ol blockquote,
3186
+ .s-prose ul blockquote,
3187
+ .s-prose ol dd,
3188
+ .s-prose ul dd,
3133
3189
  .s-prose ol dl,
3134
3190
  .s-prose ul dl,
3191
+ .s-prose ol hr,
3192
+ .s-prose ul hr,
3193
+ .s-prose ol li,
3194
+ .s-prose ul li,
3195
+ .s-prose ol ol,
3196
+ .s-prose ul ol,
3135
3197
  .s-prose ol p,
3136
3198
  .s-prose ul p,
3137
- .s-prose ol blockquote,
3138
- .s-prose ul blockquote,
3139
3199
  .s-prose ol table,
3140
3200
  .s-prose ul table,
3141
- .s-prose ol hr,
3142
- .s-prose ul hr,
3143
- .s-prose ol dd,
3144
- .s-prose ul dd,
3145
3201
  .s-prose ol ul,
3146
- .s-prose ul ul,
3147
- .s-prose ol ol,
3148
- .s-prose ul ol {
3149
- margin-bottom: var(--s-prose-spacing-condensed);
3150
- }
3151
- .s-prose ol pre,
3152
- .s-prose ul pre {
3153
- margin-bottom: calc(var(--s-prose-spacing-condensed) + 0.1em);
3154
- }
3155
- .s-prose ol li,
3156
- .s-prose ul li {
3157
- margin-bottom: var(--s-prose-spacing-condensed);
3202
+ .s-prose ul ul {
3203
+ margin-bottom: var(--_pr-spacing-condensed);
3158
3204
  }
3159
3205
  .s-prose ol li:last-child,
3160
3206
  .s-prose ul li:last-child {
3161
3207
  margin-bottom: 0;
3162
3208
  }
3163
- .s-prose li > ul,
3164
- .s-prose li > ol {
3165
- margin-top: var(--s-prose-spacing-condensed);
3166
- }
3167
- .s-prose .s-table-container {
3168
- margin-bottom: var(--s-prose-spacing);
3169
- }
3170
- .s-prose .s-link-preview {
3171
- margin-bottom: var(--s-prose-spacing);
3172
- }
3173
- .s-prose dl {
3174
- margin-top: 0;
3175
- margin-bottom: var(--s-prose-spacing);
3176
- }
3177
- .s-prose dt {
3178
- font-weight: bold;
3179
- }
3180
- .s-prose dd {
3181
- margin: 0;
3182
- margin-bottom: var(--s-prose-spacing);
3183
- padding: 0;
3184
- }
3185
- .s-prose dd:last-child {
3186
- margin-bottom: 0;
3187
- }
3188
- .s-prose .youtube-embed {
3189
- width: 100%;
3190
- max-width: 640px;
3191
- position: relative;
3192
- }
3193
- .s-prose .youtube-embed > div {
3194
- width: 100%;
3195
- height: 35px;
3196
- padding-bottom: 56.25%;
3197
- position: relative;
3198
- }
3199
- .s-prose .youtube-embed > div iframe {
3200
- position: absolute;
3201
- width: 100%;
3202
- height: 100%;
3209
+ .s-prose ol li ol,
3210
+ .s-prose ul li ol,
3211
+ .s-prose ol li ul,
3212
+ .s-prose ul li ul {
3213
+ margin-top: var(--_pr-spacing-condensed);
3203
3214
  }
3204
- .s-prose .soundcloud-embed iframe {
3205
- width: 100%;
3206
- max-width: 640px;
3207
- height: 116px;
3215
+ .s-prose ol pre,
3216
+ .s-prose ul pre {
3217
+ margin-bottom: calc(var(--_pr-spacing-condensed) + 0.1em);
3208
3218
  }
3209
- .s-prose blockquote,
3210
- .s-prose q {
3211
- quotes: none;
3219
+ .s-prose sub,
3220
+ .s-prose sup {
3221
+ --_pr-code-fs: 90%;
3212
3222
  }
3213
3223
  .s-prose blockquote {
3214
- position: relative;
3215
- margin: 0 1em var(--s-prose-spacing) 1em;
3216
- padding: 0.8em 0.8em 0.8em 1em;
3224
+ --_pr-img-mb: 0;
3217
3225
  color: var(--black-600);
3226
+ margin: var(--_pr-blockquote-mt) 1em var(--_pr-spacing) var(--_pr-blockquote-ml);
3227
+ padding: 0.8em 0.8em 0.8em 1em;
3228
+ position: relative;
3218
3229
  }
3219
3230
  .s-prose blockquote:before {
3231
+ background: var(--_pr-blockquote-before-bg);
3232
+ border-radius: var(--su-static8);
3233
+ bottom: 0;
3220
3234
  content: "";
3221
3235
  display: block;
3236
+ left: 0;
3222
3237
  position: absolute;
3223
3238
  top: 0;
3224
- bottom: 0;
3225
- left: 0;
3226
3239
  width: var(--su4);
3227
- border-radius: var(--su-static8);
3228
- background: var(--black-150);
3229
- }
3230
- body.theme-highcontrast .s-prose blockquote:before {
3231
- background: var(--black-600);
3232
- }
3233
- .s-prose blockquote blockquote {
3234
- margin-left: 0;
3235
3240
  }
3236
3241
  .s-prose blockquote *:last-child {
3237
3242
  margin-bottom: 0;
3238
3243
  }
3239
- .s-prose li blockquote {
3240
- margin-top: var(--s-prose-spacing-condensed);
3244
+ .s-prose blockquote blockquote {
3245
+ --_pr-blockquote-ml: 0;
3241
3246
  }
3242
- .s-prose .spoiler {
3243
- background: var(--black-050);
3244
- border-radius: var(--br-md);
3245
- color: var(--black-800);
3246
- cursor: pointer;
3247
- min-height: var(--su-static48);
3247
+ .s-prose code {
3248
+ font-size: var(--_pr-code-fs);
3249
+ font-family: var(--ff-mono);
3248
3250
  }
3249
- .s-prose .spoiler > * {
3250
- visibility: hidden;
3251
- opacity: 0;
3252
- transition: opacity 0.1s ease-in-out;
3251
+ .s-prose dd {
3252
+ margin: 0;
3253
+ padding: 0;
3253
3254
  }
3254
- .s-prose .spoiler.is-visible {
3255
- cursor: auto;
3255
+ .s-prose dd:last-child {
3256
+ margin-bottom: 0;
3256
3257
  }
3257
- .s-prose .spoiler.is-visible > * {
3258
- visibility: visible;
3259
- opacity: 1;
3258
+ .s-prose dl {
3259
+ margin-top: 0;
3260
3260
  }
3261
- .s-prose .spoiler.is-visible:after {
3262
- opacity: 0;
3261
+ .s-prose dt {
3262
+ font-weight: bold;
3263
3263
  }
3264
- .s-prose .spoiler:after {
3265
- content: attr(data-spoiler) " ";
3266
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
3267
- background-repeat: no-repeat;
3268
- background-position: center right;
3269
- font-size: var(--fs-body1);
3270
- color: var(--black-500);
3271
- padding-right: 22px;
3272
- position: absolute;
3273
- top: 1em;
3274
- right: 1em;
3275
- transition: opacity 0.1s ease-in-out;
3276
- pointer-events: none;
3264
+ .s-prose hr {
3265
+ background-color: var(--_pr-hr-bg);
3266
+ color: var(--_pr-hr-bg);
3267
+ border: 0;
3268
+ height: var(--su-static1);
3269
+ margin-bottom: var(--_pr-spacing);
3277
3270
  }
3278
- @media (max-width: 640px) {
3279
- .s-prose .spoiler:after {
3280
- top: 9px;
3281
- }
3271
+ .s-prose img {
3272
+ margin-bottom: var(--_pr-img-mb);
3273
+ max-width: 100%;
3274
+ vertical-align: bottom;
3282
3275
  }
3283
3276
  .s-prose kbd {
3277
+ border: var(--su-static1) solid var(--_pr-kbd-bc);
3278
+ border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
3279
+ box-shadow: var(--_pr-kbd-bs);
3280
+ background-color: var(--black-075);
3281
+ border-radius: var(--br-sm);
3282
+ color: var(--black-800);
3284
3283
  display: inline-block;
3285
- margin: 0 0.1em;
3286
- padding: 0.1em 0.6em;
3287
3284
  font-family: var(--ff-sans);
3288
3285
  font-size: var(--fs-fine);
3289
- line-height: var(--s-prose-line-height);
3290
- color: var(--black-800);
3291
- text-shadow: 0 1px 0 var(--white);
3292
- background-color: var(--black-075);
3293
- border: 1px solid var(--black-300);
3294
- border-radius: var(--br-sm);
3295
- box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 hsl(0, 0%, 100%);
3286
+ line-height: var(--_pr-lh);
3287
+ margin: 0 0.1em;
3296
3288
  overflow-wrap: break-word;
3289
+ padding: 0.1em 0.6em;
3290
+ text-shadow: 0 var(--su-static1) 0 var(--white);
3297
3291
  }
3298
- @media (prefers-color-scheme: dark) {
3299
- body.theme-system .s-prose kbd {
3300
- box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.8);
3301
- border-color: transparent;
3302
- border-top-color: hsl(210, 8%, 45%);
3303
- }
3304
- }
3305
- body.theme-dark .s-prose kbd,
3306
- .theme-dark__forced .s-prose kbd,
3307
- body.theme-system .theme-dark__forced .s-prose kbd {
3308
- box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.8);
3309
- border-color: transparent;
3310
- border-top-color: hsl(210, 8%, 45%);
3292
+ .s-prose li {
3293
+ --_pr-blockquote-mt: var(--_pr-spacing-condensed);
3294
+ --_pr-img-mb: 0;
3295
+ overflow-wrap: break-word;
3311
3296
  }
3312
- .s-prose *:not(.s-code-block) > code {
3313
- padding: var(--su2) var(--su4);
3314
- color: var(--black-800);
3315
- background-color: var(--black-075);
3316
- border-radius: var(--br-sm);
3297
+ .s-prose li pre {
3298
+ overflow-wrap: normal;
3317
3299
  }
3318
- .s-prose *:not(.s-code-block) > a code {
3319
- color: var(--theme-link-color);
3300
+ .s-prose p {
3301
+ --_pr-img-mb: 0;
3302
+ margin-bottom: var(--_pr-spacing);
3320
3303
  }
3321
3304
  .s-prose pre {
3322
3305
  margin-top: 0;
3323
- margin-bottom: calc(var(--s-prose-spacing) + 0.4em);
3306
+ margin-bottom: calc(var(--_pr-spacing) + 0.4em);
3307
+ overflow-wrap: normal;
3324
3308
  }
3325
3309
  .s-prose pre:not(.s-code-block) {
3326
- padding: var(--su12);
3310
+ scrollbar-color: var(--scrollbar) transparent;
3311
+ background-color: var(--highlight-bg);
3312
+ border-radius: var(--br-md);
3327
3313
  color: var(--highlight-color);
3328
- width: auto;
3329
- max-height: 600px;
3330
- overflow: auto;
3331
3314
  font-size: var(--fs-body1);
3332
3315
  line-height: var(--lh-md);
3333
- background-color: var(--highlight-bg);
3334
- border-radius: var(--br-md);
3335
- scrollbar-color: var(--scrollbar) transparent;
3316
+ max-height: 600px;
3317
+ overflow: auto;
3318
+ padding: var(--su12);
3319
+ width: auto;
3336
3320
  }
3337
3321
  .s-prose pre:not(.s-code-block) code {
3338
3322
  background-color: transparent;
3339
- padding: 0;
3340
3323
  border-radius: 0;
3324
+ padding: 0;
3341
3325
  }
3342
3326
  .s-prose pre:not(.s-code-block)::-webkit-scrollbar {
3343
3327
  width: calc(var(--su-static12) - var(--su-static2));
@@ -3356,42 +3340,283 @@ body.theme-system .theme-dark__forced .s-prose kbd {
3356
3340
  background-color: transparent;
3357
3341
  border-color: transparent;
3358
3342
  }
3359
- .s-prose.s-prose__xs {
3360
- font-size: var(--fs-caption);
3361
- line-height: var(--lh-sm);
3362
- }
3363
- .s-prose.s-prose__sm {
3364
- font-size: var(--fs-body1);
3365
- line-height: var(--lh-md);
3343
+ .s-prose .soundcloud-embed iframe {
3344
+ height: 116px;
3345
+ max-width: 640px;
3346
+ width: 100%;
3366
3347
  }
3367
- .s-prose.s-prose__md {
3368
- font-size: var(--fs-body3);
3369
- line-height: var(--lh-xl);
3348
+ .s-prose .spoiler {
3349
+ cursor: var(--_pr-spoiler-cursor);
3350
+ background: var(--black-050);
3351
+ border-radius: var(--br-md);
3352
+ color: var(--black-800);
3353
+ min-height: var(--su-static48);
3354
+ }
3355
+ .s-prose .spoiler:after {
3356
+ opacity: var(--_pr-soiler-after-o);
3357
+ top: var(--_pr-spoiler-after-t);
3358
+ transition: var(--_pr-spoiler-transition);
3359
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
3360
+ background-position: center right;
3361
+ background-repeat: no-repeat;
3362
+ color: var(--black-500);
3363
+ content: attr(data-spoiler) " ";
3364
+ font-size: var(--fs-body1);
3365
+ padding-right: calc(var(--su24) - var(--su2));
3366
+ pointer-events: none;
3367
+ position: absolute;
3368
+ right: 1em;
3369
+ }
3370
+ .s-prose .spoiler.is-visible {
3371
+ --_pr-spoiler-cursor: auto;
3372
+ --_pr-soiler-after-o: 0;
3373
+ --_pr-soiler-child-o: 1;
3374
+ --_pr-soiler-child-visibility: visible;
3375
+ }
3376
+ .s-prose .spoiler > * {
3377
+ opacity: var(--_pr-soiler-child-o);
3378
+ transition: var(--_pr-spoiler-transition);
3379
+ visibility: var(--_pr-soiler-child-visibility);
3380
+ }
3381
+ .s-prose .youtube-embed {
3382
+ max-width: 640px;
3383
+ position: relative;
3384
+ width: 100%;
3385
+ }
3386
+ .s-prose .youtube-embed > div {
3387
+ height: 35px;
3388
+ padding-bottom: 56.25%;
3389
+ position: relative;
3390
+ width: 100%;
3391
+ }
3392
+ .s-prose .youtube-embed > div iframe {
3393
+ height: 100%;
3394
+ position: absolute;
3395
+ width: 100%;
3396
+ }
3397
+ .s-sidebarwidget {
3398
+ --_sw-content-px: calc(var(--su16) - var(--su1));
3399
+ --_sw-content-spacing-inner: var(--su12);
3400
+ --_sw-content-spacing-outer: var(--su16);
3401
+ --_sw-bc: var(--bc-medium);
3402
+ --_sw-after-bc: var(--_sw-bc);
3403
+ --_sw-content-bc: var(--bc-light);
3404
+ --_sw-header-bc: var(--_sw-content-bc);
3405
+ background-color: var(--white);
3406
+ border: var(--su-static1) solid var(--_sw-bc);
3407
+ border-radius: var(--br-sm);
3408
+ box-shadow: var(--bs-sm);
3409
+ font-size: var(--fs-body1);
3410
+ position: relative;
3411
+ }
3412
+ .s-sidebarwidget.s-sidebarwidget__blue {
3413
+ --_sw-bc: var(--blue-200);
3414
+ background-color: var(--blue-050);
3415
+ border-color: var(--_sw-bc);
3416
+ }
3417
+ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__blue {
3418
+ --_sw-bc: var(--blue-700);
3419
+ }
3420
+ .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
3421
+ background-color: var(--blue-100);
3422
+ color: var(--fc-medium);
3423
+ }
3424
+ .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header,
3425
+ .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--content,
3426
+ .s-sidebarwidget.s-sidebarwidget__blue:after {
3427
+ border-color: var(--_sw-bc);
3428
+ }
3429
+ .s-sidebarwidget.s-sidebarwidget__yellow {
3430
+ --_sw-bc: var(--yellow-200);
3431
+ background-color: var(--yellow-050);
3432
+ border-color: var(--_sw-bc);
3433
+ }
3434
+ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__yellow {
3435
+ --_sw-bc: var(--yellow-700);
3436
+ }
3437
+ .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
3438
+ background-color: var(--yellow-100);
3439
+ color: var(--fc-medium);
3440
+ }
3441
+ .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header,
3442
+ .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--content,
3443
+ .s-sidebarwidget.s-sidebarwidget__yellow:after {
3444
+ border-color: var(--_sw-bc);
3445
+ }
3446
+ .s-sidebarwidget.s-sidebarwidget__green {
3447
+ --_sw-bc: var(--green-200);
3448
+ background-color: var(--green-050);
3449
+ border-color: var(--_sw-bc);
3450
+ }
3451
+ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
3452
+ --_sw-bc: var(--green-700);
3453
+ }
3454
+ .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
3455
+ background-color: var(--green-100);
3456
+ color: var(--fc-medium);
3457
+ }
3458
+ .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header,
3459
+ .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--content,
3460
+ .s-sidebarwidget.s-sidebarwidget__green:after {
3461
+ border-color: var(--_sw-bc);
3462
+ }
3463
+ .s-sidebarwidget .s-sidebarwidget--action {
3464
+ color: var(--blue);
3465
+ float: right;
3466
+ font-size: var(--fs-fine);
3467
+ line-height: calc(var(--fs-body1) * 1.5);
3468
+ margin: 0 0 var(--su4) var(--su8);
3469
+ }
3470
+ .s-sidebarwidget .s-sidebarwidget--content {
3471
+ border-top: var(--su-static1) solid var(--_sw-content-bc);
3472
+ margin: 0;
3473
+ padding: var(--_sw-content-spacing-outer) var(--_sw-content-px);
3474
+ }
3475
+ .s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items {
3476
+ padding: calc(var(--_sw-content-spacing-outer) - var(--_sw-content-spacing-inner)) var(--_sw-content-px);
3477
+ }
3478
+ .s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items,
3479
+ .s-sidebarwidget .s-sidebarwidget--content.s-sidebarwidget__items.s-sidebarwidget__block-items .s-sidebarwidget--item {
3480
+ display: block;
3481
+ }
3482
+ .s-sidebarwidget .s-sidebarwidget--content:active {
3483
+ outline: none;
3484
+ }
3485
+ .s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__items),
3486
+ .s-sidebarwidget .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
3487
+ display: flex;
3488
+ }
3489
+ .s-sidebarwidget .s-sidebarwidget--header {
3490
+ background: var(--black-025);
3491
+ border-top: var(--su-static1) solid var(--_sw-header-bc);
3492
+ color: var(--black-600);
3493
+ font-size: var(--fs-body2);
3494
+ font-weight: normal;
3495
+ margin: 0;
3496
+ padding: var(--_sw-content-spacing-inner) var(--_sw-content-px);
3497
+ }
3498
+ .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control {
3499
+ cursor: pointer;
3500
+ }
3501
+ .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control:before {
3502
+ border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
3503
+ border-left-color: var(--bc-darker);
3504
+ border-right-width: 0;
3505
+ content: '';
3506
+ float: left;
3507
+ margin-right: var(--su12);
3508
+ margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px);
3509
+ transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
3510
+ }
3511
+ .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control[aria-expanded='true']:before {
3512
+ transform: rotate(90deg);
3513
+ }
3514
+ .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text {
3515
+ font-size: var(--fs-caption);
3516
+ font-weight: bold;
3517
+ }
3518
+ .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__small-bold-text .s-sidebarwidget--action {
3519
+ font-weight: normal;
3520
+ line-height: calc(var(--lh-base) * var(--fs-caption));
3521
+ }
3522
+ .s-sidebarwidget .s-sidebarwidget--header:first-child {
3523
+ border-top-left-radius: var(--br-sm);
3524
+ border-top-right-radius: var(--br-sm);
3525
+ }
3526
+ .s-sidebarwidget .s-sidebarwidget--header:active {
3527
+ outline: none;
3528
+ }
3529
+ .s-sidebarwidget .s-sidebarwidget--item {
3530
+ margin: var(--_sw-content-spacing-inner) 0;
3531
+ }
3532
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"],
3533
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"],
3534
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"],
3535
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] {
3536
+ color: var(--black);
3537
+ font-weight: bold;
3538
+ position: relative;
3539
+ }
3540
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"]:before,
3541
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"]:before,
3542
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"]:before,
3543
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"]:before {
3544
+ border-left-color: var(--theme-primary-color);
3545
+ border-left-style: solid;
3546
+ border-left-width: calc(var(--su-static1) * 3);
3547
+ content: '';
3548
+ height: calc(100% + var(--_sw-content-spacing-inner));
3549
+ left: 0;
3550
+ margin-left: calc(var(--_sw-content-px) * -1 - var(--su-static1));
3551
+ margin-top: calc(var(--_sw-content-spacing-inner) / 2 * -1);
3552
+ position: absolute;
3553
+ }
3554
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a,
3555
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a,
3556
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a,
3557
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a,
3558
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="true"] a:visited,
3559
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="true"] a:visited,
3560
+ .s-sidebarwidget .s-sidebarwidget--item[aria-current="page"] a:visited,
3561
+ .s-sidebarwidget .s-sidebarwidget--item > :first-child[aria-current="page"] a:visited {
3562
+ color: inherit;
3563
+ }
3564
+ .s-sidebarwidget .s-sidebarwidget--subnav {
3565
+ list-style-type: none;
3566
+ margin-left: var(--su8);
3567
+ padding-left: 0;
3568
+ }
3569
+ .s-sidebarwidget .s-sidebarwidget--subnav li {
3570
+ background-image: url("data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--black-100%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
3571
+ background-position: 0 calc((1.2em - 10px) / 2);
3572
+ background-repeat: no-repeat;
3573
+ background-size: auto 10px;
3574
+ margin-top: var(--su-static12);
3575
+ padding-left: var(--su-static16);
3576
+ }
3577
+ .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"],
3578
+ .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] {
3579
+ background-image: url("data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--theme-primary-color%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
3580
+ color: var(--black);
3581
+ font-weight: bold;
3582
+ }
3583
+ .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a,
3584
+ .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a,
3585
+ .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="page"] a:visited,
3586
+ .s-sidebarwidget .s-sidebarwidget--subnav li[aria-current="true"] a:visited {
3587
+ color: inherit;
3588
+ }
3589
+ .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items {
3590
+ border-collapse: separate;
3591
+ border-spacing: var(--_sw-content-spacing-inner);
3592
+ padding: calc(var(--_sw-content-spacing-outer) - var(--_sw-content-spacing-inner)) calc(var(--_sw-content-px) - var(--_sw-content-spacing-inner));
3370
3593
  }
3371
- .s-prose.s-prose__xs h1,
3372
- .s-prose.s-prose__sm h1,
3373
- .s-prose.s-prose__md h1 {
3374
- font-size: var(--fs-headline1-relative);
3594
+ .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item {
3595
+ display: table-row;
3375
3596
  }
3376
- .s-prose.s-prose__xs h2,
3377
- .s-prose.s-prose__sm h2,
3378
- .s-prose.s-prose__md h2 {
3379
- font-size: var(--fs-title-relative);
3597
+ .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item td {
3598
+ padding: 0;
3380
3599
  }
3381
- .s-prose.s-prose__xs h3,
3382
- .s-prose.s-prose__sm h3,
3383
- .s-prose.s-prose__md h3 {
3384
- font-size: var(--fs-subheading-relative);
3600
+ .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link),
3601
+ .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link):visited {
3602
+ color: var(--black-500);
3385
3603
  }
3386
- .s-prose.s-prose__xs h4,
3387
- .s-prose.s-prose__sm h4,
3388
- .s-prose.s-prose__md h4 {
3389
- font-size: var(--fs-body3-relative);
3604
+ .s-sidebarwidget:before {
3605
+ content: '';
3606
+ display: block;
3607
+ margin-top: calc(var(--su-static1) * -1);
3390
3608
  }
3391
- .s-prose.s-prose__xs h5,
3392
- .s-prose.s-prose__sm h5,
3393
- .s-prose.s-prose__md h5 {
3394
- font-size: var(--fs-body2-relative);
3609
+ .s-sidebarwidget:after {
3610
+ border: var(--su-static1) solid var(--_sw-after-bc);
3611
+ border-radius: var(--br-sm);
3612
+ clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
3613
+ content: '';
3614
+ height: calc(2px + var(--br-sm));
3615
+ left: calc(var(--su-static1) * -1);
3616
+ pointer-events: none;
3617
+ position: absolute;
3618
+ right: calc(var(--su-static1) * -1);
3619
+ top: calc(var(--su-static1) * -1);
3395
3620
  }
3396
3621
  .s-spinner {
3397
3622
  --_sp-baw: calc(var(--su-static1) * 3);
@@ -3951,6 +4176,30 @@ body.theme-highcontrast .s-topbar__dark {
3951
4176
  body.theme-highcontrast .s-topbar__dark .s-badge {
3952
4177
  border-color: currentColor;
3953
4178
  }
4179
+ .s-topbar--navigation {
4180
+ display: flex;
4181
+ height: 100%;
4182
+ overflow-x: auto;
4183
+ scrollbar-color: var(--scrollbar) transparent;
4184
+ margin-left: auto;
4185
+ }
4186
+ .s-topbar--navigation::-webkit-scrollbar {
4187
+ width: calc(var(--su-static12) - var(--su-static2));
4188
+ height: calc(var(--su-static12) - var(--su-static2));
4189
+ background-color: transparent;
4190
+ }
4191
+ .s-topbar--navigation::-webkit-scrollbar-track {
4192
+ border-radius: calc(var(--su-static12) - var(--su-static2));
4193
+ background-color: transparent;
4194
+ }
4195
+ .s-topbar--navigation::-webkit-scrollbar-thumb {
4196
+ border-radius: calc(var(--su-static12) - var(--su-static2));
4197
+ background-color: var(--scrollbar);
4198
+ }
4199
+ .s-topbar--navigation::-webkit-scrollbar-corner {
4200
+ background-color: transparent;
4201
+ border-color: transparent;
4202
+ }
3954
4203
  .s-topbar .s-topbar--content {
3955
4204
  display: flex;
3956
4205
  height: 100%;
@@ -4394,311 +4643,55 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
4394
4643
  .s-user-card .s-user-card--type a {
4395
4644
  color: inherit;
4396
4645
  }
4397
- .s-sidebarwidget {
4398
- --s-sidebarwidget-content-padding: calc(var(--su16) - var(--su1));
4399
- --s-sidebarwidget-content-inner-spacing: var(--su12);
4400
- --s-sidebarwidget-content-outer-spacing: var(--su16);
4401
- --s-sidebarwidget-outer-border-color: var(--bc-medium);
4402
- --s-sidebarwidget-content-separator-color: var(--bc-light);
4403
- --s-sidebarwidget-header-background-color: var(--black-025);
4404
- position: relative;
4405
- border: 1px solid var(--s-sidebarwidget-outer-border-color);
4406
- border-radius: var(--br-sm);
4407
- box-shadow: var(--bs-sm);
4408
- font-size: var(--fs-body1);
4409
- background-color: var(--white);
4410
- }
4411
- .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link),
4412
- .s-sidebarwidget:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link):visited {
4413
- color: var(--black-500);
4414
- }
4415
- .s-sidebarwidget:before {
4416
- content: '';
4417
- display: block;
4418
- margin-top: -1px;
4419
- }
4420
- .s-sidebarwidget:after {
4421
- content: '';
4422
- position: absolute;
4423
- top: -1px;
4424
- right: -1px;
4425
- left: -1px;
4426
- height: calc(2px + var(--br-sm));
4427
- border-top: 1px solid var(--s-sidebarwidget-outer-border-color);
4428
- border-radius: var(--br-sm);
4429
- pointer-events: none;
4430
- }
4431
- @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%))) or (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
4432
- .s-sidebarwidget:after {
4433
- -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
4434
- clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
4435
- border: 1px solid var(--s-sidebarwidget-outer-border-color);
4436
- }
4437
- }
4438
- .s-sidebarwidget--header,
4439
- .s-sidebarwidget--content {
4440
- border-top: 1px solid var(--s-sidebarwidget-content-separator-color);
4441
- }
4442
- .s-sidebarwidget--header:active,
4443
- .s-sidebarwidget--content:active {
4444
- outline: none;
4646
+ @font-face {
4647
+ font-family: "Segoe UI Adjusted";
4648
+ src: local(Segoe UI);
4649
+ ascent-override: 95%;
4445
4650
  }
4446
- .s-sidebarwidget--header {
4447
- padding: var(--s-sidebarwidget-content-inner-spacing) var(--s-sidebarwidget-content-padding);
4448
- background: var(--s-sidebarwidget-header-background-color);
4449
- color: var(--black-600);
4450
- font-size: var(--fs-body2);
4451
- font-weight: normal;
4452
- margin: 0;
4651
+ @font-face {
4652
+ font-family: "Segoe UI Adjusted";
4653
+ src: local(Segoe UI Italic);
4654
+ ascent-override: 95%;
4655
+ font-style: italic;
4453
4656
  }
4454
- .s-sidebarwidget--header:first-child {
4455
- border-top-left-radius: var(--br-sm);
4456
- border-top-right-radius: var(--br-sm);
4657
+ @font-face {
4658
+ font-family: "Segoe UI Adjusted";
4659
+ src: local(Segoe UI Semibold);
4660
+ ascent-override: 95%;
4661
+ font-weight: 600;
4457
4662
  }
4458
- .s-sidebarwidget--header.s-sidebarwidget__small-bold-text {
4459
- font-size: var(--fs-caption);
4460
- font-weight: bold;
4663
+ @font-face {
4664
+ font-family: "Segoe UI Adjusted";
4665
+ src: local(Segoe UI Semibold Italic);
4666
+ ascent-override: 95%;
4667
+ font-style: italic;
4668
+ font-weight: 600;
4461
4669
  }
4462
- .s-sidebarwidget--header.s-sidebarwidget__small-bold-text .-action {
4463
- font-weight: normal;
4464
- line-height: calc(1.3 * var(--fs-caption));
4670
+ @font-face {
4671
+ font-family: "Segoe UI Adjusted";
4672
+ src: local(Segoe UI Bold);
4673
+ ascent-override: 90%;
4674
+ font-weight: 700;
4465
4675
  }
4466
- .s-sidebarwidget--header.s-sidebarwidget__expanding-control {
4467
- cursor: pointer;
4676
+ @font-face {
4677
+ font-family: "Segoe UI Adjusted";
4678
+ src: local(Segoe UI Bold Italic);
4679
+ ascent-override: 95%;
4680
+ font-style: italic;
4681
+ font-weight: 700;
4468
4682
  }
4469
- .s-sidebarwidget--header.s-sidebarwidget__expanding-control:before {
4470
- content: '';
4471
- float: left;
4472
- margin-top: calc(1.3em / 2 - 5px);
4473
- margin-right: var(--su12);
4474
- border: 5px solid transparent;
4475
- border-left-color: var(--bc-darker);
4476
- border-right-width: 0;
4477
- transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
4478
- transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
4479
- transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
4683
+ @font-face {
4684
+ font-family: "Segoe UI Adjusted";
4685
+ src: local(Segoe UI Black);
4686
+ ascent-override: 95%;
4687
+ font-weight: 800;
4480
4688
  }
4481
- .s-sidebarwidget--header.s-sidebarwidget__expanding-control[aria-expanded='true']:before {
4482
- -webkit-transform: rotate(90deg);
4483
- transform: rotate(90deg);
4484
- }
4485
- .s-sidebarwidget--action {
4486
- float: right;
4487
- margin: 0 0 var(--su4) var(--su8);
4488
- color: var(--blue);
4489
- font-size: var(--fs-fine);
4490
- line-height: 19.5px;
4491
- }
4492
- table.s-sidebarwidget--content.s-sidebarwidget__items {
4493
- padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) calc(var(--s-sidebarwidget-content-padding) - var(--s-sidebarwidget-content-inner-spacing));
4494
- border-collapse: separate;
4495
- border-spacing: var(--s-sidebarwidget-content-inner-spacing);
4496
- }
4497
- table.s-sidebarwidget--content.s-sidebarwidget__items tr.-item {
4498
- display: table-row;
4499
- }
4500
- table.s-sidebarwidget--content.s-sidebarwidget__items tr.-item td {
4501
- padding: 0;
4502
- }
4503
- .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__items) {
4504
- display: flex;
4505
- }
4506
- .s-sidebarwidget--content:not(table):not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
4507
- display: flex;
4508
- }
4509
- .s-sidebarwidget--content {
4510
- margin: 0;
4511
- padding: var(--s-sidebarwidget-content-outer-spacing) var(--s-sidebarwidget-content-padding);
4512
- }
4513
- .s-sidebarwidget--content.s-sidebarwidget__items {
4514
- display: block;
4515
- padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) var(--s-sidebarwidget-content-padding);
4516
- }
4517
- .s-sidebarwidget--content.s-sidebarwidget__items.s-sidebarwidget__block-items .s-sidebarwidget--item {
4518
- display: block !important;
4519
- }
4520
- .s-sidebarwidget--item {
4521
- margin: var(--s-sidebarwidget-content-inner-spacing) 0;
4522
- }
4523
- .s-sidebarwidget--item[aria-current="true"],
4524
- .s-sidebarwidget--item > :first-child[aria-current="true"],
4525
- .s-sidebarwidget--item[aria-current="page"],
4526
- .s-sidebarwidget--item > :first-child[aria-current="page"] {
4527
- position: relative;
4528
- color: var(--black);
4529
- font-weight: bold;
4530
- }
4531
- .s-sidebarwidget--item[aria-current="true"]:before,
4532
- .s-sidebarwidget--item > :first-child[aria-current="true"]:before,
4533
- .s-sidebarwidget--item[aria-current="page"]:before,
4534
- .s-sidebarwidget--item > :first-child[aria-current="page"]:before {
4535
- content: '';
4536
- position: absolute;
4537
- left: 0;
4538
- height: calc(100% + var(--s-sidebarwidget-content-inner-spacing));
4539
- margin-top: calc(var(--s-sidebarwidget-content-inner-spacing) / 2 * -1);
4540
- margin-left: calc(var(--s-sidebarwidget-content-padding) * -1 - 1px);
4541
- border-left-width: 3px;
4542
- border-left-style: solid;
4543
- }
4544
- .s-sidebarwidget--item[aria-current="true"] a,
4545
- .s-sidebarwidget--item > :first-child[aria-current="true"] a,
4546
- .s-sidebarwidget--item[aria-current="page"] a,
4547
- .s-sidebarwidget--item > :first-child[aria-current="page"] a,
4548
- .s-sidebarwidget--item[aria-current="true"] a:visited,
4549
- .s-sidebarwidget--item > :first-child[aria-current="true"] a:visited,
4550
- .s-sidebarwidget--item[aria-current="page"] a:visited,
4551
- .s-sidebarwidget--item > :first-child[aria-current="page"] a:visited {
4552
- color: inherit;
4553
- }
4554
- .s-sidebarwidget--subnav {
4555
- list-style-type: none;
4556
- padding-left: 0;
4557
- margin-left: var(--su8);
4558
- }
4559
- .s-sidebarwidget--subnav li {
4560
- margin-top: 12px;
4561
- padding-left: 16px;
4562
- background-position: 0 calc((1.2em - 10px) / 2);
4563
- background-repeat: no-repeat;
4564
- background-size: auto 10px;
4565
- background-image: url("data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--black-100%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
4566
- }
4567
- .s-sidebarwidget--subnav li[aria-current="true"],
4568
- .s-sidebarwidget--subnav li[aria-current="page"] {
4569
- color: var(--black);
4570
- font-weight: bold;
4571
- }
4572
- .s-sidebarwidget--subnav li[aria-current="true"] a,
4573
- .s-sidebarwidget--subnav li[aria-current="page"] a,
4574
- .s-sidebarwidget--subnav li[aria-current="true"] a:visited,
4575
- .s-sidebarwidget--subnav li[aria-current="page"] a:visited {
4576
- color: inherit;
4577
- }
4578
- .s-sidebarwidget__blue {
4579
- border-color: var(--blue-200);
4580
- background-color: var(--blue-050);
4581
- }
4582
- body.theme-highcontrast .s-sidebarwidget__blue {
4583
- border-color: var(--blue-700);
4584
- }
4585
- .s-sidebarwidget__blue .s-sidebarwidget--header {
4586
- background-color: var(--blue-100);
4587
- color: var(--fc-medium);
4588
- }
4589
- .s-sidebarwidget__blue .s-sidebarwidget--header,
4590
- .s-sidebarwidget__blue .s-sidebarwidget--content {
4591
- border-color: var(--blue-200);
4592
- }
4593
- body.theme-highcontrast .s-sidebarwidget__blue .s-sidebarwidget--header,
4594
- body.theme-highcontrast .s-sidebarwidget__blue .s-sidebarwidget--content {
4595
- border-color: var(--blue-700);
4596
- }
4597
- .s-sidebarwidget__blue:after {
4598
- border-color: var(--blue-200);
4599
- }
4600
- body.theme-highcontrast .s-sidebarwidget__blue:after {
4601
- border-color: var(--blue-700);
4602
- }
4603
- .s-sidebarwidget__yellow {
4604
- border-color: var(--yellow-200);
4605
- background-color: var(--yellow-050);
4606
- }
4607
- body.theme-highcontrast .s-sidebarwidget__yellow {
4608
- border-color: var(--yellow-700);
4609
- }
4610
- .s-sidebarwidget__yellow .s-sidebarwidget--header {
4611
- background-color: var(--yellow-100);
4612
- color: var(--fc-medium);
4613
- }
4614
- .s-sidebarwidget__yellow .s-sidebarwidget--header,
4615
- .s-sidebarwidget__yellow .s-sidebarwidget--content {
4616
- border-color: var(--yellow-200);
4617
- }
4618
- body.theme-highcontrast .s-sidebarwidget__yellow .s-sidebarwidget--header,
4619
- body.theme-highcontrast .s-sidebarwidget__yellow .s-sidebarwidget--content {
4620
- border-color: var(--yellow-700);
4621
- }
4622
- .s-sidebarwidget__yellow:after {
4623
- border-color: var(--yellow-200);
4624
- }
4625
- body.theme-highcontrast .s-sidebarwidget__yellow:after {
4626
- border-color: var(--yellow-700);
4627
- }
4628
- .s-sidebarwidget__green {
4629
- border-color: var(--green-200);
4630
- background-color: var(--green-050);
4631
- }
4632
- body.theme-highcontrast .s-sidebarwidget__green {
4633
- border-color: var(--green-700);
4634
- }
4635
- .s-sidebarwidget__green .s-sidebarwidget--header {
4636
- background-color: var(--green-100);
4637
- color: var(--fc-medium);
4638
- }
4639
- .s-sidebarwidget__green .s-sidebarwidget--header,
4640
- .s-sidebarwidget__green .s-sidebarwidget--content {
4641
- border-color: var(--green-200);
4642
- }
4643
- body.theme-highcontrast .s-sidebarwidget__green .s-sidebarwidget--header,
4644
- body.theme-highcontrast .s-sidebarwidget__green .s-sidebarwidget--content {
4645
- border-color: var(--green-700);
4646
- }
4647
- .s-sidebarwidget__green:after {
4648
- border-color: var(--green-200);
4649
- }
4650
- body.theme-highcontrast .s-sidebarwidget__green:after {
4651
- border-color: var(--green-700);
4652
- }
4653
- @font-face {
4654
- font-family: "Segoe UI Adjusted";
4655
- src: local(Segoe UI);
4656
- ascent-override: 95%;
4657
- }
4658
- @font-face {
4659
- font-family: "Segoe UI Adjusted";
4660
- src: local(Segoe UI Italic);
4661
- ascent-override: 95%;
4662
- font-style: italic;
4663
- }
4664
- @font-face {
4665
- font-family: "Segoe UI Adjusted";
4666
- src: local(Segoe UI Semibold);
4667
- ascent-override: 95%;
4668
- font-weight: 600;
4669
- }
4670
- @font-face {
4671
- font-family: "Segoe UI Adjusted";
4672
- src: local(Segoe UI Semibold Italic);
4673
- ascent-override: 95%;
4674
- font-style: italic;
4675
- font-weight: 600;
4676
- }
4677
- @font-face {
4678
- font-family: "Segoe UI Adjusted";
4679
- src: local(Segoe UI Bold);
4680
- ascent-override: 90%;
4681
- font-weight: 700;
4682
- }
4683
- @font-face {
4684
- font-family: "Segoe UI Adjusted";
4685
- src: local(Segoe UI Bold Italic);
4686
- ascent-override: 95%;
4687
- font-style: italic;
4688
- font-weight: 700;
4689
- }
4690
- @font-face {
4691
- font-family: "Segoe UI Adjusted";
4692
- src: local(Segoe UI Black);
4693
- ascent-override: 95%;
4694
- font-weight: 800;
4695
- }
4696
- @font-face {
4697
- font-family: "Segoe UI Adjusted";
4698
- src: local(Segoe UI Black Italic);
4699
- ascent-override: 95%;
4700
- font-style: italic;
4701
- font-weight: 800;
4689
+ @font-face {
4690
+ font-family: "Segoe UI Adjusted";
4691
+ src: local(Segoe UI Black Italic);
4692
+ ascent-override: 95%;
4693
+ font-style: italic;
4694
+ font-weight: 800;
4702
4695
  }
4703
4696
  html,
4704
4697
  body {
@@ -21233,27 +21226,82 @@ body *:after {
21233
21226
  box-sizing: inherit;
21234
21227
  }
21235
21228
  .s-btn {
21236
- position: relative;
21229
+ --_bu-baw: var(--su-static1);
21230
+ --_bu-bc: transparent;
21231
+ --_bu-bg: transparent;
21232
+ --_bu-br: var(--br-sm);
21233
+ --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.7);
21234
+ --_bu-fc: var(--theme-button-color);
21235
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
21236
+ --_bu-fs: var(--fs-body1);
21237
+ --_bu-p: 0.8em;
21238
+ --_bu-bc-selected: transparent;
21239
+ --_bu-bg-active: var(--theme-button-active-background-color);
21240
+ --_bu-bg-hover: var(--theme-button-hover-background-color);
21241
+ --_bu-bg-selected: var(--theme-button-selected-background-color);
21242
+ --_bu-fc-active: var(--theme-button-hover-color);
21243
+ --_bu-fc-hover: var(--theme-button-hover-color);
21244
+ --_bu-fc-selected: var(--theme-button-selected-color);
21245
+ --_bu-filled-bc: var(--theme-button-filled-border-color);
21246
+ --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
21247
+ --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
21248
+ --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
21249
+ --_bu-filled-bg: var(--theme-button-filled-background-color);
21250
+ --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
21251
+ --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
21252
+ --_bu-filled-fc: var(--theme-button-filled-color);
21253
+ --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
21254
+ --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
21255
+ --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
21256
+ --_bu-outlined-bc: var(--theme-button-outlined-border-color);
21257
+ --_bu-outlined-bg: var(--theme-button-outlined-background-color);
21258
+ --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
21259
+ --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
21260
+ --_bu-outlined-fc-selected: var(--theme-button-selected-color);
21261
+ --_bu-badge-o: 0.5;
21262
+ --_bu-dropdown-bw: var(--su-static4);
21263
+ --_bu-number-fc: var(--white);
21264
+ --_bu-number-fc-selected: var(--_bu-number-fc);
21265
+ background-color: var(--_bu-bg);
21266
+ border: var(--_bu-baw) solid var(--_bu-bc);
21267
+ border-radius: var(--_bu-br);
21268
+ box-shadow: var(--_bu-bs);
21269
+ color: var(--_bu-fc);
21270
+ font-size: var(--_bu-fs);
21271
+ padding: var(--_bu-p);
21272
+ cursor: pointer;
21237
21273
  display: inline-block;
21238
- padding: 0.8em;
21239
- color: var(--theme-button-color);
21240
- border: 1px solid transparent;
21241
- border-radius: var(--br-sm);
21242
- background-color: transparent;
21243
- outline: none;
21244
21274
  font-family: inherit;
21245
- font-size: var(--fs-body1);
21246
21275
  font-weight: normal;
21247
21276
  line-height: var(--lh-sm);
21277
+ position: relative;
21278
+ outline: none;
21248
21279
  text-align: center;
21249
21280
  text-decoration: none;
21250
- cursor: pointer;
21251
21281
  user-select: none;
21252
21282
  }
21283
+ @media (prefers-color-scheme: dark) {
21284
+ body.theme-system .s-btn {
21285
+ --_bu-bs: none;
21286
+ }
21287
+ }
21288
+ body.theme-dark .s-btn,
21289
+ .theme-dark__forced .s-btn,
21290
+ body.theme-system .theme-dark__forced .s-btn {
21291
+ --_bu-bs: none;
21292
+ }
21253
21293
  body.theme-highcontrast .s-btn {
21254
- border-color: currentColor;
21294
+ --_bu-bc: currentColor;
21295
+ --_bu-filled-bc: var(--_bu-bc);
21296
+ --_bu-outlined-bc: var(--_bu-bc);
21297
+ --_bu-bc-selected: var(--_bu-bc);
21298
+ --_bu-badge-o: 0.8;
21255
21299
  }
21256
- body.theme-highcontrast .s-btn:not(.s-btn__link):not(.s-btn__unset) {
21300
+ .s-btn[disabled],
21301
+ .s-btn[aria-disabled="true"] {
21302
+ --_bu-bs: none !important;
21303
+ opacity: var(--_o-disabled-static);
21304
+ pointer-events: none;
21257
21305
  text-decoration: none;
21258
21306
  }
21259
21307
  button .s-btn,
@@ -21264,536 +21312,151 @@ button[type="reset"] .s-btn {
21264
21312
  .s-btn.grid {
21265
21313
  display: flex;
21266
21314
  }
21267
- .s-btn:hover,
21268
- .s-btn:focus,
21269
- .s-btn:active {
21270
- color: var(--theme-button-hover-color);
21271
- background: var(--theme-button-hover-background-color);
21272
- text-decoration: none;
21273
- }
21274
- .s-btn:active {
21275
- background: var(--theme-button-active-background-color);
21276
- }
21277
- .s-btn:focus {
21278
- outline: none;
21279
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
21280
- }
21281
- .s-btn[disabled],
21282
- .s-btn[aria-disabled="true"] {
21283
- opacity: var(--_o-disabled-static);
21284
- pointer-events: none;
21285
- box-shadow: none !important;
21286
- }
21287
- .s-btn.is-selected {
21288
- color: var(--theme-button-selected-color);
21289
- background: var(--theme-button-selected-background-color);
21290
- box-shadow: none;
21291
- }
21292
- .s-btn.is-selected:focus {
21293
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
21294
- }
21295
- .s-btn.s-btn__dropdown {
21296
- padding-right: 2em;
21297
- }
21298
- .s-btn.s-btn__dropdown:after {
21299
- content: "";
21300
- position: absolute;
21301
- z-index: var(--zi-active);
21302
- top: calc(50% - 2px);
21303
- right: 0.8em;
21304
- border-style: solid;
21305
- border-width: var(--su-static4);
21306
- border-top-width: var(--su-static4);
21307
- border-bottom-width: 0;
21308
- border-color: currentColor transparent;
21309
- pointer-events: none;
21310
- }
21311
- .s-btn.s-btn__xs {
21312
- padding: 0.6em;
21313
- font-size: var(--fs-fine);
21314
- }
21315
- .s-btn.s-btn__xs.s-btn__dropdown {
21316
- padding-right: 1.5em;
21317
- }
21318
- .s-btn.s-btn__xs.s-btn__dropdown:after {
21319
- top: calc(50% - 2px);
21320
- right: 0.6em;
21321
- border-width: calc(var(--su-static4) - var(--su-static1));
21322
- border-top-width: calc(var(--su-static4) - var(--su-static1));
21323
- border-bottom-width: 0;
21324
- }
21325
- .s-btn.s-btn__sm {
21326
- font-size: var(--fs-caption);
21327
- }
21328
- .s-btn.s-btn__sm.s-btn__dropdown {
21329
- padding-right: 2.05em;
21330
- }
21331
- .s-btn.s-btn__md {
21332
- padding: 0.7em;
21333
- border-radius: calc(var(--br-sm) + 1px);
21334
- font-size: var(--fs-body3);
21335
- }
21336
- .s-btn.s-btn__md.s-btn__dropdown {
21337
- padding-right: 1.8em;
21338
- }
21339
- .s-btn.s-btn__md.s-btn__dropdown:after {
21340
- top: calc(50% - 2px);
21341
- right: 0.7em;
21342
- border-width: calc(var(--su-static4) + var(--su-static1));
21343
- border-top-width: calc(var(--su-static4) + var(--su-static1));
21344
- border-bottom-width: 0;
21345
- }
21346
- .s-btn .s-btn--badge {
21347
- opacity: var(--_o-disabled);
21348
- display: inline-block;
21349
- border-radius: var(--br-sm);
21350
- padding: var(--su2) calc(var(--su4) - var(--su1));
21351
- font-size: var(--fs-caption);
21352
- line-height: var(--lh-xs);
21353
- background-color: currentColor;
21354
- }
21355
- .s-btn .s-btn--number {
21356
- color: var(--white);
21357
- }
21358
- @media (prefers-color-scheme: dark) {
21359
- body.theme-system .s-btn__primary:not(.is-selected) .s-btn--number,
21360
- body.theme-system .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
21361
- color: var(--white);
21362
- }
21363
- }
21364
- body.theme-dark .s-btn__primary:not(.is-selected) .s-btn--number,
21365
- body.theme-dark .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number,
21366
- .theme-dark__forced .s-btn__primary:not(.is-selected) .s-btn--number,
21367
- .theme-dark__forced .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number,
21368
- body.theme-system .theme-dark__forced .s-btn__primary:not(.is-selected) .s-btn--number,
21369
- body.theme-system .theme-dark__forced .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
21370
- color: var(--white);
21371
- }
21372
- body.theme-highcontrast .s-btn__primary:not(.is-selected) .s-btn--number,
21373
- body.theme-highcontrast .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
21374
- color: var(--black);
21375
- }
21376
- .s-btn__outlined {
21377
- border-color: var(--theme-button-outlined-border-color);
21378
- }
21379
- .s-btn__outlined.is-selected {
21380
- border-color: var(--theme-button-outlined-selected-border-color);
21381
- }
21382
- .s-btn__filled {
21383
- color: var(--theme-button-filled-color);
21384
- background-color: var(--theme-button-filled-background-color);
21385
- border-color: var(--theme-button-filled-border-color);
21386
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.7);
21387
- }
21388
- @media (prefers-color-scheme: dark) {
21389
- body.theme-system .s-btn__filled:not(:focus) {
21390
- box-shadow: none;
21391
- }
21392
- }
21393
- body.theme-dark .s-btn__filled:not(:focus),
21394
- .theme-dark__forced .s-btn__filled:not(:focus),
21395
- body.theme-system .theme-dark__forced .s-btn__filled:not(:focus) {
21396
- box-shadow: none;
21397
- }
21398
- .s-btn__filled:hover,
21399
- .s-btn__filled:focus,
21400
- .s-btn__filled:active {
21401
- color: var(--theme-button-filled-hover-color);
21402
- background-color: var(--theme-button-filled-hover-background-color);
21403
- }
21404
- .s-btn__filled:active {
21405
- background-color: var(--theme-button-filled-active-background-color);
21406
- border-color: var(--theme-button-filled-active-border-color);
21407
- box-shadow: none;
21408
- }
21409
- body.theme-highcontrast .s-btn__filled:focus {
21410
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
21411
- }
21412
- .s-btn__filled.is-selected {
21413
- color: var(--theme-button-filled-selected-color);
21414
- background-color: var(--theme-button-filled-selected-background-color);
21415
- border-color: var(--theme-button-filled-selected-border-color);
21416
- box-shadow: none;
21417
- }
21418
- .s-btn__muted {
21419
- color: var(--black-500);
21420
- }
21421
- body.theme-highcontrast .s-btn__muted.s-btn__filled {
21422
- border-color: transparent;
21423
- }
21424
- .s-btn__muted:hover,
21425
- .s-btn__muted:focus,
21426
- .s-btn__muted:active {
21427
- color: var(--black-600);
21428
- background-color: var(--black-025);
21429
- }
21430
- .s-btn__muted:active {
21431
- background: var(--black-050);
21432
- }
21433
- .s-btn__muted:focus {
21434
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21435
- }
21436
- .s-btn__muted.is-selected {
21437
- color: var(--black-700);
21438
- background-color: var(--black-075);
21439
- }
21440
- .s-btn__muted.is-selected:focus {
21441
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21442
- }
21443
- .s-btn__muted.s-btn__outlined {
21444
- border-color: var(--black-300);
21445
- }
21446
- .s-btn__muted.s-btn__outlined.is-selected {
21447
- border-color: var(--black-400);
21448
- }
21449
- .s-btn__muted.s-btn__filled {
21450
- color: var(--black-700);
21451
- background-color: var(--black-100);
21452
- border-color: transparent;
21453
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
21454
- }
21455
- @media (prefers-color-scheme: dark) {
21456
- body.theme-system .s-btn__muted.s-btn__filled:not(:focus) {
21457
- box-shadow: none;
21458
- }
21459
- }
21460
- body.theme-dark .s-btn__muted.s-btn__filled:not(:focus),
21461
- .theme-dark__forced .s-btn__muted.s-btn__filled:not(:focus),
21462
- body.theme-system .theme-dark__forced .s-btn__muted.s-btn__filled:not(:focus) {
21463
- box-shadow: none;
21464
- }
21465
- body.theme-highcontrast .s-btn__muted.s-btn__filled {
21466
- background-color: var(--black-400);
21467
- border-color: transparent;
21468
- color: var(--white);
21469
- }
21470
- body.theme-highcontrast .s-btn__muted.s-btn__filled .s-btn--number {
21471
- color: var(--black);
21472
- }
21473
- .s-btn__muted.s-btn__filled:hover,
21474
- .s-btn__muted.s-btn__filled:focus,
21475
- .s-btn__muted.s-btn__filled:active {
21476
- color: var(--black-700);
21477
- background-color: var(--black-150);
21478
- }
21479
- .s-btn__muted.s-btn__filled:active {
21480
- background-color: var(--black-200);
21481
- box-shadow: none;
21482
- }
21483
- .s-btn__muted.s-btn__filled:focus {
21484
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21485
- }
21486
- body.theme-highcontrast .s-btn__muted.s-btn__filled:focus {
21487
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21488
- }
21489
- .s-btn__muted.s-btn__filled.is-selected {
21490
- color: var(--black-800);
21491
- background-color: var(--black-350);
21492
- box-shadow: none;
21493
- }
21494
- body.theme-highcontrast .s-btn__muted.s-btn__filled.is-selected {
21495
- background-color: var(--black-700);
21496
- }
21497
- body.theme-highcontrast .s-btn__muted.s-btn__filled.is-selected .s-btn--number {
21498
- color: var(--black);
21499
- }
21500
- .s-btn__muted.s-btn__filled.is-selected:focus {
21501
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21502
- }
21503
- .s-btn__danger {
21504
- color: var(--red-600);
21505
- }
21506
- body.theme-highcontrast .s-btn__danger.s-btn__filled {
21507
- border-color: transparent;
21508
- }
21509
- .s-btn__danger:hover,
21510
- .s-btn__danger:focus,
21511
- .s-btn__danger:active {
21512
- color: var(--red-700);
21513
- background-color: var(--red-050);
21514
- }
21515
- .s-btn__danger:active {
21516
- background-color: var(--red-100);
21517
- }
21518
- .s-btn__danger:focus {
21519
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
21520
- }
21521
- body.theme-highcontrast .s-btn__danger:focus {
21522
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
21523
- }
21524
- .s-btn__danger.is-selected {
21525
- color: var(--red-900);
21526
- background-color: var(--red-200);
21527
- }
21528
- .s-btn__danger.is-selected:focus {
21529
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
21530
- }
21531
- .s-btn__danger.s-btn__outlined {
21532
- border-color: var(--red-500);
21533
- }
21534
- .s-btn__danger.s-btn__outlined.is-selected {
21535
- border-color: var(--red-600);
21536
- }
21537
- .s-btn__danger.s-btn__filled {
21538
- color: hsl(0, 0%, 100%);
21539
- background-color: var(--red-500);
21540
- border-color: transparent;
21541
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
21542
- }
21543
- @media (prefers-color-scheme: dark) {
21544
- body.theme-system .s-btn__danger.s-btn__filled:not(:focus) {
21545
- box-shadow: none;
21546
- }
21547
- }
21548
- body.theme-dark .s-btn__danger.s-btn__filled:not(:focus),
21549
- .theme-dark__forced .s-btn__danger.s-btn__filled:not(:focus),
21550
- body.theme-system .theme-dark__forced .s-btn__danger.s-btn__filled:not(:focus) {
21551
- box-shadow: none;
21552
- }
21553
- body.theme-highcontrast .s-btn__danger.s-btn__filled {
21554
- color: var(--white);
21555
- }
21556
- body.theme-highcontrast .s-btn__danger.s-btn__filled:focus {
21557
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
21558
- }
21559
- body.theme-highcontrast .s-btn__danger.s-btn__filled .s-btn--number {
21560
- color: var(--black);
21561
- }
21562
- .s-btn__danger.s-btn__filled:hover,
21563
- .s-btn__danger.s-btn__filled:focus,
21564
- .s-btn__danger.s-btn__filled:active {
21565
- color: hsl(0, 0%, 100%);
21566
- background-color: var(--red-600);
21567
- }
21568
- .s-btn__danger.s-btn__filled:active {
21569
- background-color: var(--red-700);
21570
- box-shadow: none;
21571
- }
21572
- .s-btn__danger.s-btn__filled:focus {
21573
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
21574
- }
21575
- .s-btn__danger.s-btn__filled.is-selected {
21576
- color: var(--white);
21577
- background-color: var(--red-800);
21578
- box-shadow: none;
21579
- }
21580
- .s-btn__danger.s-btn__filled.is-selected:focus {
21581
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
21582
- }
21583
- body.theme-highcontrast .s-btn__danger.s-btn__filled.is-selected .s-btn--number {
21584
- color: var(--black);
21585
- }
21586
- .s-btn__danger.s-btn__filled .s-btn--number {
21587
- color: var(--black-900);
21588
- }
21589
- .s-btn__primary {
21590
- color: var(--theme-button-primary-color);
21591
- background-color: var(--theme-button-primary-background-color);
21592
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
21593
- }
21594
- @media (prefers-color-scheme: dark) {
21595
- body.theme-system .s-btn__primary:not(:focus) {
21596
- box-shadow: none;
21597
- }
21598
- body.theme-system .s-btn__primary:not(.is-selected) {
21599
- background-color: var(--theme-secondary-300);
21600
- color: var(--black);
21601
- }
21602
- }
21603
- body.theme-dark .s-btn__primary:not(:focus),
21604
- .theme-dark__forced .s-btn__primary:not(:focus),
21605
- body.theme-system .theme-dark__forced .s-btn__primary:not(:focus) {
21606
- box-shadow: none;
21607
- }
21608
- body.theme-dark .s-btn__primary:not(.is-selected),
21609
- .theme-dark__forced .s-btn__primary:not(.is-selected),
21610
- body.theme-system .theme-dark__forced .s-btn__primary:not(.is-selected) {
21611
- background-color: var(--theme-secondary-300);
21612
- color: var(--black);
21613
- }
21614
- body.theme-highcontrast .s-btn__primary:not(.is-selected) {
21615
- border-color: transparent;
21616
- background-color: var(--theme-secondary-400);
21617
- color: var(--white);
21618
- }
21619
- .theme-light__forced .s-btn__primary,
21620
- body.theme-system .theme-light__forced .s-btn__primary,
21621
- body.theme-dark .theme-light__forced .s-btn__primary {
21622
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
21623
- }
21624
- .theme-light__forced .s-btn__primary:not(.is-selected),
21625
- body.theme-system .theme-light__forced .s-btn__primary:not(.is-selected),
21626
- body.theme-dark .theme-light__forced .s-btn__primary:not(.is-selected) {
21627
- color: var(--white);
21628
- }
21629
- .s-btn__primary:hover,
21630
- .s-btn__primary:focus,
21631
- .s-btn__primary:active {
21632
- color: var(--theme-button-primary-hover-color);
21633
- background-color: var(--theme-button-primary-hover-background-color);
21315
+ .s-btn.is-loading .svg-icon:first-child {
21316
+ margin-left: -23px;
21317
+ opacity: 0;
21634
21318
  }
21635
- .s-btn__primary:active {
21636
- background-color: var(--theme-button-primary-active-background-color);
21319
+ .s-btn.is-selected,
21320
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn {
21321
+ background-color: var(--_bu-bg-selected);
21322
+ border-color: var(--_bu-bc-selected);
21323
+ color: var(--_bu-fc-selected);
21324
+ }
21325
+ .s-btn.is-selected .s-btn--number,
21326
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn .s-btn--number {
21327
+ color: var(--_bu-number-fc-selected);
21328
+ }
21329
+ .s-btn.is-selected.s-btn__filled,
21330
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__filled {
21331
+ border-color: var(--_bu-filled-bc-selected);
21332
+ background-color: var(--_bu-filled-bg-selected);
21333
+ color: var(--_bu-filled-fc-selected);
21334
+ }
21335
+ .s-btn.is-selected.s-btn__outlined,
21336
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined {
21337
+ border-color: var(--_bu-outlined-bc-selected);
21338
+ background-color: var(--_bu-outlined-bg-selected);
21339
+ color: var(--_bu-outlined-fc-selected);
21340
+ }
21341
+ body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
21342
+ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
21343
+ --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
21344
+ --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
21345
+ --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
21346
+ --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
21347
+ }
21348
+ .s-btn.is-selected:not(:focus),
21349
+ .s-btn-group.s-btn-group--radio .s-btn--radio:checked:not(:focus) + .s-btn {
21637
21350
  box-shadow: none;
21638
21351
  }
21639
- body.theme-highcontrast .s-btn__primary:focus {
21640
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
21641
- }
21642
- .s-btn__primary.is-selected {
21643
- color: var(--theme-button-primary-selected-color);
21644
- background-color: var(--theme-button-primary-selected-background-color);
21645
- }
21646
- .s-btn__primary .s-btn--number {
21647
- color: var(--theme-button-primary-number-color);
21648
- }
21649
- .s-btn__google {
21650
- border-color: var(--bc-medium);
21651
- background-color: var(--white);
21652
- color: var(--black-700);
21653
- }
21654
- .s-btn__google:hover,
21655
- .s-btn__google:focus {
21656
- border-color: var(--bc-darker);
21657
- background-color: var(--black-025);
21658
- color: var(--black-800);
21352
+ .s-btn.s-btn__filled {
21353
+ border-color: var(--_bu-filled-bc);
21354
+ background-color: var(--_bu-filled-bg);
21355
+ color: var(--_bu-filled-fc);
21659
21356
  }
21660
- .s-btn__google:active {
21661
- background-color: var(--black-050);
21662
- color: var(--black-900);
21663
- }
21664
- .s-btn__google:focus {
21665
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21666
- }
21667
- .s-btn__facebook {
21668
- border-color: transparent;
21669
- background-color: #385499;
21670
- color: #fff;
21671
- }
21672
- body.theme-highcontrast .s-btn__facebook {
21673
- border-color: transparent;
21674
- }
21675
- .s-btn__facebook:hover,
21676
- .s-btn__facebook:focus {
21677
- background-color: #314a86;
21678
- color: #fff;
21679
- }
21680
- .s-btn__facebook:active {
21681
- background-color: #2a4074;
21682
- color: #fff;
21683
- }
21684
- .s-btn__github {
21685
- background-color: var(--black-750);
21686
- color: var(--white);
21357
+ .s-btn.s-btn__outlined {
21358
+ border-color: var(--_bu-outlined-bc);
21359
+ background-color: var(--_bu-outlined-bg);
21687
21360
  }
21688
- body.theme-highcontrast .s-btn__github {
21689
- border-color: transparent;
21690
- }
21691
- .s-btn__github:hover,
21692
- .s-btn__github:focus {
21693
- background-color: var(--black-800);
21694
- color: var(--white);
21695
- }
21696
- .s-btn__github:active {
21697
- background-color: var(--black-900);
21698
- color: var(--white);
21699
- }
21700
- .s-btn__github:focus {
21701
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21702
- }
21703
- .s-btn__unset,
21704
- .s-btn__unset:hover,
21705
- .s-btn__unset:active,
21706
- .s-btn__unset:focus {
21707
- padding: 0;
21708
- border: none;
21361
+ .s-btn.s-btn__link,
21362
+ .s-btn.s-btn__unset {
21709
21363
  outline: initial;
21710
- font: unset;
21711
- border-radius: 0;
21712
- color: unset;
21713
- background: none;
21714
- box-shadow: none;
21715
- cursor: default;
21716
- user-select: auto;
21717
21364
  }
21718
- .s-btn__link {
21719
- display: inline;
21720
- padding: 0;
21721
- border: none;
21722
- border-radius: 0;
21723
- outline: initial;
21724
- font: inherit;
21725
- background: none;
21726
- box-shadow: none;
21727
- text-align: inherit;
21365
+ .s-btn.s-btn__link:focus,
21366
+ .s-btn.s-btn__unset:focus,
21367
+ .s-btn.s-btn__link:focus-visible,
21368
+ .s-btn.s-btn__unset:focus-visible {
21369
+ outline-style: auto;
21370
+ }
21371
+ .s-btn.s-btn__link {
21372
+ --_bu-baw: 0;
21373
+ --_bu-br: 0;
21374
+ --_bu-bs: none;
21375
+ --_bu-focus-ring: none;
21376
+ --_bu-p: 0;
21728
21377
  text-decoration: none;
21729
21378
  color: var(--theme-link-color);
21730
21379
  cursor: pointer;
21731
21380
  user-select: auto;
21381
+ display: inline;
21382
+ font: inherit;
21383
+ text-align: inherit;
21732
21384
  }
21733
- body.theme-highcontrast .s-btn__link {
21385
+ .s-btn.s-btn__link,
21386
+ .s-btn.s-btn__link:hover,
21387
+ .s-btn.s-btn__link:active,
21388
+ .s-btn.s-btn__link:focus,
21389
+ .s-btn.s-btn__link[disabled],
21390
+ .s-btn.s-btn__link[aria-disabled="true"] {
21391
+ --_bu-bg: none;
21392
+ }
21393
+ .s-btn.s-btn__link.s-btn__dropdown {
21394
+ padding-right: 0.9em;
21395
+ }
21396
+ body.theme-highcontrast .s-btn.s-btn__link {
21734
21397
  text-decoration: underline;
21735
21398
  }
21736
- .s-btn__link.s-link__visited:visited {
21399
+ .s-btn.s-btn__link.s-link__visited:visited {
21737
21400
  color: var(--theme-link-color-visited);
21738
21401
  }
21739
- .s-btn__link:hover,
21740
- .s-btn__link.s-link__visited:hover,
21741
- .s-btn__link:active,
21742
- .s-btn__link.s-link__visited:active {
21402
+ .s-btn.s-btn__link:hover,
21403
+ .s-btn.s-btn__link.s-link__visited:hover,
21404
+ .s-btn.s-btn__link:active,
21405
+ .s-btn.s-btn__link.s-link__visited:active {
21743
21406
  color: var(--theme-link-color-hover);
21744
21407
  }
21745
- .s-btn__link.s-link__grayscale {
21408
+ .s-btn.s-btn__link.s-link__grayscale {
21746
21409
  color: var(--black-800);
21747
21410
  }
21748
- .s-btn__link.s-link__grayscale.s-link__visited:visited {
21411
+ .s-btn.s-btn__link.s-link__grayscale.s-link__visited:visited {
21749
21412
  color: var(--black-700);
21750
21413
  }
21751
- .s-btn__link.s-link__grayscale:hover,
21752
- .s-btn__link.s-link__grayscale.s-link__visited:hover,
21753
- .s-btn__link.s-link__grayscale:active,
21754
- .s-btn__link.s-link__grayscale.s-link__visited:active {
21414
+ .s-btn.s-btn__link.s-link__grayscale:hover,
21415
+ .s-btn.s-btn__link.s-link__grayscale.s-link__visited:hover,
21416
+ .s-btn.s-btn__link.s-link__grayscale:active,
21417
+ .s-btn.s-btn__link.s-link__grayscale.s-link__visited:active {
21755
21418
  color: var(--black-900);
21756
21419
  }
21757
- .s-btn__link.s-link__muted {
21420
+ .s-btn.s-btn__link.s-link__muted {
21758
21421
  color: var(--black-500);
21759
21422
  }
21760
- .s-btn__link.s-link__muted.s-link__visited:visited {
21423
+ .s-btn.s-btn__link.s-link__muted.s-link__visited:visited {
21761
21424
  color: var(--black-700);
21762
21425
  }
21763
- .s-btn__link.s-link__muted:hover,
21764
- .s-btn__link.s-link__muted.s-link__visited:hover,
21765
- .s-btn__link.s-link__muted:active,
21766
- .s-btn__link.s-link__muted.s-link__visited:active {
21426
+ .s-btn.s-btn__link.s-link__muted:hover,
21427
+ .s-btn.s-btn__link.s-link__muted.s-link__visited:hover,
21428
+ .s-btn.s-btn__link.s-link__muted:active,
21429
+ .s-btn.s-btn__link.s-link__muted.s-link__visited:active {
21767
21430
  color: var(--black-600);
21768
21431
  }
21769
- .s-btn__link.s-link__danger {
21432
+ .s-btn.s-btn__link.s-link__danger {
21770
21433
  color: var(--red-500);
21771
21434
  }
21772
- .s-btn__link.s-link__danger.s-link__visited:visited {
21435
+ .s-btn.s-btn__link.s-link__danger.s-link__visited:visited {
21773
21436
  color: var(--red-600);
21774
21437
  }
21775
- .s-btn__link.s-link__danger:hover,
21776
- .s-btn__link.s-link__danger.s-link__visited:hover,
21777
- .s-btn__link.s-link__danger:active,
21778
- .s-btn__link.s-link__danger.s-link__visited:active {
21438
+ .s-btn.s-btn__link.s-link__danger:hover,
21439
+ .s-btn.s-btn__link.s-link__danger.s-link__visited:hover,
21440
+ .s-btn.s-btn__link.s-link__danger:active,
21441
+ .s-btn.s-btn__link.s-link__danger.s-link__visited:active {
21779
21442
  color: var(--red-400);
21780
21443
  }
21781
- .s-btn__link.s-link__inherit {
21444
+ .s-btn.s-btn__link.s-link__inherit {
21782
21445
  color: inherit !important;
21783
21446
  }
21784
- .s-btn__link.s-link__inherit:hover,
21785
- .s-btn__link.s-link__inherit:active,
21786
- .s-btn__link.s-link__inherit.s-link__visited:visited {
21447
+ .s-btn.s-btn__link.s-link__inherit:hover,
21448
+ .s-btn.s-btn__link.s-link__inherit:active,
21449
+ .s-btn.s-btn__link.s-link__inherit.s-link__visited:visited {
21787
21450
  color: inherit !important;
21788
21451
  }
21789
- .s-btn__link.s-link__underlined {
21452
+ .s-btn.s-btn__link.s-link__underlined {
21790
21453
  text-decoration: underline !important;
21791
21454
  }
21792
- .s-btn__link.s-link__dropdown {
21455
+ .s-btn.s-btn__link.s-link__dropdown {
21793
21456
  position: relative;
21794
21457
  padding-right: 0.9em;
21795
21458
  }
21796
- .s-btn__link.s-link__dropdown:after {
21459
+ .s-btn.s-btn__link.s-link__dropdown:after {
21797
21460
  content: "";
21798
21461
  position: absolute;
21799
21462
  z-index: var(--zi-active);
@@ -21806,34 +21469,288 @@ body.theme-highcontrast .s-btn__link {
21806
21469
  border-color: currentColor transparent;
21807
21470
  pointer-events: none;
21808
21471
  }
21809
- .s-btn__link:hover,
21810
- .s-btn__link:active,
21811
- .s-btn__link:focus,
21812
- .s-btn__link[disabled] .s-btn__link[aria-disabled="true"] {
21813
- background: none;
21814
- box-shadow: none;
21815
- }
21816
- .s-btn__link.s-btn__dropdown {
21817
- padding-right: 0.9em;
21472
+ .s-btn.s-btn__unset,
21473
+ .s-btn.s-btn__unset:hover,
21474
+ .s-btn.s-btn__unset:active,
21475
+ .s-btn.s-btn__unset:focus {
21476
+ --_bu-baw: 0;
21477
+ --_bu-bg: none;
21478
+ --_bu-br: 0;
21479
+ --_bu-bs: none;
21480
+ --_bu-fc: unset;
21481
+ --_bu-focus-ring: none;
21482
+ --_bu-p: 0;
21483
+ cursor: default;
21484
+ font: unset;
21485
+ user-select: auto;
21818
21486
  }
21819
- .s-btn__link.s-btn__dropdown:after {
21820
- right: 0;
21487
+ .s-btn.s-btn__dropdown {
21488
+ padding-right: calc(var(--_bu-p) * 2.5);
21821
21489
  }
21822
- .s-btn__unset:focus,
21823
- .s-btn__link:focus,
21824
- .s-btn__unset:focus-visible,
21825
- .s-btn__link:focus-visible {
21826
- outline-style: auto;
21490
+ .s-btn.s-btn__dropdown:after {
21491
+ border-color: currentColor transparent;
21492
+ border-style: solid;
21493
+ border-width: var(--_bu-dropdown-bw);
21494
+ border-bottom-width: 0;
21495
+ content: "";
21496
+ pointer-events: none;
21497
+ position: absolute;
21498
+ right: var(--_bu-p);
21499
+ top: calc(50% - var(--su-static2));
21500
+ z-index: var(--zi-active);
21827
21501
  }
21828
- .s-btn__icon .svg-icon {
21502
+ .s-btn.s-btn__icon .svg-icon {
21829
21503
  vertical-align: baseline;
21830
21504
  margin-top: -0.3em;
21831
21505
  margin-bottom: -0.3em;
21832
21506
  transition: opacity 200ms var(--te-smooth);
21833
21507
  }
21834
- .s-btn.is-loading .svg-icon:first-child {
21835
- margin-left: -23px;
21836
- opacity: 0;
21508
+ .s-btn.s-btn__xs {
21509
+ --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
21510
+ --_bu-fs: var(--fs-fine);
21511
+ --_bu-p: 0.6em;
21512
+ }
21513
+ .s-btn.s-btn__sm {
21514
+ --_bu-fs: var(--fs-caption);
21515
+ }
21516
+ .s-btn.s-btn__md {
21517
+ --_bu-br: calc(var(--br-sm) + var(--su-static1));
21518
+ --_bu-fs: var(--fs-body3);
21519
+ --_bu-p: 0.7em;
21520
+ }
21521
+ body.theme-highcontrast .s-btn.s-btn__danger,
21522
+ body.theme-highcontrast .s-btn.s-btn__muted {
21523
+ --_bu-filled-bc: transparent;
21524
+ }
21525
+ .s-btn.s-btn__danger {
21526
+ --_bu-bg-active: var(--red-100);
21527
+ --_bu-bg-hover: var(--red-050);
21528
+ --_bu-bg-selected: var(--red-200);
21529
+ --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
21530
+ --_bu-fc: var(--red-600);
21531
+ --_bu-fc-active: var(--_bu-fc);
21532
+ --_bu-fc-hover: var(--red-700);
21533
+ --_bu-fc-selected: var(--red-900);
21534
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
21535
+ --_bu-filled-bc: transparent;
21536
+ --_bu-filled-bc-selected: var(--_bu-filled-bc);
21537
+ --_bu-filled-bg: var(--red-500);
21538
+ --_bu-filled-bg-active: var(--red-700);
21539
+ --_bu-filled-bg-hover: var(--red-600);
21540
+ --_bu-filled-bg-selected: var(--red-800);
21541
+ --_bu-filled-fc: var(--white);
21542
+ --_bu-filled-fc-active: var(--_bu-filled-fc);
21543
+ --_bu-filled-fc-hover: var(--_bu-filled-fc);
21544
+ --_bu-filled-fc-selected: var(--_bu-filled-fc);
21545
+ --_bu-outlined-bc: var(--red-500);
21546
+ --_bu-outlined-bc-selected: var(--red-700);
21547
+ --_bu-outlined-bg-selected: var(--_bu-bg-selected);
21548
+ --_bu-outlined-fc-selected: var(--_bu-fc-selected);
21549
+ }
21550
+ .s-btn.s-btn__danger.s-btn__filled {
21551
+ --_bu-number-fc: var(--black);
21552
+ }
21553
+ @media (prefers-color-scheme: dark) {
21554
+ body.theme-system .s-btn.s-btn__danger.s-btn__filled {
21555
+ --_bu-filled-fc: var(--black);
21556
+ --_bu-filled-fc-selected: var(--white);
21557
+ --_bu-number-fc: var(--white);
21558
+ --_bu-number-fc-selected: var(--black);
21559
+ }
21560
+ }
21561
+ body.theme-dark .s-btn.s-btn__danger.s-btn__filled,
21562
+ .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled,
21563
+ body.theme-system .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled {
21564
+ --_bu-filled-fc: var(--black);
21565
+ --_bu-filled-fc-selected: var(--white);
21566
+ --_bu-number-fc: var(--white);
21567
+ --_bu-number-fc-selected: var(--black);
21568
+ }
21569
+ @media (prefers-color-scheme: dark) {
21570
+ body.theme-highcontrast.theme-system .s-btn.s-btn__danger.s-btn__filled {
21571
+ --_bu-filled-fc: var(--white);
21572
+ --_bu-number-fc: var(--black);
21573
+ --_bu-number-fc-selected: var(--black);
21574
+ }
21575
+ }
21576
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
21577
+ --_bu-filled-fc: var(--white);
21578
+ --_bu-number-fc: var(--black);
21579
+ --_bu-number-fc-selected: var(--black);
21580
+ }
21581
+ .s-btn.s-btn__muted {
21582
+ --_bu-bg-active: var(--black-050);
21583
+ --_bu-bg-hover: var(--black-025);
21584
+ --_bu-bg-selected: var(--black-075);
21585
+ --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
21586
+ --_bu-fc: var(--black-500);
21587
+ --_bu-fc-active: var(--_bu-fc);
21588
+ --_bu-fc-hover: var(--black-600);
21589
+ --_bu-fc-selected: var(--black-700);
21590
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21591
+ --_bu-filled-bc: transparent;
21592
+ --_bu-filled-bc-selected: var(--_bu-filled-bc);
21593
+ --_bu-filled-bg: var(--black-100);
21594
+ --_bu-filled-bg-active: var(--black-200);
21595
+ --_bu-filled-bg-hover: var(--black-150);
21596
+ --_bu-filled-bg-selected: var(--black-350);
21597
+ --_bu-filled-fc: var(--black-700);
21598
+ --_bu-filled-fc-active: var(--_bu-filled-fc);
21599
+ --_bu-filled-fc-hover: var(--_bu-filled-fc);
21600
+ --_bu-filled-fc-selected: var(--black-800);
21601
+ --_bu-outlined-bc: var(--black-300);
21602
+ --_bu-outlined-bc-selected: var(--black-400);
21603
+ --_bu-outlined-bg-selected: var(--_bu-bg-selected);
21604
+ --_bu-outlined-fc-selected: var(--_bu-fc-selected);
21605
+ }
21606
+ body.theme-highcontrast .s-btn.s-btn__muted {
21607
+ --_bu-filled-bg: var(--black-400);
21608
+ --_bu-filled-bg-active: var(--black-600);
21609
+ --_bu-filled-bg-hover: var(--black-500);
21610
+ --_bu-filled-bg-selected: var(--black-700);
21611
+ --_bu-filled-fc: var(--white);
21612
+ --_bu-filled-fc-selected: var(--_bu-filled-fc);
21613
+ }
21614
+ body.theme-highcontrast .s-btn.s-btn__muted.s-btn__filled {
21615
+ --_bu-number-fc: var(--black);
21616
+ }
21617
+ .s-btn.s-btn__primary {
21618
+ --_bu-bg: var(--theme-button-primary-background-color);
21619
+ --_bu-bg-active: var(--theme-button-primary-active-background-color);
21620
+ --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
21621
+ --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
21622
+ --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
21623
+ --_bu-fc: var(--theme-button-primary-color);
21624
+ --_bu-fc-active: var(--theme-button-primary-hover-color);
21625
+ --_bu-fc-hover: var(--theme-button-primary-hover-color);
21626
+ --_bu-fc-selected: var(--theme-button-primary-selected-color);
21627
+ --_bu-number-fc: var(--theme-button-primary-number-color);
21628
+ }
21629
+ @media (prefers-color-scheme: dark) {
21630
+ body.theme-system .s-btn.s-btn__primary {
21631
+ --_bu-bg: var(--theme-secondary-300);
21632
+ --_bu-bg-active: var(--theme-secondary-400);
21633
+ --_bu-bg-hover: var(--theme-secondary-350);
21634
+ --_bu-fc: var(--black);
21635
+ --_bu-fc-active: var(--_bu-fc);
21636
+ --_bu-fc-hover: var(--_bu-fc);
21637
+ --_bu-fc-selected: var(--white);
21638
+ --_bu-number-fc: var(--white);
21639
+ --_bu-number-fc-selected: var(--black);
21640
+ }
21641
+ }
21642
+ body.theme-dark .s-btn.s-btn__primary,
21643
+ .theme-dark__forced .s-btn.s-btn__primary,
21644
+ body.theme-system .theme-dark__forced .s-btn.s-btn__primary {
21645
+ --_bu-bg: var(--theme-secondary-300);
21646
+ --_bu-bg-active: var(--theme-secondary-400);
21647
+ --_bu-bg-hover: var(--theme-secondary-350);
21648
+ --_bu-fc: var(--black);
21649
+ --_bu-fc-active: var(--_bu-fc);
21650
+ --_bu-fc-hover: var(--_bu-fc);
21651
+ --_bu-fc-selected: var(--white);
21652
+ --_bu-number-fc: var(--white);
21653
+ --_bu-number-fc-selected: var(--black);
21654
+ }
21655
+ body.theme-highcontrast .s-btn.s-btn__primary {
21656
+ --_bu-bc: transparent;
21657
+ }
21658
+ @media (prefers-color-scheme: dark) {
21659
+ body.theme-highcontrast.theme-system .s-btn.s-btn__primary {
21660
+ --_bu-bg: var(--theme-secondary-400);
21661
+ --_bu-bg-active: var(--theme-secondary-600);
21662
+ --_bu-bg-hover: var(--theme-secondary-500);
21663
+ --_bu-fc: var(--white);
21664
+ --_bu-number-fc: var(--black);
21665
+ }
21666
+ }
21667
+ body.theme-highcontrast.theme-dark .s-btn.s-btn__primary {
21668
+ --_bu-bg: var(--theme-secondary-400);
21669
+ --_bu-bg-active: var(--theme-secondary-600);
21670
+ --_bu-bg-hover: var(--theme-secondary-500);
21671
+ --_bu-fc: var(--white);
21672
+ --_bu-number-fc: var(--black);
21673
+ }
21674
+ body.theme-highcontrast .s-btn.s-btn__facebook,
21675
+ body.theme-highcontrast .s-btn.s-btn__github {
21676
+ --_bu-bc: transparent;
21677
+ }
21678
+ .s-btn.s-btn__facebook {
21679
+ --_bu-bc: transparent;
21680
+ --_bu-bg: #385499;
21681
+ --_bu-bg-active: #2a4074;
21682
+ --_bu-bg-hover: #314a86;
21683
+ --_bu-fc: #fff;
21684
+ --_bu-fc-active: var(--_bu-fc);
21685
+ --_bu-fc-hover: var(--_bu-fc);
21686
+ --_bu-hc-bc: transparent;
21687
+ }
21688
+ .s-btn.s-btn__google {
21689
+ --_bu-bc: var(--bc-medium);
21690
+ --_bu-bg: var(--white);
21691
+ --_bu-bg-active: var(--black-050);
21692
+ --_bu-bg-hover: var(--black-025);
21693
+ --_bu-fc: var(--fc-medium);
21694
+ --_bu-fc-active: var(--fc-dark);
21695
+ --_bu-fc-hover: var(--black-800);
21696
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21697
+ }
21698
+ .s-btn.s-btn__github {
21699
+ --_bu-bg: var(--black-750);
21700
+ --_bu-bg-active: var(--black);
21701
+ --_bu-bg-hover: var(--black-800);
21702
+ --_bu-fc: var(--white);
21703
+ --_bu-fc-active: var(--white);
21704
+ --_bu-fc-hover: var(--white);
21705
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
21706
+ --_bu-hc-bc: transparent;
21707
+ }
21708
+ .s-btn .s-btn--badge {
21709
+ opacity: var(--_bu-badge-o);
21710
+ display: inline-block;
21711
+ border-radius: var(--br-sm);
21712
+ padding: var(--su2) calc(var(--su4) - var(--su1));
21713
+ font-size: var(--fs-caption);
21714
+ line-height: var(--lh-xs);
21715
+ background-color: currentColor;
21716
+ }
21717
+ .s-btn .s-btn--number {
21718
+ color: var(--_bu-number-fc);
21719
+ }
21720
+ .s-btn--radio {
21721
+ border: 0;
21722
+ clip: rect(1px, 1px, 1px, 1px);
21723
+ clip-path: inset(50%);
21724
+ height: 1px;
21725
+ margin: -1px;
21726
+ overflow: hidden;
21727
+ padding: 0;
21728
+ position: absolute;
21729
+ width: 1px;
21730
+ overflow-wrap: normal;
21731
+ }
21732
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover,
21733
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus {
21734
+ background-color: var(--_bu-bg-hover);
21735
+ color: var(--_bu-fc-hover);
21736
+ }
21737
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):hover.s-btn__filled,
21738
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):focus.s-btn__filled {
21739
+ background-color: var(--_bu-filled-bg-hover);
21740
+ color: var(--_bu-filled-fc-hover);
21741
+ }
21742
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active {
21743
+ background-color: var(--_bu-bg-active);
21744
+ color: var(--_bu-fc-active);
21745
+ }
21746
+ .s-btn:not(.is-selected):not(.s-btn__link):not(.s-btn__unset):active.s-btn__filled {
21747
+ background-color: var(--_bu-filled-bg-active);
21748
+ color: var(--_bu-filled-fc-active);
21749
+ }
21750
+ .s-btn:focus,
21751
+ .s-btn--radio:focus + .s-btn {
21752
+ box-shadow: var(--_bu-focus-ring);
21753
+ outline: none;
21837
21754
  }
21838
21755
  a,
21839
21756
  .s-link {
@@ -22192,153 +22109,145 @@ body.theme-system .theme-dark__forced .s-block-link.is-selected {
22192
22109
  color: var(--red-700);
22193
22110
  }
22194
22111
  .s-link-preview {
22112
+ --_lp-details-mt: var(--su2);
22113
+ --_lp-footer-fd: unset;
22114
+ --_lp-misc-pl: var(--su4);
22115
+ --_lp-misc-pt: unset;
22195
22116
  border: 1px solid var(--bc-medium);
22196
22117
  border-radius: var(--br-sm);
22197
- text-align: left;
22198
22118
  box-shadow: var(--bs-sm);
22119
+ text-align: left;
22199
22120
  }
22200
- .s-link-preview--header {
22201
- display: flex;
22202
- background: var(--black-025);
22203
- border-top-left-radius: var(--br-sm);
22204
- border-top-right-radius: var(--br-sm);
22205
- border-bottom: 1px solid var(--bc-medium);
22206
- padding: var(--su12) var(--su8);
22207
- }
22208
- .s-link-preview--icon {
22209
- margin-right: var(--su8);
22210
- color: var(--black-800);
22211
- }
22212
- .s-link-preview--title {
22213
- font-size: var(--fs-body3);
22214
- font-weight: bold;
22215
- color: var(--black-900);
22121
+ @media (max-width: 640px) {
22122
+ .s-link-preview {
22123
+ --_lp-details-mt: var(--su4);
22124
+ --_lp-footer-fd: column;
22125
+ --_lp-misc-pl: 0;
22126
+ --_lp-misc-pt: var(--su2);
22127
+ }
22216
22128
  }
22217
- a.s-link-preview--title {
22218
- text-decoration: none;
22219
- color: var(--theme-link-color);
22129
+ .s-link-preview .s-link-preview--details a,
22130
+ .s-link-preview .s-link-preview--footer a {
22131
+ color: var(--black-500);
22220
22132
  cursor: pointer;
22221
- }
22222
- a.s-link-preview--title.s-link__visited:visited {
22223
- color: var(--theme-link-color);
22224
- text-decoration: none;
22225
- }
22226
- body.theme-highcontrast a.s-link-preview--title.s-link__visited:visited {
22227
- text-decoration: underline;
22228
- }
22229
- a.s-link-preview--title:hover,
22230
- a.s-link-preview--title.s-link__visited:hover,
22231
- a.s-link-preview--title:active,
22232
- a.s-link-preview--title.s-link__visited:active {
22233
- color: var(--theme-link-color-hover);
22234
22133
  text-decoration: none;
22235
22134
  }
22236
- body.theme-highcontrast a.s-link-preview--title:hover,
22237
- body.theme-highcontrast a.s-link-preview--title.s-link__visited:hover,
22238
- body.theme-highcontrast a.s-link-preview--title:active,
22239
- body.theme-highcontrast a.s-link-preview--title.s-link__visited:active {
22240
- text-decoration: underline;
22241
- }
22242
- .s-link-preview--details {
22243
- font-size: var(--fs-caption);
22244
- color: var(--black-500);
22245
- margin-top: var(--su2);
22135
+ .s-link-preview .s-link-preview--details a:visited,
22136
+ .s-link-preview .s-link-preview--footer a:visited {
22137
+ color: var(--black-700);
22246
22138
  }
22247
- @media (max-width: 640px) {
22248
- .s-link-preview--details {
22249
- margin-top: var(--su4);
22250
- }
22139
+ .s-link-preview .s-link-preview--details a:hover,
22140
+ .s-link-preview .s-link-preview--footer a:hover,
22141
+ .s-link-preview .s-link-preview--details a:active,
22142
+ .s-link-preview .s-link-preview--footer a:active,
22143
+ .s-link-preview .s-link-preview--details a:focus,
22144
+ .s-link-preview .s-link-preview--footer a:focus {
22145
+ color: var(--black-600);
22251
22146
  }
22252
- .s-link-preview--body {
22253
- padding: var(--su12);
22147
+ .s-link-preview .s-link-preview--body {
22254
22148
  font-size: var(--fs-body2);
22149
+ padding: var(--su12);
22255
22150
  }
22256
- .s-link-preview--body *:last-child {
22151
+ .s-link-preview .s-link-preview--body *:last-child {
22257
22152
  margin-bottom: 0;
22258
22153
  }
22259
- .s-link-preview--code pre {
22154
+ .s-link-preview .s-link-preview--code pre {
22260
22155
  border-radius: 0 !important;
22261
22156
  margin: 0;
22262
22157
  max-height: 400px;
22263
22158
  }
22264
- .s-link-preview--footer {
22265
- display: flex;
22266
- justify-content: space-between;
22159
+ .s-link-preview .s-link-preview--details {
22160
+ margin-top: var(--_lp-details-mt);
22161
+ color: var(--black-500);
22162
+ font-size: var(--fs-caption);
22163
+ }
22164
+ .s-link-preview .s-link-preview--footer {
22165
+ flex-direction: var(--_lp-footer-fd);
22267
22166
  background: var(--black-025);
22268
22167
  border-bottom-left-radius: var(--br-sm);
22269
22168
  border-bottom-right-radius: var(--br-sm);
22270
22169
  border-top: 1px solid var(--bc-medium);
22271
- padding: var(--su12);
22170
+ display: flex;
22272
22171
  font-size: var(--fs-caption);
22172
+ justify-content: space-between;
22173
+ padding: var(--su12);
22273
22174
  }
22274
- @media (max-width: 640px) {
22275
- .s-link-preview--footer {
22276
- flex-direction: column;
22277
- }
22175
+ .s-link-preview .s-link-preview--header {
22176
+ background: var(--black-025);
22177
+ border-bottom: 1px solid var(--bc-medium);
22178
+ border-top-left-radius: var(--br-sm);
22179
+ border-top-right-radius: var(--br-sm);
22180
+ display: flex;
22181
+ padding: var(--su12) var(--su8);
22278
22182
  }
22279
- .s-link-preview--url {
22280
- overflow: hidden;
22281
- max-width: 100%;
22282
- text-overflow: ellipsis !important;
22283
- white-space: nowrap;
22183
+ .s-link-preview .s-link-preview--icon {
22184
+ color: var(--black-800);
22185
+ margin-right: var(--su8);
22284
22186
  }
22285
- .s-link-preview--misc {
22187
+ .s-link-preview .s-link-preview--misc {
22188
+ padding-left: var(--_lp-misc-pl);
22189
+ padding-top: var(--_lp-misc-pt);
22286
22190
  color: var(--black-500);
22287
- padding-left: var(--su4);
22288
22191
  }
22289
- @media (max-width: 640px) {
22290
- .s-link-preview--misc {
22291
- padding-left: 0;
22292
- padding-top: var(--su2);
22293
- }
22192
+ .s-link-preview .s-link-preview--title {
22193
+ color: var(--black-900);
22194
+ font-size: var(--fs-body3);
22195
+ font-weight: bold;
22294
22196
  }
22295
- .s-link-preview--details a,
22296
- .s-link-preview--footer a {
22297
- text-decoration: none;
22197
+ .s-link-preview a.s-link-preview--title {
22198
+ color: var(--theme-link-color);
22298
22199
  cursor: pointer;
22299
- color: var(--black-500);
22200
+ text-decoration: none;
22300
22201
  }
22301
- .s-link-preview--details a:visited,
22302
- .s-link-preview--footer a:visited {
22303
- color: var(--black-700);
22202
+ .s-link-preview a.s-link-preview--title:active,
22203
+ .s-link-preview a.s-link-preview--title:hover,
22204
+ .s-link-preview a.s-link-preview--title:active.s-link__visited,
22205
+ .s-link-preview a.s-link-preview--title:hover.s-link__visited {
22206
+ color: var(--theme-link-color-hover);
22304
22207
  }
22305
- .s-link-preview--details a:hover,
22306
- .s-link-preview--footer a:hover,
22307
- .s-link-preview--details a:active,
22308
- .s-link-preview--footer a:active,
22309
- .s-link-preview--details a:focus,
22310
- .s-link-preview--footer a:focus {
22311
- color: var(--black-600);
22208
+ .s-link-preview a.s-link-preview--title:active,
22209
+ .s-link-preview a.s-link-preview--title:hover,
22210
+ .s-link-preview a.s-link-preview--title.s-link__visited:active,
22211
+ .s-link-preview a.s-link-preview--title.s-link__visited:hover,
22212
+ .s-link-preview a.s-link-preview--title.s-link__visited:visited {
22213
+ text-decoration: none;
22214
+ }
22215
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title:active,
22216
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title:hover,
22217
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:active,
22218
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:hover,
22219
+ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:visited {
22220
+ text-decoration: underline;
22221
+ }
22222
+ .s-link-preview a.s-link-preview--title.s-link__visited:visited {
22223
+ color: var(--theme-link-color);
22224
+ }
22225
+ .s-link-preview .s-link-preview--url {
22226
+ max-width: 100%;
22227
+ overflow: hidden;
22228
+ text-overflow: ellipsis !important;
22229
+ white-space: nowrap;
22312
22230
  }
22313
22231
  .s-banner {
22314
- background: var(--_no-bg, var(--black-050));
22315
- border-color: var(--_no-bc, var(--bc-medium));
22232
+ --_no-x-offset: 0;
22233
+ --_no-bc: var(--bc-medium);
22234
+ --_no-bg: var(--black-050);
22235
+ --_no-fc: var(--fc-medium);
22236
+ --_no-btn-bg-focus: var(--black-100);
22237
+ --_no-btn-bg-active: var(--black-150);
22238
+ background: var(--_no-bg);
22239
+ border-color: var(--_no-bc);
22240
+ color: var(--_no-fc);
22316
22241
  border-style: solid;
22317
- color: var(--_no-fc, var(--fc-medium));
22318
22242
  font-size: var(--fs-body1);
22319
- --_no-x-offset: 0;
22243
+ -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
22244
+ transform: translate3d(0, var(--_no-x-offset), 0);
22320
22245
  border-width: var(--su-static1) 0;
22321
22246
  inset: 0 0 auto 0;
22322
22247
  padding: var(--su12);
22323
22248
  position: fixed;
22324
22249
  width: 100%;
22325
22250
  z-index: calc(var(--zi-navigation-fixed) - 1);
22326
- -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
22327
- transform: translate3d(0, var(--_no-x-offset), 0);
22328
- }
22329
- .s-banner code {
22330
- background: var(--_no-code-bg, transparent);
22331
- }
22332
- .s-banner .s-banner--btn {
22333
- color: inherit;
22334
- padding: var(--su8);
22335
- }
22336
- .s-banner .s-banner--btn:focus,
22337
- .s-banner .s-banner--btn:hover {
22338
- background: var(--_no-btn-focus-bg, var(--black-100));
22339
- }
22340
- .s-banner .s-banner--btn:active {
22341
- background: var(--_no-btn-active-bg, var(--black-150));
22342
22251
  }
22343
22252
  @media (prefers-color-scheme: dark) {
22344
22253
  body.theme-system .s-banner:not(.s-banner__important) {
@@ -22365,8 +22274,8 @@ body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
22365
22274
  --_no-bc: var(--_no-bg);
22366
22275
  --_no-bg: var(--black-700);
22367
22276
  --_no-fc: var(--white);
22368
- --_no-btn-focus-bg: var(--black-800);
22369
- --_no-btn-active-bg: var(--black-900);
22277
+ --_no-btn-bg-focus: var(--black-800);
22278
+ --_no-btn-bg-active: var(--black-900);
22370
22279
  }
22371
22280
  body.theme-highcontrast .s-banner__important {
22372
22281
  --_no-bc: var(--_no-bg);
@@ -22374,8 +22283,8 @@ body.theme-highcontrast .s-banner__important {
22374
22283
  .s-banner__danger {
22375
22284
  --_no-bc: var(--red-200);
22376
22285
  --_no-bg: var(--red-050);
22377
- --_no-btn-focus-bg: var(--red-100);
22378
- --_no-btn-active-bg: var(--red-200);
22286
+ --_no-btn-bg-active: var(--red-200);
22287
+ --_no-btn-bg-focus: var(--red-100);
22379
22288
  }
22380
22289
  body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
22381
22290
  --_no-bg: var(--red-200);
@@ -22383,8 +22292,8 @@ body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
22383
22292
  .s-banner__danger.s-banner__important {
22384
22293
  --_no-bc: var(--_no-bg);
22385
22294
  --_no-bg: var(--red-500);
22386
- --_no-btn-focus-bg: var(--red-600);
22387
- --_no-btn-active-bg: var(--red-700);
22295
+ --_no-btn-bg-active: var(--red-700);
22296
+ --_no-btn-bg-focus: var(--red-600);
22388
22297
  }
22389
22298
  @media (prefers-color-scheme: dark) {
22390
22299
  body.theme-system .s-banner__danger.s-banner__important {
@@ -22411,8 +22320,8 @@ body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
22411
22320
  .s-banner__info {
22412
22321
  --_no-bc: var(--theme-secondary-150);
22413
22322
  --_no-bg: var(--theme-secondary-050);
22414
- --_no-btn-focus-bg: var(--theme-secondary-100);
22415
- --_no-btn-active-bg: var(--theme-secondary-150);
22323
+ --_no-btn-bg-focus: var(--theme-secondary-100);
22324
+ --_no-btn-bg-active: var(--theme-secondary-150);
22416
22325
  --_no-code-bg: var(--theme-secondary-150);
22417
22326
  }
22418
22327
  body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
@@ -22429,8 +22338,8 @@ body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
22429
22338
  .s-banner__info.s-banner__important {
22430
22339
  --_no-bc: var(--_no-bg);
22431
22340
  --_no-bg: var(--theme-secondary-400);
22432
- --_no-btn-focus-bg: var(--theme-secondary-500);
22433
- --_no-btn-active-bg: var(--theme-secondary-600);
22341
+ --_no-btn-bg-active: var(--theme-secondary-600);
22342
+ --_no-btn-bg-focus: var(--theme-secondary-500);
22434
22343
  }
22435
22344
  @media (prefers-color-scheme: dark) {
22436
22345
  body.theme-system .s-banner__info.s-banner__important {
@@ -22457,8 +22366,8 @@ body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
22457
22366
  .s-banner__success {
22458
22367
  --_no-bc: var(--green-200);
22459
22368
  --_no-bg: var(--green-050);
22460
- --_no-btn-focus-bg: var(--green-100);
22461
- --_no-btn-active-bg: var(--green-200);
22369
+ --_no-btn-bg-active: var(--green-200);
22370
+ --_no-btn-bg-focus: var(--green-100);
22462
22371
  }
22463
22372
  body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
22464
22373
  --_no-bg: var(--green-200);
@@ -22467,8 +22376,8 @@ body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
22467
22376
  --_no-bc: var(--_no-bg);
22468
22377
  --_no-bg: var(--green-400);
22469
22378
  --_no-fc: var(--black-900);
22470
- --_no-btn-focus-bg: var(--green-500);
22471
- --_no-btn-active-bg: var(--green-600);
22379
+ --_no-btn-bg-active: var(--green-600);
22380
+ --_no-btn-bg-focus: var(--green-500);
22472
22381
  }
22473
22382
  @media (prefers-color-scheme: dark) {
22474
22383
  body.theme-system .s-banner__success.s-banner__important {
@@ -22489,8 +22398,8 @@ body.theme-highcontrast .s-banner__success.s-banner__important {
22489
22398
  .s-banner__warning {
22490
22399
  --_no-bc: var(--yellow-300);
22491
22400
  --_no-bg: var(--yellow-050);
22492
- --_no-btn-focus-bg: var(--yellow-200);
22493
- --_no-btn-active-bg: var(--yellow-300);
22401
+ --_no-btn-bg-active: var(--yellow-300);
22402
+ --_no-btn-bg-focus: var(--yellow-200);
22494
22403
  --_no-code-bg: var(--yellow-200);
22495
22404
  }
22496
22405
  body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
@@ -22499,9 +22408,9 @@ body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
22499
22408
  .s-banner__warning.s-banner__important {
22500
22409
  --_no-bc: var(--_no-bg);
22501
22410
  --_no-bg: var(--yellow-400);
22502
- --_no-btn-focus-bg: var(--yellow-500);
22503
- --_no-btn-active-bg: var(--yellow-600);
22504
22411
  --_no-fc: var(--black-900);
22412
+ --_no-btn-bg-active: var(--yellow-600);
22413
+ --_no-btn-bg-focus: var(--yellow-500);
22505
22414
  }
22506
22415
  @media (prefers-color-scheme: dark) {
22507
22416
  body.theme-system .s-banner__warning.s-banner__important {
@@ -22519,52 +22428,57 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
22519
22428
  --_no-bg: var(--yellow-700);
22520
22429
  --_no-fc: var(--white);
22521
22430
  }
22522
- .s-banner__body-pt {
22523
- padding-top: 93px;
22431
+ .s-banner code {
22432
+ background: var(--_no-code-bg, transparent);
22524
22433
  }
22525
- .s-banner.is-pinned {
22526
- z-index: calc(var(--zi-navigation-fixed) + 1);
22434
+ .s-banner .s-banner--btn {
22435
+ color: inherit;
22436
+ padding: var(--su8);
22437
+ }
22438
+ .s-banner .s-banner--btn:focus,
22439
+ .s-banner .s-banner--btn:hover {
22440
+ background: var(--_no-btn-bg-focus);
22441
+ }
22442
+ .s-banner .s-banner--btn:active {
22443
+ background: var(--_no-btn-bg-active);
22527
22444
  }
22528
22445
  .s-banner[aria-hidden="true"] {
22529
- --_no-x-offset: -50px;
22530
- visibility: hidden;
22446
+ --_no-x-offset: calc(var(--su48) + var(--su2) * -1);
22531
22447
  opacity: 0;
22448
+ visibility: hidden;
22532
22449
  }
22533
22450
  .s-banner[aria-hidden="false"] {
22534
- --_no-x-offset: 49px;
22535
- visibility: visible;
22451
+ --_no-x-offset: calc(var(--su48) + var(--su1));
22536
22452
  opacity: 1;
22453
+ visibility: visible;
22454
+ }
22455
+ .s-banner.is-pinned {
22456
+ z-index: calc(var(--zi-navigation-fixed) + 1);
22457
+ }
22458
+ .s-banner__body-pt {
22459
+ padding-top: 93px;
22537
22460
  }
22538
22461
  .s-banner .s-banner--container {
22462
+ margin: 0 auto;
22463
+ max-width: calc(var(--s-step) * 10);
22539
22464
  position: relative;
22540
22465
  width: 100%;
22541
- max-width: calc(var(--s-step) * 10);
22542
- margin: 0 auto;
22543
22466
  }
22544
22467
  .s-notice {
22545
- background: var(--_no-bg, var(--black-050));
22546
- border-color: var(--_no-bc, var(--bc-medium));
22468
+ --_no-bc: var(--bc-medium);
22469
+ --_no-bg: var(--black-050);
22470
+ --_no-fc: var(--fc-medium);
22471
+ --_no-btn-bg-focus: var(--black-100);
22472
+ --_no-btn-bg-active: var(--black-150);
22473
+ background: var(--_no-bg);
22474
+ border-color: var(--_no-bc);
22475
+ color: var(--_no-fc);
22547
22476
  border-style: solid;
22548
- color: var(--_no-fc, var(--fc-medium));
22549
22477
  font-size: var(--fs-body1);
22550
22478
  border-radius: var(--br-sm);
22551
22479
  border-width: var(--su-static1);
22552
22480
  padding: var(--su16);
22553
22481
  }
22554
- .s-notice code {
22555
- background: var(--_no-code-bg, transparent);
22556
- }
22557
- .s-notice .s-notice--btn {
22558
- color: inherit;
22559
- padding: var(--su8);
22560
- }
22561
- .s-notice .s-notice--btn:focus,
22562
- .s-notice .s-notice--btn:hover {
22563
- background: var(--_no-btn-focus-bg, var(--black-100));
22564
- }
22565
- .s-notice .s-notice--btn:active {
22566
- background: var(--_no-btn-active-bg, var(--black-150));
22567
- }
22568
22482
  @media (prefers-color-scheme: dark) {
22569
22483
  body.theme-system .s-notice:not(.s-notice__important) {
22570
22484
  --_no-bc: var(--_no-bg);
@@ -22590,8 +22504,8 @@ body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
22590
22504
  --_no-bc: var(--_no-bg);
22591
22505
  --_no-bg: var(--black-700);
22592
22506
  --_no-fc: var(--white);
22593
- --_no-btn-focus-bg: var(--black-800);
22594
- --_no-btn-active-bg: var(--black-900);
22507
+ --_no-btn-bg-focus: var(--black-800);
22508
+ --_no-btn-bg-active: var(--black-900);
22595
22509
  }
22596
22510
  body.theme-highcontrast .s-notice__important {
22597
22511
  --_no-bc: var(--_no-bg);
@@ -22599,8 +22513,8 @@ body.theme-highcontrast .s-notice__important {
22599
22513
  .s-notice__danger {
22600
22514
  --_no-bc: var(--red-200);
22601
22515
  --_no-bg: var(--red-050);
22602
- --_no-btn-focus-bg: var(--red-100);
22603
- --_no-btn-active-bg: var(--red-200);
22516
+ --_no-btn-bg-active: var(--red-200);
22517
+ --_no-btn-bg-focus: var(--red-100);
22604
22518
  }
22605
22519
  body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
22606
22520
  --_no-bg: var(--red-200);
@@ -22608,8 +22522,8 @@ body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
22608
22522
  .s-notice__danger.s-notice__important {
22609
22523
  --_no-bc: var(--_no-bg);
22610
22524
  --_no-bg: var(--red-500);
22611
- --_no-btn-focus-bg: var(--red-600);
22612
- --_no-btn-active-bg: var(--red-700);
22525
+ --_no-btn-bg-active: var(--red-700);
22526
+ --_no-btn-bg-focus: var(--red-600);
22613
22527
  }
22614
22528
  @media (prefers-color-scheme: dark) {
22615
22529
  body.theme-system .s-notice__danger.s-notice__important {
@@ -22636,8 +22550,8 @@ body.theme-highcontrast.theme-dark .s-notice__danger.s-notice__important {
22636
22550
  .s-notice__info {
22637
22551
  --_no-bc: var(--theme-secondary-150);
22638
22552
  --_no-bg: var(--theme-secondary-050);
22639
- --_no-btn-focus-bg: var(--theme-secondary-100);
22640
- --_no-btn-active-bg: var(--theme-secondary-150);
22553
+ --_no-btn-bg-focus: var(--theme-secondary-100);
22554
+ --_no-btn-bg-active: var(--theme-secondary-150);
22641
22555
  --_no-code-bg: var(--theme-secondary-150);
22642
22556
  }
22643
22557
  body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
@@ -22654,8 +22568,8 @@ body.theme-highcontrast.theme-dark .s-notice__info:not(.s-notice__important) {
22654
22568
  .s-notice__info.s-notice__important {
22655
22569
  --_no-bc: var(--_no-bg);
22656
22570
  --_no-bg: var(--theme-secondary-400);
22657
- --_no-btn-focus-bg: var(--theme-secondary-500);
22658
- --_no-btn-active-bg: var(--theme-secondary-600);
22571
+ --_no-btn-bg-active: var(--theme-secondary-600);
22572
+ --_no-btn-bg-focus: var(--theme-secondary-500);
22659
22573
  }
22660
22574
  @media (prefers-color-scheme: dark) {
22661
22575
  body.theme-system .s-notice__info.s-notice__important {
@@ -22682,8 +22596,8 @@ body.theme-highcontrast.theme-dark .s-notice__info.s-notice__important {
22682
22596
  .s-notice__success {
22683
22597
  --_no-bc: var(--green-200);
22684
22598
  --_no-bg: var(--green-050);
22685
- --_no-btn-focus-bg: var(--green-100);
22686
- --_no-btn-active-bg: var(--green-200);
22599
+ --_no-btn-bg-active: var(--green-200);
22600
+ --_no-btn-bg-focus: var(--green-100);
22687
22601
  }
22688
22602
  body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
22689
22603
  --_no-bg: var(--green-200);
@@ -22692,8 +22606,8 @@ body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
22692
22606
  --_no-bc: var(--_no-bg);
22693
22607
  --_no-bg: var(--green-400);
22694
22608
  --_no-fc: var(--black-900);
22695
- --_no-btn-focus-bg: var(--green-500);
22696
- --_no-btn-active-bg: var(--green-600);
22609
+ --_no-btn-bg-active: var(--green-600);
22610
+ --_no-btn-bg-focus: var(--green-500);
22697
22611
  }
22698
22612
  @media (prefers-color-scheme: dark) {
22699
22613
  body.theme-system .s-notice__success.s-notice__important {
@@ -22714,8 +22628,8 @@ body.theme-highcontrast .s-notice__success.s-notice__important {
22714
22628
  .s-notice__warning {
22715
22629
  --_no-bc: var(--yellow-300);
22716
22630
  --_no-bg: var(--yellow-050);
22717
- --_no-btn-focus-bg: var(--yellow-200);
22718
- --_no-btn-active-bg: var(--yellow-300);
22631
+ --_no-btn-bg-active: var(--yellow-300);
22632
+ --_no-btn-bg-focus: var(--yellow-200);
22719
22633
  --_no-code-bg: var(--yellow-200);
22720
22634
  }
22721
22635
  body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
@@ -22724,9 +22638,9 @@ body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
22724
22638
  .s-notice__warning.s-notice__important {
22725
22639
  --_no-bc: var(--_no-bg);
22726
22640
  --_no-bg: var(--yellow-400);
22727
- --_no-btn-focus-bg: var(--yellow-500);
22728
- --_no-btn-active-bg: var(--yellow-600);
22729
22641
  --_no-fc: var(--black-900);
22642
+ --_no-btn-bg-active: var(--yellow-600);
22643
+ --_no-btn-bg-focus: var(--yellow-500);
22730
22644
  }
22731
22645
  @media (prefers-color-scheme: dark) {
22732
22646
  body.theme-system .s-notice__warning.s-notice__important {
@@ -22744,38 +22658,52 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
22744
22658
  --_no-bg: var(--yellow-700);
22745
22659
  --_no-fc: var(--white);
22746
22660
  }
22661
+ .s-notice code {
22662
+ background: var(--_no-code-bg, transparent);
22663
+ }
22664
+ .s-notice .s-notice--btn {
22665
+ color: inherit;
22666
+ padding: var(--su8);
22667
+ }
22668
+ .s-notice .s-notice--btn:focus,
22669
+ .s-notice .s-notice--btn:hover {
22670
+ background: var(--_no-btn-bg-focus);
22671
+ }
22672
+ .s-notice .s-notice--btn:active {
22673
+ background: var(--_no-btn-bg-active);
22674
+ }
22747
22675
  .s-toast {
22748
- visibility: hidden;
22749
- position: fixed;
22750
22676
  display: flex;
22751
22677
  justify-content: center;
22752
- top: var(--su16);
22753
22678
  left: var(--su8);
22754
- right: var(--su8);
22755
22679
  opacity: 0;
22756
- z-index: calc(var(--zi-modals) + 1);
22680
+ pointer-events: none;
22681
+ position: fixed;
22682
+ right: var(--su8);
22683
+ top: var(--su16);
22757
22684
  transform: translate3d(0, -66px, 0);
22758
22685
  transition: transform 100ms var(--te-smooth-slow) 0s, opacity 60ms var(--te-smooth-slow) 0ms, visibility 0s 150ms;
22759
- pointer-events: none;
22686
+ visibility: hidden;
22687
+ z-index: calc(var(--zi-modals) + 1);
22688
+ }
22689
+ @media (prefers-reduced-motion) {
22690
+ .s-toast {
22691
+ transform: none !important;
22692
+ }
22760
22693
  }
22761
22694
  .s-toast[aria-hidden="false"] {
22762
- visibility: visible;
22763
22695
  opacity: 1;
22764
22696
  transform: translate3d(0, 0, 0);
22765
22697
  transition: visibility 0s 0s, opacity 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
22766
- }
22767
- @media (prefers-reduced-motion) {
22768
- .s-toast {
22769
- transform: none;
22770
- }
22698
+ visibility: visible;
22771
22699
  }
22772
22700
  .s-toast .s-notice {
22701
+ box-shadow: var(--bs-sm);
22773
22702
  max-width: 44rem;
22774
- width: 100%;
22775
- padding-top: var(--su8);
22776
22703
  padding-bottom: var(--su8);
22777
- box-shadow: var(--bs-sm);
22704
+ padding-top: var(--su8);
22778
22705
  pointer-events: all;
22706
+ width: 100%;
22779
22707
  }
22780
22708
  .s-tag {
22781
22709
  --_ta-bc: var(--theme-tag-border-color);
@@ -23008,14 +22936,4 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
23008
22936
  border-color: var(--_pa-item-bc-hover);
23009
22937
  color: var(--_pa-item-fc-hover);
23010
22938
  }
23011
- .s-sidebarwidget--item[aria-current="true"]:before,
23012
- .s-sidebarwidget--item > :first-child[aria-current="true"]:before,
23013
- .s-sidebarwidget--item[aria-current="page"]:before,
23014
- .s-sidebarwidget--item > :first-child[aria-current="page"]:before {
23015
- border-left-color: var(--theme-primary-color);
23016
- }
23017
- .s-sidebarwidget--subnav li[aria-current="true"],
23018
- .s-sidebarwidget--subnav li[aria-current="page"] {
23019
- background-image: url("data:image/svg+xml,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22?%3E%3Csvg%20version%3D%221.1%22%20viewBox%3D%220%200%207%2010%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22m0.72153%200.68446%204.1336%204.3077-4.1336%204.3077%22%20fill%3D%22none%22%20stroke%3D%22var%28--theme-primary-color%29%22%20stroke-width%3D%222%22/%3E%3C/svg%3E");
23020
- }
23021
22939