@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@hoverCellBgColor: rgba(0, 0, 0, .04);
@60: @P * 15;

@calendar-prefix-cls: ~'@{acud-prefix}-picker-calendar';
@picker-prefix-cls: ~'@{acud-prefix}-picker';

.flex(@flexDirection: row, @rowAlign: flex-start, @colAlign: center) {
    display: flex;
    flex-direction: @flexDirection;
    justify-content: @rowAlign;
    align-items: @colAlign;
}

.font(@fontSize: 12px, @color: '#fff', @fontFamily: 'PingFangSC-Medium') {
    font-size: @fontSize;
    color: @color;
    font-family: @fontFamily;
}

.border(@lineHeight: @border-width-base, @lineType: solid, @color: @G7) {
    border: @lineHeight @lineType @color;
}

.custom-calendar-today(@width: @space-4) {
    .@{calendar-prefix-cls}-date-today {
        .@{calendar-prefix-cls}-date-value-text {
            width: @width;
            height: @space-4;
            .flex(row, center, center);
            .border(@border-width-base, solid, @B6);
            border-radius: @R2;
            color: @B6;
            .font(@T2, @B6, PingFangSC-Medium);
            font-weight: 500;
        }
    }
}

.@{calendar-prefix-cls} {
    @arrow-size: 10px;
    .border();
    border-radius: @R4;
    
    input {
        font-family: @font-family;
    }

    &-header {
        display: flex;
        justify-content: flex-end;
        padding: @space-4;

        .@{calendar-prefix-cls}-year-select {
            min-width: 80px;
        }
    
        .@{calendar-prefix-cls}-month-select {
            min-width: 70px;
            margin-inline-start: @space-2;
        }
    
        .@{calendar-prefix-cls}-mode-switch {
            margin-inline-start: @space-2;
        }

        .@{calendar-prefix-cls}-radio-group-small {
            display: flex;
            .@{acud-prefix}-radio-button {
                min-width: auto;
                height: @T8;
                line-height: @T8;

                &::before, &::after {
                    height: @T8;
                }
            }
        }
    }

    .@{picker-prefix-cls}-panel {
        background: #fff;
        border: 0;
        border-radius: 0;
        border-top: @border-width-base solid @grey-8;

        .@{picker-prefix-cls}-month-panel, .@{picker-prefix-cls}-date-panel {
            width: auto;
        }

        .@{picker-prefix-cls}-body {
            padding: @space-2 0;
        }

        .@{picker-prefix-cls}-content {
            width: 100%;
            tr {
                display: table-row;
            }

            td {
                position: static;
                min-width: @T8;
                font-weight: 400;
            }
        }
    }


    &.@{calendar-prefix-cls}-full {
        // 兼容圆角边框不展示的问题
        // padding-bottom: 0.5 * @P;
        .@{calendar-prefix-cls}-header {
            .@{calendar-prefix-cls}-year-select {
                width: 100px;
            }

            .@{calendar-prefix-cls}-month-select {
                width: 80px;
                margin-inline-start: @space-3;
            }

            .@{calendar-prefix-cls}-mode-switch {
                margin-inline-start: @space-3;
                .@{acud-prefix}-radio-button {
                    padding: 0;
                    width: @space-6;
                    min-width: @space-6;
                    text-align: center;
                }
            }
        }
        .@{picker-prefix-cls}-panel {
            display: block;
            width: 100%;
            text-align: end;
            background: #fff;
            border: none;
            border-bottom-left-radius: @R4;
            border-bottom-right-radius: @R4;

            thead {
                tr {
                    height: @P * 9;
                    th::before {
                        content: '周'
                    }
                }
            }

            .@{picker-prefix-cls}-date-panel, .@{picker-prefix-cls}-month-panel {
                .@{picker-prefix-cls}-body {
                    padding: 0;
                    th, td {
                        padding: 0;
                        text-align: left;
                    }
                    th {
                        height: auto;
                        padding-inline-start: 3 * @P;
                        padding-bottom: @padding-xsm;
                        line-height: @T5;
                    }
    
                    tr {
                        &:first-child {
                            td {
                                border-top: 2 * @border-width-base solid @grey-7;
                            }
                        }

                        &:last-child {
                            td {

                                &:first-child {
                                    .@{picker-prefix-cls}-cell-inner {
                                        border-bottom-left-radius: @R4;
                                    }
                                }

                                &:last-child {
                                    .@{picker-prefix-cls}-cell-inner {
                                        border-bottom-right-radius: @R4;
                                    }
                                }
                            }
                        }
                    }
    
                    td {
                        &:not(.@{picker-prefix-cls}-cell-selected):hover {
                            // background-color: @grey-10;
                            .@{picker-prefix-cls}-cell-inner {
                                background-color: @grey-10;
                                border-radius: 0;
                            }
                        }
                    }
    
                    tbody {
                        tr {
                            .@{picker-prefix-cls}-cell:last-child {
                                border-right: none;
                            }
                        }
                    }
                }
            }

            .@{picker-prefix-cls}-month-panel {
                tr {
                    td {
                        display: table-cell;
                        margin-right: 0;
                    }
                }

                .@{picker-prefix-cls}-cell-in-view {
                    .@{calendar-prefix-cls}-date {
                        .@{calendar-prefix-cls}-date-value {
                            .@{calendar-prefix-cls}-date-value-text {
                                .flex(row, center, center);
                                width: @space-7;
                            }
                        }
                    }
                    &.@{picker-prefix-cls}-cell-selected {
                        .@{calendar-prefix-cls}-date {
                            background-color: @B1;
                        }
                    }
    
                    &:not(.@{picker-prefix-cls}-cell-selected) {
                        .custom-calendar-today(@space-7);
                    }
    
                }
            }
        }

        .@{picker-prefix-cls}-cell {
            border-top: @border-width-base solid @grey-8;
            border-right: @border-width-base solid @grey-8;

            .@{picker-prefix-cls}-cell-inner {
                border-radius: 0;
                position: static;
            }

            &::before {
                display: none;
            }

            &:hover {
                .@{calendar-prefix-cls}-date {
                    background: @hoverCellBgColor;
                }
            }

            &-inner.@{calendar-prefix-cls}-date-today {
                border: none;
                &::before {
                    display: none;
                }
            }

            &-in-view {
                &.@{picker-prefix-cls}-cell-selected {
                    .@{calendar-prefix-cls}-date {
                        background-color: @B1;
                        color: unset;
                        &-value {
                            &-text {
                                .flex(row, center, center);
                                background-color: @B6;
                                border-radius: @R2;
                                .font(@T2, @grey-11, PingFangSC-Medium);
                                font-weight: 500;
                            }
                        }
                    }
                }

                &.@{picker-prefix-cls}-cell-today:not(.@{picker-prefix-cls}-cell-selected) {
                    .@{calendar-prefix-cls}-date-today {
                        .@{calendar-prefix-cls}-date-value-text {
                            .border(@border-width-base, solid, @B6);
                            border-radius: @R2;
                            color: @B6;
                            .font(@T2, @B6, PingFangSC-Medium);
                            font-weight: 500;
                        }
                    }
                }

            }

            &-selected, &-selected:hover {
                .@{calendar-prefix-cls}-date, .@{calendar-prefix-cls}-date-today {
                    .@{calendar-prefix-cls}-date-value {
                        color: @blue-6;
                    }
                }
            }
        }

        .@{calendar-prefix-cls}-date {
            display: block;
            width: auto;
            height: @P * 25;
            /* margin: 0 @space-1;
            padding: @space-1 @space-2 0; */
            margin: 0;
            padding: 0;
            border: 0;
            transition: background .3s;

            &-value {
                line-height: @T8;
                transition: color .3s;
                padding: @space-2;
                .flex(row, flex-start, center);

                &-text {
                    width: @space-4;
                    height: @space-4;
                    .flex(row, center, center);
                }
            }

            &-content {
                text-align: start;
                // overflow-y: auto;
                height: calc(100% - @space-6);
            }

            &-today {
                border-color: @B6;

                .@{calendar-prefix-cls}-date-value {
                    color: rgba(0,0,0,.88);
                }
            }
        }
    }

    &.@{calendar-prefix-cls}-mini {
        border-radius: @R4;

        .@{calendar-prefix-cls}-header {
            padding: @padding-sm;
            justify-content: flex-start;

            .@{calendar-prefix-cls}-year-select {
                min-width: @space-9;
                width: @space-9;
                .@{acud-prefix}-select-selector {
                    padding: 0 @padding-sm;
                }
            }

            .@{calendar-prefix-cls}-month-select {
                min-width: @60;
                width: @60;
                .@{acud-prefix}-select-selector {
                    padding: 0 @padding-sm;
                }
            }

            .@{calendar-prefix-cls}-mode-switch {
                flex: 1;
                justify-content: flex-end;
                .@{acud-prefix}-radio-button {
                    /* min-width: @T9;
                    width: @T9; */
                    padding: 0;
                    width: @T9;
                    text-align: center;
                }
            }
        }

        .@{picker-prefix-cls}-cell {
            padding-top: @padding-sm;
            cursor: pointer;
        }

        .@{picker-prefix-cls}-panel {
            border-radius: @R4;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            .@{picker-prefix-cls}-body {
                padding: @padding-m;
            }
        }

        .@{picker-prefix-cls}-month-panel {
            .@{picker-prefix-cls}-body {
                padding: @space-3 0;

                tr {
                    .@{picker-prefix-cls}-cell {
                        // margin-right: @space-5;
                        padding-top: 0;
                        padding-bottom: calc(@P * 6 + 2px);
                        display: table-cell;

                        &:not(.@{picker-prefix-cls}-cell-selected) {
                            .custom-calendar-today(@space-7);
                        }

                        &.@{picker-prefix-cls}-cell-selected {
                            .@{calendar-prefix-cls}-date-today {
                                .@{calendar-prefix-cls}-date-value {
                                    &-text {
                                        color: #fff;
                                    }
                                }
                            }
                        }
                    }

                    &:last-child {
                        .@{picker-prefix-cls}-cell {
                            padding-bottom: 0;
                        }
                    }
                }
            }
        }
    }

    .@{picker-prefix-cls}-month-panel {

        .@{picker-prefix-cls}-content {
            // height: 208px;

            .@{calendar-prefix-cls}-date-today {
                border: none;
            }
        }
    }

    .@{picker-prefix-cls}-content {
        table-layout: fixed;
        border-collapse: collapse;
    }
}

@import './rtl';