1#p-docs {
2  & .content-wrap {
3    display: flex;
4    flex-direction: column;
5    flex-wrap: wrap;
6    flex: 1 0 auto;
7    position: relative;
8    width: 100%;
9
10    @media (min-width: 940px) {
11      flex-direction: row;
12      margin-top: 72px;
13      margin-bottom: 24px;
14    }
15  }
16
17  & #inner {
18    margin: 64px 0;
19    overflow: auto;
20    width: 100%;
21
22    @media (min-width: 940px) {
23      flex: 1;
24      margin: 0;
25    }
26
27    & .g-content {
28      @media (max-width: 939px) {
29        padding-left: 0;
30        padding-right: 0;
31      }
32
33      & > h1:first-child {
34        margin-top: 0;
35      }
36    }
37
38    & .g-section-header {
39      margin-bottom: 100px;
40    }
41
42    /* TODO: this should be applied in global styles, temporary override here */
43    & pre,
44    & code {
45      font-size: 0.875em;
46    }
47
48    & pre code {
49      font-size: 1em;
50    }
51  }
52
53  & #edit-this-page {
54    margin-bottom: 48px;
55    display: flex;
56    justify-content: flex-end;
57
58    & a {
59      color: var(--gray-1);
60      display: flex;
61      align-items: center;
62      opacity: 0.5;
63      transition: opacity 0.4s ease;
64      padding-right: 32px;
65
66      &:hover {
67        opacity: 1;
68      }
69
70      & > div {
71        margin-right: 9px;
72        width: 23px;
73        height: 22px;
74      }
75    }
76  }
77}
78