1 .Box {
2 overflow-y: auto;
3 /* extra pixels to account for table of contents title height */
4 max-height: calc(100% - 24px);
5 }
6
7 .NavList {
8 text-decoration: underline;
9 }
10
11 /* borderRadius: 2 = 6px */
12 .Details {
13 border-style: solid;
14 border-width: 1px;
15 border-color: #444d56;
16 border-radius: 6px;
17 }
18
19 .Button {
20 border-top-width: 0;
21 border-left-width: 0;
22 border-right-width: 0;
23 }
24
25 .Button:focus-visible {
26 outline: 2px solid;
27 outline-color: -webkit-focus-ring-color;
28 outline-offset: 1px;
29 }
30
31 .buttonOpen {
32 border-bottom-width: 1px;
33 border-bottom-left-radius: 0;
34 border-bottom-right-radius: 0;
35 }
36
37 /* borderRadius: 2 = 6px, but since 0 border, it's effectively a smaller radius for consistency */
38 .buttonClosed {
39 border-bottom-width: 0;
40 border-bottom-left-radius: 6px;
41 border-bottom-right-radius: 6px;
42 }
43
44 /* fontSize: 1 = 14px */
45 .Heading {
46 font-size: 14px;
47 display: inline-block;
48 font-weight: bold;
49 }
50
51 /* ml: -2 = -8px */
52 .TableOfContents {
53 margin-left: -8px;
54 }
55
56 /* mb: 3 = 16px, mt: 4 = 24px */
57 .tocMobile {
58 display: block;
59 margin-bottom: 16px;
60 margin-top: 24px;
61 }
62
63 @media (min-width: 768px) {
64 .tocMobile {
65 display: none;
66 }
67 }
68
69 /* marginLeft: [null, 7, 8, 9] = 48px, 64px, 80px */
70 .tocDesktop {
71 width: 220px;
72 flex: 0 0 auto;
73 margin-left: 48px;
74 display: none;
75 position: sticky;
76 top: 90px;
77 max-height: calc(100vh - 90px);
78 }
79
80 @media (min-width: 544px) {
81 .tocDesktop {
82 margin-left: 48px;
83 }
84 }
85
86 @media (min-width: 768px) {
87 .tocDesktop {
88 display: block;
89 margin-left: 64px;
90 }
91 }
92
93 @media (min-width: 1012px) {
94 .tocDesktop {
95 margin-left: 80px;
96 }
97 }