/*
* created by zhongzheng at 2019.3.21
*/
@import '../style/themes/default.less';
@import '../style/mixins/index.less';

@range-picker-view-prefix-cls: ~'@{sino-prefix}-range-picker-view';
@calendar-prefix-cls: ~'@{sino-prefix}-calendar';

.@{range-picker-view-prefix-cls} {
    max-width: @screen-lg;
    margin: 0 auto;
    background-color: #ffffff;
    overflow: hidden;

    &-header {
        .bb1px(
            @left: @horizontal-spacing-base,
            @right: @horizontal-spacing-base
        );
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.3rem;
        color: @theme-color;

        .@{range-picker-view-prefix-cls}-tabs,
        .@{range-picker-view-prefix-cls}-btn {
            display: flex;
            min-height: @datetime-picker-view-header-height;
            transition: all @ease-in @animation-duration-base;
        }

        .@{range-picker-view-prefix-cls}-tabs-item,
        .@{range-picker-view-prefix-cls}-tabs-separator,
        .@{range-picker-view-prefix-cls}-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.1rem @horizontal-spacing-base;
        }

        .@{range-picker-view-prefix-cls}-tabs {
            color: #333;

            &.range-date {
                .@{range-picker-view-prefix-cls}-tabs-item {
                    vertical-align: bottom;
                }
            }

            &-separator {
                width: 0.35rem;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            &-item {
                position: relative;
                font-weight: 500;
                font-size: 0.3rem;

                &:after {
                    content: '';
                    position: absolute;
                    left: 0.3rem;
                    right: 0.3rem;
                    bottom: 0.02rem;
                    border-bottom: 0.04rem solid @theme-color;
                    z-index: 12;
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out;
                }

                &.active {
                    &:after {
                        opacity: 1;
                    }
                }

                &:last-child {
                    margin-right: 0;
                }
            }

            &-arrow {
                position: relative;
                display: none;
            }
        }

        .@{range-picker-view-prefix-cls}-btn {
            color: @link-color;
        }
    }

    .@{calendar-prefix-cls} {
        background-color: #ffffff;

        &-weekday {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: @calendar-weekday-height;
            padding: @calendar-padding;
            font-size: @calendar-weekday-font-size;
            font-weight: @calendar-weekday-font-weight;
            background-color: #fff;

            &-item {
                flex: 1;
                max-width: @calendar-day-max-size;
                text-align: center;
            }
        }

        &-date {
            height: 0.56rem;
            margin-top: 0;
            margin-bottom: 0.15rem;
            line-height: 0.56rem;
            text-align: center;
            color: #666666;
            font-size: 0.26rem;
            background-color: #f6f9fd;
        }

        &-month {
            padding: 0 @calendar-padding;

            .month-row {
                display: flex;
                justify-content: space-between;
            }

            .day {
                position: relative;
                flex: 0 0 auto;
                width: @calendar-day-size;
                height: @calendar-day-size;
                max-width: @calendar-day-max-size;
                max-height: @calendar-day-max-size;
                margin-bottom: @calendar-padding;
                text-align: center;
                font-size: @font-size-base;
                color: @calendar-day-color;

                &-pack {
                    width: auto;
                    height: auto;
                    line-height: 0.38rem;

                    &.last-month,
                    &.next-month {
                        color: #999999;
                    }

                    & > div:not(.today):not(.active):not(.disabled):active {
                        cursor: pointer;
                        background-color: #f2f3f5;
                        border-radius: @calendar-day-active-border-radius;
                        overflow: hidden;
                    }

                    .middle {
                        font-size: 0.26rem;

                        &.hidden {
                            display: none;
                        }
                    }

                    &-cell {
                        position: relative;
                        display: flex;
                        height: @calendar-day-size;
                        max-height: @calendar-day-max-size;
                        flex-direction: column;
                        justify-content: center;

                        .header,
                        .footer {
                            position: absolute;
                            width: 100%;
                            text-align: center;
                            font-size: 0.2rem;
                        }

                        .header {
                            top: 0;
                            line-height: 0.32rem;
                        }

                        .footer {
                            bottom: 0.02rem;
                        }
                    }
                }

                .disabled {
                    color: @calendar-day-disabled-color;
                    cursor: not-allowed;
                }

                .active,
                .range-start,
                .range-end {
                    background-color: @theme-color;
                    border-radius: @calendar-day-active-border-radius;
                    overflow: hidden;
                    cursor: pointer;
                    transition: background-color 0.1s @ease-in;
                }

                .active,
                .range-start,
                .range-end {
                    color: #fff !important;

                    .header,
                    .footer {
                        color: #fff;
                    }
                }

                .today {
                    .header {
                        color: @theme-color;
                    }

                    &.active {
                        .header {
                            color: #fff;
                        }
                    }
                }

                .range-start {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;

                    &.today {
                        background-color: @theme-color;
                    }
                }

                .range-between {
                    background-color: #dae8fe;

                    .header,
                    .footer {
                        color: #fff;
                    }
                }

                .range-end {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
        }

        .date-select,
        .time-select {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
        }

        .scroller-content {
            z-index: 1;
        }
    }

    @media screen and (min-width: @screen-sm) {
        &-header {
            font-size: 14px;

            .@{range-picker-view-prefix-cls}-tabs-item,
            .@{range-picker-view-prefix-cls}-btn {
                margin: 0;
                padding: 0 20px;
                cursor: pointer;
            }
        }

        .@{calendar-prefix-cls} {
            &-weekday {
                padding-left: @pc-padding-base;
                padding-right: @pc-padding-base;
                font-size: 14px;
            }

            &-month {
                padding: 0 @pc-padding-base;
            }
        }
    }

    @media screen and (min-width: @screen-lg) {
        .@{calendar-prefix-cls} {
            &-weekday {
                padding-left: @pc-padding-lg;
                padding-right: @pc-padding-lg;
                font-size: 14px;
            }

            &-month {
                padding: 0 @pc-padding-lg;
            }
        }
    }
}
