.list-item {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: default;
  user-select: none;
  outline: none;
  white-space: nowrap;
  padding: 0 10px;

  &--over-folder {
    background-color: hsla(0 0% 0% / 0.06);
  }

  &--dragging:not(&--selected) {
    background-color: inherit;
  }

  &:hover .list-item__menu {
    width: auto;
    visibility: visible;
  }
}

.list-item__background {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 6px;

  &:hover:not(.dragging) {
    background: rgb(0 0 0 / 0.03);
  }

  .list-item--has-click &:active:not(.dragging) {
    background: rgb(0 0 0 / 0.05);
  }

  &.droppable {
    background: rgb(0 0 0 / 0.1);
  }

  [aria-role="tree-item"]:focus-visible & {
    background-color: var(--primary-color-light);
  }

  &[aria-selected="true"] {
    border-radius: 0;
    outline: none;
    background-color: var(--primary-color);
    color: white;

    svg {
      fill: white;
      opacity: 1;
    }

    &:hover {
      background-color: var(--primary-color);
    }

    &.selected-start {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }

    &.selected-end {
      border-bottom-left-radius: 6px;
      border-bottom-right-radius: 6px;
    }
  }
}

.list-item .list-item__toggle {
  width: 16px;
  transition: transform 200ms;

  &:hover,
  &:active {
    background: none !important;
  }

  &--open {
    transform: rotate(90deg);
  }
}

.list-item__icon {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2px;
  flex-shrink: 0;

  &:hover,
  &:active {
    background: none !important;
  }
}

.list-item__content {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  flex: 1;
}

.list-item__menu {
  padding: 0;
  flex-shrink: 0;
  width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.list-item__menu-item {

  &:hover,
  &:active {
    background: none !important;
  }
}
