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

@use '@angular/material' as mat;

/******************************************************************************Theme*************************************************************************/
// 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.
$app-primary: mat.define-palette(mat.$indigo-palette);
$app-accent: mat.define-palette(mat.$green-palette);

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

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

/******************************************************************************break Points*************************************************************************/
// Breakpoints
$handset: 360px;
$large-handset: 480px;
$tablet: 640px; /* app drawer breakpoint */
$large-tablet: 840px;
$desktop: 960px;
$large-desktop: 1280px;
$x-large-desktop: 1440px;
$xx-large-desktop: 1920px;

// generate min-width breakpoint
@mixin breakpoint($point) {
  @media (min-width: $point) { @content; }
}

// generate max-width breakpoint (use sparingly)
@mixin breakpoint-max($point) {
  @media (max-width: $point) { @content; }
}

// generate min-height breakpoint
@mixin height-breakpoint($point) {
  @media (min-height: $point) { @content; }
}

// generate max-height breakpoint (use sparingly)
@mixin height-breakpoint-max($point) {
  @media (min-height: $point) { @content; }
}
/******************************************************************************Break Points*************************************************************************/

/******************************************************************************Main CSS*************************************************************************/
// 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.
// 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 mat.all-component-themes($app-theme);

body {
  margin: 0;
  height: 100vh;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  color: #292a1d;
}

a {
  text-decoration-color: mat.get-color-from-palette($app-primary);
  color: mat.get-color-from-palette($app-primary);
}

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');
/******************************************************************************Global CSS*************************************************************************/