/*
Template Name: Material HeadUp
Author: UnEspace
Email: rampeur@gmail.com
File: scss
*/
@use 'sass:map';
@use './components';
@use '@angular/material' as mat;

/* Bootstrap */
// Functions first
@import "bootstrap/scss/functions";

// Variable overrides second
@import 'variable';
@import 'palettes';

// Required Bootstrap imports
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";

// Optional components
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";
//@import "bootstrap/scss/tables";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/type";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/alert";

@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. Available color palettes: https://material.io/design/color/

//$headup_app-primary: mat.define-palette(mat.$light-green-palette);
//$headup_app-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
//$headup_app-warn: mat.define-palette(mat.$blue-palette);

$headup_app-primary: mat.define-palette($md-custom-primary, 500);
$headup_app-accent: mat.define-palette($md-custom-accent, A200, A100, A400);
$headup_app-warn: mat.define-palette($md-custom-warn);
$headup_app-danger: mat.define-palette(mat.$red-palette);
$headup_app-success: mat.define-palette(mat.$green-palette);
$headup_app-info: mat.define-palette(mat.$blue-palette);
$headup_app-warning: mat.define-palette($md-custom-orange);

$headup_app-turquoise: mat.define-palette($md-custom-turquoise);
$headup_app-cyan: mat.define-palette($md-custom-cyan);
$headup_app-navy: mat.define-palette($md-custom-navy);
$headup_app-purple: mat.define-palette($md-custom-purple);
$headup_app-raspberry: mat.define-palette($md-custom-raspberry);
$headup_app-orange: mat.define-palette($md-custom-orange);
$headup_app-yellow: mat.define-palette($md-custom-yellow);
$headup_app-teal: mat.define-palette($md-custom-teal);
$headup_app-magenta: mat.define-palette($md-custom-magenta);
$headup_app-pink: mat.define-palette($md-custom-pink);
$headup_app-megna: mat.define-palette($md-custom-megna);
$headup_app-purple-light: mat.define-palette($md-custom-purple-light);
$headup_app-navy-light: mat.define-palette($md-custom-navy-light);

$custom-typography: mat.define-typography-config(
    $font-family: 'Barlow, sans-serif',
    $body-1: mat.define-typography-level(
        $font-family: 'Barlow, sans-serif',
        $font-weight: 400,
        $font-size: 14px,
        $line-height: 1.42857143,
        $letter-spacing: normal,
    ),
    $body-2: mat.define-typography-level(
        $font-family: 'Barlow, sans-serif',
        $font-weight: 500,
        $font-size: 14px,
        $line-height: 22px,
        $letter-spacing: normal,
    )
);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$headup_app-theme: mat.define-dark-theme((
    color: (
        primary: $headup_app-primary,
        accent: $headup_app-accent,
        warn: $headup_app-warn,
    ),
    typography: $custom-typography,
    density: 0
));

$headup_app-variants: (
    danger: $headup_app-danger,
    success: $headup_app-success,
    info: $headup_app-info,
    warning: $headup_app-warning,
    turquoise: $headup_app-turquoise,
    cyan: $headup_app-cyan,
    navy: $headup_app-navy,
    purple: $headup_app-purple,
    raspberry: $headup_app-raspberry,
    orange: $headup_app-orange,
    yellow: $headup_app-yellow,
    teal: $headup_app-teal,
    magenta: $headup_app-magenta,
    pink: $headup_app-pink,
    megna: $headup_app-megna,
    purple-light: $headup_app-purple-light,
    navy-light: $headup_app-navy-light
);
/*
$config: mat.get-color-config($headup_app-theme);
$foreground: map.get($config, foreground);
$background: map.get($config, background);
*/
$foreground: map.get($headup_app-theme, foreground);
$background: map.get($headup_app-theme, background);

/*
@use './components';
@include mat.core-theme($headup_app-theme);
@include mat.button-theme($headup_app-theme);
@include mat.badge-theme($headup_app-theme);
@include mat.icon-theme($headup_app-theme);
@include mat.icon-button-theme($headup_app-theme);
@include mat.toolbar-theme($headup_app-theme);
@include mat.card-theme($headup_app-theme);
@include mat.table-theme($headup_app-theme);
@include mat.sort-theme($headup_app-theme);
@include mat.paginator-theme($headup_app-theme);
@include mat.tabs-theme($headup_app-theme);
@include mat.form-field-theme($headup_app-theme);
@include mat.input-theme($headup_app-theme);
@include mat.select-theme($headup_app-theme);
@include mat.progress-spinner-theme($headup_app-theme);
@include mat.dialog-theme($headup_app-theme);
@include mat.menu-theme($headup_app-theme);
@include mat.snack-bar-theme($headup_app-theme);
@include components.theme($headup_app-theme, $custom-typography, $headup_app-variants);
*/

@include mat.all-component-themes($headup_app-theme);
@include components.theme($headup_app-theme, $custom-typography, $headup_app-variants);

//@import "chartist/dist/index";

@import 'spinner';
@import 'header';
@import 'sidebar';
@import 'tables';
@import 'charts';
@import 'responsive';
@import 'app';

//@import "../styles/icons/material-design-iconic-font/css/materialdesignicons.min.css";