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    text-decoration: none;
34    .nav__icon {
35      color: $white;
36      max-height: 40px;
37      stroke-width: .5;
38      margin-bottom: -.5em;
39    }
40    a {
41      margin-bottom: 5px;
42    }
43    span {
44      margin: 1em 0 0 0;
45      display: block;
46      font-size: .9em;
47      font-weight: normal;
48      line-height: 1rem;
49    }
50
51    .nav__icon-help__outer {
52      fill: transparent;
53      stroke: $white;
54      stroke-miterlimit: 10;
55      stroke-width: 1px;
56    }
57    .nav__icon-help__Inner {
58      fill: $white;
59    }
60    &:hover {
61      background: $nav__second-level-color;
62      fill: $black;
63      color: $black;
64      padding: 1em;
65      border-radius: 0;
66      .nav__icon-help__outer {
67        stroke: $black;
68      }
69      .nav__icon-help__inner {
70        fill: $lightbg__primary;
71      }
72    }
73  }
74  .opened {
75    background: $nav__second-level-color;
76    fill: $black;
77    color: $black;
78    .nav__icon-help__outer {
79      stroke: $lightbg__primary;
80    }
81  }
82}
83
84// Second Level Navigation
85.nav__second-level {
86  position: fixed;
87  background: $nav__second-level-color;
88  top: 0;
89  bottom: 0;
90  left: -$nav__toplvlWidth;
91  width: $nav__seclvlWidth;
92  z-index: 97;
93  padding: 0;
94  margin: 0;
95  list-style-type: none;
96  @include fastTransition-all;
97  &.opened {
98    left: $nav__toplvlWidth;
99    box-shadow: 7px 0 28px -10px $darkgrey;
100    @include fastTransition-all;
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}