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

@calendar-prefix-cls: ~"@{sino-prefix}-calendar";

.@{calendar-prefix-cls} {
    max-width: @screen-lg;
    margin: 0 auto;
    background-color: #FFFFFF;
    overflow: hidden;

    &-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 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: @calendar-date-height;
        margin-top: 0;
        margin-bottom: @calendar-date-margin-bottom;
        text-align: center;
        color: @calendar-date-color;
        font-size: @calendar-date-font-size;
        background-color: @calendar-date-background-color;
    }

    &-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;

            &.day-in-last-month,
            &.day-in-next-month {
                color: #C2C2C2;
            }

            &-pack {
                width: auto;
                height: auto;
                line-height: .38rem;

                &.last-month,
                &.next-month {
                    color: @calendar-out-month-day-color;
                }

                &>div:not(.today):not(.active):not(.disabled) {
                    cursor: pointer;

                    &:active {
                        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: .2rem;
                    }

                    .header {
                        top: 0;
                        line-height: .32rem;

                        .working {
                            color: @theme-color;
                        }

                        .rest {
                            color: @danger-color-2;
                        }
                    }

                    .footer {
                        bottom: .02rem;

                        .info-dot {
                            display: inline-block;
                            border: .04rem solid @theme-color;
                            border-radius: 50%;
                        }
                    }
                }
            }

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

            .active {
                color: #fff;
                background-color: @theme-color;
                border-radius: @calendar-day-active-border-radius;
                overflow: hidden;
                cursor: pointer;
                transition: background-color .1s @ease-in;

                .header,
                .footer {
                    color: #fff;

                    .working,
                    .rest {
                        color: #fff;
                    }

                    .info-dot {
                        background-color: #fff;
                    }
                }
            }

            .today {

                .header {
                    color: @theme-color;
                }

                &.active {

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

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

    @media screen and (min-width: @screen-sm) {

        &-weekday {
            padding-left: @pc-padding-base;
            padding-right: @pc-padding-base;
            font-size: @pc-font-size-base;
        }

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

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

    @media screen and (min-width: @screen-lg) {
        &-weekday {
            padding-left: @pc-padding-lg;
            padding-right: @pc-padding-lg;
            font-size: @pc-font-size-base;
        }

        .@{calendar-prefix-cls} {

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