@stackoverflow/stacks 1.7.0 → 1.8.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.
@@ -391,6 +391,11 @@ template {
391
391
  [hidden] {
392
392
  display: none;
393
393
  }
394
+ fieldset {
395
+ border: 0;
396
+ min-width: 0;
397
+ padding: 0;
398
+ }
394
399
  .svg-icon,
395
400
  .svg-spot {
396
401
  vertical-align: bottom;
@@ -399,6 +404,13 @@ template {
399
404
  .svg-spot:not(.native) * {
400
405
  fill: currentColor;
401
406
  }
407
+ .is-disabled,
408
+ .is-readonly,
409
+ .has-success,
410
+ .has-error,
411
+ .has-warning {
412
+ position: relative;
413
+ }
402
414
  .s-activity-indicator {
403
415
  --_ai-focus-ring: var(--focus-ring);
404
416
  --_ai-bg: var(--theme-secondary-400);
@@ -905,6 +917,7 @@ body.theme-highcontrast .s-btn {
905
917
  --_bu-bc-selected: var(--_bu-bc);
906
918
  --_bu-badge-o: 0.8;
907
919
  }
920
+ fieldset[disabled] .s-btn,
908
921
  .s-btn[disabled],
909
922
  .s-btn[aria-disabled="true"] {
910
923
  --_bu-bs: none !important;
@@ -1013,6 +1026,25 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
1013
1026
  body.theme-highcontrast .s-btn.s-btn__link {
1014
1027
  text-decoration: underline;
1015
1028
  }
1029
+ .s-btn.s-btn__link.s-link__danger:visited,
1030
+ .s-btn.s-btn__link.s-link__grayscale:visited,
1031
+ .s-btn.s-btn__link.s-link__inherit:visited,
1032
+ .s-btn.s-btn__link.s-link__muted:visited,
1033
+ .s-btn.s-btn__link.s-link__visited:visited {
1034
+ color: var(--_li-fc-visited);
1035
+ }
1036
+ .s-btn.s-btn__link.s-link__danger:visited:active,
1037
+ .s-btn.s-btn__link.s-link__grayscale:visited:active,
1038
+ .s-btn.s-btn__link.s-link__inherit:visited:active,
1039
+ .s-btn.s-btn__link.s-link__muted:visited:active,
1040
+ .s-btn.s-btn__link.s-link__visited:visited:active,
1041
+ .s-btn.s-btn__link.s-link__danger:visited:hover,
1042
+ .s-btn.s-btn__link.s-link__grayscale:visited:hover,
1043
+ .s-btn.s-btn__link.s-link__inherit:visited:hover,
1044
+ .s-btn.s-btn__link.s-link__muted:visited:hover,
1045
+ .s-btn.s-btn__link.s-link__visited:visited:hover {
1046
+ color: var(--_li-fc-hover);
1047
+ }
1016
1048
  .s-btn.s-btn__link.s-link__dropdown {
1017
1049
  padding-right: 0.9em;
1018
1050
  position: relative;
@@ -1057,15 +1089,15 @@ body.theme-highcontrast .s-btn.s-btn__link {
1057
1089
  --_li-fc-hover: var(--black-600);
1058
1090
  --_li-fc-visited: var(--black-700);
1059
1091
  }
1092
+ fieldset[disabled] .s-btn.s-btn__link {
1093
+ box-shadow: none !important;
1094
+ opacity: var(--_o-disabled-static);
1095
+ pointer-events: none;
1096
+ }
1060
1097
  .s-btn.s-btn__link:active,
1061
- .s-btn.s-btn__link:hover,
1062
- .s-btn.s-btn__link:active:visited,
1063
- .s-btn.s-btn__link:hover:visited {
1098
+ .s-btn.s-btn__link:hover {
1064
1099
  color: var(--_li-fc-hover);
1065
1100
  }
1066
- .s-btn.s-btn__link:visited {
1067
- color: var(--_li-fc-visited);
1068
- }
1069
1101
  button.s-btn.s-btn__link {
1070
1102
  appearance: none;
1071
1103
  background: transparent;
@@ -1116,16 +1148,16 @@ button.s-btn.s-btn__link:focus {
1116
1148
  transition: opacity 200ms var(--te-smooth);
1117
1149
  }
1118
1150
  .s-btn.s-btn__xs {
1119
- --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1120
1151
  --_bu-fs: var(--fs-fine);
1152
+ --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1121
1153
  --_bu-p: 0.6em;
1122
1154
  }
1123
1155
  .s-btn.s-btn__sm {
1124
1156
  --_bu-fs: var(--fs-caption);
1125
1157
  }
1126
1158
  .s-btn.s-btn__md {
1127
- --_bu-br: calc(var(--br-sm) + var(--su-static1));
1128
1159
  --_bu-fs: var(--fs-body3);
1160
+ --_bu-br: calc(var(--br-sm) + var(--su-static1));
1129
1161
  --_bu-p: 0.7em;
1130
1162
  }
1131
1163
  body.theme-highcontrast .s-btn.s-btn__danger,
@@ -1608,6 +1640,158 @@ a.s-card {
1608
1640
  .s-card p:last-of-type {
1609
1641
  margin-bottom: 0;
1610
1642
  }
1643
+ .s-checkbox,
1644
+ .s-radio {
1645
+ --_ch-baw: var(--su-static1);
1646
+ --_ch-bc: var(--bc-darker);
1647
+ --_ch-bc-focus: var(--theme-secondary-300);
1648
+ --_ch-bg: var(--white);
1649
+ --_ch-bg-image: unset;
1650
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
1651
+ background-color: var(--_ch-bg);
1652
+ border: var(--_ch-baw) solid var(--_ch-bc);
1653
+ appearance: none;
1654
+ cursor: pointer;
1655
+ font-size: inherit;
1656
+ height: 1em;
1657
+ margin: 0;
1658
+ outline: 0;
1659
+ vertical-align: middle;
1660
+ width: 1em;
1661
+ }
1662
+ fieldset[disabled] .s-checkbox,
1663
+ fieldset[disabled] .s-radio,
1664
+ .s-checkbox[disabled],
1665
+ .s-radio[disabled] {
1666
+ cursor: not-allowed;
1667
+ opacity: var(--_o-disabled-static);
1668
+ }
1669
+ .s-check-group .s-checkbox,
1670
+ .s-check-group .s-radio {
1671
+ margin-top: calc(var(--su2) + var(--su1));
1672
+ }
1673
+ input.s-checkbox,
1674
+ input.s-radio {
1675
+ flex-shrink: 0;
1676
+ }
1677
+ .s-checkbox:focus,
1678
+ .s-radio:focus {
1679
+ box-shadow: var(--_ch-bs-focus);
1680
+ }
1681
+ .s-checkbox {
1682
+ background-image: var(--_ch-bg-image);
1683
+ background-position: center center;
1684
+ background-repeat: no-repeat;
1685
+ background-size: contain;
1686
+ border-radius: var(--br-sm);
1687
+ }
1688
+ @media (prefers-color-scheme: dark) {
1689
+ body.theme-highcontrast.theme-system .s-checkbox:checked,
1690
+ body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
1691
+ --_ch-bc: var(--blue-700) !important;
1692
+ --_ch-bc-focus: var(--_ch-bc);
1693
+ --_ch-bg: var(--blue-300);
1694
+ }
1695
+ }
1696
+ body.theme-highcontrast.theme-dark .s-checkbox:checked,
1697
+ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1698
+ --_ch-bc: var(--blue-700) !important;
1699
+ --_ch-bc-focus: var(--_ch-bc);
1700
+ --_ch-bg: var(--blue-300);
1701
+ }
1702
+ .s-checkbox:checked,
1703
+ .s-checkbox:indeterminate {
1704
+ --_ch-bc: var(--theme-secondary-400) !important;
1705
+ --_ch-bg: var(--theme-secondary-400);
1706
+ }
1707
+ .s-checkbox:checked:focus,
1708
+ .s-checkbox:indeterminate:focus {
1709
+ --_ch-bc-focus: var(--theme-secondary-400);
1710
+ }
1711
+ .s-checkbox:checked {
1712
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
1713
+ }
1714
+ .s-checkbox:indeterminate {
1715
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
1716
+ }
1717
+ .s-checkbox:focus {
1718
+ border-color: var(--_ch-bc-focus);
1719
+ }
1720
+ .s-radio {
1721
+ border-radius: var(--br-circle);
1722
+ }
1723
+ @media (prefers-color-scheme: dark) {
1724
+ body.theme-highcontrast.theme-system .s-radio:checked {
1725
+ --_ch-bc: var(--blue-300);
1726
+ outline: var(--su-static1) solid var(--black);
1727
+ }
1728
+ }
1729
+ body.theme-highcontrast.theme-dark .s-radio:checked {
1730
+ --_ch-bc: var(--blue-300);
1731
+ outline: var(--su-static1) solid var(--black);
1732
+ }
1733
+ @media (prefers-color-scheme: dark) {
1734
+ body.theme-system .s-radio:checked {
1735
+ --_ch-bg: var(--black);
1736
+ }
1737
+ }
1738
+ body.theme-dark .s-radio:checked,
1739
+ .theme-dark__forced .s-radio:checked,
1740
+ body.theme-system .theme-dark__forced .s-radio:checked {
1741
+ --_ch-bg: var(--black);
1742
+ }
1743
+ .s-radio:checked {
1744
+ --_ch-baw: 0.30769231em;
1745
+ --_ch-bc: var(--theme-secondary-400);
1746
+ --_ch-bg: var(--white);
1747
+ }
1748
+ .has-error .s-checkbox,
1749
+ .has-error .s-radio:not(:checked),
1750
+ .has-success .s-checkbox,
1751
+ .has-success .s-radio:not(:checked),
1752
+ .has-warning .s-checkbox,
1753
+ .has-warning .s-radio:not(:checked) {
1754
+ --_ch-bc-focus: var(--_ch-bc);
1755
+ }
1756
+ .has-error .s-checkbox,
1757
+ .has-error .s-radio:not(:checked) {
1758
+ --_ch-bc: var(--red-400);
1759
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
1760
+ }
1761
+ .has-success .s-checkbox,
1762
+ .has-success .s-radio:not(:checked) {
1763
+ --_ch-bc: var(--green-400);
1764
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
1765
+ }
1766
+ .has-warning .s-checkbox,
1767
+ .has-warning .s-radio:not(:checked) {
1768
+ --_ch-bc: var(--yellow-600);
1769
+ --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
1770
+ }
1771
+ .s-check-control {
1772
+ --_cc-ai: center;
1773
+ align-items: var(--_cc-ai);
1774
+ display: flex;
1775
+ gap: var(--su8);
1776
+ }
1777
+ .s-check-group .s-check-control {
1778
+ --_cc-ai: flex-start;
1779
+ }
1780
+ .s-check-control .s-label {
1781
+ font-weight: normal;
1782
+ }
1783
+ .s-check-group {
1784
+ --_cg-fd: column;
1785
+ flex-direction: var(--_cg-fd);
1786
+ display: flex;
1787
+ gap: var(--su8);
1788
+ }
1789
+ .s-check-group.s-check-group__horizontal {
1790
+ --_cg-fd: row;
1791
+ }
1792
+ .s-check-group legend.s-label {
1793
+ margin-bottom: var(--su8);
1794
+ }
1611
1795
  .s-code-block {
1612
1796
  --_cb-line-numbers-bg: var(--black-050);
1613
1797
  }
@@ -1763,6 +1947,14 @@ pre.s-code-block::-webkit-scrollbar-corner {
1763
1947
  background-color: transparent;
1764
1948
  border-color: transparent;
1765
1949
  }
1950
+ .s-description {
1951
+ color: var(--fc-medium);
1952
+ font-size: var(--fs-caption);
1953
+ padding: 0 var(--su2);
1954
+ }
1955
+ .is-disabled .s-description {
1956
+ opacity: var(--_o-disabled-static);
1957
+ }
1766
1958
  .s-expandable {
1767
1959
  --_ex-after-h: 10px;
1768
1960
  --_ex-after-hmx: 0;
@@ -1827,388 +2019,219 @@ pre.s-code-block::-webkit-scrollbar-corner {
1827
2019
  }
1828
2020
  .s-input,
1829
2021
  .s-textarea {
2022
+ --_in-bc: var(--bc-darker);
2023
+ --_in-bc-focus: var(--theme-secondary-300);
2024
+ --_in-bg: var(--white);
2025
+ --_in-br: var(--br-sm);
2026
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
2027
+ --_in-c: unset;
2028
+ --_in-fc: var(--fc-dark);
2029
+ --_in-fc-focus: var(--black);
2030
+ --_in-fs: var(--fs-body1);
2031
+ --_in-o: unset;
2032
+ --_in-px: 0.7em;
2033
+ --_in-py: 0.6em;
2034
+ --_in-placeholder-fc: var(--black-200);
2035
+ scrollbar-color: var(--scrollbar) transparent;
2036
+ background-color: var(--_in-bg);
2037
+ border: var(--su-static1) solid var(--_in-bc);
2038
+ border-radius: var(--_in-br);
2039
+ color: var(--_in-fc);
2040
+ cursor: var(--_in-c);
2041
+ font-size: var(--_in-fs);
2042
+ opacity: var(--_in-o);
2043
+ padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
1830
2044
  -webkit-appearance: none;
1831
- width: 100%;
1832
- margin: 0;
1833
- padding: 0.6em 0.7em;
1834
- border: 1px solid var(--bc-darker);
1835
- border-radius: var(--br-sm);
1836
- background-color: var(--white);
1837
- color: var(--fc-dark);
1838
- font-size: var(--fs-body1);
1839
2045
  font-family: inherit;
1840
- scrollbar-color: var(--scrollbar) transparent;
2046
+ margin: 0;
2047
+ width: 100%;
1841
2048
  }
1842
2049
  @supports (-webkit-overflow-scrolling: touch) {
1843
2050
  .s-input,
1844
2051
  .s-textarea {
1845
- font-size: 16px;
1846
- padding: 0.36em 0.55em;
2052
+ --_in-fs: var(--su-static16);
2053
+ --_in-px: 0.55em;
2054
+ --_in-py: 0.36em;
1847
2055
  }
1848
2056
  .s-input::-webkit-input-placeholder,
1849
2057
  .s-textarea::-webkit-input-placeholder {
1850
2058
  line-height: normal !important;
1851
2059
  }
1852
2060
  }
1853
- .s-input::-webkit-input-placeholder,
1854
- .s-textarea::-webkit-input-placeholder {
1855
- color: var(--black-200);
1856
- }
1857
- body.theme-highcontrast .s-input::-webkit-input-placeholder,
1858
- body.theme-highcontrast .s-textarea::-webkit-input-placeholder {
1859
- color: var(--black-400);
1860
- }
1861
- .s-input::placeholder,
1862
- .s-textarea::placeholder {
1863
- color: var(--black-200);
1864
- opacity: 1;
1865
- }
1866
- body.theme-highcontrast .s-input::placeholder,
1867
- body.theme-highcontrast .s-textarea::placeholder {
1868
- color: var(--black-400);
1869
- }
1870
- .s-input::-webkit-scrollbar,
1871
- .s-textarea::-webkit-scrollbar {
1872
- width: calc(var(--su-static12) - var(--su-static2));
1873
- height: calc(var(--su-static12) - var(--su-static2));
1874
- background-color: transparent;
1875
- }
1876
- .s-input::-webkit-scrollbar-track,
1877
- .s-textarea::-webkit-scrollbar-track {
1878
- border-radius: calc(var(--su-static12) - var(--su-static2));
1879
- background-color: transparent;
1880
- }
1881
- .s-input::-webkit-scrollbar-thumb,
1882
- .s-textarea::-webkit-scrollbar-thumb {
1883
- border-radius: calc(var(--su-static12) - var(--su-static2));
1884
- background-color: var(--scrollbar);
1885
- }
1886
- .s-input::-webkit-scrollbar-corner,
1887
- .s-textarea::-webkit-scrollbar-corner {
1888
- background-color: transparent;
1889
- border-color: transparent;
1890
- }
1891
- .s-input::-webkit-contacts-auto-fill-button,
1892
- .s-textarea::-webkit-contacts-auto-fill-button {
1893
- background-color: var(--black);
1894
- }
1895
- .s-input:-webkit-autofill,
1896
- .s-textarea:-webkit-autofill {
1897
- border-color: var(--blue-300);
1898
- -webkit-text-fill-color: var(--black);
1899
- -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
1900
- transition: background-color 0s 50000s;
1901
- }
1902
- .s-input:-webkit-autofill:focus,
1903
- .s-textarea:-webkit-autofill:focus {
1904
- border-color: var(--blue-300);
1905
- -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
1906
- }
1907
- .s-input.s-input__search,
1908
- .s-input.s-input__creditcard {
1909
- padding-left: var(--su-static32);
1910
- }
1911
- fieldset {
1912
- min-width: 0;
1913
- padding: 0;
1914
- border: 0;
1915
- }
1916
- fieldset[disabled] a,
1917
- fieldset[disabled] .s-btn,
1918
- fieldset[disabled] .s-link {
1919
- box-shadow: none !important;
1920
- opacity: var(--_o-disabled-static);
1921
- pointer-events: none;
1922
- }
1923
- fieldset[disabled] .s-checkbox,
1924
- fieldset[disabled] .s-input-message,
1925
- fieldset[disabled] .s-radio,
1926
- fieldset[disabled] .s-toggle-switch,
1927
- fieldset[disabled] .s-toggle-switch label {
1928
- cursor: not-allowed;
1929
- opacity: var(--_o-disabled-static);
2061
+ body.theme-highcontrast .s-input,
2062
+ body.theme-highcontrast .s-textarea {
2063
+ --_in-bc: var(--black);
2064
+ --_in-placeholder-fc: var(--black-400);
1930
2065
  }
1931
2066
  fieldset[disabled] .s-input,
1932
2067
  fieldset[disabled] .s-textarea,
1933
- fieldset[disabled] .s-select > select {
1934
- cursor: not-allowed;
1935
- opacity: var(--_o-disabled-static);
1936
- }
1937
- .s-description {
1938
- padding: 0 var(--su2);
1939
- color: var(--fc-medium);
1940
- font-size: var(--fs-caption);
1941
- }
1942
- .s-input-fill {
1943
- padding: 0.6em 0.7em;
1944
- border: 1px solid var(--bc-darker);
1945
- border-right-width: 0;
1946
- border-left-width: 0;
1947
- background-color: var(--black-050);
1948
- color: var(--fc-medium);
1949
- font-family: inherit;
1950
- white-space: nowrap;
1951
- line-height: var(--lh-sm);
1952
- }
1953
- .s-input-fill.s-input-fill__clear {
1954
- border-color: transparent;
1955
- background-color: transparent;
1956
- }
1957
- .s-input-fill.order-first {
1958
- border-left-width: 1px;
1959
- border-top-left-radius: var(--br-sm);
1960
- border-bottom-left-radius: var(--br-sm);
2068
+ .s-input[disabled],
2069
+ .s-textarea[disabled],
2070
+ .s-input[readonly],
2071
+ .s-textarea[readonly],
2072
+ .is-readonly .s-input,
2073
+ .is-readonly .s-textarea {
2074
+ --_in-c: not-allowed;
1961
2075
  }
1962
- .s-input-fill.order-last {
1963
- border-right-width: 1px;
1964
- border-top-right-radius: var(--br-sm);
1965
- border-bottom-right-radius: var(--br-sm);
2076
+ fieldset[disabled] .s-input,
2077
+ fieldset[disabled] .s-textarea,
2078
+ .s-input[disabled],
2079
+ .s-textarea[disabled] {
2080
+ --_in-o: var(--_o-disabled-static);
1966
2081
  }
1967
- .s-select {
1968
- position: relative;
1969
- color: var(--fc-dark);
2082
+ .s-input[readonly],
2083
+ .s-textarea[readonly],
2084
+ .is-readonly .s-input,
2085
+ .is-readonly .s-textarea {
2086
+ --_in-bg: var(--black-050);
2087
+ --_in-bc: var(--bc-light);
2088
+ --_in-fc: var(--black-200);
2089
+ --_in-fc-focus: var(--_in-fc);
1970
2090
  }
1971
- .s-select:before,
1972
- .s-select:after {
1973
- content: "";
1974
- position: absolute;
1975
- z-index: var(--zi-selected);
1976
- right: 13px;
1977
- border-color: currentColor transparent;
1978
- border-style: solid;
1979
- border-width: 4px;
1980
- pointer-events: none;
2091
+ body.theme-highcontrast .s-input[readonly],
2092
+ body.theme-highcontrast .s-textarea[readonly],
2093
+ body.theme-highcontrast .is-readonly .s-input,
2094
+ body.theme-highcontrast .is-readonly .s-textarea {
2095
+ --_in-fc: var(--fc-light);
1981
2096
  }
1982
- .s-select:before {
1983
- top: calc(50% - 5px);
1984
- border-top-width: 0;
1985
- border-bottom-width: 4px;
2097
+ .has-error .s-input,
2098
+ .has-error .s-textarea,
2099
+ .has-success .s-input,
2100
+ .has-success .s-textarea,
2101
+ .has-warning .s-input,
2102
+ .has-warning .s-textarea {
2103
+ --_in-bc-focus: var(--_in-bc);
1986
2104
  }
1987
- .s-select:after {
1988
- top: calc(50% + 1px);
1989
- border-top-width: 4px;
1990
- border-bottom-width: 0;
2105
+ .has-error .s-input,
2106
+ .has-error .s-textarea {
2107
+ --_in-bc: var(--red-400);
2108
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
1991
2109
  }
1992
- .s-select > select {
1993
- -webkit-appearance: none;
1994
- -moz-appearance: none;
1995
- appearance: none;
1996
- position: relative;
1997
- width: 100%;
1998
- height: 100%;
1999
- padding: 0.6em 0.7em;
2000
- padding-right: var(--su32);
2001
- border: 1px solid var(--bc-darker);
2002
- border-radius: var(--br-sm);
2003
- background-color: var(--white);
2004
- outline: 0;
2005
- font-size: var(--fs-body1);
2006
- font-family: inherit;
2007
- color: var(--black);
2008
- line-height: var(--lh-sm);
2110
+ body.theme-highcontrast .has-error .s-input,
2111
+ body.theme-highcontrast .has-error .s-textarea {
2112
+ --_in-bc: var(--red-400);
2009
2113
  }
2010
- .s-select > select::-moz-focus-inner {
2011
- outline: none !important;
2114
+ .has-success .s-input,
2115
+ .has-success .s-textarea {
2116
+ --_in-bc: var(--green-400);
2117
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
2012
2118
  }
2013
- .s-select > select:-moz-focusring {
2014
- color: transparent;
2015
- text-shadow: 0 0 0 #000;
2119
+ body.theme-highcontrast .has-success .s-input,
2120
+ body.theme-highcontrast .has-success .s-textarea {
2121
+ --_in-bc: var(--green-400);
2016
2122
  }
2017
- .s-select > select::-ms-expand {
2018
- display: none;
2123
+ .has-warning .s-input,
2124
+ .has-warning .s-textarea {
2125
+ --_in-bc: var(--yellow-600);
2126
+ --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2127
+ }
2128
+ body.theme-highcontrast .has-warning .s-input,
2129
+ body.theme-highcontrast .has-warning .s-textarea {
2130
+ --_in-bc: var(--yellow-600);
2131
+ }
2132
+ .s-input.s-input__sm,
2133
+ .s-input.s-textarea__sm,
2134
+ .s-textarea.s-input__sm,
2135
+ .s-textarea.s-textarea__sm {
2136
+ --_in-fs: var(--fs-caption);
2137
+ }
2138
+ .s-input.s-input__md,
2139
+ .s-input.s-textarea__md,
2140
+ .s-textarea.s-input__md,
2141
+ .s-textarea.s-textarea__md {
2142
+ --_in-fs: var(--fs-body3);
2143
+ --_in-br: calc(var(--br-sm) + var(--su-static1));
2019
2144
  }
2020
2145
  @supports (-webkit-overflow-scrolling: touch) {
2021
- .s-select > select {
2022
- font-size: 16px;
2023
- padding: 0.4em 0.55em;
2024
- }
2146
+ .s-input.s-input__md,
2147
+ .s-input.s-textarea__md,
2148
+ .s-textarea.s-input__md,
2149
+ .s-textarea.s-textarea__md {
2150
+ --_in-fs: 17px;
2151
+ --_in-py: 0.4em;
2152
+ }
2153
+ }
2154
+ .s-input.s-input__lg,
2155
+ .s-input.s-textarea__lg,
2156
+ .s-textarea.s-input__lg,
2157
+ .s-textarea.s-textarea__lg {
2158
+ --_in-fs: var(--fs-title);
2159
+ --_in-br: calc(var(--br-sm) + var(--su-static1));
2160
+ --_in-px: 0.6em;
2161
+ --_in-py: 0.45em;
2162
+ }
2163
+ .s-input.s-input__xl,
2164
+ .s-input.s-textarea__xl,
2165
+ .s-textarea.s-input__xl,
2166
+ .s-textarea.s-textarea__xl {
2167
+ --_in-fs: var(--fs-headline1);
2168
+ --_in-br: var(--br-md);
2169
+ --_in-px: 0.5em;
2170
+ --_in-py: 0.4em;
2025
2171
  }
2026
- .s-select > select::-webkit-contacts-auto-fill-button {
2027
- background-color: var(--black);
2028
- }
2029
- .s-select > select:-webkit-autofill {
2030
- border-color: var(--blue-300);
2031
- -webkit-text-fill-color: var(--black);
2172
+ .s-input:-webkit-autofill,
2173
+ .s-textarea:-webkit-autofill {
2032
2174
  -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
2175
+ -webkit-text-fill-color: var(--black);
2176
+ border-color: var(--blue-300);
2033
2177
  transition: background-color 0s 50000s;
2034
2178
  }
2035
- .s-select > select:-webkit-autofill:focus {
2179
+ .s-input:-webkit-autofill:focus,
2180
+ .s-textarea:-webkit-autofill:focus {
2036
2181
  border-color: var(--blue-300);
2037
2182
  -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
2038
2183
  }
2039
- .s-check-control {
2040
- display: flex;
2041
- gap: var(--su8);
2042
- align-items: center;
2043
- }
2044
- .s-check-control .s-label {
2045
- font-weight: normal;
2046
- }
2047
- .s-check-group {
2048
- display: flex;
2049
- flex-direction: column;
2050
- gap: var(--su8);
2051
- }
2052
- .s-check-group.s-check-group__horizontal {
2053
- flex-direction: row;
2054
- }
2055
- .s-check-group legend.s-label {
2056
- margin-bottom: var(--su8);
2057
- }
2058
- .s-check-group .s-check-control {
2059
- align-items: flex-start;
2060
- }
2061
- .s-check-group .s-checkbox,
2062
- .s-check-group .s-radio {
2063
- margin-top: calc(var(--su2) + var(--su1));
2064
- }
2065
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2066
- .s-checkbox,
2067
- .s-radio {
2068
- -webkit-appearance: none;
2069
- -moz-appearance: none;
2070
- appearance: none;
2071
- margin: 0;
2072
- width: 1em;
2073
- height: 1em;
2074
- border: 1px solid var(--bc-darker);
2075
- background-color: var(--white);
2076
- outline: 0;
2077
- font-size: inherit;
2078
- vertical-align: middle;
2079
- cursor: pointer;
2080
- }
2081
- .s-checkbox::-ms-check,
2082
- .s-radio::-ms-check {
2083
- display: none;
2084
- }
2085
- }
2086
- input.s-checkbox,
2087
- input.s-radio {
2088
- flex-shrink: 0;
2089
- }
2090
- .s-checkbox[disabled],
2091
- .s-radio[disabled] {
2092
- opacity: var(--_o-disabled-static);
2093
- cursor: not-allowed;
2094
- }
2095
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2096
- .s-checkbox {
2097
- border-radius: var(--br-sm);
2098
- background-position: center center;
2099
- background-repeat: no-repeat;
2100
- background-size: contain;
2101
- }
2102
- .s-checkbox:checked,
2103
- .s-checkbox:indeterminate {
2104
- border-color: var(--theme-secondary-400) !important;
2105
- background-color: var(--theme-secondary-400);
2106
- }
2107
- @media (prefers-color-scheme: dark) {
2108
- body.theme-highcontrast.theme-system .s-checkbox:checked,
2109
- body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
2110
- border-color: var(--blue-700) !important;
2111
- background-color: var(--blue-300);
2112
- }
2113
- }
2114
- body.theme-highcontrast.theme-dark .s-checkbox:checked,
2115
- body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
2116
- border-color: var(--blue-700) !important;
2117
- background-color: var(--blue-300);
2118
- }
2119
- .s-checkbox:checked:focus,
2120
- .s-checkbox:indeterminate:focus {
2121
- border-color: var(--theme-secondary-400);
2122
- }
2123
- .s-checkbox:checked {
2124
- background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
2125
- }
2126
- .s-checkbox:indeterminate {
2127
- background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
2128
- }
2129
- .s-checkbox:focus {
2130
- border-color: var(--theme-secondary-300);
2131
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2132
- }
2133
- }
2134
- @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
2135
- .s-radio {
2136
- border-radius: var(--br-circle);
2137
- }
2138
- .s-radio:checked {
2139
- border-color: var(--theme-secondary-400);
2140
- border-width: 0.30769231em;
2141
- background-color: hsl(0, 0%, 100%);
2142
- }
2143
- @media (prefers-color-scheme: dark) {
2144
- body.theme-highcontrast.theme-system .s-radio:checked {
2145
- border-color: var(--blue-300);
2146
- outline: 1px solid var(--black);
2147
- }
2148
- }
2149
- body.theme-highcontrast.theme-dark .s-radio:checked {
2150
- border-color: var(--blue-300);
2151
- outline: 1px solid var(--black);
2152
- }
2153
- .s-radio:focus {
2154
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2155
- }
2184
+ .s-input::-webkit-contacts-auto-fill-button,
2185
+ .s-textarea::-webkit-contacts-auto-fill-button {
2186
+ background-color: var(--black);
2156
2187
  }
2157
- .s-input:focus,
2158
- .s-input.has-focus,
2159
- .s-textarea:focus,
2160
- .s-select > select:focus {
2161
- border-color: var(--theme-secondary-300);
2162
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2163
- color: var(--black);
2164
- outline: 0;
2188
+ .s-input::placeholder,
2189
+ .s-textarea::placeholder,
2190
+ .s-input::-webkit-input-placeholder,
2191
+ .s-textarea::-webkit-input-placeholder {
2192
+ color: var(--_in-placeholder-fc);
2165
2193
  }
2166
- body.theme-highcontrast .s-input:focus,
2167
- body.theme-highcontrast .s-input.has-focus,
2168
- body.theme-highcontrast .s-textarea:focus,
2169
- body.theme-highcontrast .s-select > select:focus {
2170
- border-color: var(--black);
2194
+ .s-input::placeholder,
2195
+ .s-textarea::placeholder {
2196
+ opacity: 1;
2171
2197
  }
2172
- .s-input:focus-within {
2173
- border-color: var(--theme-secondary-300);
2174
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
2175
- color: var(--black);
2176
- outline: 0;
2198
+ .s-input.s-input__creditcard,
2199
+ .s-input.s-textarea__creditcard,
2200
+ .s-textarea.s-input__creditcard,
2201
+ .s-textarea.s-textarea__creditcard,
2202
+ .s-input.s-input__search,
2203
+ .s-input.s-textarea__search,
2204
+ .s-textarea.s-input__search,
2205
+ .s-textarea.s-textarea__search {
2206
+ --_in-pl: var(--su-static32);
2177
2207
  }
2178
- body.theme-highcontrast .s-input:focus-within {
2179
- border-color: var(--black);
2208
+ .s-input:focus,
2209
+ .s-textarea:focus {
2210
+ border-color: var(--_in-bc-focus);
2211
+ box-shadow: var(--_in-bs-focus);
2212
+ color: var(--_in-fc-focus);
2213
+ outline: 0;
2180
2214
  }
2181
- .s-input[disabled],
2182
- .s-textarea[disabled],
2183
- .s-select > select[disabled] {
2184
- cursor: not-allowed;
2185
- opacity: var(--_o-disabled-static);
2215
+ .s-input::-webkit-scrollbar,
2216
+ .s-textarea::-webkit-scrollbar {
2217
+ width: calc(var(--su-static12) - var(--su-static2));
2218
+ height: calc(var(--su-static12) - var(--su-static2));
2219
+ background-color: transparent;
2186
2220
  }
2187
- .s-input[readonly],
2188
- .s-textarea[readonly],
2189
- .s-select > select[readonly],
2190
- .is-readonly .s-input,
2191
- .is-readonly .s-textarea,
2192
- .is-readonly .s-select > select {
2193
- border-color: var(--bc-light);
2194
- background-color: var(--black-050);
2195
- color: var(--black-200);
2196
- cursor: not-allowed;
2221
+ .s-input::-webkit-scrollbar-track,
2222
+ .s-textarea::-webkit-scrollbar-track {
2223
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2224
+ background-color: transparent;
2197
2225
  }
2198
- body.theme-highcontrast .s-input[readonly],
2199
- body.theme-highcontrast .s-textarea[readonly],
2200
- body.theme-highcontrast .s-select > select[readonly],
2201
- body.theme-highcontrast .is-readonly .s-input,
2202
- body.theme-highcontrast .is-readonly .s-textarea,
2203
- body.theme-highcontrast .is-readonly .s-select > select {
2204
- color: var(--fc-light);
2226
+ .s-input::-webkit-scrollbar-thumb,
2227
+ .s-textarea::-webkit-scrollbar-thumb {
2228
+ border-radius: calc(var(--su-static12) - var(--su-static2));
2229
+ background-color: var(--scrollbar);
2205
2230
  }
2206
- .is-disabled,
2207
- .is-readonly,
2208
- .has-success,
2209
- .has-error,
2210
- .has-warning {
2211
- position: relative;
2231
+ .s-input::-webkit-scrollbar-corner,
2232
+ .s-textarea::-webkit-scrollbar-corner {
2233
+ background-color: transparent;
2234
+ border-color: transparent;
2212
2235
  }
2213
2236
  .is-disabled .s-input,
2214
2237
  .is-readonly .s-input,
@@ -2217,12 +2240,17 @@ body.theme-highcontrast .is-readonly .s-select > select {
2217
2240
  .has-warning .s-input {
2218
2241
  padding-right: var(--su32);
2219
2242
  }
2220
- .is-disabled .s-select .s-input-icon,
2221
- .is-readonly .s-select .s-input-icon,
2222
- .has-success .s-select .s-input-icon,
2223
- .has-error .s-select .s-input-icon,
2224
- .has-warning .s-select .s-input-icon {
2225
- right: var(--su32);
2243
+ .s-input:focus-within {
2244
+ border-color: var(--_in-bc-focus);
2245
+ box-shadow: var(--_in-bs-focus);
2246
+ color: var(--_in-fc-focus);
2247
+ outline: 0;
2248
+ }
2249
+ body.theme-highcontrast .s-input:focus-within {
2250
+ --_in-bc-focus: var(--black);
2251
+ }
2252
+ .s-input.s-input__md {
2253
+ --_in-py: 0.5em;
2226
2254
  }
2227
2255
  .is-disabled .s-textarea,
2228
2256
  .is-readonly .s-textarea,
@@ -2231,167 +2259,115 @@ body.theme-highcontrast .is-readonly .s-select > select {
2231
2259
  .has-warning .s-textarea {
2232
2260
  padding-right: var(--su48);
2233
2261
  }
2234
- .is-disabled .s-textarea ~ .s-input-icon,
2235
- .is-readonly .s-textarea ~ .s-input-icon,
2236
- .has-success .s-textarea ~ .s-input-icon,
2237
- .has-error .s-textarea ~ .s-input-icon,
2238
- .has-warning .s-textarea ~ .s-input-icon {
2239
- top: 1.5em;
2240
- right: 1.5em;
2241
- }
2242
- .is-disabled .s-input-message a,
2243
- .is-readonly .s-input-message a,
2244
- .has-success .s-input-message a,
2245
- .has-error .s-input-message a,
2246
- .has-warning .s-input-message a {
2247
- text-decoration: underline;
2248
- }
2249
- .has-warning .s-input,
2250
- .has-warning .s-textarea,
2251
- .has-warning .s-checkbox,
2252
- .has-warning .s-radio:not(:checked),
2253
- .has-warning .s-select > select {
2254
- border-color: var(--yellow-600);
2255
- }
2256
- .has-warning .s-input:focus,
2257
- .has-warning .s-textarea:focus,
2258
- .has-warning .s-checkbox:focus,
2259
- .has-warning .s-radio:not(:checked):focus,
2260
- .has-warning .s-select > select:focus {
2261
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2262
- }
2263
- .has-warning .s-input-message {
2264
- color: var(--yellow-800);
2265
- }
2266
- .has-warning .s-input-message a {
2267
- color: var(--yellow-900);
2262
+ .s-textarea.s-textarea__md {
2263
+ --_in-py: 0.72em;
2268
2264
  }
2269
- .has-warning .s-input-icon {
2270
- color: var(--yellow-600);
2265
+ .s-textarea ~ .s-input-icon {
2266
+ right: 1.5em;
2267
+ top: 1.5em;
2271
2268
  }
2272
- .has-error .s-input,
2273
- .has-error .s-textarea,
2274
- .has-error .s-checkbox,
2275
- .has-error .s-radio:not(:checked),
2276
- .has-error .s-select > select {
2277
- border-color: var(--red-400);
2269
+ .s-input-fill {
2270
+ --_if-bc: var(--bc-darker);
2271
+ --_if-bg: var(--black-050);
2272
+ --_if-blw: 0;
2273
+ --_if-blr: 0;
2274
+ --_if-brr: 0;
2275
+ --_if-brw: 0;
2276
+ background-color: var(--_if-bg);
2277
+ border: var(--su-static1) solid var(--_if-bc);
2278
+ border-left-width: var(--_if-blw);
2279
+ border-right-width: var(--_if-brw);
2280
+ border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
2281
+ color: var(--fc-medium);
2282
+ font-family: inherit;
2283
+ line-height: var(--lh-sm);
2284
+ padding: 0.6em 0.7em;
2285
+ white-space: nowrap;
2278
2286
  }
2279
- .has-error .s-input:focus,
2280
- .has-error .s-textarea:focus,
2281
- .has-error .s-checkbox:focus,
2282
- .has-error .s-radio:not(:checked):focus,
2283
- .has-error .s-select > select:focus {
2284
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
2287
+ .s-input-fill.s-input-fill__clear {
2288
+ --_if-bc: transparent;
2289
+ --_if-bg: transparent;
2285
2290
  }
2286
- .has-error .s-input-message {
2287
- color: var(--red-500);
2291
+ .s-input-fill.order-first {
2292
+ --_if-blw: var(--su-static1);
2293
+ --_if-blr: var(--br-sm);
2288
2294
  }
2289
- .has-error .s-input-message a {
2290
- color: var(--red-800);
2295
+ .s-input-fill.order-last {
2296
+ --_if-brw: var(--su-static1);
2297
+ --_if-brr: var(--br-sm);
2291
2298
  }
2292
- .has-error .s-input-message a:hover {
2293
- color: var(--red-900);
2299
+ .s-input-icon {
2300
+ --_ii-fc: unset;
2301
+ --_ii-r: 0.7em;
2302
+ color: var(--_ii-fc);
2303
+ right: var(--_ii-r);
2304
+ margin-top: -9px;
2305
+ pointer-events: none;
2306
+ position: absolute;
2307
+ top: 50%;
2294
2308
  }
2295
2309
  .has-error .s-input-icon {
2296
- color: var(--red-400);
2297
- }
2298
- .has-success .s-input,
2299
- .has-success .s-textarea,
2300
- .has-success .s-checkbox,
2301
- .has-success .s-radio:not(:checked),
2302
- .has-success .s-select > select {
2303
- border-color: var(--green-400);
2304
- }
2305
- .has-success .s-input:focus,
2306
- .has-success .s-textarea:focus,
2307
- .has-success .s-checkbox:focus,
2308
- .has-success .s-radio:not(:checked):focus,
2309
- .has-success .s-select > select:focus {
2310
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
2311
- }
2312
- .has-success .s-input-message {
2313
- color: var(--green-500);
2314
- }
2315
- .has-success .s-input-message a {
2316
- color: var(--green-800);
2317
- }
2318
- .has-success .s-input-message a:hover {
2319
- color: var(--green-900);
2310
+ --_ii-fc: var(--red-400);
2320
2311
  }
2321
2312
  .has-success .s-input-icon {
2322
- color: var(--green-400);
2323
- }
2324
- .is-disabled .s-select:before,
2325
- .is-disabled .s-select:after {
2326
- border-color: var(--bc-darker) transparent;
2313
+ --_ii-fc: var(--green-400);
2327
2314
  }
2328
- .is-disabled .s-description {
2329
- opacity: var(--_o-disabled-static);
2315
+ .has-warning .s-input-icon {
2316
+ --_ii-fc: var(--yellow-600);
2330
2317
  }
2331
2318
  .is-disabled .s-input-icon {
2332
- color: var(--black-400);
2319
+ --_ii-fc: var(--black-400);
2333
2320
  }
2334
2321
  .is-readonly .s-input-icon {
2335
- color: var(--black-200);
2322
+ --_ii-fc: var(--black-200);
2336
2323
  }
2337
2324
  body.theme-highcontrast .is-readonly .s-input-icon {
2338
- color: var(--fc-light);
2339
- }
2340
- .s-input-icon {
2341
- position: absolute;
2342
- top: 50%;
2343
- right: 0.7em;
2344
- margin-top: -9px;
2345
- pointer-events: none;
2325
+ --_ii-fc: var(--fc-light);
2346
2326
  }
2347
- .s-input-icon.s-input-icon__search,
2348
- .s-input-icon.s-input-icon__creditcard {
2349
- right: auto;
2350
- left: 0.7em;
2327
+ .s-input-icon.s-input-icon__creditcard,
2328
+ .s-input-icon.s-input-icon__search {
2329
+ --_ii-r: auto;
2351
2330
  color: var(--black-400);
2331
+ left: 0.7em;
2352
2332
  }
2353
2333
  .s-input-message {
2354
- padding: var(--su2);
2334
+ --_im-fc: unset;
2335
+ --_im-a-fc: unset;
2336
+ --_im-a-fc-hover: unset;
2337
+ color: var(--_im-fc);
2355
2338
  font-size: var(--fs-caption);
2339
+ padding: var(--su2);
2356
2340
  }
2357
- .s-input__sm,
2358
- .s-textarea__sm,
2359
- .s-select__sm > select {
2360
- font-size: var(--fs-caption);
2341
+ .is-disabled .s-input-message a,
2342
+ .is-readonly .s-input-message a,
2343
+ .has-success .s-input-message a,
2344
+ .has-error .s-input-message a,
2345
+ .has-warning .s-input-message a {
2346
+ text-decoration: underline;
2361
2347
  }
2362
- .s-input__md,
2363
- .s-textarea__md,
2364
- .s-select__md > select {
2365
- font-size: var(--fs-body3);
2366
- padding-top: 0.5em;
2367
- padding-bottom: 0.5em;
2368
- border-radius: calc(var(--br-sm) + 1px);
2369
- }
2370
- .s-textarea__md {
2371
- padding-top: 0.72em;
2372
- padding-bottom: 0.72em;
2373
- }
2374
- .s-input__lg,
2375
- .s-textarea__lg,
2376
- .s-select__lg > select {
2377
- font-size: var(--fs-title);
2378
- padding: 0.45em 0.6em;
2379
- border-radius: calc(var(--br-sm) + 1px);
2380
- }
2381
- .s-input__xl,
2382
- .s-textarea__xl,
2383
- .s-select__xl > select {
2384
- font-size: var(--fs-headline1);
2385
- padding: 0.4em 0.5em;
2386
- border-radius: var(--br-md);
2348
+ fieldset[disabled] .s-input-message {
2349
+ cursor: not-allowed;
2350
+ opacity: var(--_o-disabled-static);
2387
2351
  }
2388
- @supports (-webkit-overflow-scrolling: touch) {
2389
- .s-input__md,
2390
- .s-textarea__md {
2391
- font-size: 17px;
2392
- padding-top: 0.4em;
2393
- padding-bottom: 0.4em;
2394
- }
2352
+ .has-error .s-input-message {
2353
+ --_im-fc: var(--red-500);
2354
+ --_im-a-fc: var(--red-800);
2355
+ --_im-a-fc-hover: var(--red-900);
2356
+ }
2357
+ .has-success .s-input-message {
2358
+ --_im-fc: var(--green-500);
2359
+ --_im-a-fc: var(--green-800);
2360
+ --_im-a-fc-hover: var(--green-900);
2361
+ }
2362
+ .has-warning .s-input-message {
2363
+ --_im-fc: var(--yellow-800);
2364
+ --_im-a-fc: var(--yellow-900);
2365
+ }
2366
+ .s-input-message a {
2367
+ color: var(--_im-a-fc);
2368
+ }
2369
+ .s-input-message a:hover {
2370
+ color: var(--_im-a-fc-hover);
2395
2371
  }
2396
2372
  .s-label {
2397
2373
  --_la-fs: var(--fs-body2);
@@ -2406,7 +2382,8 @@ body.theme-highcontrast .is-readonly .s-input-icon {
2406
2382
  }
2407
2383
  fieldset[disabled] .s-label,
2408
2384
  .is-disabled .s-label,
2409
- .s-check-control [disabled] + .s-label {
2385
+ .s-check-control .s-checkbox[disabled] + .s-label,
2386
+ .s-check-control .s-radio[disabled] + .s-label {
2410
2387
  cursor: not-allowed;
2411
2388
  opacity: var(--_o-disabled-static);
2412
2389
  }
@@ -2503,6 +2480,40 @@ body.theme-highcontrast a,
2503
2480
  body.theme-highcontrast .s-link {
2504
2481
  text-decoration: underline;
2505
2482
  }
2483
+ a.s-link__danger:visited,
2484
+ .s-link.s-link__danger:visited,
2485
+ a.s-link__grayscale:visited,
2486
+ .s-link.s-link__grayscale:visited,
2487
+ a.s-link__inherit:visited,
2488
+ .s-link.s-link__inherit:visited,
2489
+ a.s-link__muted:visited,
2490
+ .s-link.s-link__muted:visited,
2491
+ a.s-link__visited:visited,
2492
+ .s-link.s-link__visited:visited {
2493
+ color: var(--_li-fc-visited);
2494
+ }
2495
+ a.s-link__danger:visited:active,
2496
+ .s-link.s-link__danger:visited:active,
2497
+ a.s-link__grayscale:visited:active,
2498
+ .s-link.s-link__grayscale:visited:active,
2499
+ a.s-link__inherit:visited:active,
2500
+ .s-link.s-link__inherit:visited:active,
2501
+ a.s-link__muted:visited:active,
2502
+ .s-link.s-link__muted:visited:active,
2503
+ a.s-link__visited:visited:active,
2504
+ .s-link.s-link__visited:visited:active,
2505
+ a.s-link__danger:visited:hover,
2506
+ .s-link.s-link__danger:visited:hover,
2507
+ a.s-link__grayscale:visited:hover,
2508
+ .s-link.s-link__grayscale:visited:hover,
2509
+ a.s-link__inherit:visited:hover,
2510
+ .s-link.s-link__inherit:visited:hover,
2511
+ a.s-link__muted:visited:hover,
2512
+ .s-link.s-link__muted:visited:hover,
2513
+ a.s-link__visited:visited:hover,
2514
+ .s-link.s-link__visited:visited:hover {
2515
+ color: var(--_li-fc-hover);
2516
+ }
2506
2517
  a.s-link__dropdown,
2507
2518
  .s-link.s-link__dropdown {
2508
2519
  padding-right: 0.9em;
@@ -2555,20 +2566,18 @@ a.s-link__muted,
2555
2566
  --_li-fc-hover: var(--black-600);
2556
2567
  --_li-fc-visited: var(--black-700);
2557
2568
  }
2569
+ fieldset[disabled] a,
2570
+ fieldset[disabled] .s-link {
2571
+ box-shadow: none !important;
2572
+ opacity: var(--_o-disabled-static);
2573
+ pointer-events: none;
2574
+ }
2558
2575
  a:active,
2559
2576
  .s-link:active,
2560
2577
  a:hover,
2561
- .s-link:hover,
2562
- a:active:visited,
2563
- .s-link:active:visited,
2564
- a:hover:visited,
2565
- .s-link:hover:visited {
2578
+ .s-link:hover {
2566
2579
  color: var(--_li-fc-hover);
2567
2580
  }
2568
- a:visited,
2569
- .s-link:visited {
2570
- color: var(--_li-fc-visited);
2571
- }
2572
2581
  button.s-link {
2573
2582
  appearance: none;
2574
2583
  background: transparent;
@@ -3955,14 +3964,17 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
3955
3964
  overflow: hidden;
3956
3965
  }
3957
3966
  .s-post-summary .s-post-summary--content-menu-button {
3958
- padding: var(--su8) !important;
3959
- position: absolute !important;
3960
3967
  right: var(--su8);
3961
3968
  top: var(--su8);
3962
3969
  }
3963
3970
  .s-post-summary .s-post-summary--content-menu-button .svg-icon {
3964
3971
  margin: 0 !important;
3965
3972
  }
3973
+ .s-post-summary .s-post-summary--content-menu-button,
3974
+ .s-post-summary .s-post-summary--content-menu-button.s-btn {
3975
+ padding: var(--su8);
3976
+ position: absolute;
3977
+ }
3966
3978
  .s-post-summary .s-post-summary--content-title {
3967
3979
  word-break: break-word !important;
3968
3980
  overflow-wrap: break-word !important;
@@ -4050,6 +4062,9 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
4050
4062
  justify-content: center;
4051
4063
  white-space: nowrap;
4052
4064
  }
4065
+ .s-post-summary .s-post-summary--stats-item:not(.s-badge).is-deleted {
4066
+ color: var(--white);
4067
+ }
4053
4068
  .s-post-summary .s-post-summary--stats-item.s-badge {
4054
4069
  font-size: var(--fs-body1);
4055
4070
  line-height: var(--lh-md);
@@ -4830,6 +4845,157 @@ body.theme-highcontrast .s-prose {
4830
4845
  position: absolute;
4831
4846
  width: 100%;
4832
4847
  }
4848
+ .s-select {
4849
+ --_se-arrow-bc: currentColor transparent;
4850
+ --_se-arrow-size: var(--su-static4);
4851
+ --_se-select-bc: var(--bc-darker);
4852
+ --_se-select-bc-focus: var(--theme-secondary-300);
4853
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
4854
+ --_se-select-bg: var(--white);
4855
+ --_se-select-br: var(--br-sm);
4856
+ --_se-select-fc: var(--black);
4857
+ --_se-select-px: 0.7em;
4858
+ --_se-select-py: 0.6em;
4859
+ --_se-select-fs: var(--fs-body1);
4860
+ color: var(--fc-dark);
4861
+ position: relative;
4862
+ }
4863
+ @supports (-webkit-overflow-scrolling: touch) {
4864
+ .s-select {
4865
+ --_se-select-fs: 16px;
4866
+ --_se-select-px: 0.55em;
4867
+ --_se-select-py: 0.4em;
4868
+ }
4869
+ }
4870
+ .is-disabled .s-select,
4871
+ .is-readonly .s-select,
4872
+ .has-success .s-select,
4873
+ .has-error .s-select,
4874
+ .has-warning .s-select {
4875
+ position: relative;
4876
+ }
4877
+ .has-error .s-select,
4878
+ .has-success .s-select,
4879
+ .has-warning .s-select {
4880
+ --_se-select-bc-focus: var(--_se-select-bc);
4881
+ }
4882
+ .has-error .s-select {
4883
+ --_se-select-bc: var(--red-400);
4884
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-error);
4885
+ }
4886
+ .has-success .s-select {
4887
+ --_se-select-bc: var(--green-400);
4888
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
4889
+ }
4890
+ .has-warning .s-select {
4891
+ --_se-select-bc: var(--yellow-600);
4892
+ --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
4893
+ }
4894
+ .is-disabled .s-select {
4895
+ --_se-arrow-bc: var(--bc-darker) transparent;
4896
+ }
4897
+ .s-select.s-select__sm {
4898
+ --_se-select-fs: var(--fs-caption);
4899
+ }
4900
+ .s-select.s-select__md {
4901
+ --_se-select-fs: var(--fs-body3);
4902
+ --_se-select-br: calc(var(--br-sm) + var(--su-static1));
4903
+ --_se-select-py: 0.5em;
4904
+ }
4905
+ .s-select.s-select__lg {
4906
+ --_se-select-fs: var(--fs-title);
4907
+ --_se-select-br: calc(var(--br-sm) + var(--su-static1));
4908
+ --_se-select-px: 0.6em;
4909
+ --_se-select-py: 0.45em;
4910
+ }
4911
+ .s-select.s-select__xl {
4912
+ --_se-select-fs: var(--fs-headline1);
4913
+ --_se-select-br: var(--br-md);
4914
+ --_se-select-px: 0.5em;
4915
+ --_se-select-py: 0.4em;
4916
+ }
4917
+ select.s-select:-webkit-autofill,
4918
+ .s-select > select:-webkit-autofill {
4919
+ -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset;
4920
+ -webkit-text-fill-color: var(--black);
4921
+ border-color: var(--blue-300);
4922
+ transition: background-color 0s 50000s;
4923
+ }
4924
+ select.s-select:-webkit-autofill:focus,
4925
+ .s-select > select:-webkit-autofill:focus {
4926
+ border-color: var(--blue-300);
4927
+ -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
4928
+ }
4929
+ select.s-select::-webkit-contacts-auto-fill-button,
4930
+ .s-select > select::-webkit-contacts-auto-fill-button {
4931
+ background-color: var(--black);
4932
+ }
4933
+ .s-select:before,
4934
+ .s-select:after {
4935
+ border-color: var(--_se-arrow-bc);
4936
+ border-style: solid;
4937
+ border-width: var(--_se-arrow-size);
4938
+ content: "";
4939
+ pointer-events: none;
4940
+ position: absolute;
4941
+ right: calc(var(--su-static12) + var(--su-static1));
4942
+ z-index: var(--zi-selected);
4943
+ }
4944
+ .s-select:after {
4945
+ border-bottom-width: 0;
4946
+ top: calc(50% + var(--su-static1));
4947
+ }
4948
+ .s-select:before {
4949
+ border-top-width: 0;
4950
+ top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
4951
+ }
4952
+ .s-select > select {
4953
+ background-color: var(--_se-select-bg);
4954
+ border: var(--su-static1) solid var(--_se-select-bc);
4955
+ border-radius: var(--_se-select-br);
4956
+ color: var(--_se-select-fc);
4957
+ font-size: var(--_se-select-fs);
4958
+ padding: var(--_se-select-py) var(--_se-select-px);
4959
+ appearance: none;
4960
+ font-family: inherit;
4961
+ height: 100%;
4962
+ line-height: var(--lh-sm);
4963
+ outline: 0;
4964
+ padding-right: var(--su32);
4965
+ position: relative;
4966
+ width: 100%;
4967
+ }
4968
+ fieldset[disabled] .s-select > select,
4969
+ .s-select > select[disabled] {
4970
+ cursor: not-allowed;
4971
+ opacity: var(--_o-disabled-static);
4972
+ }
4973
+ .s-select > select[readonly],
4974
+ .is-readonly .s-select > select {
4975
+ --_se-select-bc: var(--bc-light);
4976
+ --_se-select-bg: var(--black-050);
4977
+ --_se-select-fc: var(--black-200);
4978
+ cursor: not-allowed;
4979
+ }
4980
+ body.theme-highcontrast .s-select > select[readonly],
4981
+ body.theme-highcontrast .is-readonly .s-select > select {
4982
+ --_se-select-fc: var(--fc-light);
4983
+ }
4984
+ .s-select > select::-moz-focus-inner {
4985
+ outline: none !important;
4986
+ }
4987
+ .s-select > select:focus {
4988
+ border-color: var(--_se-select-bc-focus);
4989
+ box-shadow: var(--_se-select-bs-focus);
4990
+ color: var(--black);
4991
+ outline: 0;
4992
+ }
4993
+ body.theme-highcontrast .s-select > select:focus {
4994
+ --_se-select-bc-focus: var(--black);
4995
+ }
4996
+ .s-select .s-input-icon {
4997
+ right: var(--su32);
4998
+ }
4833
4999
  .s-sidebarwidget {
4834
5000
  --_sw-bc: var(--bc-medium);
4835
5001
  --_sw-after-bc: var(--_sw-bc);
@@ -5476,7 +5642,7 @@ body.theme-highcontrast a.s-tag.is-selected:focus {
5476
5642
  --_ta-lh: 1.73333333;
5477
5643
  }
5478
5644
  .s-tag.s-tag__lg {
5479
- --_ta-br: calc(var(--br-sm) + 1px);
5645
+ --_ta-br: calc(var(--br-sm) + var(--su-static1));
5480
5646
  --_ta-fs: var(--fs-subheading);
5481
5647
  --_ta-lh: 1.68421053;
5482
5648
  --_ta-px: var(--su6);
@@ -5603,6 +5769,11 @@ body.theme-highcontrast a.s-tag:not(.is-selected):active {
5603
5769
  --_ts-multiple-bg: unset;
5604
5770
  --_ts-multiple-fc: var(--black-500);
5605
5771
  }
5772
+ fieldset[disabled] .s-toggle-switch,
5773
+ fieldset[disabled] .s-toggle-switch label {
5774
+ cursor: not-allowed;
5775
+ opacity: var(--_o-disabled-static);
5776
+ }
5606
5777
  .s-toggle-switch.s-toggle-switch__multiple {
5607
5778
  align-items: stretch;
5608
5779
  display: flex;
@@ -22865,12 +23036,10 @@ ol {
22865
23036
  }
22866
23037
  }
22867
23038
  @media print {
22868
- .print\:d-block {
23039
+ .print\:d-block {
22869
23040
  display: block !important;
22870
23041
  }
22871
- }
22872
- @media print {
22873
- .print\:d-none {
23042
+ .print\:d-none {
22874
23043
  display: none !important;
22875
23044
  }
22876
23045
  }