@import url('meta.less');
@import url('calendar.less');

@{NS}.datepicker {
    position: relative;
    min-width: @min_component_width;
    display: inline-block;
    .input {
        input[type='text'] {
            width: 100% !important;
        }
        i:after {
            content: 'date_range';
            .input_icon;
            color: @primaryColor;
        }
    }
    /* position */
    &._top {
        >._picker {
            top: initial;
            bottom: @padding * 4.2;
            .calendar {
                &:before, &:after {
                    top: initial;
                    bottom: -14px;
                    border-color: @light_gray transparent transparent transparent;
                }
                &:after {
                    bottom: -12px;
                    border-color: @mini_gray transparent transparent transparent;
                }
                >._label:before {
                    content: none;
                }
            }
        }
    }

    &._right {
        >._picker {
            top: 0;
            left: @min_input_width + 8px;
            .calendar {
                &:before, &:after {
                    content: none;
                }
                >._label:before {
                    left: -15px;
                    top: 10px;
                    border-color: transparent @primaryColor transparent transparent;
                }
            }
        }
    }

    &._left {
        >._picker {
            top: 0;
            left: @min_input_width * -1.25 - 8px;
            .calendar {
                &:before, &:after {
                    content: none;
                }
                >._label:before {
                    left: @min_input_width * 1.25 - 3px;
                    top: 10px;
                    border-color: transparent transparent transparent @primaryColor;
                }
            }
        }
    }

    >._picker {
        position: absolute;
        z-index: 1000;
        left: 0;
        top: @padding * 4.2;
        .calendar {
            .top_angle;
            .bordered;
            .box_shadow;
            position: relative;
            border-radius: 0 0 @radius @radius;
            >._label:before {
                content: '';
                position: absolute;
                top: -14px;
                left: 15px;
                border: 8px solid;
                z-index: 10;
                border-color: transparent transparent @primaryColor transparent;
            }
            ._label {
                border-radius: 0;
            } 
        }
    }
}
