@quickPickWidth : 100px;
@calendarMinWidth : 240px;

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

    .setup-form();

    .wrap{
        display: flex;

        .input-box{
            display: flex;
            width: 100%;
        }

        .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;
            box-sizing: border-box;
        }

        .datepicker-input-0,
        .datepicker-input-1{
            display: inline-block;
            position: static;

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

        .datepicker-input-0{
            mor-textinput{
                input{
                    border-top-right-radius: 0;
                    border-bottom-right-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;
            }
        }
    }

    &:not(.hidden-icon).wrap{
        .datepicker-input-0{
            mor-textinput{
                input{
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
        }
    }

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

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

    &.range-input-vertical{
        .wrap{
            font-size: 0;

            .input-box{
                display: inline-block;
            }

            .input-group-addon{
                display: inline-block;
                width: 41px;
            }

            .separator{
                display: none;
            }

            .datepicker-input-0,
            .datepicker-input-1{
                display: inline-block;
                position: relative;
            }

            .datepicker-input-0{
                mor-textinput input{
                    border-radius: 0 @borderRadius 0 0;
                }

                &:hover mor-textinput{
                    z-index: 2;
                }

                mor-textinput.input-focus{
                    z-index: 3;
                }
            }

            .datepicker-input-1{
                top: -1px;

                mor-textinput input{
                    border-radius: 0 0 @borderRadius 0;
                }

                &:hover mor-textinput{
                    z-index: 2;
                }

                mor-textinput.input-focus{
                    z-index: 3;
                }
            }
        }

        &.hidden-icon{
            .wrap{
                .datepicker-input-0{
                    mor-textinput input{
                        border-radius: @borderRadius @borderRadius 0 0;
                    }
                }

                .datepicker-input-1{
                    mor-textinput input{
                        border-radius: 0 0 @borderRadius @borderRadius;
                    }
                }
            }
        }
    }

    &.inline-separator{
        .datepicker-input-1,
        .datepicker-input-0{
            > mor-textinput input:focus{
                border-color: @colorFormBorder;
                box-shadow: unset;
            }
        }

        &.component-focus{
            .datepicker-input-0{
                > mor-textinput input{
                }
            }

            .separator{
                transition: border-color 0.2s, box-shadow 0.2s;
                border-color: @colorFormBorderFocus;
                box-shadow: 0 -2px 0 0 rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.15), 0 2px 0 0 rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.15);
                z-index: 9;
                background-color: @colorWhite;
            }

            .datepicker-input-1,
            .datepicker-input-0{
                > mor-textinput input{
                    transition: border-color 0.2s, box-shadow 0.2s;
                    border-color: @colorFormBorderFocus;
                    box-shadow: 0 0 0 2px rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.15);
                }
            }
        }
    }

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

        &.range-input-vertical{
            .input-group-addon{
                height: @formHeight * 2 - 1px;
                line-height: @formHeight * 2 - 1px - 12px;
            }

            .datepicker-input-0,
            .datepicker-input-1{
                font-size: @formInputFontSize;
            }
        }
    }

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

        &.range-input-vertical{
            .input-group-addon{
                height: @formHeightS * 2 - 1px;
                line-height: @formHeightS * 2 - 1px - 12px;
            }

            .datepicker-input-0,
            .datepicker-input-1{
                font-size: @formInputFontSizeS;
            }
        }
    }

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

        &.range-input-vertical{
            .input-group-addon{
                height: @formHeightXs * 2 - 1px;
                line-height: @formHeightXs * 2 - 1px - 12px;
            }

            .datepicker-input-0,
            .datepicker-input-1{
                font-size: @formInputFontSizeXs;
            }
        }
    }

    &.st-normal{}

    &.st-disabled{}

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

.mor-private-datepicker-popover{
    min-width: @calendarMinWidth + 2px;
    max-width: @calendarMinWidth + 2px;

    .date-select{
        position: relative;

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

    &.date-select-0{
        min-width: @calendarMinWidth + 1px;
        max-width: @calendarMinWidth + 1px;

        .date-select{
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            border-right: none;
        }

        .popover-con{
            box-shadow: -2px 0 3px rgba(0, 0, 0, 0.1);
            border-radius: @borderRadius @borderRadius 0 @borderRadius;
        }
    }

    &.date-select-1{
        min-width: @calendarMinWidth + 1px;
        max-width: @calendarMinWidth + 1px;

        .popover-arrow{
            display: none;
        }

        .date-select{
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
        }

        .popover-con{
            box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
            border-radius: @borderRadius @borderRadius @borderRadius 0;
        }

        mor-calendar{
            header,
            .calendar{
                border-left: 1px @colorNeutral2 solid;
            }
        }
    }

    &.has-quick-pick{
        max-width: @quickPickWidth + @calendarMinWidth + 2px;
        min-width: @quickPickWidth + @calendarMinWidth + 2px;

        &.date-select-0{
            min-width: @quickPickWidth + @calendarMinWidth + 1px;
            max-width: @quickPickWidth + @calendarMinWidth + 1px;
        }

        .quickpick{
            display: inline-block;
            width: @quickPickWidth;
            font-size: @fontSize*0.875;
            vertical-align: top;
            position: absolute;
            top: 0;
            height: 100%;
            overflow-y: scroll;
            border-right: 1px @colorFormBorder solid;

            .setup-scrollbar();

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

                li{
                    padding: 4px 10px;
                    margin: 0;
                    cursor: pointer;
                    font-size: @fontSize*0.8125;
                    color: @colorNeutral10;

                    &:hover{
                        color: @colorBlack;
                        font-weight: 700;
                    }
                }
            }
        }

        mor-calendar{
            display: inline-block;
            width: @calendarMinWidth;
            font-size: @fontSize*0.875;
            box-sizing: border-box;
            margin-left: @quickPickWidth;
        }
    }

    mor-calendar .pick-day{
        padding: 0 8px 8px;
    }
}