mor-transfer{
    position: relative;
    display: block;
    box-sizing: border-box;
    height: 100%;

    .setup-form-without-form-width();

    .transfer-wrap{
        display: flex;
        align-items: stretch;
        justify-content: center;
        height: 100%;
    }

    &.has-form-name{
        .transfer-wrap{
            height: calc(100% - @fontSize*1.5 - @fontSize*0.5);
        }
    }

    .transfer-source-list,
    .transfer-target-list,
    .transfer-controls{
        flex-grow: 4;
    }

    .transfer-source-list,
    .transfer-target-list{
        border: 1px @colorFormBorder solid;
        background: @colorWhite;
        border-radius: 3px;
        overflow: hidden;
        padding: 0;
        min-width: 10em;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        height: 100%;

        .transfer-title{
            background: @colorComponentItemBg;
            font-size: 0;
            position: relative;
            flex-shrink: 0;
            flex-grow: 0;

            .transfer-source-count,
            .transfer-target-count{
                position: absolute;
            }

            > p{
                display: inline-block;
                color: @colorBlack;
                vertical-align: top;

                > i{
                    color: @colorBlack;
                }
            }

            > mor-checkbox{
                display: inline-block;
                width: auto;
                vertical-align: top;

                label > span {
                    font-size: 0;
                }
            }
        }

        .transfer-list{
            position: relative;
            flex-grow: 1;
            overflow-y: auto;
            font-size: 0;

            > mor-checkbox{
                height: 100%;
                overflow-y: scroll;

                .setup-hover-scrollbar();

                > .il {
                    flex-direction: column;

                    > label{
                        margin: 0;
                    }

                    span{
                        line-height: 1em;
                    }
                }
            }

            .list-is-empty{
                position: absolute;
                margin: 0;
                width: 100%;
                top: 0;
                left: 0;
                height: 100%;
            }
        }

        .transfer-footer{
            flex-shrink: 0;
            flex-grow: 0;
            border-top: 1px lighten(@colorFormBorder, 3%) solid;

            &:empty{
                display: none;
            }
        }
    }

    .transfer-controls{
        flex-grow: 1;
        flex-direction: column;
        display: flex;
        justify-content: center;
        align-items: center;

        > mor-btn{
            > span{
                vertical-align: middle;
            }
        }
    }

    &.si-m{
        .transfer-source-list,
        .transfer-target-list{
            font-size: @formInputFontSize + 2px;

            .transfer-title{
                height: @formHeight;
                padding: @fontSize*0.375 @fontSize*0.625;

                .transfer-source-count,
                .transfer-target-count,
                > p,
                > mor-checkbox{
                    line-height: @fontSize*1.75;
                }

                .transfer-source-count,
                .transfer-target-count{
                    font-size: @fontSize*0.75;
                    right: @fontSize*0.625;
                    top: @fontSize*0.375;
                }

                > p{
                    font-size: @formInputFontSize;
                    margin: 0 0 0 0.5em;
                }
            }

            .transfer-list{
                > mor-checkbox{
                    font-size: @formInputFontSize + 2px;

                    > .il {
                        padding: @fontSize*0.5 0;

                        > label{
                            padding: @fontSize*0.3125 @fontSize*0.625;
                        }
                    }
                }

                .search-input{
                    padding: @fontSize*0.5 @fontSize*0.5 0 @fontSize*0.5;

                    mor-textinput input{
                        padding: 0 0.6em;
                        height: @fontSize*2;
                        font-size: @fontSize*0.75;
                    }
                }
            }

            .transfer-footer{
                padding: 0.5em;
                font-size: @fontSize;
            }
        }

        .transfer-controls{
            padding: 0 1em;

            > mor-btn{
                margin: 0.5em 0;

                > .mo-icon{
                    font-size: @fontSize*0.75;
                }
            }
        }
    }

    &.si-s{
        .transfer-source-list,
        .transfer-target-list{
            font-size: @formInputFontSizeS + 2px;

            .transfer-title{
                height: @formHeightS;
                padding: @fontSize*0.3125 @fontSize*0.5;

                .transfer-source-count,
                .transfer-target-count,
                > p,
                > mor-checkbox{
                    line-height: @fontSize*1.5;
                }

                .transfer-source-count,
                .transfer-target-count{
                    font-size: @fontSize*0.75;
                    right: @fontSize*0.5;
                    top: @fontSize*0.3125;
                }

                > p{
                    font-size: @formInputFontSizeS;
                    margin: 0 0 0 0.5em;
                }
            }

            .transfer-list{
                > mor-checkbox{
                    font-size: @formInputFontSizeS + 2px;

                    > .il {
                        padding: @fontSize*0.3125 0;

                        > label{
                            padding: @fontSize*0.125 @fontSize*0.5;
                        }
                    }
                }

                .search-input{
                    padding: @fontSize*0.5 @fontSize*0.5 0 @fontSize*0.5;

                    mor-textinput input{
                        padding: 0 0.6em;
                        height: @fontSize*1.75;
                        font-size: @fontSize*0.75;
                    }
                }
            }

            .transfer-footer{
                padding: 0.5em;
                font-size: @fontSize;
            }
        }

        .transfer-controls{
            padding: 0 1em;

            > mor-btn{
                margin: 0.5em 0;

                > .mo-icon{
                    font-size: @fontSize*0.75;
                }
            }
        }
    }

    &.si-xs{
        .transfer-source-list,
        .transfer-target-list{
            font-size: @formInputFontSizeXs + 2px;

            .transfer-title{
                height: @formHeightXs;
                padding: @fontSize*0.125 @fontSize*0.375;

                .transfer-source-count,
                .transfer-target-count,
                > p,
                > mor-checkbox{
                    line-height: @fontSize*1.5;
                }

                .transfer-source-count,
                .transfer-target-count{
                    font-size: @fontSize*0.75;
                    right: @fontSize*0.5;
                    top: @fontSize*0.125;
                }

                > p{
                    font-size: @formInputFontSizeXs;
                    margin: 0 0 0 0.5em;
                }
            }

            .transfer-list{
                > mor-checkbox{
                    font-size: @formInputFontSizeXs + 2px;

                    > .il {
                        padding: @fontSize*0.3125 0;

                        > label{
                            padding: @fontSize*0 @fontSize*0.375;
                        }
                    }
                }

                .search-input{
                    padding: @fontSize*0.5 @fontSize*0.5 0 @fontSize*0.5;

                    mor-textinput input{
                        padding: 0 0.6em;
                        height: @fontSize*1.5;
                        font-size: @fontSize*0.75;
                    }
                }
            }

            .transfer-footer{
                padding: 0.5em;
                font-size: @fontSize;
            }
        }

        .transfer-controls{
            padding: 0 1em;

            > mor-btn{
                margin: 0.5em 0;

                > .mo-icon{
                    font-size: @fontSize*0.75;
                }
            }
        }
    }

    &.st-normal{}

    &.st-disabled,
    &.st-readonly{
        .transfer-source-list,
        .transfer-target-list{
            border: 1px @colorFormBorderDisable solid;
        }
    }

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