@import '../default/var';

.#{$prefix} {
    &-date {
        &-table {
            display: inline-block;
            width: 222px;
            padding: 9px 12px;
        }
        &-picker {
            display: inline-block;
            position: relative;
            width: 100%;
            &__panel {
                height: 254px;
                width: 222px;
                box-shadow: 0 2px 14px 0 $date-picker-color-shadow;
                text-align: center;
                position: absolute;
                background: $date-picker-color-back;
                z-index: 9999;
                margin-top: 5px;
                transition: height .3s, transform .3s, opacity .3s;
                overflow: hidden;
                border-radius: 4px;
            }
            &__quick,
            &__main {
                height: 100%;
                display: inline-block;
                vertical-align: top;
            }
            &__quick {
                width: 100px;
                background: $date-picker-color-quick-back;
                padding: 16px 20px;
                &-item {
                    margin-bottom: 24px;
                    font-size: 12px;
                    text-align: left;
                    cursor: pointer;
                    line-height: 1;
                }
            }
            &__title {
                height: 40px;
                border-bottom: solid 1px $date-picker-color-title-border;
                position: relative;
                line-height: 40px;
                color: #283039;
                .cont {
                    display: inline-block;
                    width: 222px;
                }
                .prev,
                .next {
                    position: absolute;
                    top: 0;
                    width: 60px;
                    i {
                        cursor: pointer;
                        font-size: 20px;
                        line-height: 40px;
                        color: $date-picker-color-arrow;
                        font-weight: bold;
                        padding: 0 3px;
                    }
                }
                .prev {
                    left: 0
                }
                .next {
                    right: 0
                }
            }
            &__body {
                font-size: 12px;
                .weeks,
                .days {
                    line-height: normal;
                    &__item {
                        user-select: none;
                        border-radius: 4px;
                        width: 20px;
                        height: 20px;
                        line-height: 20px;
                        margin: 4px;
                        display: inline-block;
                        color: $input-color-fore;
                        &.is-disabled {
                            color: $date-picker-color-diff-month-fore;
                            background: $date-picker-color-disabled-back;
                            cursor: not-allowed;
                        }
                    }
                }
                .weeks {
                    &__item {
                        color: $date-picker-color-weeks;
                    }
                }
                .days {
                    &__item {
                        cursor: pointer;
                        &:not([class*='--']):not(.is-disabled):hover {
                            background: $date-picker-color-selected-back;
                            color: $date-picker-color-selected-fore;
                        }
                        &--today {
                            background: $date-picker-color-today-back;
                            color: $date-picker-color-selected-back;
                        }
                        &--prev,
                        &--next {
                            color: $date-picker-color-diff-month-fore;
                        }
                        &--selected {
                            background: $date-picker-color-selected-back;
                            color: $date-picker-color-selected-fore;
                        }
                        &.in-range:not(.is-disabled):not(.days__item--prev):not(.days__item--next) {
                            position: relative;
                            &:before {
                                content: "";
                                position: absolute;
                                display: block;
                                width: 28px;
                                height: 24px;
                                background: $date-picker-color-today-back;
                                z-index: -1;
                                left: -2px;
                                top: -2px;
                            }
                            &.range-start,
                            &.range-end {
                                background: $date-picker-color-selected-back;
                                color: $date-picker-color-selected-fore;
                            }
                            &.range-start {
                                &:before {
                                    border-top-left-radius: 4px;
                                    border-bottom-left-radius: 4px;
                                }
                            }
                            &.range-end {
                                &:before {
                                    width: 24px;
                                    border-top-right-radius: 4px;
                                    border-bottom-right-radius: 4px;
                                }
                            }
                        }
                    }
                }
            }
            .#{$prefix}-input__range {
                .#{$prefix}-input__origin {
                    text-align: center;
                }
            }
        }
    }
}