@borderRadiusMax : 100px;

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

    .setup-form();

    .form-body > .itemlist{
        position: relative;
        overflow: hidden;
        font-size: 0;
        box-sizing: border-box;
        width: calc(100% - @fontSize*2.5);

        > .name{
            height: 100%;
            position: absolute;
            width: 20%;
            max-width: @fontSize*9.375;
            margin: 0;
            background-color: @colorFormAddonBg;
            color: @colorFormAddonFont;
            display: inline-block;
            left: 0;
            top: 0;
        }

        > .itemwrap{
            position: relative;
            font-size: 0;
            display: inline-block;
            width: 80%;
            left: 20%;
            top: 0;

            &.hidename{
                width: 100%;
                left: 0;
            }

            > .multiform-item{
                color: @colorFormItemColor !important;
                background-color: @colorFromItemBackground;
                display: inline-block;
                border-radius: @borderRadiusMax;
                vertical-align: top;
                text-decoration: none;
                position: relative;
                cursor: pointer;
                box-sizing: border-box;
                max-width: 95%;

                > span{
                    max-width: 100%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: inline-block;
                    padding-right: 1em;
                    vertical-align: top;
                    box-sizing: border-box;
                }

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

                &.move-moving{
                    opacity: 0.2;
                }

                > i.mo-icon,
                > i.iconfont,
                > i{
                    position: absolute;
                    transform: translateY(-50%);
                    cursor: pointer;

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

                &.move-drag-item {
                    opacity: 1;
                    position: absolute;
                    box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
                    z-index: 9;
                    box-sizing: border-box;
                    max-width: 95%;

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

                &.add{
                    > span{
                        padding-right: 0;
                    }

                    > i.mo-icon,
                    > i.iconfont,
                    > i{
                        right: auto;
                    }

                    &:hover{
                        cursor: pointer;

                        > i.mo-icon{
                            color: @colorFormPlaceholderHover !important;
                        }
                    }
                }

                &.has-img{
                    border-radius: 0 @borderRadiusMax @borderRadiusMax 0;

                    .thumb{
                        position: absolute;
                        top: 0;
                        left: 0;
                        padding: 1px;
                        box-sizing: border-box;
                        background: darken(@colorComponentItemBg, 2%);
                    }
                }
            }

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

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

        .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;
        }
    }

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

    &.can-move{
        .form-body > .itemlist > .itemwrap > .multiform-item:not(.add){
            cursor: move;
        }
    }

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

            > .name{
                font-size: @formInputFontSize - 1px;
            }

            > .itemwrap{
                > .multiform-item{
                    padding: 0 1.2em;
                    margin: @fontSize*0.125 @fontSize*0.125;
                    line-height: @formHeight - 6px - 4px - 2px;
                    height: @formHeight - 6px - 4px - 2px;
                    font-size: @formInputFontSize - 1px;

                    > i.mo-icon,
                    > i.iconfont,
                    > i{
                        right: 1em;
                        font-size: @fontSize*0.75;
                        top: 50%;
                    }

                    &.add{
                        padding: 0 1.4em;

                        > span{
                            padding-left: 1em;
                        }

                        > i.mo-icon,
                        > i.iconfont,
                        > i{
                            top: 50%;
                            left: 1.3em;
                        }
                    }

                    &.has-img{
                        padding-left: 3em;

                        .thumb{
                            height: @formHeight - 6px - 4px - 2px;
                            width: @formHeight - 6px - 4px - 2px;
                        }
                    }
                }

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

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

            > .name{
                font-size: @formInputFontSizeS - 1px;
            }

            > .itemwrap{
                > .multiform-item{
                    padding: 0 1em;
                    margin: @fontSize*0.0625 @fontSize*0.125;
                    line-height: @formHeightS - 4px - 2px - 2px;
                    height: @formHeightS - 4px - 2px - 2px;
                    font-size: @formInputFontSizeS - 1px;

                    > i.mo-icon,
                    > i.iconfont,
                    > i{
                        right: 0.6em;
                        font-size: @fontSize*0.75;
                        top: 50%;
                    }

                    &.add{
                        padding: 0 1.2em;

                        > span{
                            padding-left: 1em;
                        }

                        > i.mo-icon,
                        > i.iconfont,
                        > i{
                            top: 50%;
                            left: 1em;
                        }
                    }

                    &.has-img{
                        padding-left: 2.6em;

                        .thumb{
                            height: @formHeightS - 4px - 2px - 2px;
                            width: @formHeightS - 4px - 2px - 2px;
                        }
                    }
                }

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

    &.si-xs{
        .form-body > .itemlist{
            padding: @fontSize*0.0625 @fontSize*0.25;
            min-height: @formHeightXs;

            > .name{
                font-size: @formInputFontSizeXs - 1px;
            }

            > .itemwrap{
                > .multiform-item{
                    padding: 0 1em;
                    margin: @fontSize*0.0625 @fontSize*0.125;
                    line-height: @formHeightXs - 2px - 2px - 2px;
                    height: @formHeightXs - 2px - 2px - 2px;
                    font-size: @formInputFontSizeXs - 1px;

                    > i.mo-icon,
                    > i.iconfont,
                    > i{
                        right: 0.6em;
                        font-size: @fontSize*0.75;
                        top: 50%;
                    }

                    &.add{
                        padding: 0 1.2em;

                        > span{
                            padding-left: 1em;
                        }

                        > i.mo-icon,
                        > i.iconfont,
                        > i{
                            top: 50%;
                            left: 1em;
                        }
                    }

                    &.has-img{
                        padding-left: 2.4em;

                        .thumb{
                            height: @formHeightXs - 2px - 2px - 2px;
                            width: @formHeightXs - 2px - 2px - 2px;
                        }
                    }
                }

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

    &.st-normal{}

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

            > .name{
                background-color: darken(@colorFormAddonBg, 10%);
                color: darken(@colorFormAddonFont, 10%);
            }

            > .itemwrap > .multiform-item{
                cursor: not-allowed !important;
                background-color: @colorFromItemBackgroundDisable;

                > span{
                    padding-right: 0;
                }

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

                &.add:hover{
                    cursor: default;
                }
            }

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

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