@-webkit-keyframes progress {
  0% { width: 1%; }
  100% { width: 100%; }
}

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

  transition: width .3s ease, border-width .3s ease, padding .3s linear;
  //display: none;
  width: 0px;
  padding: 4px 8px;
  
  &.autohide.show {
    padding: 4px 0;
    width: 0px;
    border-right: 15px solid @background;
    
    &:hover, &.loading {
      padding: 4px 8px;
      width: @width;
      border-right-width: 0px;
    }
  }
  
  &.show:not(.autohide) {
    width: @width;
  }
  
  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);
  }

  .load-ui {
    display: none;
    position: absolute;
    width: 100%;
    background: darken(@background, 20%);
    color: @foreground;
    font-weight: bold;
    text-align: center;
    top: 0;
    left: 0;
    padding-top: 8px;
    z-index: 9;

    .progress {
      background: @accent;
      height: 2px;
      margin-top: 6px;
      -webkit-animation: progress 2s infinite ease-in-out;
    }

  }

  &.loading .load-ui {
    display: block;
  }

  
}