/* Media Tree */

ul.media-tree {
  padding: 0 0 5px;
  margin: 0;
  overflow-x: visible;
  list-style: none;
  ul {
    margin-inline-start: 2px;
  }
  &:empty {
    display: none;
  }
}

.media-disk {
  margin-bottom: 10px;
}

.media-drive {
  overflow-x: auto;
  background-color: var(--mediamanager-sidebar-drive-bg);
  border: 1px solid var(--mediamanager-border-color);
  + .media-drive {
    border-top: 0;
  }
}

.media-disk-name {
  padding: 4px 1px;
  font-size: .8em;
  color: #767676;
  text-transform: uppercase;
  letter-spacing: 1px;
  &:empty {
    display: none;
  }
}

.media-tree-item {
  position: relative;
  display: block;
  &::before {
    position: absolute;
    top: calc(var(--mediamanager-sidebar-tree-line-height) / 2);
    inset-inline-start: 0;
    width: 10px;
    height: 1px;
    margin: auto;
    content: "";
    background-color: var(--mediamanager-sidebar-tree-line-color);
  }
  &::after {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 100%;
    content: "";
    background-color: var(--mediamanager-sidebar-tree-line-color);
  }
  &:last-child {
    &::after {
      height: calc(var(--mediamanager-sidebar-tree-line-height) / 2);
    }
  }
  li {
    padding-inline-start: 10px;
    &::before, &::after {
      inset-inline-start: 5px;
    }
  }
}

.media-drive-name {
  padding: 4px 10px;
  &::before {
    content: none;
  }
  &::after {
    content: none;
  }
  &:hover {
    cursor: pointer;
  }
}

.media-tree-item a {
  display: block;
  padding: 0 7px;
  line-height: var(--mediamanager-sidebar-tree-line-height);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.media-tree-item .item-icon {
  display: inline-block;
  padding-inline-end: 2px;
  font-size: 15px;
  line-height: normal;
  color: var(--mediamanager-sidebar-tree-icon-color);
  vertical-align: middle;
}

.media-tree-item.active > a .item-icon {
  color: var(--mediamanager-sidebar-active-icon-color);
}

.item-name {
  display: inline-block;
  overflow: hidden;
  font-size: .9em;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.media-tree-item.active > a .item-name {
  font-weight: bold;
}
