.project {
  @background: #444;
  @foreground: white;
  
  overflow-x: auto;
  overflow-y: auto;
  box-shadow: inset 4px 4px 16px rgba(0, 0, 0, .4);
  background: @background;
  flex-shrink: 0;

  transition: width .3s;
  //display: none;
  width: 0px;
  
  &.show {
    //display: block;
    width: 200px;
    padding: 4px 8px;
  }
  
  a {
    display: block;
    padding: 4px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
    border-radius: 2px;

    &:hover {
      background: fade(@foreground, 10%);
    }

    &:active {
      background: fade(@foreground, 15%);
    }

    &:focus {
      outline: none;
    }
  }
  
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  li {
    color: @foreground;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
    white-space: no-wrap;
    
    & > ul {
      display: none;
      padding-left: 6px;
    }
    
    &.expanded > ul {
      display: block;
    }
  }
  
  .directory {
    color: darken(@foreground, 30%);
    position: relative;
    
    &:before {
      content: ">";
      position: absolute;
      left: -5px;
      opacity: .5;
      display: inline-block;
      transition: all .3s;
    }
    
    &:hover:before {
      opacity: 1;
    }
  }
  
  .root {
  
    &:not(:first-child) {
      border-top: 1px solid lighten(@background, 20%);
      margin-top: 4px;
      padding-top: 4px;
    }
    
    & > .directory {
      font-weight: bold;
      
      &:before {
        content: none;
      }
    }
  }
  
  .expanded > .directory:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
}