@use '@angular/material'as mat;

@mixin sidenav-theme($theme) {
    $primary: map-get($theme, primary);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    deja-sidenav {
        .mat-drawer-container {
            &.sidenav-light {
                .mat-sidenav {
                    .header {
                        background: mat.get-color-from-palette($primary);

                        .header-menu-btn [fontIcon] {
                            color: mat.get-color-from-palette($primary, default-contrast);
                        }
                    }
                }
            }

            .mat-sidenav {
                .header {
                    // border-right: 1px solid mat.get-color-from-palette($primary);
                    border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
                    background: mat.get-color-from-palette($background, background);
                }

                deja-sidenav-menu {
                    border-right: 1px solid mat.get-color-from-palette($foreground, divider);

                    .mat-list-item {
                        &.active {

                            .mat-list-icon,
                            .mat-list-text {
                                color: mat.get-color-from-palette($primary) !important;
                            }

                            .mat-icon {
                                font-variation-settings: "FILL"1;
                            }
                        }

                        .mat-list-item-content {
                            .mat-list-icon {
                                color: mat.get-color-from-palette($foreground, icons)
                            }

                            .mat-list-text {
                                color: mat.get-color-from-palette($foreground, text)
                            }
                        }
                    }
                }
            }
        }
    }
}