$primary: #00E0FC; // Blue
//$primary: #39FF14; // Green
//$primary: #FC812A; // Orange


body {
  background: #333;
}


[data-icon]:before {
  content: attr(data-icon);
  display: block;
  font-family: 'Typicons', sans-serif;
}

.nav {
  background: #222;
  box-shadow: 1px 0 2px rgba(black,0.6);
  height: 100%;
  left: 0;
  position: fixed;
  width: 7em;
}

.nav__list {
  border-bottom: 1px solid rgba(black,0.8);
  border-top: 1px solid rgba(#ccc,0.2);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.nav__item a {
  border-bottom: 1px solid rgba(#ccc,0.2);
  border-top: 1px solid rgba(black,0.8);
  display: block;
  color: #f1f1f1;
  padding: 1.5em 0;
  position: relative;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(black,0.6);
  transition: 0.3s;

  &:after {
    background: $primary;
    content: '';
    height: 100%;
    left: -0.4em;
    position: absolute;
    top: 0;
    transition: 0.3s;
    width: 0.4em;
  }

  &:before {
    background: -webkit-linear-gradient(white, #C0C0C0); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5em;
    text-shadow: none;
    transition: 0.3s;
  }
}

.nav__item a:hover {
  background: #101010;
  box-shadow: inset 0 0 1em rgba(black, 0.7);
  transition: 0.15s;

  &:after {
    box-shadow: 0 0 1.5em $primary;
    transform: translateX(0.4em);
    transition: 0.15s;
  }

  &:before {
    color: $primary;
    -webkit-text-fill-color: $primary;
    text-shadow:  0 0 1em rgba($primary, 0.7); 
    transition: 0.15s;
  } 
}