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