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