1$nav__toplvlWidth: 240px;
2$nav__top-level-color: $color--blue-100;
3$nav__top-level-text-secondary: $color--grey-20;
4$nav__second-level-text-primary: $color--teal-50;
5$nav__second-level-text-secondary: $primary-light;
6$nav__hover-over-outline: $color--grey-40;
7
8//Navigation icons
9.nav__wrapper {
10  height: 100%;
11  position: absolute;
12  top: 0;
13  z-index: 100;
14}
15
16// Top level navigation
17#nav__top-level {
18  background: $nav__top-level-color;
19  position: fixed;
20  left: 0;
21  top: 0;
22  bottom: 0;
23  list-style-type: none;
24  padding: 22px 0 0 0;
25  margin: 130px 0 0 0;
26  width: $nav__toplvlWidth;
27  overflow-y: auto;
28  >li {
29    margin: 0;
30    height: 3em;
31    &.opened{
32      height: inherit;
33      .nav-link{
34        color: $primary-light;
35      }
36    }
37  }
38  > li > a,
39  > li > button {
40    height: 3.3em;
41  }
42  button,
43  a,
44  span {
45    &:hover {
46      &.opened{
47        color: $primary-light;
48      }
49    }
50  }
51  .nav-icon {
52      height: 26px;
53      float: left;
54      margin: 2px 0 0 1px;
55      width: 26px;
56      fill: $primary-light;
57      svg {
58        height: inherit;
59        width:  26px;
60        max-width: inherit;
61        fill: $primary-light;
62      }
63  }
64  .nav-link {
65      float: left;
66      font-size: 15px;
67      padding: 9px 0 0 7px;
68      margin-left: 5px;
69      &:focus{
70        outline: 0;
71      }
72    }
73}
74
75.nav__wrapper button {
76  background: transparent;
77  border: 0;
78  color: $primary-light;
79  width: 95%;
80  padding: 5px 5px 9px 10px;
81  margin: 0 0 0 6px;
82  display: block;
83  text-align: center;
84  white-space: normal;
85  border-radius: 0;
86  text-decoration: none;
87  border: 1px solid transparent;
88  font-weight: normal;
89  font-size: 13px;
90  &:hover,
91  &:focus {
92    background: fade-out(#ffffff, 0.9);
93    color: $nav__top-level-text-secondary;
94    border-radius: 0;
95    border: 1px solid $nav__hover-over-outline;
96    outline: 0;
97  }
98  .icon {
99    margin-left: .3em;
100    margin-top: .6em;
101  }
102  img {
103    width: 2em;
104    height: 2em;
105  }
106}
107
108.nav__second-level  {
109  list-style-type: none;
110  opacity: 0;
111  left: $nav__toplvlWidth;
112  padding: 0;
113  margin: 0;
114  transform: scaleY(0);
115  transform-origin: 0 0;
116  transition: all $duration--moderate-01 $standard-easing--expressive;
117  overflow: hidden;
118  line-height: 0;
119  a {
120    color: $primary-light;
121    width: 95%;
122    padding: 6px 5px 8px 50px;
123    margin: 0 0 0 6px;
124    white-space: normal;
125    text-decoration: none;
126    border: 1px solid transparent;
127    font-weight: normal;
128    font-size: .8rem;
129    &:hover,
130    &:focus {
131      background: fade-out(#ffffff, 0.9);
132      color: $nav__second-level-text-secondary;
133      border-radius: 0;
134      border-color: $nav__hover-over-outline;
135      outline: 0;
136    }
137  }
138  &.opened {
139    line-height: 1.1;
140    overflow: visible;
141    opacity: 1;
142    transform: scaleY(1);
143    transition: all $duration--moderate-01 $standard-easing--expressive;
144    li a{
145      display:block;
146    }
147  }
148
149  li:hover
150  {
151    margin-left: 17px;
152    margin: 0;
153    padding: 0;
154    a{
155      padding-left: 50px;
156    }
157  }
158
159  li {
160    &:focus,
161    &:hover {
162      a {
163        color: $nav__second-level-text-secondary;
164      }
165    }
166    &.active {
167      a span {
168        color: $nav__second-level-text-primary;
169      }
170    }
171  }
172}