@calendarMinWidth : 240px;

mor-private-datepicker{
    display: block;
    width: 100%;
    position: relative;

    .setup-form();

    &.st-normal{}

    &.st-disabled{}

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

.mor-private-datepicker-popover{
    min-width: calc(@calendarMinWidth + 2px);
    top: @formHeight + 3;
    box-sizing: border-box;
    font-size: @fontSize*0.875;

    .popover-con .popover-body{
        padding: 0;
    }

    .date-select{
        box-sizing: border-box;
        background: @colorFormBackground;
        border-radius: @borderRadius;
        z-index: 2;
        user-select: none;

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

        mor-calendar{
            .day,
            .month,
            .year{
                cursor: pointer;
            }
        }
    }

    .date-select-footer{
        padding: @fontSize*0.5;
        border-top: 1px @colorNeutral2 solid;

        &:empty{
            display: none;
        }

        .footer-range-select-start{
            opacity: 0;
            pointer-events: none;
        }
    }

    &.si-m {
        top: @formHeight + 3;
    }

    &.si-s {
        top: @formHeightS + 3;
    }

    &.si-xs {
        top: @formHeightXs + 3;
    }
}