@import "./var";
@import '../../mixins/clearfix';
/*
 *
 * 日期选择器
 *
 */

.#{$prefix}calendar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width:$calendar-width;
}

.#{$prefix}calendar__header,
.#{$prefix}calendar__footer {
    padding: 0 15px;
}

.#{$prefix}calendar__header{
    border-bottom:1px solid $calendar-color-border-inner;
    padding-top:10px;
    padding-bottom:10px;
    margin-bottom:10px;
}


.#{$prefix}calendar__body {
    @include clearfix();
    display: -ms-flexbox;
    display: flex;
}


/*
 * 月份
 */

.#{$prefix}calendar__table {
    -ms-flex:1;
    flex:1;
    border-collapse: collapse;
    border-spacing: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    position: relative;
}

.#{$prefix}calendar__table+.#{$prefix}calendar__table {
    margin-left: 28px; //之前是30，但是总宽度比外层容器多了2px，导致出现了滚动条，因此间距缩减了2px
}

.#{$prefix}calendar__table .#{$prefix}pagination{
    position: absolute;
    top:8px;
    right:0;
}
.#{$prefix}calendar__table .#{$prefix}pagination__turnbtn {
    position: absolute;
}

.#{$prefix}calendar__table .#{$prefix}pagination__prebtn {
    right: 55px;
}
.#{$prefix}calendar__table .#{$prefix}pagination__curbtn {
    right: 31px;
}

.#{$prefix}calendar__table .#{$prefix}pagination__nextbtn {
    right: 7px;
}
.#{$prefix}calendar__caption {
    -ms-flex:100% 0 0;
    flex:100% 0 0;
    padding:0 15px;
    text-align: left;
    font-weight: bold;
    color: $calendar-color-text-weight;
    line-height: 40px;
    font-size: $calendar-font-size;
    >a{
        color:$calendar-color-text;
    }
    >a:hover{
        color:$color-primary;
        text-decoration: none;
    }
}

.#{$prefix}calendar__header-group {
    // display: table-header-group;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: auto;
    flex: auto;
}

.#{$prefix}calendar__row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: auto;
    flex:auto;
    // display: table-row;
}

.#{$prefix}calendar__row-group {
    font-size: 0;
    -ms-flex: 100%;
    flex: 100%;
    // display: table-row-group;
}

.#{$prefix}calendar__type-wrap{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding:0 10px 10px;
}

.#{$prefix}calendar__cell {
    -ms-flex:auto;
    flex:auto;
    text-align: center;
    vertical-align: middle;
    padding: 0px 4px;
    white-space: nowrap;
    position: relative;
    font-size: 0;
    cursor: pointer;
}

.#{$prefix}calendar__header-group .#{$prefix}calendar__cell {
    cursor: default;
}

.#{$prefix}calendar__cell>span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 32px;
    border-radius: 100%;
    font-size: $calendar-font-size-l;
    position: relative;
    z-index: 1;
}

.#{$prefix}calendar__cell:hover>span {
    background-color: $calendar-color-bg-hover;
}

.#{$prefix}calendar__header-group .#{$prefix}calendar__cell:hover span {
    background-color: transparent;
}

// 今日
.#{$prefix}calendar__cell--now {
    color: $calendar-color-text-current;
    font-weight: bold;
}

// 超出本月日期
.#{$prefix}calendar__cell.is-disabled
 {
    color: $calendar-color-text-disabled;
    &::before{
        content         : "";
        position        : absolute;
        top             : 1px;
        left            : 0;
        right           : 0;
        bottom          : 1px;
        background-color: $calendar-color-bg-disabled;
    }
}
.#{$prefix}calendar__cell.is-hover{
    
    &::before{
        content         : "";
        position        : absolute;
        top             : 1px;
        left            : 0;
        right           : 0;
        bottom          : 1px;
        background-color: $calendar-color-bg-hover;
    }
    
    
}
.#{$prefix}calendar__cell.is-hover-current + .#{$prefix}calendar__cell.is-hover,
.#{$prefix}calendar__cell.is-selected + .#{$prefix}calendar__cell.is-hover{
    &::after{
        content: "";
        position: absolute;
        left: -15px;
        top: 1px;
        bottom:1px;
        width: 30px;
        background-color: $calendar-color-bg-hover;
    }
}
.#{$prefix}calendar__cell.is-hover + .#{$prefix}calendar__cell.is-hover-current,
.#{$prefix}calendar__cell.is-hover + .#{$prefix}calendar__cell.is-selected{
    &::after{
        content: "";
        position: absolute;
        left:-15px;
        top: 1px;
        bottom:1px;
        width: 30px;
        background-color: $calendar-color-bg-hover;
    }
}


.#{$prefix}calendar__day--outside{
    color: $calendar-color-text-disabled;
}
.#{$prefix}calendar__cell.is-disabled:hover>span,
.#{$prefix}calendar__day--outside:hover>span {
    background-color: transparent;
}
.#{$prefix}calendar__cell.is-disabled{
    cursor:not-allowed;
}


// 选中日期
.#{$prefix}calendar__cell.is-selected>span,
.#{$prefix}calendar__cell.is-selected:hover>span {
    background-color: $calendar-color-bg-selected;
    color: $color-text-anti-primary;
}


/* 时间列表 */

.#{$prefix}list.#{$prefix}list--calendar-time {
    -ms-flex:1 1 1px;
    flex:1 1 1px;
    border-left: 1px solid $calendar-color-border-inner;
    border-top:1px solid $calendar-color-border;
    max-height: 190px;
    padding-top:80px;
    padding-bottom:80px;
}
.#{$prefix}list.#{$prefix}list--calendar-time:first-child {
    border-left-color: transparent;
}
/* 滚动条 */
.#{$prefix}list.#{$prefix}list--calendar-time::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-radius: 9px;
}
.#{$prefix}list.#{$prefix}list--calendar-time::-webkit-scrollbar-track{
    width:10px;
}

.#{$prefix}list.#{$prefix}list--calendar-time::-webkit-scrollbar:hover {
    background-color: $calendar-color-bg-hover;
}

.#{$prefix}list.#{$prefix}list--calendar-time::-webkit-scrollbar-thumb {
    background: $calendar-color-border;
    border-radius: 9px;
    background-clip: content-box;
    border: 1px solid transparent;
}

.#{$prefix}list.#{$prefix}list--calendar-time::-webkit-scrollbar-thumb:hover {
    background: $calendar-color-border-hover;
    background-clip: content-box;
}

.#{$prefix}list.#{$prefix}list--calendar-time .#{$prefix}list__item{
    text-align: center;
}


/* 放入下拉面板内 */

 


/* 日期选择器 */

.#{$prefix}timepicker,
.#{$prefix}datepicker,
.#{$prefix}monthpicker,
.#{$prefix}quarterlypicker,
.#{$prefix}datetimepicker {
    display: inline-block;
    vertical-align: middle;
    color:$color-text;
    // position: relative;  奇怪的bug
    & .#{$prefix}input {
        cursor: pointer;
    }
    & .#{$prefix}input:disabled{
        cursor: not-allowed;
    }
}
.#{$prefix}datepicker__input,
.#{$prefix}monthpicker__input,
.#{$prefix}quarterlypicker__input,
.#{$prefix}datetimepicker__input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    .#{$prefix}icon-dismiss{
        display: none;
    }
}

.#{$prefix}datepicker__input::after,
.#{$prefix}monthpicker__input::after,
.#{$prefix}quarterlypicker__input::after,
.#{$prefix}datetimepicker__input::after {
    content: "";
    position: absolute;
    //top: 7px;
    top:($form-height - 16)/2;
    right: 10px;
    width: 16px;
    height: 16px;
    background-image: $date-time-picker-after-icon;
    cursor: pointer;
    z-index: 1; //为了兼容，在#{$prefix}input-group下，input hover时，z-index会提高为1，覆盖了这个icon
}
.#{$prefix}datepicker__input.is-hover::after,
.#{$prefix}monthpicker__input.is-hover::after,
.#{$prefix}quarterlypicker__input.is-hover::after,
.#{$prefix}datetimepicker__input.is-hover::after {
    // background-image: url(../../assets/image/slice/svg/clear-icon.svg);
    background-image: none;
}
.#{$prefix}datepicker__input.is-hover,
.#{$prefix}monthpicker__input.is-hover,
.#{$prefix}quarterlypicker__input.is-hover,
.#{$prefix}datetimepicker__input.is-hover{
    .#{$prefix}icon-dismiss{
        display: inline-block;
        position: absolute;
        top:50%;
        margin-top: -8px;
        right:8px;
        z-index: 2;
        cursor: pointer;
    }
}


.#{$prefix}datetimepicker__input {
    &.#{$prefix}datepicker__input--range
    {
        width:300px;

        &.#{$prefix}datetimepicker__input--millisecond {
        width: 350px; // 为了适配毫秒级的显示
    }}
}
/* 月份选择器 */

.#{$prefix}monthpicker {}


/* 时间选择器 */
.#{$prefix}timepicker {

    .#{$prefix}datepicker__input.#{$prefix}datepicker__input--range{
        width: 220px;
    }
}
.#{$prefix}timepicker__input {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    & .#{$prefix}input {
        width: 120px; //为了增加对毫秒的支持
        padding-right: 36px;
    }
    .#{$prefix}icon-dismiss{
        display: none;
    }
    &.size-l{
        .#{$prefix}input{
            width:220px;
        }
    }
    &::after {
        content: "";
        position: absolute;
        top: 7px;
        right: 10px;
        width: 16px;
        height: 16px;
        background-image: $time-picker-after-icon;
        cursor: pointer;
        z-index:1; //为了兼容，在tea-input-group下，input hover时，z-index会提高为1，覆盖了这个icon
    }
    &.is-hover{
        &::after{
            display: none;
        }
        .#{$prefix}icon-dismiss{
            display: inline-block;
            position: absolute;
            top:50%;
            margin-top: -8px;
            right:8px;
            z-index: 2;
            cursor: pointer;
        }
    }
}
// .#{$prefix}timepicker__input.is-hover::after {
//     background-image: url(../../assets/image/slice/svg/clear-icon.svg?fill=#{$icon-color-default});
// }
.#{$prefix}timepicker__input--range,
.#{$prefix}datepicker__input--range{
    display: flex;
    align-items: center;
    border:1px solid $calendar-color-border;
    background-color: $calendar-color-bg;
    width: 200px;
    padding: 0 26px 0 0;
    font-size: $calendar-font-size;
    &:focus-within{
        border-color:$calendar-color-border-focus;
    }
    .#{$prefix}input{
        flex:1;
        height: $form-height - 2;
        border-width: 0 ;
        border-color:transparent;
        width: auto;
        min-width: 0;
        
        // &:focus{
        //     border-color: var(--border-primary-color);
        // }
    }
}
.#{$prefix}timepicker__input--range{
    width: 220px;
    .#{$prefix}input{
        padding:0 10px;
    }
}
/* 日期时间选择 */
.#{$prefix}datetimepicker__input {
    & .#{$prefix}input {
        width: 287px;
    }
}
.#{$prefix}datetimepicker__input--millisecond{
    & .#{$prefix}input {
        width: 350px;
    }
}

.#{$prefix}datepicker.is-selected .#{$prefix}input,
.#{$prefix}monthpicker.is-selected .#{$prefix}input,
.#{$prefix}quarterlypicker.is-selected .#{$prefix}input,
.#{$prefix}datetimepicker.is-selected .#{$prefix}input,
.#{$prefix}timepicker.is-selected .#{$prefix}input{
    border-color:$calendar-color-border-selected;
}
 


/* 预设快捷日期条 */

.#{$prefix}datepicker-bar {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    & .#{$prefix}segment .#{$prefix}btn {
        padding-left: 15px;
        padding-right: 15px;
    }
    // & .#{$prefix}segment .#{$prefix}btn__pickdate {
    //     min-width: 100px;
    //     position: relative;
    //     text-align: left;
    //     padding-left: 10px;
    //     padding-right: 36px;
    // }
    // & .#{$prefix}segment .#{$prefix}btn__pickdate::after {
    //     content: "";
    //     position: absolute;
    //     top: 6px;
    //     right: 10px;
    //     width: 16px;
    //     height: 16px;
    //     background-image: url(../../assets/image/slice/svg/calendar.svg);
    // }
    & .#{$prefix}datepicker,
    & .#{$prefix}datetimepicker {
        margin-left: 10px;
    }
}

.#{$prefix}calendar__footer {
    border-top: 1px solid $calendar-color-border-inner;
    padding: 15px;
    & .#{$prefix}justify-grid {
        font-size: 0;
    }
    & .#{$prefix}justify-grid__col--right .#{$prefix}btn+.#{$prefix}btn {
        margin-left: 10px;
    }
    & .#{$prefix}date-status {
        font-size:$calendar-font-size;
        color: $calendar-color-text-label;
    }
    & .#{$prefix}date-status span {
        color: initial;
        display: inline-block;
        margin: 0 5px;
    }
    
}


// 双日历
.#{$prefix}calendar--date-range {
    width: 600px;
    // & .#{$prefix}calendar__cell.is-selected:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)::before {
    //     content: "";
    //     position: absolute;
    //     top: 2px;
    //     left: 0;
    //     right: 0;
    //     bottom: 2px;
    //     background-color: #f2f2f2;
    // }
    & .#{$prefix}calendar__day--in-range::before{
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        right: 0;
        bottom: 2px;
        background-color: $calendar-range-color-bg;
    }
    & .#{$prefix}calendar__day--in-range:hover span{
        background-color: transparent;
    }
    // & .#{$prefix}calendar__cell.is-selected:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)>span {
    //     background-color: transparent;
    //     border-radius: 0;
    //     color: inherit;
    // }
    & .#{$prefix}calendar__day--start::after,
    & .#{$prefix}calendar__day--end::after {
        content: "";
        position: absolute;
        right: 0;
        top: 2px;
        bottom:2px;
        width: 15px;
        background-color: $calendar-range-color-bg;
    }
    & .#{$prefix}calendar__day--end::after {
        left: 0;
        right: auto;
    }

    // 月范围选择
    & .#{$prefix}calendar__month--in-range::before {
        content: "";
        position: absolute;
        top: 12px;
        left: 0;
        right: 0;
        bottom: 12px;
        background-color: $calendar-range-color-bg;
    }
    & .#{$prefix}calendar__month--in-range:hover span {
        background-color: transparent;
    }
    & .#{$prefix}calendar__month--start::after,
    & .#{$prefix}calendar__month--end::after {
        content         : "";
        position        : absolute;
        right           : 0px;
        top             : 12px;
        bottom          : 12px;
        width           : 30px;
        background-color: $calendar-range-color-bg;
    }
    & .#{$prefix}calendar__month--end::after {
        left : 0;
        right: auto;
    }

    // 年范围选择
    & .#{$prefix}calendar__year--in-range::before {
        content         : "";
        position        : absolute;
        top             : 1px;
        left            : 0;
        right           : 0;
        bottom          : 1px;
        background-color: $calendar-range-color-bg;
    }
    & .#{$prefix}calendar__year--in-range:hover span {
        background-color: transparent;
    }
    & .#{$prefix}calendar__year--start::after,
    & .#{$prefix}calendar__year--end::after {
        content         : "";
        position        : absolute;
        right           : 0px;
        top             : 1px;
        bottom          : 1px;
        width           : 30px;
        background-color: $calendar-range-color-bg;
    }
    & .#{$prefix}calendar__year--end::after {
        left : 0;
        right: auto;
    }
}

// 选择季度

.#{$prefix}calendar__type--quarterly,
.#{$prefix}calendar--quarterly{
    .#{$prefix}calendar__cell>span {
        width: 36px;
        height: 36px;
        line-height: 38px;
    }
    .#{$prefix}calendar__cell{
        padding: 12px 15px;
        &.is-disabled::before{
            top:12px;
            bottom:12px;
        }
    }

    
}

// 选择月

.#{$prefix}calendar__type--month,
.#{$prefix}calendar--month{
    .#{$prefix}calendar__cell>span {
        
        width: 36px;
        height: 36px;
        line-height: 38px;
    }
    .#{$prefix}calendar__cell{
        padding: 12px 15px;
        &.is-disabled::before{
            top:12px;
            bottom:12px;
        }
    }

    // 只是为了覆盖上面的选择器
    // .#{$prefix}calendar__cell.is-selected:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)::before {
    //     background-color: transparent;
    // }
    // .#{$prefix}calendar__cell.is-selected:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)>span ,
    // .#{$prefix}calendar__cell.is-selected:hover:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)>span {
    //     background-color: #006eff;
    //     color: #fff;
    //     border-radius: 100%;
    // }
}

// 选择年
.#{$prefix}calendar__type--year,
.#{$prefix}calendar--year{

    .#{$prefix}calendar__cell>span {
        width: 36px;
        height: 36px;
        line-height: 38px;
    }
    .#{$prefix}calendar__cell{
        padding: 0 15px;
    }
    // 只是为了覆盖上面的选择器
    .#{$prefix}calendar__cell.is-selected:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)::before {
        background-color: transparent;
    }
    .#{$prefix}calendar__cell.is-selected:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)>span ,
    .#{$prefix}calendar__cell.is-selected:hover:not(.#{$prefix}calendar__day--start):not(.#{$prefix}calendar__day--end)>span {
        background-color: $calendar-color-bg-selected;
        color: $color-text-anti-primary;
        border-radius: 100%;
    }

}


// 选择时间
.#{$prefix}calendar--time,
.#{$prefix}dropdown-box .#{$prefix}calendar--time{
    // .#{$prefix}calendar__wrap{
    //     padding-top:0;
    // }
    .#{$prefix}calendar__type-wrap{
        padding: 0;
    }
    .#{$prefix}calendar__caption{
        text-align: center;
    }
    .#{$prefix}pagination{
        display: none;
    }
    .#{$prefix}calendar__row-group{
        // margin-top:-1px;
    }
    .#{$prefix}calendar__body{
        padding:0;
    }
}

// 默认拉开间距
.#{$prefix}segment + .#{$prefix}datepicker{
    margin-left:8px;
}