@import './var.less';

:root {
  --van-tree-select-indent: @tree-select-indent;
  --van-tree-select-arrow-size: @tree-select-arrow-size;
  --van-tree-select-animation-duration: @tree-select-animation-duration;
  --van-tree-select-divider-left: var(--van-padding-md);
}

.van-tree-select {
  overflow: hidden;
  color: var(--van-cell-text-color);
  background: var(--van-white);

  &__node { overflow: hidden; }

  // Slot content keeps the same left hierarchy as regular tree nodes. Embedded
  // components retain their own right padding to avoid doubling the edge gap.
  &__leaf {
    position: relative;
    box-sizing: border-box;

    // Leaf-slot items are wrapped by separate tree nodes, so restore the
    // divider between adjacent leaves just as we do for regular Cell nodes.
    &--divider:not(:last-child)::after {
      position: absolute;
      right: var(--van-padding-md);
      bottom: 0;
      left: var(--van-tree-select-divider-left);
      height: 1px;
      background: var(--van-border-color);
      content: '';
      transform: scaleY(.5);
    }
  }

  &__cell {
    min-height: 44px;
    padding: 10px var(--van-padding-md);

    .van-cell__title-row { align-items: center; }
    .van-cell__title { font-size: var(--van-font-size-md); line-height: 22px; }
  }

  // Each Cell is wrapped by a tree node, so Cell's :last-child rule would
  // otherwise hide every divider. Branches retain a divider even when they
  // are the only sibling, separating the parent from its indented children.
  &__node:not(:last-child) > &__cell:not(.van-cell--borderless)::after {
    display: block;
    left: var(--van-tree-select-divider-left);
  }

  &__cell--branch:not(.van-cell--borderless)::after {
    display: block;
    left: var(--van-tree-select-divider-left);
  }

  &__arrow {
    flex: none;
    margin-right: var(--van-padding-base);
    color: var(--van-gray-5);
    font-size: var(--van-tree-select-arrow-size);
    transition: transform var(--van-tree-select-animation-duration) ease;

    &--expanded { transform: rotate(0deg); }
    &:not(.van-tree-select__arrow--expanded) { transform: rotate(-90deg); }
  }

  &__loading {
    flex: none;
    margin-right: var(--van-padding-base);
    color: var(--van-gray-5);
  }

  &__expand-control {
    display: inline-flex;
    align-items: center;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    background: transparent;
    border: 0;

    &:not(:disabled) { cursor: pointer; }
    &:disabled { color: var(--van-text-color-3); cursor: not-allowed; }
  }

  &__children { overflow: hidden; }

  &__indeterminate {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    padding: 0;
    background: var(--van-primary-color);
    border: 0;
    border-radius: 50%;

    &::after {
      position: absolute;
      top: calc(50% - 1px);
      right: 25%;
      left: 25%;
      height: 2px;
      content: '';
      background: var(--van-white);
      border-radius: 1px;
    }
  }
}

.van-tree-select-expand-enter-active,
.van-tree-select-expand-leave-active {
  overflow: hidden;
  transition: max-height var(--van-tree-select-animation-duration) ease, opacity var(--van-tree-select-animation-duration) ease;
}

.van-tree-select-expand-enter-from,
.van-tree-select-expand-leave-to { max-height: 0; opacity: 0; }
.van-tree-select-expand-enter-to,
.van-tree-select-expand-leave-from { max-height: 1000px; opacity: 1; }