
@prefix-cls: vtx-ztree-select;

.@{prefix-cls} {
    position: relative;
    display: inline-block;
    width: 100%;
    &-close-icon {
        display: none;
        color: var(--ant-disabled-color);
        cursor: pointer;
        &:hover {
            color: var(--ant-text-color-secondary);
        }
    }
    &-arrow-icon, &-arrow2-icon {
        color: var(--ant-disabled-color);
        user-select: none;
        font-size: 12px;
    }
    &:hover {
        .vtx-ztree-select-close-icon {
            display: block;
        }
        .vtx-ztree-select-arrow2-icon {
            display: none;
        }
    }
    input {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    &-multiple-box {
        display: flex;
        width: fit-content;
        .vtx-tree-count {
            border-left: none;
        }
    }
    &-multiple {
        position: relative;
        flex: 1;
        padding-right: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &-close-icon {
            position: absolute;
            top: 8px;
            right: 5px;
            display: none;
            color: var(--ant-disabled-color);
            cursor: pointer;
            &:hover {
                color: var(--ant-text-color-secondary);
            }
        }
        &:hover {
            .vtx-ztree-select-multiple-close-icon {
                display: block;
            }
        }
    }
    &-multiple-disabled {
        color: var(--ant-disabled-color);
        background-color: var(--ant-input-disabled-bg);
        cursor: not-allowed;
        opacity: 1;
        &:hover {
            border-color: #d9d9d9;
        }
    }
}

.vtx-ztree-select-popover {
    min-width: 200px;
    height: 300px;
}

.vtx-ztree-select-placeholder {
    color: var(--ant-input-placeholder-color);
    user-select: none;
    pointer-events: none;
}
.vtx-tree-count-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    .disabled-count {
        color: #aaa;
        cursor: not-allowed;
    }
    .clear-count {
        cursor: pointer;
        &:hover {
            color: #40a9ff;
        }
    }
}