@use '~@angular/material' as mat;
@mixin header-mat($theme) {

    $color-config: mat-get-color-config($theme);
    $primary-color: mat.get-color-from-palette(map-get($color-config, primary));

    app-header{        
        #header-content,.mat-toolbar{
            background-color: map-get($theme, header);
        }

        .mat-divider{
            border-top-color: rgba(255, 255, 255, 0.38)
        }
    
        .mat-toolbar{
            a{
                color: mat.get-color-from-palette(map-get($theme, foreground), text);
            }
    
            .navlink-container>span:hover{
                background-color: rgba(mat.get-color-from-palette(map-get($theme, foreground), text), 0.38);
            }
        }
        
        #search-bar{
            background-color: map-get($theme, search-bar);
            border: 1px solid rgba(mat.get-color-from-palette(map-get($theme, foreground), text), 0.38);
        }
    
        #search #search-input::placeholder{
            color: map-get($theme, inactive-text);
        }
    
        #search #search-input{
            color: mat.get-color-from-palette(map-get($theme, foreground), text);
        }

        #header-login{
            border: 1px solid $primary-color;
        }
    }
}