1$nav__toplvlWidth: 125px;
2$nav__seclvlWidth: 240px;
3
4// Top level navigation
5#nav__top-level {
6  background: $nav__top-level-color;
7  height: 100%;
8  position: fixed;
9  left: 0;
10  top: 0;
11  bottom: 0;
12  z-index: 99;
13  list-style-type: none;
14  margin: 0;
15  padding: 0;
16  width: $nav__toplvlWidth;
17  li {
18    margin: 0;
19  }
20  //svg icons
21  .nav-icon {
22    @include navIcons;
23  }
24  .button, button, a {
25    background: transparent;
26    height: auto;
27    border: 0;
28    color: $white;
29    fill: $white;
30    width: 100%;
31    padding: 1em;
32    display: block;
33    text-align: center;
34    margin-bottom: 0;
35    white-space: normal;
36    border-radius: 0;
37    text-decoration: none;
38    border-top: 1px solid transparent;
39    border-bottom: 1px solid transparent;
40    a {
41      margin-bottom: 5px;
42    }
43    span {
44      margin: 1em 0 0 0;
45      display: block;
46      font-size: .9em;
47      font-weight: 700;
48      line-height: 1rem;
49    }
50
51    .nav__icon-help__outer {
52      fill: transparent;
53      stroke: $white;
54      stroke-miterlimit: 10;
55      stroke-width: 1px;
56    }
57    .nav__icon-help__Inner {
58      fill: $white;
59    }
60    &:hover {
61      background: $nav__second-level-color;
62      fill: $black;
63      color: $medblue;
64      padding: 1em;
65      border-radius: 0;
66      border-top: 1px solid $medgrey;
67      border-bottom: 1px solid $medgrey;
68      .nav__icon-help__outer {
69        stroke: $black;
70      }
71      .nav__icon-help__inner {
72        fill: $lightbg__primary;
73      }
74      .nav-icon {
75        fill: $medblue;
76        color: $medblue;
77        .st0 {
78          stroke: $medblue;
79        }
80        .st1 {
81          fill: $medblue;
82          color: $medblue;
83          stroke: $medblue;
84        }
85      }
86    }
87  }
88  .opened {
89    background: $nav__second-level-color;
90    fill: $black;
91    color: $medblue;
92    .nav__icon-help__outer {
93      stroke: $lightbg__primary;
94    }
95    .nav-icon {
96      fill: $medblue;
97      color: $medblue;
98      .st0 {
99        stroke: $medblue;
100      }
101      .st1 {
102        fill: $medblue;
103        color: $medblue;
104        stroke: $medblue;
105      }
106    }
107  }
108}
109
110// Second Level Navigation
111.nav__second-level {
112  position: fixed;
113  background: $nav__second-level-color;
114  top: 0;
115  bottom: 0;
116  left: -$nav__toplvlWidth;
117  width: $nav__seclvlWidth;
118  z-index: 97;
119  padding: 0;
120  margin: 0;
121  list-style-type: none;
122  @include fastTransition-all;
123  &.opened {
124    left: $nav__toplvlWidth;
125    box-shadow: 7px 0 28px -10px $darkgrey;
126    @include fastTransition-all;
127  }
128  a {
129    padding: 1.2em 1em 1.2em 1em;
130    display: block;
131    color: $black;
132    text-decoration: none;
133    position: relative;
134    font-weight: 400;
135  }
136
137  li {
138    a:after{
139      content: '\203A';
140      position: absolute;
141      font-size: 2em;
142      font-weight: 700;
143      top: 50%;
144      right: .6em;
145      transform: translateY(-59%);
146      color: #4b5d78;
147      opacity: 0;
148    }
149    &.active {background: $white;}
150    &.active,
151    &:focus,
152    &:hover {
153      a {color: #4b5d78;}
154      a:after {
155        opacity: 1;
156        right: .3em;
157        @include fastTransition-all;
158      }
159    }
160  }
161}