$date-prefix:#{$css-prefix}date;
$time-prefix:#{$css-prefix}time;
$date-prefix-cells-width-with-seconds: $date-prefix-cells-width-base *3;
$date-prefix-cells-width-with-date: $date-prefix-cells-width-with-date-base * 2;
$date-prefix-cells-width-with-date-with-seconds: $date-prefix-cells-width-with-date-base * 3;
$btn-prefix:#{$css-prefix}btn;

.#{$date-prefix} {
    display: inline-block;
    width: 100%;
    height:$select-default-height;
    box-sizing: border-box;
    vertical-align: middle;
    color: $text-color;
    font-size: $font-size-base;
    position: relative;
    line-height: normal;
    
    &-ref{
        position:relative;
        display: block;
        height:100%;
        box-sizing: border-box;
        outline: none;
        user-select: none;
        cursor: pointer;
        position: relative;
        border-radius: $btn-border-radius;
        border: 1px solid $select-border-color;
        transition: all $transition-time $ease-in-out;
        font-size:$font-size-base;
        padding:$date-ref-padding;
        &-name{
            .placeholder{
                color:$tip-color;
            }
            &-hasPreIcon{
                padding:$date-ref-hasPreIcon-padding;

            }
        }
        i{
            position: absolute;
            &.pre-icon{
                left:$date-ref-icon-right;
                top:$date-ref-icon-top;
            }
            &.after-icon{
                right:$date-ref-icon-right;
                top:$date-ref-icon-top;
            }

        }

    }
    &-cells{
        // min-width: $date-prefix-cells-width;
        width:$date-width;
        height:$date-height;
        white-space: normal;
        padding:$date-padding;
        &-header{
            span{
                width:$date-cell-width;
                height:$date-cell-height;
                line-height:$date-cell-height;
                padding:0 $date-cell-padding;
                font-weight:700;
                text-align: center;
                display: inline-block;
                &:first-child{
                    width:$date-cell-side-width;
                    padding-left:0;
                }
                &:last-child{
                    width:$date-cell-side-width;
                    padding-right:0;
                }
            }
            margin:$date-header-margin;
        }
        span{
            span{
                display: inline-block;
                width: $date-cell-height;
                height: $date-cell-height;

            }
            em{
                display: inline-block;
                width: $date-cell-height;
                height: $date-cell-height;
                line-height: $date-cell-height;
                font-style: normal;
                -webkit-border-radius: $date-cell-radius;
                -moz-border-radius: $date-cell-radius;
                -ms-border-radius: $date-cell-radius;
                -o-border-radius: $date-cell-radius;
                border-radius: $date-cell-radius;
                text-align: center;
                z-index:2;
            }
        }
        &-with-seconds{
            min-width: $date-prefix-cells-width-with-seconds;
        }

        &-list{
            width: $date-prefix-cells-width-base;
            max-height: 144px;
            float: left;
            overflow: hidden;
            border-left: 1px solid $border-color-split;
            position: relative;
            &:hover{
                overflow-y: auto;
            }

            &:first-child{
                border-left: none;
                border-radius: $btn-border-radius 0 0 $btn-border-radius;
            }
            &:last-child{
                border-radius: 0 $btn-border-radius $btn-border-radius 0;
            }
            ul{
                width: 100%;
                margin: 0;
                padding: 0 0 120px 0;
                list-style: none;
                li{
                    width: 100%;
                    height: 24px;
                    line-height: 24px;
                    margin: 0;
                    padding: 0 0 0 16px;
                    box-sizing: content-box;
                    text-align: left;
                    user-select: none;
                    cursor: pointer;
                    list-style: none;
                    transition: background $transition-time $ease-in-out;

                }
            }
        }
        &-row{
            margin:$date-cell-padding 0px;
            .#{$date-prefix}{
                &-cells{
                    &-cell{
                        &:first-child{
                            width:$date-cell-side-width;
                            padding-left:0;
                        }
                        &:last-child{
                            width:$date-cell-side-width;
                            padding-right:0;
                        }
                    }
                }
            }

        }
        &-cell{
            display:inline-block;
            width: $date-cell-width;
            height: $date-cell-height;
            padding:0 $date-cell-padding;
            cursor: pointer;
            &:hover{
                em{
                    background: $date-pickerBody-tbody-hover;

                }
            }
            &-disabled,&-prev-month,&-next-month {
                color: $date-disable-color;
                cursor: $cursor-disabled;

                &:hover {
                    em{
                        background-color: $date-bg;
                    }
                    color: $date-disable-color;
                    cursor: $cursor-disabled;
                }
            }
            &-selected ,&-selected:hover{
                em{
                    background: $primary-color;
                    color:$date-bg;
                    position: relative;
                }
                // background: $background-color-select-hover;
            }
            &-selected{
                &-start{
                    span{
                        position: relative;
                        &:before{
                            content: '';
                            display: block;
                            width: $date-cell-padding+$date-cell-width/2;
                            height: 100%;
                            position: absolute;
                            left:-$date-cell-padding;
                            top:0;
                            background: $date-bg;
                            z-index: 1;
                        }
                    }
                    em{
                    }

                }
                &-end{
                    span{
                        position: relative;
                        &:after{
                            content: '';
                            display: block;
                            width: $date-cell-padding+$date-cell-width/2;
                            height: 100%;
                            position: absolute;
                            right:-$date-cell-padding;
                            top:0;
                            background: $date-bg;
                            z-index: 1;
                        }
                    }
                    em{
                        &:after{
                            content: '';
                            display: block;
                            width: $date-cell-padding;
                            height: 100%;
                            position: absolute;
                            right:-$date-cell-padding;
                            top:0;
                            background: $date-bg;
                            z-index: 1;
                        }
                    }


                }

            }
            &-range{
                background: $date-pickerBody-tbody-hover;

            }
         
        }
        &-month,&-year,&-quarter{
            padding:$date-month-padding;
            .#{$date-prefix}{
                &-cells{
                    &-cell{
                        width:$date-month-cell-width;
                        height: $date-month-cell-height;
                        padding:0 $date-month-cell-padding;
                        em{
                            display: inline-block;
                            width: $date-month-cell-height;
                            height: $date-month-cell-height;
                            line-height:$date-month-cell-height;
                            font-style: normal;
                            border-radius: $date-cell-radius;
                            text-align: center;
                            transition: all .2s ease-in-out;
                        }
                        &-selected{
                            &-start{
                                em{
                                    &:before{
                                        content: '';
                                        display: block;
                                        width: $date-month-cell-padding;
                                        height: 100%;
                                        position: absolute;
                                        left:-$date-month-cell-padding;
                                        top:0;
                                        background: $date-bg;
                                        z-index: 1;
                                    }
                                }
            
                            }
                            &-end{
                                em{
                                    &:after{
                                        content: '';
                                        display: block;
                                        width: $date-month-cell-padding;
                                        height: 100%;
                                        position: absolute;
                                        right:-$date-month-cell-padding;
                                        top:0;
                                        background: $date-bg;
                                        z-index: 1;
                                    }
                                }
            
            
                            }
            
                        }

                    }
                    &-row{
                        margin:$date-month-cell-roll-margin;
                        &:last-child{
                            margin-bottom: 0;
                        }
                        .#{$date-prefix}{
                            &-cells{
                                &-cell{
                                    &:first-child{
                                        width:$date-month-cell-side-width;
                                        padding-left:0;
                                    }
                                    &:last-child{
                                        width:$date-month-cell-side-width;
                                        padding-right:0;
                                    }
                                }
                            }
                        }

                    }
                }
            }
            &.#{$date-prefix}{
                &-cells-month{
                    &-row-3{
                        .#{$date-prefix}{
                            &-cells{
                                &-row{
                                    margin: $date-month-row3-cell-roll-margin;
                                }
                                &-cell{
                                    em{
                                        width:$date-month-row3-cell-em-width;
                                        height: $date-month-row3-cell-height;
                                        line-height:$date-month-row3-cell-height;
                                    }
                                    width: $date-month-row3-cell-width;
                                    height: $date-month-row3-cell-height;
                                    padding: 0 $date-month-row3-cell-padding;
                                    &:first-child,&:last-child{
                                        width: $date-month-row3-cell-em-width;
                                    }
                                    &-selected-start{
                                        em{
                                            &:before{
                                                width:$date-month-row3-cell-padding;
                                                left:-$date-month-row3-cell-padding;
                                            }
                                        }
                                    }
                                    &-selected-end{
                                        em{
                                            &:after{
                                                width:$date-month-row3-cell-padding;
                                                right:-$date-month-row3-cell-padding;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                }
            }

        }
        &-quarter{
            height:$date-quarter-wrap-height;
            .#{$date-prefix}{
                &-cells{
                    &-cell{
                        width:$date-quarter-cell-width;
                        height: $date-quarter-cell-height;
                        padding:0 $date-quarter-cell-padding;
                        em{
                            display: inline-block;
                            width: $date-quarter-cell-height;
                            height: $date-quarter-cell-height;
                            line-height:$date-quarter-cell-height;
                            font-style: normal;
                            border-radius: $date-cell-radius;
                            text-align: center;
                            transition: all .2s ease-in-out;
                        }
                        &-selected{
                            &-start{
                                em{
                                    &:before{
                                        content: '';
                                        display: block;
                                        width: $date-quarter-cell-padding;
                                        height: 100%;
                                        position: absolute;
                                        left:-$date-quarter-cell-padding;
                                        top:0;
                                        background: $date-bg;
                                        z-index: 1;
                                    }
                                }
            
                            }
                            &-end{
                                em{
                                    &:after{
                                        content: '';
                                        display: block;
                                        width: $date-quarter-cell-padding;
                                        height: 100%;
                                        position: absolute;
                                        right:-$date-quarter-cell-padding;
                                        top:0;
                                        background: $date-bg;
                                        z-index: 1;
                                    }
                                }
            
            
                            }
            
                        }

                    }
                    &-row{
                        margin:$date-quarter-cell-roll-margin;
                        &:last-child{
                            margin-bottom: 0;
                        }
                        .#{$date-prefix}{
                            &-cells{
                                &-cell{
                                    &:first-child{
                                        width:$date-quarter-cell-side-width;
                                        padding-left:0;
                                    }
                                    &:last-child{
                                        width:$date-quarter-cell-side-width;
                                        padding-right:0;
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    }

    &-header{
        height: $date-header-height;
        line-height: $date-header-height;
        text-align: center;
        border-bottom:$date-border;
        position: relative;
        &-label{
            font-weight:700;
        }
    }
    &-panel{
        &-icon-btn{
            position: absolute;
        }
        &-selectedbar{
            height:35px;
            line-height:35px;
            border-bottom:1px solid #E8E8E8;
            padding-left:24px;
            font-size: 14px;
            &-start-date{
                color: rgba(0,0,0,0.65);
                &.empty{
                    color: rgba(0,0,0,0.25);
                }
            }
            &-end-date{
                color: rgba(0,0,0,0.65);
                &.empty{
                    color: rgba(0,0,0,0.25);
                }

            }
        }
        &-sidebar{
            width: $date-sidebar-width;
            height: $date-sidebar-height;
            float: left;
            background: $date-sidebar-bg;
            border-right: $date-border;
            overflow: auto;
        }
        &-shortcut{
            font-size: $font-size-base;
            color: $text-color;
            line-height: $line-height-base;
            height:$date-sidebar-item-height;
            padding:$date-sidebar-item-padding;
            cursor: pointer;
            &:hover,&:active,&.active{
                background: $date-sidebar-hover-bg;
            }
            &.active{
                font-weight:700;
            }
            &.disabled,&.disabled:hover,&.disabled:active{
                background: transparent;
                color: $tip-color;
                cursor: default;
            }
        }
        &-pikerbar{
            height:$date-pikerbar-height;
            padding:$date-pikerbar-padding;
            border-bottom:$date-border;
        }
        &-body{
            float:left;
        }
        &-with-sidebar{
            width:$date-sidebar-width+$date-width;
            overflow: hidden;
        }
        &-select-wrap{

        }
        &-select{
            &.vsu-select{
                width:$date-select-width;
                font-size:12px;
                .vsu-option{
                    font-size:12px;

                }

            }
        }
    }
    &-prev-btn{
        &-arrow{
            left:$date-prev-arrow;
        }
        &-arrow-double{
            left:$date-prev-double-arrow;
        }
    }
    &-next-btn{
        &-arrow{
            right:$date-prev-arrow;
        }
        &-arrow-double{
            right:$date-prev-double-arrow;
        }
    }
    &-drop{
        width: auto;
        margin: 0 0;
        padding: 0 0;
        background-color: $date-bg;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius:$date-radius;
        -webkit-box-shadow: $date-shadow;
        box-shadow:  $date-shadow;
        position: absolute;
        z-index:$zindex-select;
    }

    // &-with-range&-with-seconds{
    //     .#{$date-prefix}-panel{
    //         &-body{
    //             min-width: $date-prefix-cells-width-with-seconds * 2 + 4px;
    //         }
    //     }
    // }
    &-confirm{
        float:left;
        width:100%;
        text-align:right;
        height:$date-confirm-height;
        border-top:$date-border;
        padding:$date-confirm-padding;
        position: relative;
        &-time-trigger{
            margin-right: 8px;
            font-size: 14px;
            color: $primary-color;
            cursor: pointer;
            &.disabled{
                cursor: default;
                color: $date-disable-color;
            }
            &.left{
                position: absolute;
                left:16px;
                top:18px;
            }

        }
        &-date{
            position: absolute;
            left:16px;
            top:0;
            display:inline-block;
            height:$date-confirm-height;
            line-height: $date-confirm-height;
        }
        .#{$btn-prefix}+.#{$btn-prefix}{
            margin-left:8px;
        }
        &-extra-tip{  
            position: absolute;
            left: 24px;
            top: 9px;
            display: inline-block;
            height: $date-confirm-height;
            padding:$date-tip-padding;
            font-size: $font-size-small;
            color: $text-color;
            line-height: $line-height-small;
            text-align: left;
            &.error{
                color:$error-color;
            }
        }
        &-tip{    
            position: absolute;
            left: $date-tip-left;
            top: 0;
            width:$date-tip-width;
            display: inline-block;
            height: $date-confirm-height;
            padding:$date-tip-padding;
            font-size: $font-size-small;
            color: $date-tip-color;
            line-height: $line-height-small;
            text-align: left;
        }
        
    }
    &-with-range{
        overflow:hidden;
        // width:656px;
        // height:380px;
        .#{$date-prefix}-panel{
            &-body{
                float:left;
                min-width: $date-prefix-cells-width * 2 + 72px;
            }
            &-sidebar{
                height: $date-sidebar-range-height;
            }
            &-content{
                float: left;
                position: relative;

                // &:after{
                //     content: '';
                //     display: block;
                //     width: 2px;
                //     position: absolute;
                //     top: 31px;
                //     bottom: 0;
                //     right: -2px;
                //     background: $border-color-split;
                //     z-index: 1;
                // }

                &-left{
                    .#{$date-prefix}{
                        &-cells{
                            padding: $date-cells-left-padding;
                            &-month{
                                padding: $date-month-cells-left-padding;
                            }
                            &-quarter{
                                padding: $date-quarter-cells-left-padding;
                            }
                        }
                    }
                }

                &-right{
                    .#{$date-prefix}{
                        &-cells{
                            padding: $date-cells-right-padding;
                            &-month{
                                padding:$date-month-cells-right-padding;
                            }
                            &-quarter{
                                padding:$date-quarter-cells-right-padding;
                            }
                        }
                    }
                    float: right;
                    &:after{
                        right: auto;
                        left: -2px;
                    }
                }
            }
        }
        &.#{$date-prefix}-panel{
            &-with-sidebar{
                width:$date-sidebar-width+$date-prefix-cells-width * 2 + 72px;
                .#{$date-prefix}{
                    &-confirm{
                        width:$date-confirm-width;
                        &-compare-btn{
                            position: absolute;
                            left: 16px;
                            top: 56px;
                            display: inline-block;
                        }
                        &-date{
                            &-compare{
                                top: 79px;
                            }
                        }
                    }
                }
                &.#{$date-prefix}-panel{
                    &-compare{
                        width:$date-sidebar-width+$date-prefix-cells-width * 2 + 278px;
                        height:344px;
                        position: relative;
                        .#{$date-prefix}{
                            &-panel{
                                &-pikerbar{
                                    width:656px;
                                }

                            }
                            &-confirm{
                                position: absolute;
                                right:0;
                                top:0;
                                width: 207px;
                                height:344px;
                                border-top: none;
                                border-left: 1px solid rgba(0, 0, 0, 0.09);
                                &-btn{
                                    position: absolute;
                                    bottom:24px;
                                    right:16px;
                                }
                                &-tip{
                                    left: 16px;
                                    top: 214px;
                                }
                            }
                        }
                    }
        
                }

            }

        }
        .#{$date-prefix}-cells{
            &-list{
                &:first-child{
                    border-radius: 0;
                }
                &:last-child{
                    border-radius: 0;
                }
            }
            &-cell{
                &-selected ,&-selected:hover{
                    background: $date-pickerBody-tbody-hover;
                    em{
                        background: $primary-color;
                        color:$date-bg;
                        position: relative;
                    }
                    // background: $background-color-select-hover;
                }

            }
        }
    }
    &-disabled{
        .#{$date-prefix}{
            &-ref{
                border:1px solid $border-color-disabled ;
                color:$border-color-disabled ;
                cursor: default;
                i{
                    color:$border-color-disabled ;
                }
            }
        }
    }
    &-readonly{
        .#{$date-prefix}{
            &-ref{
                border:1px solid transparent ;
                cursor: default;
            }
        }
    }
    &-wrapSelection{
        .#{$date-prefix}{
            &-ref{
                z-index:$zindex-select+1;
            }
            &-drop{
                padding-top:$date-ref-height;
            }
        }
    }
}
.#{$time-prefix}{
    &-with-range{
        overflow:hidden;

    }
    &-panel{
        float:left;
        min-width: $date-prefix-cells-width * 2 + 72px;
        &-body{
            overflow: hidden;
            padding-left:2px;
        }
        &-content{
            float: left;
            position: relative;
            &:first-child{
                border-right:2px solid $date-border-color;
            }

        }
    }
    &-header{
        height:$date-time-header-height;
        line-height: $date-time-header-height;
        text-align: center;
        font-size: $date-time-header-fontSize;
        color: $text-color;
        font-weight: 700;
    }
    &-cells{
        overflow: hidden;
        border-top:$date-border;
        &-list{
            width:$date-time-cell-width;
            float:left;
            &:not(:last-child){
                border-right:$date-border;
            }
        }
        &-ul{
            height: $date-time-content-height;
            margin-bottom: 0;
        }
        &-cell{
            width:$date-time-cell-width;
            height:$date-time-cell-height;
            line-height:$date-time-cell-lineHeight;
            font-size:$date-time-cell-fontSize;
            color: $text-color;
            text-align: center;
            cursor: pointer;
            &:hover{
                background: $date-time-cell-hover-bg;
            }
            &-selected ,&-selected:hover{
                background: $date-time-cell-active-bg;
                font-weight:700;
            }
            &-disabled{
                cursor: default;
                color: $date-disable-color;
                background: $date-bg;
                &:hover{
                    background: $date-bg;
                }
            }
        }

    }
}
.#{$date-prefix}-panel-content{
    .#{$date-prefix}-panel-content{
        .#{$date-prefix}{
            &-cells{
                min-width: $date-prefix-cells-width-with-date-with-seconds;
                &-with-seconds{
                    min-width: $date-prefix-cells-width-with-date-with-seconds;
                    .#{$date-prefix}-cells-list{
                        width: $date-prefix-cells-width-with-date-with-seconds / 3;
                        ul{
                            li{
                                padding: 0 0 0 28px;
                            }
                        }
                    }
                }
                &-list {
                    width: $date-prefix-cells-width-with-date-with-seconds / 2;
                    max-height: 216px;
                    &:first-child{
                        border-radius: 0;
                    }
                    &:last-child{
                        border-radius: 0;
                    }
                    ul{
                        padding: 0 0 192px 0;
                        li{
                            padding: 0 0 0 46px;
                        }
                    }
                }
            }
        }
    }
}