.v2Tree {
  display: flex;
  flex-direction: column;
  gap: var(--gap--xl);
}

.v2Tree__listContainer {
  overflow-x: auto;
  // Space for drop indicator
  padding-top: 1px;
  padding-bottom: 1px;
}

.v2Tree__list {
  --checkbox-width: 0px;
  --drag-handle-width: 0px;

  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 100%;

  &[data-selection-mode='multiple'] {
    --checkbox-width: 22px;
  }

  &[data-allows-dragging='true'] {
    --drag-handle-width: 26px;
  }

  .v2Tree__dropIndicator {
    &[data-drop-target='true'] {
      margin-left: calc(
        (var(--tree-item-level) - 1) * (var(--margin--xl) + var(--margin--xxs)) + var(--checkbox-width) +
          var(--drag-handle-width)
      );
      outline: 1px solid rgb(var(--border--controls-medium-selected--light));
    }
  }
}

.v2Tree__listItem {
  display: flex;
  flex-direction: row;
  align-items: center;

  padding-top: var(--padding--sm);
  padding-bottom: var(--padding--sm);

  background-color: rgb(var(--background--neutral-base-default--light));
  outline: none;

  &[data-focus-visible='true'],
  &:focus-within,
  &:hover {
    background-color: rgb(var(--background--neutral-low-hovered--light));
  }

  &[aria-expanded] {
    cursor: pointer;
  }

  &[data-drop-target='true'] {
    box-shadow: inset 0 0 0 1px rgb(var(--border--controls-medium-selected--light));
  }

  &[data-dragging='true'] {
    // Based on --colors-interactive-ghost-hover, reverted to dark base color because.
    // For light colors the browser applies a (not so nice) shadow.
    background-color: #6263641a;

    & * {
      opacity: var(--blend--medium--light);
    }
  }

  // Checkboxes have top margin for some reason...
  & .checkboxField {
    margin-top: 0;
  }

  @media @screen-md {
    padding-top: var(--padding--xs);
    padding-bottom: var(--padding--xs);
  }
}

.v2Tree__listItemSpacer {
  flex-shrink: 0;
  width: calc(var(--size--xl) + var(--size--xxs));
}

.v2Tree__listItemIndent {
  flex-shrink: 0;
  width: calc((var(--tree-item-level) - 1) * (var(--size--xl) + var(--size--xxs)));
}

.v2Tree__listItemLabel {
  margin: 0;
  padding: var(--padding--xs);
}

.v2Tree__listItemDescription {
  margin: 0;
  padding: var(--padding--xs);
}

.v2Tree__listItemActions {
  display: flex;
  flex-direction: row;
  gap: var(--gap--xs);

  margin-left: auto;
  padding-right: var(--padding--xs);
  padding-left: var(--padding--xs);

  opacity: var(--blend--full--light);

  &.v2Tree__listItemActions--alwaysVisible,
  .v2Tree__listItem:hover &,
  .v2Tree__listItem[data-focus-visible='true'] &,
  .v2Tree__listItem:focus-within & {
    opacity: var(--blend--solid--light);
  }
}