@use '@angular/material' as mat;
@mixin date-selector-theme($theme) {
    $primary: map-get($theme, primary);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    #date-time-selector {

        background: mat.get-color-from-palette($background, card);
        color: mat.get-color-from-palette($foreground, text);
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 14px 45px, rgba(0, 0, 0, 0.219608) 0px 10px 18px;

        #date-header {
            background-color: mat.get-color-from-palette($primary);
            color: mat.get-color-from-palette($primary, default-contrast);

            button[mat-mini-fab] {
                background: mat.get-color-from-palette($primary);
                box-shadow: none;
                color: mat.get-color-from-palette($primary, default-contrast);
            }
        }

        #date-selector {
            #sub-header {
                .month {
                    button[mat-mini-fab] {
                        background: mat.get-color-from-palette($background, card);
                        color: mat.get-color-from-palette($primary);
                    }
                }

                .days {
                    span {
                        color: rgba(mat.get-color-from-palette($foreground, text), 0.7);
                    }
                }
            }

            #date-body {
                &[keynav="false"] {
                    .date {
                        .day {
                            &:hover {
                                background: mat.get-color-from-palette($primary);
                                color: mat.get-color-from-palette($primary, default-contrast);
                            }
                        }
                    }
                }

                .date {
                    .day {
                        &[current="true"] {
                            color: mat.get-color-from-palette($primary);
                        }

                        &.background {
                            color: rgba(mat.get-color-from-palette($foreground, text), 0.5);
                        }

                        &.disabled {
                            color: rgba(mat.get-color-from-palette($foreground, text), 0.3);

                            &:hover {
                                background: none;
                                color: inherit;
                            }
                        }

                        &[selected] {
                            background: mat.get-color-from-palette($primary);
                            color: mat.get-color-from-palette($primary, default-contrast);
                        }
                    }
                }
            }
        }
    }
}