@import '../common/style/var.less';

.van-tree-select {
  position: relative;
  display: flex;
  user-select: none;
  font-size: var(--tree-select-font-size, @tree-select-font-size);

  &__nav {
    flex: 1;
    background-color: var(
      --tree-select-nav-background-color,
      @tree-select-nav-background-color
    );

    &__inner {
      width: 100% !important;
      height: 100%;
    }

    --sidebar-padding: @tree-select-nav-item-padding;
  }

  &__content {
    flex: 2;
    background-color: var(
      --tree-select-content-background-color,
      @tree-select-content-background-color
    );
  }

  &__item {
    position: relative;
    font-weight: bold;
    padding: 0 32px 0 var(--padding-md, @padding-md);
    line-height: var(--tree-select-item-height, @tree-select-item-height);

    &--active {
      color: var(
        --tree-select-item-active-color,
        @tree-select-item-active-color
      );
    }

    &--disabled {
      color: var(
        --tree-select-item-disabled-color,
        @tree-select-item-disabled-color
      );
    }
  }

  &__selected {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--padding-md, @padding-md);
  }
}