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