1$nav__toplvlWidth: 125px;
2$nav__seclvlWidth: 240px;
3
4// Top level navigation
5#nav__top-level {
6  background: $nav__top-level-color;
7  height: 100%;
8  position: fixed;
9  left: 0;
10  top: 0;
11  bottom: 0;
12  z-index: 99;
13  list-style-type: none;
14  margin: 0;
15  padding: 0;
16  width: $nav__toplvlWidth;
17  li {
18    margin: 0;
19  }
20  .button, button, a {
21    background: transparent;
22    height: auto;
23    border: 0;
24    color: $white;
25    fill: $white;
26    width: 100%;
27    padding: 1em;
28    display: block;
29    text-align: center;
30    margin-bottom: 0;
31    white-space: normal;
32    border-radius: 0;
33    .nav__icon {
34      color: $white;
35      max-height: 40px;
36      stroke-width: .5;
37      margin-bottom: -.5em;
38    }
39    a {
40      margin-bottom: 5px;
41    }
42    span {
43      margin: 1em 0 0 0;
44      display: block;
45      font-size: .9em;
46      font-weight: normal;
47      line-height: 1rem;
48    }
49
50    .nav__icon-help__outer {
51      fill: transparent;
52      stroke: $white;
53      stroke-miterlimit: 10;
54      stroke-width: 1px;
55    }
56    .nav__icon-help__Inner {
57      fill: $white;
58    }
59    &:hover {
60      background: $nav__second-level-color;
61      fill: $black;
62      color: $black;
63      padding: 1em;
64      border-radius: 0;
65      .nav__icon-help__outer {
66        stroke: $black;
67      }
68      .nav__icon-help__inner {
69        fill: $lightbg__primary;
70      }
71    }
72  }
73  .opened {
74    background: $nav__second-level-color;
75    fill: $black;
76    color: $black;
77    .nav__icon-help__outer {
78      stroke: $lightbg__primary;
79    }
80  }
81}
82
83// Second Level Navigation
84.nav__second-level {
85  position: fixed;
86  background: $nav__second-level-color;
87  top: 0;
88  bottom: 0;
89  left: -$nav__toplvlWidth;
90  width: $nav__seclvlWidth;
91  z-index: 97;
92  padding: 0;
93  margin: 0;
94  list-style-type: none;
95  @include slowTransition-all;
96  &.opened {
97    left: $nav__toplvlWidth;
98    box-shadow: 7px 0 28px -10px $darkgrey;
99    @include slowTransition-all;
100  }
101
102  a {
103    padding: 1.2em 1em 1.2em 1em;
104    display: block;
105    color: $black;
106    text-decoration: none;
107    position: relative;
108    font-weight: 400;
109  }
110
111  li {
112    a:after{
113      content: '\203A';
114      position: absolute;
115      font-size: 2em;
116      font-weight: 700;
117      top: 50%;
118      right: .6em;
119      transform: translateY(-59%);
120      color: #4b5d78;
121      opacity: 0;
122    }
123    &.active {background: $white;}
124    &.active,
125    &:focus,
126    &:hover {
127      a {color: #4b5d78;}
128      a:after {
129        opacity: 1;
130        right: .3em;
131        @include fastTransition-all;
132      }
133    }
134  }
135}