#AdminNavigation > div.current.user {

position: relative;
margin: 1vh 5% 0 5%;

}

#AdminNavigation > div.current.user > a.home {

text-align: center;
display: block;
font-size: 0.8em;

}

#AdminNavigation > div.current.user > a.profile.menu {

@include display(flex);
@include align-items(center);
@include align-content(center);
@include justify-content(space-between);

border-radius: 2px;
background-color: rgba(darken($bright-blue, 25%), 0.2);
padding: 4px 8px;

&:hover svg {
  fill: lighten($bright-blue, 25%);
}

}

#AdminNavigation > div.current.user > a.profile.menu > span {

text-align: center;

}

#AdminNavigation > div.current.user > a.profile.menu > svg {

@include transition(fill 0.1s ease-in);

width: 18px;
height: 18px;
fill: rgba(darken($bright-blue, 25%), 0.7);

}

#AdminNavigation h2 {

@include display(flex);
@include align-items(center);

font-size: 1.2em;
padding: 8px;
margin: 0 1vw;
font-weight: bold;

}

#AdminNavigation h2.selected, #AdminNavigation h2 + div > a.selected {

  color: white;
  font-weight: bold;
}

#AdminNavigation h2 > a {

@include flex(1);
color: inherit;

}

#AdminNavigation h2 + div {

@include display(flex);
@include flex-direction(column);

margin: 0 1vw 1vh 1vw;

}

#AdminNavigation h2 + div > a {

padding: 8px 20px;
color: $light-blue;
font-size: 0.8em;

}

#AdminNavigation a {

color: $light-blue;
&:hover {
  color: lighten($light-blue, 45%);
}

}

#AdminNavigation form.logout {

margin-top: auto;
border-top: 1px solid $light-blue;
text-align: center;

}

#AdminNavigation form.logout input {

width: 100%;

}

#AdminNavigation [as='Popup'] {

position: absolute;
margin: 0;
top: 0;
left: 0;
right: 0;
width: auto;

background-color: $light-blue;

}

#AdminNavigation [as='Popup'] > div.current.user {

@include display(flex);
@include align-items(center);
@include align-content(center);
@include justify-content(space-between);

padding: 4px 8px;

}

#AdminNavigation [as='Popup'] > div.current.user > a {

@include display(flex);
@include flex(0 auto);
padding: 0;
cursor: pointer;

}

#AdminNavigation [as='Popup'] > div.current.user > a > svg {

width: 18px;
height: 18px;
margin-top: 2px;
fill: rgba(darken($bright-blue, 25%), 0.7);

}

#AdminNavigation [as='Popup'] > form.logout {

@include display(flex);
margin: 8px 0;
color: $red;

}

#AdminNavigation [as='Popup'] > form.logout > button {

@include display(flex);
@include align-items(center);
@include align-content(center);

width: 100%;
padding: 4px 8px;
margin: 8px;
font-weight: bold;
background: $red;
color: darken($red, 25%);

&:hover {
  color: lighten($red, 50%);
}

}

#AdminNavigation [as='Popup'] > form.logout > button > svg {

width: 12px;
height: 12px;
fill: darken($red, 15%);
margin: 1px 8px 0 0;

}