// @primary-color: #2d8cf0;

.zz-select-result(){
    max-height:200px;
    overflow: hidden;
    ul{
        max-height:160px;
        padding: 5px 0;
        overflow: auto;
    }
    li{
        padding: 7px 4px 7px 8px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        &.item-active{
            background-color: #f8f8f8;
        }
        &:hover{
            background-color: #f8f8f8;
        }
        &.loading-tip-item{
            cursor: auto;
            padding-top:17px;
            padding-bottom:17px;
            text-align: left;
            font-size: 14px;
            color: #424656;
            .zz-spin{
                display: inline-block;
            }
            &:hover{
                background-color: transparent;
            }
        }
        &.no-found-item{
            text-align: center;
            color:#424656;
            &:hover{
                background-color: transparent;
            }
        }
    }
}

.zz-query-selector{
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    vertical-align: middle;
    display:inline-block;
    width: 100%;
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .zz-dropdown{
        position: relative;
        display: block;
        .zz-select-dropdown{
            min-width: 100%;
            max-width: 150%;
            padding-top:0;
            padding-bottom: 0;
        }
        .zz-select-search{
           position: relative;
           .show-selected{
                &.show-selected-disabled{
                    background: #f3f3f3;
                    color: #ccc;
                    cursor: not-allowed;
                }
                &.show-selected-enabled:hover{
                    border-color: @primary-color;
                    transition: all 0.3s;
                }
                position: absolute;
                z-index:2;
                left:0;
                top: 0;
                display: inline-block;
                width:100%;
                vertical-align: top;
                height: 32px;
                line-height: 30px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding-left: 10px;
                padding-right: 24px;
                border: 1px solid #dcdee2;
                border-radius: 2px;
                .zz-icon {
                    width: 24px;
                    height: 32px;
                    font-size: 22px;
                    line-height: 32px;
                    position: absolute;
                    right: -1px;
                    top:-1px;
                    display: none;
                }
                &:hover{
                    .zz-icon{
                        cursor: pointer;
                        display: block;
                    }
                }
            }
            .input-top{
                z-index:4;
                vertical-align: top;
            }
            .input-bottom{
                position: absolute;
                vertical-align: top;
                z-index: 3;
                left: 0;
                right: 0;
                top:0;
                &.enabled .zz-input{
                    background: none!important;
                }
            }
            &:hover {
                .input-bottom {
                    &.enabled .zz-input {
                        border-color: @primary-color;
                    }
                }
            }
            .zz-spin-fix {
                background: none;
                .zz-spin-main {
                    right: 0;
                    left: auto;
                    transform: translate(0,-50%);
                }
            }
        }
    }
    .zz-select-result{
        .zz-select-result();
    }
}
.transfer-query-selector{
    .zz-select-result{
        .zz-select-result();
    }
    &.zz-select-dropdown{
        padding-top:0;
        padding-bottom: 0;
        overflow: hidden;
    }
}