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: 0 .8em .8em;
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 darken($darkgrey, 15%);
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      border-radius: 0;
85      border-bottom: 1px solid $lightgrey;
86      cursor: pointer;
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  }
153
154  li {
155    a:after{
156      content: '\203A';
157      position: absolute;
158      font-size: 2em;
159      font-weight: 700;
160      top: 50%;
161      right: .6em;
162      transform: translateY(-59%);
163      color: #4b5d78;
164      opacity: 0;
165    }
166    &.active {background: $white;}
167    &.active,
168    &:focus,
169    &:hover {
170      a {color: #4b5d78;}
171      a:after {
172        opacity: 1;
173        right: .3em;
174        @include fastTransition-all;
175      }
176    }
177  }
178}
179