@import '~@angular/material/theming';

/** Custom component theme. Only lives in a specific scope */
@mixin app-site-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    app-site {
        /** change the nav-toolbar to the darker nuance of the current theme*/
        .nav-toolbar {
            background-color: mat-color($primary, darker);
        }

        /** make the .user-menu expansion panel look like the nav-toolbar above */
        .user-menu {
            background-color: mat-color($primary, darker);
            color: mat-color($primary, default-contrast);
            min-height: 64px;

            .mat-expansion-indicator:after {
                color: mat-color($primary, default-contrast);
            }
        }

        /** style and allign the nav icons the icons*/
        .main-nav {
            .ng-fa-icon {
                color: mat-color($primary, lighter-contrast);
                min-width: 20px; //puts the text to the right on the same leve
                margin-right: 10px; // the distance from the icon to the text
            }
            span {
                color: mat-color($primary, lighter-contrast);
            }

            // color: mat-color($primary, default-contrast);
        }
    }
}