@charset "UTF-8";
@import "./common/var.css";
@import './mixins/button';
@import './mixins/common.css';

@component-namespace el {
    @b input {
        position: relative;
        font-size: var(--font-size-base);
        display: inline-block;
        width: 100%;

        @e inner {
            appearance: none;
            background-color: var(--input-fill);
            background-image: none;
            border-radius: var(--input-border-radius);
            border: var(--input-border);
            box-sizing: border-box;
            color: var(--input-color);
            display: inline-block;
            font-size: inherit;
            height: var(--input-height);
            line-height: 1;
            outline: none;
            padding: 8px 12px;
            transition: var(--border-transition-base);
            width: 100%;

            &::placeholder {
                color: var(--input-placeholder-color);
            }

            &:hover {
                background-color: var(--color-gray-20);
                /*border-color: var(--border-color-hover);*/
            }

            &:focus {
                /*border-color: var(--color-blue-60);*/
                /*background-color: var(--color-white);*/
            }
        }

        @e icon {
            position: absolute;
            width: 35px;
            height: 100%;
            right: 0;
            top: 0;
            text-align: center;
            transition: all .3s;
            line-height:32px!important; /*wbx add*/
            cursor: pointer;
            &:hover {
                /*color: var(--color-primary);*/
            }
            &.disableFocusIcon{
                cursor: default;
                &:hover {
                     color: var(--icon-color);
                 }
             }
            &:after {
                content: '';
                height: 100%;
                width: 0;
                display: inline-block;
                vertical-align: middle;
            }

            & + .el-input__inner {
                padding-right: 35px;
            }

            @when clickable {
                &:hover {
                    cursor: pointer;
                    color: var(--input-hover-border);

                & + .el-input__inner {
                    /*border-color: var(--input-hover-border);*/
                }
            }
        }
    }

    @when active {
        .el-input__inner {
            outline: none;
            border-color: var(--input-focus-border);
        }
    }

    @when disabled {
        .el-input__inner {
            background-color: var(--input-disabled-fill);
            border-color: var(--input-disabled-border);
            color: var(--input-disabled-color);
            cursor: not-allowed;

        &::placeholder {
            color: var(--input-disabled-placeholder-color);
        }
    }
}
@m large {
    font-size: var(--input-large-font-size);

    & .el-input__inner {
        height: var(--input-large-height);
    }
}
@m small {
    font-size: var(--input-small-font-size);

    & .el-input__inner {
        height: var(--input-small-height);
    }
    & .icon-exit-contain {
          font-size: 14px;
          margin-top: -2px;
    }
}
@m mini {
    font-size: var(--input-mini-font-size);

    & .el-input__inner {
        height: var(--input-mini-height);
    }

  }
}

@b input-group {
    line-height: normal;
    display: inline-table;
    width: 100%;
    border-collapse: separate;

    & > .el-input__inner {
        vertical-align: middle;
        display: table-cell;
    }
    @e append, prepend {
        /*background-color: var(--color-dark-white); *wbx remove*/
        /*color: var(--color-light-silver);*wbx remove*/
        vertical-align: middle;
        display: table-cell;
        position: relative;
        /*border: var(--border-base);*wbx remove*/
        /*border-radius: var(--input-border-radius);*wbx remove*/
        padding: 0 10px;
        width: 1px;
        white-space: nowrap;

        & .el-select,
        & .el-button {
            display: block;
            margin: -10px;
        }

        & button.el-button,
        & div.el-select .el-input__inner,
        & div.el-select:hover .el-input__inner {
            /*border-color: transparent;*wbx remove*/
            /*background-color: transparent;*wbx remove*/
            /*color: inherit;*/
            border-top: 0;
            border-bottom: 0;
            border-top-left-radius: 0;/* wbx add*/
            border-bottom-left-radius: 0;/* wbx add*/
            padding:10px 11px;
            min-width:40px;/* wbx add*/
        }
        & .el-button,
        & .el-input {
            font-size: inherit;
        }
    }
    @e prepend {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    @e append {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    @m prepend {
        .el-input__inner {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
    @m append {
        .el-input__inner {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }
}

@b textarea {
    display: inline-block;
    width: 100%;
    vertical-align: bottom;

    @e inner {
        display: block;
        resize: vertical;
        padding: 5px 7px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: var(--font-size-base);
        color: var(--input-color);
        background-color: var(--input-fill);
        background-image: none;
        border: var(--input-border);
        border-radius: var(--input-border-radius);
        transition: var(--border-transition-base);

        &::placeholder {
            color: var(--input-placeholder-color);
        }

        &:hover {
            background-color: var(--color-gray-20);
            border-color: var(--border-color-hover);
        }

        &:focus {
            outline: none;
        }
    }

    @when disabled {
        .el-textarea__inner {
            background-color: var(--input-disabled-fill);
            border-color: var(--input-disabled-border);
            color: var(--input-disabled-color);
            cursor: not-allowed;

        &::placeholder {
            color: var(--input-disabled-placeholder-color);
        }
    }
}
}
}
.search-input{
    min-width: 480px;
    max-width: 700px;
    font-size: 14px;
    font-family: ciscosansttregular,'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB',SimSun,sans-serif;

}
.search-input .el-input__inner {
    border-radius: 50px;
    border: 1px solid transparent;
    /*background-color: rgba(var(--color-black),0.08);*/
    text-indent: 24px;
    line-height: 26px;
}
.search-input input:focus::-webkit-input-placeholder {
    color: transparent;
}
.search-input input:focus::-moz-placeholder {
    color: transparent;
}
.search-input input:focus:-ms-input-placeholder {
    color: transparent;
}
.show-prefix-icon input{
    text-align: left;
    text-indent: 16px;
}
.el-input-group__prepend i {
    left:0;
}
.icon-exit-contain {
    font-size: 16px;
    height: auto;
}

/*-----TAG INPUT------*/

@component-namespace el {
    @b tag-input {
        min-height: 28px;
        min-width: 400px;
        width: 100%;
        border: 1px solid #ccc;
        display: inline-block;
        font-size: 14px;
        border-radius: 8px;
        padding: 2px;
        position: relative;
        ::placeholder {
            color: var(--input-placeholder-color);
        }
        @e tags {
            overflow: auto;
            max-height: 150px;

            & .el-tag-input__tags-text {
                  max-width: 348px;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                  float: left;
             }
            @e wrap {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            & .__input {
                  min-width: 200px;
                  border: none;
                  height: 28px;
                  text-indent: 10px;
                  width: 100%;

            &_no_value {
                 margin: 0;
                 width: 100%;
             }

            &:focus {
                 outline: none;
             }
            }
            .tag-icon {
                width: 20px;
                display: inline-block;
                cursor: pointer;
                line-height: 26px;
                &.icon-ng-add-item {
                    float: left;
                 }
                &.icon-exit {
                     font-size: var(--font-size-small);
                     text-align: center;
                     width: 30px;
                 }
            }
        }
    }
        @e tag {
            display: inline-block;
            background-color: #E6E8E8;
            margin: 2px;
            border-radius: 25px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
            padding-left:12px;
            &.__error {
                background-color: var(--color-danger);
                color: var(--color-white);
            }
            &.__warn {
                background-color: var(--tag-warning-color);
                color: var(--color-white);
             }
            &.__focus{
                background-color: var(--color-light-gray);
                color: var(--color-black);
             }
            &.__group {
                /*background-color: #B4B6B8;*/
             }
            &_input{
                 display: inline-block;
             }
        }
    }
}

.el-tag-input .suggestions-dropdown {

    .el-select-group__title {
        height: 44px;
        line-height: 44px;
    }

    .el-select-dropdown__item {
        padding: 15px 31px;
        height: auto;
        .predict-avatar {
            height: auto;
            width: auto;
            float: left;
            margin-right: 16px;
            span {
                margin-bottom: 0px;
                width: 40px;
                min-width: 0px;
            }
        }
        .predict-name {
            max-width: 200px;
            height: 40px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            float: left;

            span {
                display: block;
                min-width: 0;
            }

            .predict_username {
                color: #999999;
                float: none;
                display: block;
            }

            .predict_displayname {
                float: none;
                display: block;
            }
        }

        .predict_email {
            line-height: 40px !important;
            height: 40px;
            min-width: 160px;
            float: right;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .showLeft {
            float: left;
            text-align: left;
        }
    }
}
