@import '../src/core/style/abstracts/mixins';

@mixin pepperi-date-component-theme($pepperi-theme) {

    // -----------------------------------------------------
    //  Override material style
    // -----------------------------------------------------
    .mat-datetimepicker-content {
        border-radius: inherit;
    
        .mat-datetimepicker-calendar-header {
            @include state-strong-default($pepperi-theme);
        }

        .mat-datetimepicker-calendar-content {
            // background-color: ivory;
            // color: black;
            
            .mat-month-content {
                .mat-datetimepicker-calendar-controls {
                    color: get-pepperi-color($pepperi-theme, color-text, color-main);

                    .mat-datetimepicker-calendar-previous-button {
                        // @include select-arrow();
                        // @include rotate(90deg);

                        svg {
                            @include state-icon($pepperi-theme);
                        }
                    }

                    .mat-datetimepicker-calendar-period-button { 

                    }

                    .mat-datetimepicker-calendar-next-button {
                        // @include select-arrow();
                        // @include rotate(-90deg);

                        svg {
                            @include state-icon($pepperi-theme);
                        }
                    }
                }
            }

            mat-datetimepicker-year-view,
            mat-datetimepicker-month-view {
                .mat-datetimepicker-calendar-table {
                    // Days string (sun, mon...)
                    .mat-datetimepicker-calendar-table-header {
                        color: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                    }

                    // Days numbers
                    .mat-datetimepicker-calendar-body {
                        color: get-pepperi-color($pepperi-theme, color-text, color-main);
        
                        .mat-datetimepicker-calendar-body-label {
                            color: get-pepperi-color($pepperi-theme, color-text, color-dimmed);
                        }

                        .mat-datetimepicker-calendar-body-cell {
                            // @include state-weak-default($pepperi-theme);

                            &:hover {
                                .mat-datetimepicker-calendar-body-cell-content {
                                    @include state-weak-hover($pepperi-theme);
                                }
                            }

                            &:active {
                                .mat-datetimepicker-calendar-body-cell-content {
                                    @include state-weak-active($pepperi-theme, color-weak, true, true);
                                }
                            }

                            // Regular cell
                            .mat-datetimepicker-calendar-body-cell-content {
                                // color:burlywood ;
                                // border-radius: 0;

                                // Today cell
                                &.mat-datetimepicker-calendar-body-today {
                                    @include state-regular-default($pepperi-theme, true);
                                    
                                    &:hover {
                                        @include state-regular-hover($pepperi-theme, true);
                                    }

                                    &:active {
                                        @include state-regular-focus($pepperi-theme, true);
                                    }
                                }

                                // Active cell
                                &.mat-datetimepicker-calendar-body-selected {
                                    // color:white ;
                                    @include state-strong-default($pepperi-theme);

                                    &:hover {
                                        @include state-strong-hover($pepperi-theme);
                                    }

                                    &:active {
                                        @include state-strong-focus($pepperi-theme);
                                    }
                                }
                            } 

                        }
                    }
                }
            }

            mat-datetimepicker-clock {
                .mat-datetimepicker-clock {
                    // background-color: yellowgreen;
                    @include state-weak-default($pepperi-theme);

                    .mat-datetimepicker-clock-center {
                        // background-color: yellow;
                        @include state-strong-default($pepperi-theme);
                    }

                    .mat-datetimepicker-clock-hand {
                        // color: blue;
                        // background-color: yellow;
                        @include state-strong-default($pepperi-theme);

                        &::before {
                            // background-color: yellow;
                            @include state-strong-default($pepperi-theme);
                        }
                    }

                    .mat-datetimepicker-clock-hours,
                    .mat-datetimepicker-clock-minutes {
                        .mat-datetimepicker-clock-cell {
                            color: get-pepperi-color($pepperi-theme, color-text, color-main);
                            
                            &:hover {
                                @include state-weak-hover($pepperi-theme);
                            }

                            &.mat-datetimepicker-clock-cell-selected {
                                @include state-strong-default($pepperi-theme);

                                &:hover {
                                    @include state-strong-hover($pepperi-theme);
                                }

                                &:active {
                                    @include state-strong-focus($pepperi-theme);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}