mor-multiinput{
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    -webkit-user-select: none;

    .setup-form();

    &:hover{
        .form-body{
            border-color: @colorFormBorderHover;
        }
    }

    .form-body > .multiinput-itemlist{
        position: relative;
        font-size: 0;
        width: calc(100% - @fontSize*2.5);
        line-height: 1.5;

        > .multiinput-item{
            color: @colorFormItemColor !important;
            background-color: @colorFromItemBackground;
            display: inline-block;
            border-radius: @borderRadius;
            vertical-align: top;
            max-width: 100%;
            text-decoration: none;
            position: relative;
            cursor: default;
            box-sizing: border-box;
            border: 1px solid @colorFromItemBackground;

            &.will-delete{
                border: 1px solid @colorFormBorderHover;
            }

            &.collapse-count{
                > span{
                    padding-right: 0 !important;
                }
            }

            > span{
                max-width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: inline-block;
                box-sizing: border-box;
                line-height: 1.15;
                vertical-align: top;
            }

            &:hover{
                text-decoration: none;
                color: @colorFormItemColorHover !important;
                background: @colorFromItemBackgroundHover;
            }

            > i.mo-icon{
                font-size: 12px;
                position: absolute;
                right: 0.5em;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;

                &:hover{
                    color: @colorDanger !important;
                }
            }

            &.move-moving{
                opacity: 0.5;
            }

            &.move-drag-item{
                opacity: 1;
                box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
                max-width: none;
                z-index: 2;

                &:hover{
                    cursor: move;
                    color: @colorFormItemColor !important;
                    background-color: @colorFromItemBackground;
                }
            }
        }

        > input{
            border: none;
            outline: none;
            color: @colorFormText !important;
            width: 0;
            max-width: 100%;
            min-width: 2em;
            background: rgba(0, 0, 0, 0);
            box-sizing: border-box;

            &::placeholder{
                color: @colorFormPlaceholder;
            }

            &:hover{
                &::placeholder{
                    color: @colorFormPlaceholderHover;
                }
            }

            &:focus{
                color: @colorFormTextFocus !important;
            }
        }

        > span{
            color: @colorFormTextMisc !important;
            width: 100%;
            text-align: center;
            display: block;
        }

        .disabled-placeholder{
            display: none;
        }
    }

    .form-body{
        position: relative;
        border: 1px @colorFormBorder solid;
        border-radius: @borderRadius;

        &.focus{
            .setup-form-focus();
        }

        .cleanicon{
            position: absolute;
            display: none;
            font-size: @fontSize*0.875;
            color: @colorFormPlaceholder;
            right: 0;
            top: 0;
            width: 24px;
            height: @fontSize*2.5;
            line-height: @fontSize*2.5;

            &:hover{
                color: @colorFormPlaceholderHover;
                cursor: pointer;
            }
        }

        &:hover .cleanicon{
            display: block;
        }
    }

    &.can-move{
        .form-body > .multiinput-itemlist > .multiinput-item{
            cursor: move;
        }
    }

    &.si-m{
        .form-body > .multiinput-itemlist{
            padding: @fontSize*0.1875 @fontSize*0.3125;

            > .multiinput-item{
                margin: @fontSize*0.1875 @fontSize*0.1;
                padding: @fontSize*0.3125 @fontSize*0.5625;
                font-size: @fontSize*0.8125;
                height: calc(@formHeight - @fontSize*0.375 - @fontSize*0.375 - 2px);

                > span{
                    padding-right: 1em;
                    line-height: calc(@formHeight - @fontSize*0.375 - @fontSize*0.375 - @fontSize*0.625 - 2px);
                }
            }

            > input{
                margin: @fontSize*0.1875 @fontSize*0.1;
                padding: @fontSize*0.1875;
                font-size: @fontSize*0.875;
                line-height: calc(@formHeight - @fontSize*0.375 - @fontSize*0.375 - 2px);
                height: calc(@formHeight - @fontSize*0.375 - @fontSize*0.375 - 2px);
            }

            > span{
                font-size: @fontSize*0.75;
                padding: 0.4em 0.7em;
            }
        }
    }

    &.si-s{
        .form-body > .multiinput-itemlist{
            padding: @fontSize*0.125 @fontSize*0.25;

            > .multiinput-item{
                margin: @fontSize*0.0625 @fontSize*0.1;
                padding: @fontSize*0.1875 @fontSize*0.375;
                font-size: @fontSize*0.8125;
                height: calc(@formHeightS - @fontSize*0.25 - 2px);

                > span{
                    padding-right: 1.5em;
                    line-height: calc(@formHeightS - @fontSize*0.125 - @fontSize*0.25 - @fontSize*0.375 - 2px);
                }
            }

            > input{
                margin: @fontSize*0.0625 @fontSize*0.1;
                padding: @fontSize*0.1875;
                font-size: @fontSize*0.875;
                line-height: calc(@formHeightS - @fontSize*0.125 - @fontSize*0.25 - 2px);
                height: calc(@formHeightS - @fontSize*0.125 - @fontSize*0.25 - 2px);
            }

            > span{
                font-size: @fontSize*0.75;
                padding: 0.4em 0.7em;
            }
        }
    }

    &.si-xs{
        .form-body > .multiinput-itemlist{
            padding: @fontSize*0.125 @fontSize*0.125;

            > .multiinput-item{
                margin: @fontSize*0.0625 @fontSize*0.1;
                padding: @fontSize*0.125 @fontSize*0.375;
                font-size: @fontSize*0.8125;
                height: calc(@formHeightXs - @fontSize*0.25 - 2px);

                > span{
                    padding-right: 1.5em;
                    vertical-align: top;
                    line-height: calc(@formHeightXs - @fontSize*0.125 - @fontSize*0.25 - @fontSize*0.25 - 2px);
                }
            }

            > input{
                margin: @fontSize*0.0625 @fontSize*0.1;
                padding: @fontSize*0.125;
                font-size: @fontSize*0.875;
                line-height: calc(@formHeightXs - @fontSize*0.125 - @fontSize*0.25 - 2px);
                height: calc(@formHeightXs - @fontSize*0.125 - @fontSize*0.25 - 2px);
            }

            > span{
                font-size: @fontSize*0.75;
                padding: 0.4em 0.7em;
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .form-body{
            border-color: @colorFormBorderDisable;
            background-color: @colorFormBackgroundDisable;
            -webkit-user-select: none;
            cursor: not-allowed !important;

            &:hover{
                border-color: @colorFormBorderDisable;
            }
        }

        .form-body > .multiinput-itemlist{
            > .multiinput-item{
                cursor: not-allowed !important;
                background: @colorFromItemBackgroundDisable;

                > span{
                    padding-right: 0;
                }

                &:hover{
                    color: @colorFormItemColorDisable !important;
                }
            }

            .disabled-placeholder{
                width: 0;
                pointer-events: none;
                user-select: none;
                opacity: 0;
                visibility: hidden;
                display: inline-block;
            }
        }
    }

    // default status
    &{
        .si-m;
        .st-normal;
    }
}

.mor-multiinput-tip-collapse{
    max-width: @fontSize*20;

    .con{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: @fontSize*0.1875 @fontSize*0.5;

        span{
            padding: 0 0.25em;
        }
    }
}