@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 {
        /** adjust the color of the main container to our theme */
        .main-container {
            background-color: mat-color($background, background);
        }

        /** 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($background, raised-button);
            min-height: 64px;

            .mat-expansion-indicator:after {
                color: mat-color($background, raised-button);
            }
        }

        /** style and align the nav icons the icons*/
        .main-nav {
            .ng-fa-icon {
                color: mat-color($foreground, icon);
                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($foreground, text);
            }
        }
    }
}