xos-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-basis: 15%;
  background: darken(grey, 10);
  overflow-y: scroll;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background: grey;

    > li {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid darken(grey, 20);

      &.active {
        background: darken(grey, 10);

        > a {
          color: #5aadbb;
        }
      }

      &:hover {
        background: darken(grey, 10);
      }

      > a {
        padding: 10px 20px;
        cursor: pointer;
      }

      // child router
      > ul {
        height: 0;
        overflow: hidden;
        transition: .5s all;

        > li {
          padding-left: 20px;
          background: darken(grey, 15);

          &:hover, &.active {
            background: darken(grey, 20);
          }
        }
      }

      > ul.opened {
        height: auto;
      }
    }
  }
}