.menu{
  background-color: #fff;
  box-shadow: 0 0 1px rgba(0,0,0,.15);
}
.menu.is-dark {
  background-color: #2e3e4e;
  color: rgba(255,255,255,.87);
  .menu-label, .menu-list a{
    color: rgba(255,255,255,.9);
    opacity: 1;
  }
  .menu-list{
    a.is-active{
      background-color: rgba(0,0,0,.075);
    }
    a:hover{
      background-color: rgba(0,0,0,.075);
    }
    &.float{
      background-color: #2e3e4e;
      border: 1px solid #2e3e4e;
    }
  }
}
.menu-label:not(:first-child) {
  margin-top: 15px;
}
.menu-label{
  padding: 10px 7px;
  margin-bottom: 0;
}
.menu-list{
  li{
    position: relative;
    ul{
      border-left: none;
      margin: 0;
      padding-left: 0;
    }
  }
  & > li li{
    a{
      padding-left: 50px;
    }
  }
  & > li li li {
    a{
      padding-left: 80px;
    }
  }
  & > li.is-active{
    background-color: rgba(0,0,0,.065);
  }
  &.float{
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background-color: #fff;
    border: 1px solid #ddd;
    & > li a{
      padding-left: 16px;
    }
  }
  .divider{
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: rgba(120,130,140,.13);
  }
}

.menu-list a{
  padding: 5px 16px;
  line-height: 25px;
  border-radius: 0;
  color: #000;
  opacity: .75;
  i{
    width: 15px;
    margin-right: 15px;
    line-height: 25px;
  }
  .nav-right{
    float: right;
    i{
      margin-right: 0;
    }
  }
}

.has-children{
  .fa{
    transition: transform .377s ease;
  }
  &.is-open .nav-right{
    .fa{
      transform: rotate(180deg);
    }
  }
}