@import "../lib.less";

.@{veui-prefix}-tree {
  position: relative;
  padding: 0 @dls-tree-padding-x;

  &,
  .@{veui-prefix}-abstract-tree-item-group {
    .reset-list-style();
    margin: 0;
    will-change: height;
    .veui-transition(height);
    overflow: hidden;
  }

  ul {
    padding-left: dls-sum(@dls-tree-icon-size-aux, @dls-tree-node-content-spacing);
  }

  &-item {
    display: flex;
    align-items: center;
    height: @dls-tree-node-height-m;
    outline: none;

    &-label {
      .ellipsis();
      flex-shrink: 1;

      .@{veui-prefix}-icon,
      .dls-icon {
        .dls-icon-size(@dls-tree-icon-size);
      }
    }

    &-expand-switcher {
      display: inline-block;
      background: none;
      border: none;
      padding: 0;
      margin-right: @dls-tree-node-content-spacing;
      cursor: pointer;
      outline: none;
      color: @dls-tree-icon-color-aux;
      .veui-transition(box-shadow, transform);

      .@{veui-prefix}-icon {
        .dls-icon-size(@dls-tree-icon-size-aux);
      }
    }

    &-expanded &-expand-switcher {
      transform: rotateZ(90deg);
    }

    &-expanded + &-group {
      display: block;
    }

    // 如果前面没有图标，就把图标位置让出来。
    &-check:first-child,
    &-label:first-child {
      margin-left: dls-sum(
        @dls-tree-icon-size-aux,
        @dls-tree-node-content-spacing
      );
    }

    &-clickable {
      cursor: pointer;
    }

    &-remove {
      cursor: pointer;
      margin-left: auto;

      .@{veui-prefix}-icon {
        .dls-icon-size(@dls-tree-icon-size-aux);
      }
    }

    &-hidden {
      display: none;
    }

    &::before {
      content: "";
      position: absolute;
      left: 0;
      height: inherit;
      width: 200%; // hack around Safari's bug
      z-index: -1;
      .veui-transition(background-color);
    }

    &:hover::before {
      background-color: @dls-tree-node-background-color-hover;
    }

    &.focus-visible::before,
    &[data-focus-visible-added]::before {
      background-color: @dls-tree-node-background-color-focus;
    }

    &:active::before {
      background-color: @dls-tree-node-background-color-active;
    }

    &-selected {
      font-weight: @dls-tree-node-font-weight-selected;
      color: @dls-tree-node-font-color-selected;
      &::before {
        background-color: @dls-tree-node-background-color-selected;
      }

      &:hover {
        color: @dls-tree-node-font-color-selected-hover;
        &::before {
          background-color: @dls-tree-node-background-color-selected-hover;
        }
      }

      &.focus-visible,
      &[data-focus-visible-added] {
        color: @dls-tree-node-font-color-selected-focus;
        &::before {
          background-color: @dls-tree-node-background-color-selected-focus;
        }
      }

      &:active {
        color: @dls-tree-node-font-color-selected-active;
        &::before {
          background-color: @dls-tree-node-background-color-selected-active;
        }
      }
    }

    &.@{veui-prefix}-disabled.@{veui-prefix}-tree-item-selected::before,
    &.@{veui-prefix}-disabled:active::before,
    &.@{veui-prefix}-disabled:hover::before,
    &.@{veui-prefix}-disabled.focus-visible::before,
    &.@{veui-prefix}-disabled[data-focus-visible-added]::before {
      background-color: transparent;
    }
  }

  .@{veui-prefix}-disabled,
  .@{veui-prefix}-disabled &-item {
    color: @dls-tree-node-font-color-disabled;
    cursor: not-allowed;
  }

  .@{veui-prefix}-disabled &-item-expand-switcher,
  .@{veui-prefix}-disabled &-item-expand-switcher {
    color: @dls-tree-icon-color-aux-disabled;
    cursor: not-allowed;
  }

  &[ui~="checkbox-after"] {
    .@{veui-prefix}-tree {
      &-item {
        flex-direction: row-reverse;
        justify-content: flex-end;

        &-label {
          margin-left: dls-sum(
            @dls-tree-icon-size-aux,
            @dls-tree-node-content-spacing
          );
        }

        &-expand-switcher {
          order: 1;

          & ~ .@{veui-prefix}-tree-item-label {
            margin-left: 0;
          }
        }
      }

      &-item-check {
        margin-left: auto;
        padding-left: @dls-tree-node-content-spacing;
        cursor: pointer;

        .@{veui-prefix}-checkbox-box {
          margin-right: 0;
        }
      }
    }
  }

  &[ui~="s"] {
    font-size: @dls-tree-font-size-s;

    .@{veui-prefix}-tree {
      &-item {
        height: @dls-tree-node-height-s;
      }
    }
  }
}