@import "./common/common";
@import "./common/util";
@import "./common/iconfont";

.date-picker {
    &.invisible{
        visibility:hidden;
        height:0;
        padding:0;
        margin:0;
        width:0;
    }
    .date-picker-year-month {
        line-height:px2rem(40);
        font-size: px2rem(16);
        background: #F8F8F8;
        border-bottom:px2rem(1) solid #EBEBEB;
        .prev-month,
        .next-month,
        .prev-year,
        .next-year {
            display: inline-block;
            width: 10%;
            text-align: center;
            color: #555;
        }
        .current-month-year {
            display: inline-block;
            width: 60%;
            text-align: center;
            .month-year-toggle {
                text-decoration:none;
                font-size:px2rem(14);
                padding: px2rem(4) px2rem(20);
                margin: px2rem(6) 0;
                box-sizing: border-box;
                display: inline-block;
                line-height: px2rem(20);
                outline: 0 none;
                color:#888;
                b {
                    font-weight: 400;
                    padding: 0 px2rem(2);
                    color:#333;
                }
                &:hover {
                    background: #DDD;
                    border-radius:px2rem(3);
                }
            }
        }
    }
    .date-picker-week {
        width: 100%;
        display: flex;
        justify-content: center;
        padding:px2rem(5) 0;
        border-bottom:px2rem(1) solid #DADADA;
        background: #F8F8F8;
        color:#888;
        .week-cell {
            flex: 1;
            text-align: center;
            font-size: px2rem(14);
        }
    }
    .date-picker-day {
        width: 100%;
        padding: px2rem(5) px2rem(4);
        box-sizing:border-box;
        clear:both;
        overflow:hidden;
        .day-cell {
            width: 14.2%;
            float:left;
            font-size: px2rem(14);
            text-align: center;
            line-height: px2rem(20);
            padding:px2rem(6) 0;
            box-sizing:border-box;
            &.selected {
                background:#DDD;
                border-radius:px2rem(2);
                font-weight: 700;
                font-size:px2rem(16);
            }
            &.blank-day {
                font-size: 0;
            }
        }
    }
}

.time-picker {
    padding:px2rem(20) 0;
    display: flex;
    justify-content: center;
    &.invisible{
        visibility:hidden;
        height:0;
        padding:0;
        margin:0;
        width:0;
    }
    &>div {
        font-size: px2rem(30);
        font-weight: 700;
        line-height: px2rem(30);
        &.time-picker-hour,
        &.time-picker-minute,
        &.time-picker-second {
            color: #FFF;
            border-radius:px2rem(5);
            padding: 0 px2rem(8);
            background-color: #555;
            background-image: linear-gradient(#000 0%, #3d3d3d 50%, #000 100%);
            .slider {
                overflow: hidden;
                padding:px2rem(10) 0;
            }
            .slides {
                .slider:first-child {
                    transform: rotateX(30deg);
                }
                .slide {
                    display: block;
                    font-size: 0;
                    overflow: hidden;
                    clear: both;
                    &.prev {
                        transform: rotateX(30deg);
                    }
                    &.active {
                        & + .slide {
                            transform: rotateX(-30deg);
                        }
                        &>span {
                            color: #FFF;
                            transform: rotateX(0deg);
                        }
                        &.pseudo-slide>span{
                            transition-duration:0s;
                        }
                    }
                    &>span {
                        display: block;
                        text-align: center;
                        width: 100%;
                        color: #999;
                        float: left;
                        font-size: px2rem(30);
                        line-height: px2rem(32);
                    }
                    &.pseudo-slide>span{
                        transition-duration:0s;
                    }
                }
            }
        }
        &.time-picker-divider {
            font-size: px2rem(20);
            align-self: center;
            padding: 0 px2rem(5);
        }
    }
}

.datetime-toggle {
    border-top:px2rem(1) solid #DADADA;
    padding:px2rem(6) px2rem(20);
    &>span {
        display: inline-block;
        cursor: pointer;
        line-height: px2rem(20);
        font-size:px2rem(18);
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        display:flex;
        justify-content:center;
        align-items:center;
        &>.iconfont {
            padding-right:px2rem(10);
            font-size:px2rem(14);
        }
    }
}


.datetime-input{
    .dropdown-status .status{
        &>.selected-label{
            display:inline-block;
            border-radius:px2rem(3);
            border:px2rem(1) solid #DDD;
            background:#E8E8E8;
            margin:px2rem(3) px2rem(5) px2rem(3) 0;
            padding:px2rem(3) px2rem(5);
        }
    }
    &>.dropdown-content{
        &::before,&::after{
            content:"";
            display:block;
            position:absolute;
            border-style:dashed dashed solid;
            border-color:transparent;
            border-image:none;
            border-width:0 px2rem(8) px2rem(8);
            border-bottom-color:#555;
            position:absolute;
            top:px2rem(-8);
            left:px2rem(6);
            width:0;
            height:0;
        }
        &::after{
            border-bottom-color:#FFF;
            bottom:px2rem(-5);
        }
        &.active{
            margin-top:px2rem(10);
            border: px2rem(1) solid #CCC;
            box-shadow:0 px2rem(2) px2rem(4) 0 rgba(34,36,38,.12),
            0 px2rem(2) px2rem(10) 0 rgba(34,36,38,.08);
        }
    }
}