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, a, .nav__btn {
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: $nav__second-level-color;
82      fill: $black;
83      color: $medblue;
84      padding: 1em;
85      border-radius: 0;
86      border-bottom: 1px solid $lightgrey;
87      cursor: pointer;
88      .nav__icon-help__outer {
89        stroke: $black;
90      }
91      .nav__icon-help__inner {
92        fill: $lightbg__primary;
93      }
94      .nav-icon {
95        fill: $medblue;
96        color: $medblue;
97        .st0 {
98          stroke: $medblue;
99        }
100        .st1 {
101          fill: $medblue;
102          color: $medblue;
103          stroke: $medblue;
104        }
105      }
106    }
107  }
108  .opened {
109    background: $nav__second-level-color;
110    fill: $black;
111    color: darken($medblue, 10%);
112    border-bottom: 1px solid $lightgrey;
113    .nav-icon {
114      fill: $medblue;
115      color: $medblue;
116      .st0 {
117        stroke: $medblue;
118      }
119      .st1 {
120        fill: $medblue;
121        color: $medblue;
122        stroke: $medblue;
123      }
124    }
125  }
126}
127
128// Second Level Navigation
129.nav__second-level {
130  position: fixed;
131  background: $nav__second-level-color;
132  top: 0;
133  bottom: 0;
134  left: -245px;
135  width: $nav__seclvlWidth;
136  z-index: 97;
137  padding: 0;
138  margin: 0;
139  list-style-type: none;
140  @include fastTransition-all;
141  &.opened {
142    left: $nav__toplvlWidth;
143    box-shadow: 7px 0 28px -10px $darkgrey;
144    @include fastTransition-all;
145  }
146  a {
147    padding: 1.2em 1em 1.2em 1em;
148    display: block;
149    color: $black;
150    text-decoration: none;
151    position: relative;
152    font-weight: 400;
153  }
154
155  li {
156    a:after{
157      content: '\203A';
158      position: absolute;
159      font-size: 2em;
160      font-weight: 700;
161      top: 50%;
162      right: .6em;
163      transform: translateY(-59%);
164      color: #4b5d78;
165      opacity: 0;
166    }
167    &.active {background: $white;}
168    &.active,
169    &:focus,
170    &:hover {
171      a {color: #4b5d78;}
172      a:after {
173        opacity: 1;
174        right: .3em;
175        @include fastTransition-all;
176      }
177    }
178  }
179}
180