
.folder-container{
    display:flex;flex-direction:column; 
    border: 1px solid var(--border-color);flex-grow: 1;
    border-radius: 6px;position: relative;
  }

  .folder-container a.line {
    border-radius: var(--border-radius) var(--border-radius) 0 0;padding-bottom: 14px;padding-top: 14px;border-bottom-color: #eeeeec;
  }

  .folder-container a.line img {
    width: 16px;height:16px;position: relative;top:3px;margin-right: 3px;
  }

  .folder-box {
    flex-grow: 1;
  }

  .folder-box:not(.root).directory{
    border-radius:var(--border-radius);overflow:hidden;border:1px solid #eeeeec;
  }

  .status-link {
    border-top:1px solid #eeeeec;display: block;width: 100%;box-sizing: border-box;padding: 8px 16px;font-size: 14px;overflow: hidden;color:var(--medium-text-color);
    background-color: none;
    transition: background-color 0.2s;
    position: relative;
  }

  .status-link:after {
    content: " ";
    width: 2em;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--background-color) 50%);
  }

  .status-link:hover {
    background-color: #e4eafb75;
  }

  .sync-status {
    height: 1.5em;
    display: block;
    overflow: hidden;
  }

  .folder-corner {
    position: absolute;
    top: 5px;
    right: -1px;
    width: var(--border-radius);
    height: var(--border-radius);
  }

  .folder-corner:before {
    z-index: 3;
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0 var(--border-radius) 0 0;
    border-bottom-color: var(--background-color);
    border-left-color: var(--background-color);
    transition: background-color 0.2s;
  }


  .folder-corner:after {
    width: 100%;
    height: 100%;
    background: var(--background-color);
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }

  .folder-top {
    position: absolute;
    top:0;
    left: 0;
    right:0;
    overflow: visible;
  }

  .folder-top:before {
    width:var(--border-radius);
    z-index: 2;
    border-radius:  0 var(--border-radius) 0 0;
    height: var(--border-radius);
    content: ' ';
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-left-color: var(--background-color);
    border-bottom-color: var(--background-color);
    position: absolute;
    top: -1px;
    left: 20%;
    transition: background-color 0.2s;
  }


  a:hover ~ .folder-corner:before, 
  a:hover ~ .folder-top:before {
    background-color: #f8faff;
    border-left-color: #f8faff;
    border-bottom-color: #f8faff;
  }

  .folder-top:after {
    width: 80%;
    z-index: 1;
    height: calc(1px + var(--border-radius));
    content: ' ';
    background: white;
    border-bottom: 1px solid var(--border-color);
    position: absolute;
    top: -1px;
    right: -1px;
  }




.directory-list {
  width: 100%;
  font-size: 16px;
  max-width: none;
  margin-bottom: 0;
} 

.directory-list.empty {
  height: 100%;
}

.directory-list th .resize-handle {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: -3px;
  width: 8px;
  cursor: col-resize;
  color: var(--light-text-color);
  transition: transform 0.2s;
  transform: scale(1);
  z-index: 1;
}

.directory-list th .resize-handle:after {
  content: "";
  width:1px;
  position: absolute;
  top:4px;
  bottom: 4px;
  left: 50%;
  background-color: var(--border-color);
  transition: top 0.2s, bottom 0.2s;
}

.directory-list th .resize-handle:hover:after {
  top: 0;
  bottom: 0;

}

.directory-list th {
  transition: background-color 0.2s;
  background-color: transparent;
}

.directory-list th:active {
  background-color: #f3f4f9;
}

.directory-list th, .directory-list td {
  padding: 8px;
  position: relative;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

.directory-list td {
  border-bottom: none;
  vertical-align: baseline;
  color: var(--light-text-color)
}
.directory-list tr {
  position: relative;
}

.directory-list td[data-sort] {
  font-size: 13px;
}

.directory-list td a {
  text-decoration: none;display: flex;
  align-items: center;
  overflow: hidden;
  height: 1.4em;
}

.directory-list td a > span:first-child {
  margin-right: 8px;
  flex-shrink: 0;
}

.directory-list tr:not(:last-child) td:after {
  content: '';
  border-bottom: 1px solid #f4f4f5;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.directory-list tr td:first-child:after{
  left: 16px;
}

.directory-list tr td:last-child:after {
  right: 16px;
}

.directory-list th {
  text-align: left;
  border-bottom: 1px solid #eeeeec;
  font-weight: normal;
  user-select: none;
  font-size: 12px;
  padding: 4px 8px;
  color: var(--light-text-color);
}

.directory-list th:first-child, .directory-list td:first-child {
  padding-left: 16px;
}

.directory-list tr:hover {
  background-color: #e4eafb75;
}

.directory-list tr:first-child:last-child:hover {
  background-color: transparent;
}



.directory-list th.sorted, .directory-list th.sorted.reverse {
  font-weight: 500;
}

  

.directory-list th.sorted:after {
  content: '';
  position: absolute;
  top: 6px;
  right: 16px;
  background-size: cover;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  style="opacity:0.3"  viewBox="0 0 12 12" width="12" height="12"><path d="M6 4c-.2 0-.4.1-.5.2L2.2 7.5c-.3.3-.3.8 0 1.1.3.3.8.3 1.1 0L6 5.9l2.7 2.7c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1L6.6 4.3C6.4 4.1 6.2 4 6 4Z"></path></svg>')
}

.directory-list th.sorted.reverse::after {
  background: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="opacity:0.3" viewBox="0 0 12 12" width="12" height="12"><path d="M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z"></path></svg> ');
}
