mor-timepicker{
    display: block;
    position: relative;

    .setup-form();

    .wrap{
        display: flex;

        .input-group-addon{
            font-size: @fontSize*0.75;
            color: @colorFormAddonFont;
            text-align: center;
            background-color: @colorFormAddonBg;
            border-top: 1px solid @colorFormBorder;
            border-bottom: 1px solid @colorFormBorder;
            border-left: 1px solid @colorFormBorder;
            white-space: nowrap;
            border-top-left-radius: @borderRadius;
            border-bottom-left-radius: @borderRadius;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .timepicker-input-0,
        .timepicker-input-1{
            display: inline-block;

            mor-textinput{
                .input-group-addon{
                    display: none;
                }
            }
        }

        .timepicker-input-0{
            mor-textinput{
                input{
                    border-radius: 0;
                }
            }
        }

        .timepicker-select-1,
        .timepicker-select-0{
            .input-group-addon{
                display: none;
            }
        }

        .timepicker-select-0{
            .wrap{
                border-radius: 0;
            }
        }

        .timepicker-select-1{
            .wrap{
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        .separator{
            color: @colorFormAddonFont;
            text-align: center;
            box-sizing: border-box;
            border-top: 1px solid @colorFormBorder;
            border-bottom: 1px solid @colorFormBorder;

            &.block{
                background-color: @colorFormAddonBg;
            }

            &.inline{
                padding: 0;
            }
        }
    }

    &.inline-separator .wrap{
        .timepicker-input-0{
            mor-textinput{
                input{
                    border-right: 0;
                }
            }
        }

        .timepicker-input-1{
            mor-textinput{
                input{
                    border-left: 0;
                }
            }
        }
    }

    &.si-m{
        .wrap{
            .input-group-addon{
                padding: 0 @fontSize*0.75;
                height: @formHeight;
                line-height: @formHeight;
            }

            .separator{
                height: @formHeight;
                line-height: @formHeight;
                font-size: @formInputFontSize;

                &.block{
                    min-width: @formHeight;
                    padding: 0 0.5em;
                }
            }
        }
    }

    &.si-s{
        .wrap{
            .input-group-addon{
                padding: 0 @fontSize*0.6;
                height: @formHeightS;
                line-height: @formHeightS;
            }

            .separator{
                height: @formHeightS;
                line-height: @formHeightS;
                font-size: @formInputFontSizeS;

                &.block{
                    min-width: @formHeightS;
                    padding: 0 0.5em;
                }
            }
        }
    }

    &.si-xs{
        .wrap{
            .input-group-addon{
                padding: 0 @fontSize*0.5;
                height: @formHeightXs;
                line-height: @formHeightXs;
            }

            .separator{
                height: @formHeightXs;
                line-height: @formHeightXs;
                font-size: @formInputFontSizeXs;

                &.block{
                    min-width: @formHeightXs;
                    padding: 0 0.5em;
                }
            }
        }
    }

    &.st-normal{}

    &.st-disabled{}

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