@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);

    /** the name of the selector */
    app-site {
        mat-sidenav-container {
            /** nav panel on the left */
            mat-sidenav {
                /** rules for icons in the whole site-view */
                .ng-fa-icon {
                    min-width: 20px; //puts the text to the right on the same level
                    margin-right: 10px; // the distance from the icon to the text
                }
            }
        }

        /** 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 {
            height: 80px;
            background-color: mat-color($primary, darker);

            mat-toolbar-row {
                height: 80px;
            }
        }

        /** 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: 48px;

            /** color of the divider just above the log out button */
            mat-divider {
                border-top-color: rgba(255, 255, 255, 0.25);
            }

            fa-icon {
                color: mat-color($background, raised-button);
            }

            span {
                color: mat-color($background, raised-button);
            }

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

        /** style and align the nav icons the icons*/
        .main-nav {
            fa-icon {
                color: mat-color($foreground, icon);
            }
            span {
                font-weight: bold;
                color: mat-color($foreground, text);
            }
        }

        /** style the active link */
        .active {
            .ng-fa-icon {
                color: mat-color($primary);
            }
            span {
                color: mat-color($primary);
            }
        }
    }
}