mor-cascader{
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;

    .setup-form();

    .cascader-wrap{
        .cascader-input{
            box-sizing: border-box;
            padding: 0;
            border-radius: 3px;
            position: relative;
            background: @colorFormBackground;
            border: 1px @colorFormBorder solid;
            color: @colorFormPlaceholder !important;
            cursor: pointer;
            display: flex;

            > mor-multiinput{
                margin: 0;
                width: calc(100% - @fontSize*2.5);
                background-color: #FFF;
                vertical-align: top;
                left: 0.35em;

                .multiinput-itemlist{
                    width: 100%;
                }

                .form-body{
                    border: none;

                    &.focus{
                        box-shadow: none !important;
                    }

                    > input{
                        cursor: pointer;
                    }

                    .cleanicon{
                        display: none !important;
                    }
                }
            }

            mor-textinput{
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;

                &.empty-content{
                    .textinput-wrap{
                        input{
                            background: transparent;
                        }
                    }
                }

                .textinput-wrap{
                    input{
                        border: none;
                        padding: 0 3.5em 0 1em;
                    }

                    .cleanicon{
                        right: 2em;
                    }
                }
            }

            > .note{
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                overflow: hidden;
                padding: 0 1em;
                position: relative;
                z-index: 1;
                height: 100%;

                &.has-selected{
                    color: @colorFormText;
                }
            }

            &:hover{
                border-color: @colorFormBorderHover;
                color: @colorFormPlaceholderHover !important;
            }

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

            > .mo-icon{
                position: absolute;
                width: 24px;
                transform: rotateX(0deg);
                transition: transform 0.2s;
                z-index: 2;
                top: 0;
                right: 0;
                color: @colorFormPlaceholder;

                &.cleanicon{
                    display: none;
                    font-size: @fontSize*0.875;
                    color: @colorFormPlaceholder;
                    background: @colorWhite;
                    z-index: 3;

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

                &.drop{
                    font-size: 30px;
                    text-indent: 1px;
                }
            }

            &:hover,
            &.hover{
                > .mo-icon.cleanicon{
                    display: block;
                }
            }
        }
    }

    &.popover-show{
        .cascader-wrap{
            .cascader-input{
                > .mo-icon{
                    transform: rotateX(180deg);
                }
            }
        }
    }

    &.si-m{
        .cascader-wrap{
            .cascader-input{
                // height: @formHeight;
                line-height: @formHeight - 2px;

                .textinput-wrap{
                    height: @formHeight - 2px;
                    line-height: @formHeight - 2px;

                    input{
                        height: @formHeight - 2px;
                    }
                }

                > mor-multiinput{
                    min-height: @formHeight - 2px;
                    font-size: @formInputFontSize;
                }

                > .note{
                    width: calc(100% - @fontSize*2.5);
                    font-size: @formInputFontSize;
                }
            }
        }
    }

    &.si-s{
        .cascader-wrap{
            .cascader-input{
                // height: @formHeightS;
                line-height: @formHeightS - 2px;

                .textinput-wrap{
                    height: @formHeightS - 2px;
                    line-height: @formHeightS - 2px;

                    input{
                        height: @formHeightS - 2px;
                    }
                }

                > mor-multiinput{
                    min-height: @formHeightS - 2px;
                    font-size: @formInputFontSizeS;
                }

                > .note{
                    width: calc(100% - @fontSize*2.5);
                    font-size: @formInputFontSizeS;
                }
            }
        }
    }

    &.si-xs{
        .cascader-wrap{
            .cascader-input{
                // height: @formHeightXs;
                line-height: @formHeightXs - 2px;

                .textinput-wrap{
                    height: @formHeightXs - 2px;
                    line-height: @formHeightXs - 2px;

                    input{
                        height: @formHeightXs - 2px;
                    }
                }

                > mor-multiinput{
                    min-height: @formHeightXs - 2px;
                    font-size: @formInputFontSizeXs;
                }

                > .note{
                    width: calc(100% - @fontSize*2.5);
                    font-size: @formInputFontSizeXs;
                }
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .cascader-wrap{
            .cascader-input{
                border: 1px @colorFormBorderDisable solid;
                background-color: @colorFormBackgroundDisable;
                -webkit-user-select: none;
                cursor: not-allowed !important;
                color: @colorFormTextDisable !important;

                > mor-multiinput{
                    background: transparent;
                }

                > .note{
                    color: @colorFormTextDisable !important;
                }
            }
        }
    }

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

.mor-cascader-popover{
    .popover-con .popover-body{
        padding: 0;
        display: flex;

        .cascader-menu{
            border-left: 1px solid lighten(@colorFormBorder, 3%);

            &:first-child{
                border-left: none;
            }

            > ul{
                padding: 0.5em 0;
                margin: 0;
                list-style: none;
                font-size: @fontSize*0.875;
                min-width: @fontSize*8;
                max-width: @fontSize*12;
                min-height: @fontSize*12;
                max-height: @fontSize*24;
                overflow-y: auto;

                .setup-scrollbar();

                > li{
                    font-size: @fontSize*0.875;
                    padding: 0.6em 1.5em;
                    cursor: pointer;
                    display: flex;

                    &:hover{
                        background: @colorFromItemBackgroundHover;
                    }

                    &.current{
                        background: @colorWhite;
                        color: @colorTheme;
                    }

                    &.last-current{
                        background: @colorFromItemBackgroundHover;
                    }

                    &.disabled{
                        background: @colorFromItemBackgroundDisable;
                        cursor: not-allowed;
                    }

                    mor-checkbox{
                        width: auto;
                        font-size: 0;
                        margin-right: @fontSize*0.25;
                        align-items: center;
                        display: flex;

                        > .il label{
                            margin-right: 0;
                            font-size: 0;
                        }
                    }
                }
            }
        }
    }
}

.mor-cascader-search-result{
    .popover-con .popover-body{
        padding: @fontSize*0.5 0;
        overflow-y: auto;
        max-height: 30px*6;

        .setup-scrollbar();
    }

    ul {
        padding: 0;
        margin: 0;
        list-style: none;

        li{
            padding: 0.5em 1em;
            font-size: @fontSize*0.875;
            overflow: hidden;
            position: relative;

            &.selected{
                background: @colorFormBackgroundHover;
                color: @colorTheme;
                cursor: default;

                &:hover{
                    color: @colorTheme;
                }

                .mo-cascader-selected-icon{
                    font-size: @fontSize*0.75;
                    position: absolute;
                    right: 5px;
                    display: inline-block;
                    width: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    box-sizing: border-box;
                    color: @colorTheme;
                }
            }
        }

        li:not(.nomatch){
            &:hover{
                cursor: pointer;
                background: @colorFromItemBackgroundHover;
            }
        }
    }
}