@use '@angular/material' as mat;
@use './node_modules/highlight.js/scss/dark' as *;

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
// Plus imports for other components in your app.

// 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!
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
@include mat.all-component-typographies();
@include mat.elevation-classes();
@include mat.app-background();

// The following mixins include base theme styles that are only needed once per application. These
// theme styles do not depend on the color, typography, or density settings in your theme. However,
// these styles may differ depending on the theme's design system. Currently all themes use the
// Material 2 design system, but in the future it may be possible to create theme based on other
// design systems, such as Material 3.
//
// Please note: you do not need to include the 'base' mixins, if you include the corresponding
// 'theme' mixin elsewhere in your Sass. The full 'theme' mixins already include the base styles.
//
// To learn more about "base" theme styles visit our theming guide:
// https://material.angular.io/guide/theming#theming-dimensions
//
// TODO(v17): Please move these @include statements to the preferred place in your Sass, and pass
// your theme to them. This will ensure the correct values for your app are included.
//@include mat.all-component-bases(__<<ngM2ThemingMigrationEscapedComment0>>__);


// 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/
$workspace-primary: mat.m2-define-palette(mat.$m2-green-palette);
$workspace-accent: mat.m2-define-palette(mat.$m2-purple-palette, 500, 900, 600);

// The warn palette is optional (defaults to red).
$workspace-warn: mat.m2-define-palette(mat.$m2-red-palette);

// Create the theme object (a Sass map containing all of the palettes).
$workspace-theme: mat.m2-define-dark-theme(
    (
    color: (
        primary: $workspace-primary,
        accent: $workspace-accent,
        warn: $workspace-warn
      ),
      typography: mat.m2-define-typography-config(),
      density: 0,
    )      
);

// 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 mat.all-component-themes($workspace-theme);

@include mat.elevation-classes();
@include mat.app-background();
@include mat.divider-theme($workspace-theme);
//@include mat.progress-spinner-theme($workspace-theme);
@include mat.toolbar-theme(mat.m2-define-light-theme(
    (
    color: (
        primary: mat.m2-define-palette(mat.$m2-blue-gray-palette, 900),
        accent: mat.m2-define-palette(mat.$m2-deep-orange-palette),
        warn: mat.m2-define-palette(mat.$m2-green-palette)
      ),
      typography: mat.m2-define-typography-config(),
      density: 0,
    )      
));

@include mat.snack-bar-theme(mat.m2-define-dark-theme(
    (
    color: (
        primary: mat.m2-define-palette(mat.$m2-blue-grey-palette),
        accent: mat.m2-define-palette(mat.$m2-blue-grey-palette),
        warn: mat.m2-define-palette(mat.$m2-green-palette)
      ),
      typography: mat.m2-define-typography-config(),
      density: 0,
    )       
));


@include mat.button-theme(mat.m2-define-dark-theme(
    (
        color: (
            primary: mat.m2-define-palette(mat.$m2-blue-palette, 200),
            accent: mat.m2-define-palette(mat.$m2-orange-palette, 100),
            warn: mat.m2-define-palette(mat.$m2-green-palette)
          ),
          typography: mat.m2-define-typography-config(),
          density: 0,
    )   
));
@include mat.fab-theme( mat.m2-define-dark-theme(
    (
        color: (
            primary: mat.m2-define-palette(mat.$m2-blue-palette, 800),
            accent: mat.m2-define-palette(mat.$m2-orange-palette, 900),
            warn: mat.m2-define-palette(mat.$m2-green-palette)
            ),
            typography: mat.m2-define-typography-config(),
            density: 0,
    )
));

@include mat.icon-button-theme( mat.m2-define-dark-theme(
    (
        color: (
            primary: mat.m2-define-palette(mat.$m2-blue-palette, 100),
            accent:  mat.m2-define-palette(mat.$m2-orange-palette, 200),
            warn: mat.m2-define-palette(mat.$m2-green-palette)
            ),
            typography:  mat.m2-define-typography-config(),
            density: 0,
    ) 
));

@include mat.card-theme($workspace-theme);


@include mat.tabs-theme(mat.m2-define-dark-theme(
   (
    color: (
        primary: mat.m2-define-palette(mat.$m2-blue-grey-palette, 800),
        accent:  mat.m2-define-palette(mat.$m2-blue-grey-palette, 200),
        warn: mat.m2-define-palette(mat.$m2-green-palette)
    ),
    typography:  mat.m2-define-typography-config(),
    density: 0,
   )
));

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body {
  color: rgba(255, 255, 255, 0.87);
  margin: 0px;
  overflow-x: hidden;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, 900);
}

.p3x-ng-http-pre {
  overflow: auto;
}