.ui-datepicker when (@componentsJS-datepicker) {
    z-index    : 110 !important;
    display    : none;
    padding    : 0;
    width      : @datepicker-width;
    border     : 1px solid @datepicker-border-color;
    background : @datepicker-bg;
    .box-shadow(3px 3px 10px fade(#000, 50%));

    .ui-datepicker-header {
        background : @datepicker-header-bg;
        color      : @datepicker-header-color;
        font-size  : @datepicker-header-size;
        height     : @datepicker-header-height;
        text-align : center;
        position   : relative;

        > a {
            position        : absolute;
            top             : 0;
            background      : @datepicker-arrow-bg;
            color           : @datepicker-arrow-color;
            padding         : (@datepicker-header-height - @datepicker-arrow-size) / 2;
            text-decoration : none;
            line-height     : 0;
            .icon-size(@datepicker-arrow-size);
            .box-sizing(content-box);

            span {
                display : none;
            }

            &.ui-datepicker-prev, &.ui-datepicker-next{
                &::before{
                    .flexkit-icon();
                }
            }

            &.ui-datepicker-prev {
                left : 0;

                &::before {
                    content : "\e0ad";
                }

                span {
                }
            }

            &.ui-datepicker-next {
                right : 0;

                &::before {
                    content : "\e0ab";
                }

                span {
                }
            }

            &:hover {
                background : darken(@datepicker-arrow-bg, 5%);

                span {
                }
            }
        }

        > .ui-datepicker-title {
            line-height : @datepicker-header-height;
            margin      : 0 @datepicker-header-height;
            font-weight : normal;

            select {
                width   : 49%;
                height  : auto;
                float   : left;
                padding : .1em;

                & + select {
                    margin-left : 2%;
                }
            }

            .ui-datepicker-month {
            }

            .ui-datepicker-year {
            }
        }
    }

    //Table
    .ui-datepicker-calendar {
        width  : 100%;
        border : none;

        td, th {
            padding        : 0;
            text-align     : center;
            width          : @datepicker-week-box-size;
            vertical-align : middle;

            &.ui-datepicker-week-end > * {
                color : @datepicker-week-end-color;
            }
        }

        thead {
            tr {
            }
            th {
                line-height : @datepicker-week-box-size;
                background  : @datepicker-week-bg;
                color       : @datepicker-week-color;
                font-size   : @datepicker-week-font-size;
            }
        }

        tbody {
            tr {
            }
            td {
                font-size    : @datepicker-day-font-size;
                border-right : 1px solid @datepicker-border-color;
                border-top   : 1px solid @datepicker-border-color;
                line-height  : @datepicker-week-box-size;

                a, span {
                    display : block;
                }
                a {
                    padding    : 0 !important;
                    color      : @text-color;
                    background : @datepicker-day-bg;
                    border     : none;
                    .border-radius(0);

                    &:hover {
                        background : @state-primary-bg;
                    }
                }

                &.ui-state-disabled {
                    color : @gray-lighter;

                    & > * {
                        color : inherit;
                    }
                }

                &.ui-datepicker-current-day a {
                    color      : @datepicker-current-day-color;
                    background : @datepicker-current-day-bg;
                }

                &.ui-datepicker-today a {
                    color      : @datepicker-today-color;
                    background : @datepicker-today-bg;
                }
            }
        }
    }
}