/*
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';

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

$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: 16px,
        $line-height: 1.42857143,
        $letter-spacing: normal,
    ),
    $body-2: mat.define-typography-level(
        $font-family: 'Barlow, sans-serif',
        $font-weight: 500,
        $font-size: 16px,
        $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
);
/*
$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";
