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

@import '~@covalent/core/common/platform';
@import '~@covalent/core/theming/all-theme';
@import '~@covalent/markdown/markdown-theme';
@import '~@covalent/highlight/highlight-theme';
// Plus imports for other components in your app.

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

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: mat-palette($mat-blue, 700);
$accent:  mat-palette($mat-orange, 800, A100, A400);

// The warn palette is optional (defaults to red).
$warn:    mat-palette($mat-red, 600);

$accent:  mat-palette($mat-amber, A200, A100, A400);

// Create the theme object (a Sass map containing all of the palettes).
// $theme: mat-light-theme($primary, $accent, $warn);
$theme: mat-light-theme($primary, $accent);

// 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 covalent-theme($theme);
// @include covalent-markdown-theme($theme);
// @include covalent-highlight-theme();

// Active icon color in list nav
md-nav-list {
    [md-list-item].active {
        md-icon[md-list-avatar] {
            background-color: mat-color($accent);
            color: mat-color($accent, default-contrast)
        }
        md-icon[md-list-icon] {
            color: mat-color($accent);
        }
    }
}

// Custom theme examples
.white-orange {
    $primary2: mat-palette($mat-grey, 50);
    $accent2:  mat-palette($mat-orange, 800);
    $warn2:    mat-palette($mat-red, 600);

    $white-orange: mat-light-theme($primary2, $accent2, $warn2);

    @include angular-material-theme($white-orange);
    @include covalent-theme($white-orange);
}
.dark-grey-blue {
    $primary3: mat-palette($mat-blue-grey, 800);
    $accent3:  mat-palette($mat-teal, 500);
    $warn3:    mat-palette($mat-red, 600);

    $dark-grey-blue: mat-dark-theme($primary3, $accent3, $warn3);

    @include angular-material-theme($dark-grey-blue);
    @include covalent-theme($dark-grey-blue);
}
.light-blue-red {
    $primary4: mat-palette($mat-light-blue, 700);
    $accent4:  mat-palette($mat-red, 700);
    $warn4:    mat-palette($mat-deep-orange, 800);

    $light-blue-red: mat-light-theme($primary4, $accent4, $warn4);

    @include angular-material-theme($light-blue-red);
    @include covalent-theme($light-blue-red);
}

/* ------------------------------------------------------------------------------- */
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);

// Apply theme for this app

// NGX Charts
[ngx-charts-axis-label] text {
    fill: mat-color($foreground, secondary-text);
}
.tick text {
    fill: mat-color($foreground, disabled);
}
.gridline-path {
    &.gridline-path-horizontal,
    &.gridline-path-vertical {
        stroke: rgba(black, 0.06);
    }
}
.legend-title-text {
    color: mat-color($foreground, secondary-text);
}
ngx-charts-line-chart,
ngx-charts-area-chart,
ngx-charts-area-chart-stacked {
    .gridline-path {
        &.gridline-path-vertical {
            display: none;
        }
    }
}
ngx-charts-line-chart {
    .line-series {
        .line {
            stroke-width: 2;
        }
    }
}

.caca {
    color: sandybrown;
}