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