@import '~@angular/material/theming';
@import './palette.scss';
// Plus imports for other components in your app.

// Define a mixin that accepts a theme and outputs the theme-specific styles.
@mixin mat-list-item-theme($theme) {
    // Extract the palettes you need from the theme definition.
    $accent: map-get($theme, accent);

    // Define any styles affected by the theme.
    mat-nav-list mat-list-item.active-link {
        background-color: mat-color($accent) !important;
    }
    mat-nav-list mat-list-item.active-link .mat-ripple-element{
        background-color: mat-color($accent) !important;
        opacity: 0.3;
    }
    mat-nav-list mat-list-item.active-link > .mat-list-item-content{
        background-color: rgba(255, 255, 255, 0.8) !important;
    }
    mat-nav-list mat-list-item.active-link:hover > .mat-list-item-content{
        background-color: rgba(255, 255, 255, 0.7) !important;
    }
    mat-nav-list mat-list-item.active-link *{
        color: mat-color($accent, darker) !important;
    }
    mat-sidenav-content{
        background-color: #fafafa;
        color: rgba(0, 0, 0, 0.87);
    }
    mat-list a{
        cursor: pointer;
    }
    mat-list a:hover{
        color: mat-color($accent);
    }
    a{
        color: mat-color($accent);
        text-decoration: none;
    }
    a:hover{
        color: mat-color($accent, darker);
    }
    
    .accent{
        color: mat-color($accent); 
    }
}

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);

@include mat-list-item-theme($theme);
