.tree-view {
  margin-top: 24px;
  border-right: 1px solid #ccc;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
  color: #000;

  html.dark & {
    color: rgb(209, 213, 219);
  }
  padding: 5px;
  ul {
    margin: 0;
    padding: 0;
    padding-left: 10px;
  }

  li {
    list-style-type: none;
    padding-left: 0;
  }

  a.list-item {
    cursor: pointer;
  }

  ul.openEditors {
    li {
      font-style: italic;

      [data-action="click->open-editors#save"] {
        display: none;
      }
    }

    li.dirty {
      font-style: normal;

      [data-action="click->open-editors#save"] {
        display: inline;
      }

      .tools {
        top: 2px;
        display: inline;
      }
    }
  }

  & .section:first-of-type {
    margin-top: 0;
  }

  .section {
    display: block;
    padding-left: 4px;
    position: relative;
    margin-top: 1rem;

    .title {
      font-weight: bold;
      text-transform: uppercase;
      background-repeat: no-repeat;
      background-position: 0px 50%;
      padding-left: 0px;
      line-height: 25px;
      height: 25px;
    }

    > ul {
      padding-left: 0;
    }
  }

  & .section > .tools {
    display: none;
    position: absolute;
    right: 5px;

    i {
      cursor: pointer;
      padding: 5px;
    }

    svg {
      margin: 5px;
    }
  }

  & > .section:hover > .tools {
    display: inline;

    a {
      display: inline;
    }
  }

  .list-item {
    cursor: default;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .name {
    background-repeat: no-repeat;
    background-position: 0px 50%;
    padding-left: 22px;
    line-height: 18px;
    height: 18px;

    small {
      padding-left: 5px;
    }
  }

  a.list-item {
    color: #000;
    html.dark & {
      color: rgb(209, 213, 219);
    }
    display: block;
    padding-left: 4px;
    position: relative;
  }

  a.list-item:hover {
    background-color: #ddd;
    html.dark & {
      background-color: #666;
    }
  }

  svg.s16 {
    width: 16px;
    height: 16px;
  }
}

.tree-view .file > span {
  background-image: url('file.svg');
  background-size: 18px 18px;
  padding-left: 0px;
}

.tree-view .list-item > .tools {
  display: none;
  position: absolute;
  right: 5px;
  top: -3px;

  i {
    padding: 5px;
  }
  svg {
    margin: 5px;
  }
}

.tree-view .list-item:hover > .tools {
  display: inline;

  a {
    display: inline;
  }
}

.tree-view li.entry.file.selected .list-item > .tools {
  display: inline;

  a {
    display: inline;
  }
}

.tree-view .entry {
  font-weight: normal;
}

.tree-view .entry.selected {
  font-weight: bold;
  background-color: lightgray;
  html.dark & {
    background-color: #333;
  }
}

.tree-view .list-item .name {
  background-size: 18px 18px;
}

.tree-view .directory.closed > .list-item .name {
  background-image: url('scribo/icons/folder.svg');
  background-size: 18px 18px;
}

.tree-view .directory.open > .list-item .name {
  background-image: url('scribo/icons/folder-open.svg');
  background-size: 18px 18px;
}

// .tree-view .entry.selected:before {
//   content: '';
//   position: absolute;
//   left: 0;
//   right: 0;
//   height: 25px;
//   background-color: #f5f5f5;
//   z-index: -1;
// }

.tree-view .directory.closed > ul {
  display: none;
}

.tree-view .directory.closed > .list-item .name[data-path*="font"] {
  background-image: url('scribo/icons/folder-font.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="font"] {
  background-image: url('scribo/icons/folder-font-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="image"] {
  background-image: url('scribo/icons/folder-images.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="image"] {
  background-image: url('scribo/icons/folder-images-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="data"] {
  background-image: url('scribo/icons/folder-database.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="data"] {
  background-image: url('scribo/icons/folder-database-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="style"] {
  background-image: url('scribo/icons/folder-css.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="syle"] {
  background-image: url('scribo/icons/folder-css-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="css"] {
  background-image: url('scribo/icons/folder-css.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="css"] {
  background-image: url('scribo/icons/folder-css-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="sass"] {
  background-image: url('scribo/icons/folder-sass.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="sass"] {
  background-image: url('scribo/icons/folder-sass-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="scripts"] {
  background-image: url('scribo/icons/folder-javascript.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="scripts"] {
  background-image: url('scribo/icons/folder-javascript-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="layout"] {
  background-image: url('scribo/icons/folder-layout.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="layout"] {
  background-image: url('scribo/icons/folder-layout-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="pages"] {
  background-image: url('scribo/icons/folder-views.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="pages"] {
  background-image: url('scribo/icons/folder-views-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="post"] {
  background-image: url('scribo/icons/folder-archive.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="post"] {
  background-image: url('scribo/icons/folder-archive-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="component"] {
  background-image: url('scribo/icons/folder-components.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="component"] {
  background-image: url('scribo/icons/folder-components-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="lib"] {
  background-image: url('scribo/icons/folder-lib.svg');
}
.tree-view .directory.open > .list-item .name[data-path*="lib"] {
  background-image: url('scribo/icons/folder-lib-open.svg');
}

.tree-view .directory.closed > .list-item .name[data-path*="include"] {
  background-image: url('scribo/icons/folder-include.svg');
}

.tree-view .directory.open > .list-item .name[data-path*="include"] {
  background-image: url('scribo/icons/folder-include-open.svg');
}

.tree-view .file > .list-item {
  @mixin file-icons;
}