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  display: none;
95  list-style-type: none;
96  @include fastTransition-all;
97  @include mediaQuery(medium) {
98    left: $nav__toplvlWidth;
99    &.btn-overview {
100      display: block;
101    }
102  }
103  &.opened {
104    left: $nav__toplvlWidth;
105    display: block;
106    @include fastTransition-all;
107  }
108
109  a {
110    padding: 1.2em 1em 1.2em 1em;
111    display: block;
112    color: $black;
113    text-decoration: none;
114    position: relative;
115    font-weight: 400;
116  }
117
118  li {
119    a:after{
120      content: '\203A';
121      position: absolute;
122      font-size: 2em;
123      font-weight: 700;
124      top: 50%;
125      right: .6em;
126      transform: translateY(-59%);
127      color: #4b5d78;
128      opacity: 0;
129    }
130    &.active {background: $white;}
131    &.active,
132    &:focus,
133    &:hover {
134      a {color: #4b5d78;}
135      a:after {
136        opacity: 1;
137        right: .3em;
138        @include fastTransition-all;
139      }
140    }
141  }
142}