// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "~@angular/material/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!
@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/

$akiyama-palette: (
  50: #ebeff9,
  100: #cdd7f1,
  200: #6f8ede,
  300: #89a1dd,
  400: #708cd6,
  500: #5778cf,
  600: #4f70ca,
  700: #4e6cba,
  800: #3c5bbd,
  900: #2c48b2,
  A100: #f4f6ff,
  A200: #c1cdff,
  A400: #8ea4ff,
  A700: #748fff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

$akiyama-palette-dark: (
  50: #ebeff9,
  100: #cdd7f1,
  200: #99ade1,
  300: #89a1dd,
  400: #708cd6,
  500: #7a93d3,
  600: #4f70ca,
  700: #6681c5,
  800: #3c5bbd,
  900: #2c48b2,
  A100: #f4f6ff,
  A200: #c1cdff,
  A400: #8ea4ff,
  A700: #748fff,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #000000,
    400: #000000,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #000000,
    A200: #000000,
    A400: #000000,
    A700: #000000,
  ),
);

$web-primary: mat-palette($akiyama-palette);
$web-accent: mat-palette($akiyama-palette, 700, 200, 500);

$web-primary-dark: mat-palette($akiyama-palette-dark);
$web-accent-dark: mat-palette($akiyama-palette-dark, 700, 200, 500);

$web-warn: mat-palette($mat-red);

$web-theme: mat-light-theme(
  (
    color: (
      primary: $web-primary,
      accent: $web-accent,
      warn: $web-warn,
    ),
  )
);

$web-theme-dark: mat-dark-theme(
  (
    color: (
      primary: $web-primary-dark,
      accent: $web-accent-dark,
      warn: $web-warn,
    ),
  )
);

// 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($web-theme);

:root {
  --primary: #6681c5;
  --secondary: #6f8ede;
  --background: #ffffffff;
  --secondary-background: #fafafa;
  --secondary-background-alpha: #ffffffb6;
  --secondary-background-lighter: #cfcfcf;
  --dark-background: #202125;
  --text-color: #000000;
  --secondary-text-color: #737373;
}

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

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  background-color: --secondary-background;
  color: --text-color;
}

.darkMode {
  @include angular-material-color($web-theme-dark);
  --background: #242529;
  --secondary-background: #202125;
  --secondary-background-lighter: #292a2e;
  --secondary-background-alpha: #202125b3;
  --dark-background: #fafafa;
  --text-color: #ffffffff;
  --secondary-text-color: #aaaaaa;
  --primary: #7a93d3;
  --secondary: #99ade1;
  background-color: var(--secondary-background);
  color: var(--text-color);
  width: 100vw;
  height: 100vh;
}

h1 {
  font-size: 35px !important;
}

h2 {
  font-size: 25px !important;
  font-weight: 400 !important;
}

h3 {
  font-size: 20px !important;
  font-weight: 400 !important;
}

.container {
  padding: 20px;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;

  background: var(--secondary-background-alpha);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--background);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.modal {
  max-width: 500px !important;
  max-height: 80vh !important;
  .mat-dialog-container {
    max-width: none;
    width: 100vw;
    height: 100vh;
  }
  mat-dialog-container {
    position: relative;
    padding: 0px !important;
    background-color: var(--secondary-background);
  }
}

.modal-dark {
  --background: #242529;
  --secondary-background: #202125;
  --secondary-background-lighter: #292a2e;
  --secondary-background-alpha: #202125b3;
  --dark-background: #fafafa;
  --text-color: #ffffffff;
  --secondary-text-color: #aaaaaa;
  --primary: #7a93d3;
  --secondary: #99ade1;
  max-width: 500px !important;
  max-height: 80vh !important;
  .mat-dialog-container {
    max-width: none;
    width: 100vw;
    height: 100vh;
  }

  mat-dialog-container {
    position: relative;
    padding: 0px !important;
    background-color: var(--secondary-background);
  }
}

.bottomSheet-dark {
  --background: #242529;
  --secondary-background: #202125;
  --secondary-background-lighter: #292a2e;
  --secondary-background-alpha: #202125b3;
  --dark-background: #fafafa;
  --text-color: #ffffffff;
  --secondary-text-color: #aaaaaa;
  --primary: #7a93d3;
  --secondary: #99ade1;
  background-color: var(--secondary-background);
  color: var(--text-color);
}

@media (max-width: 700px) {
  .modal-dark,
  .modal {
    max-width: 100vw !important;
    max-height: -webkit-fill-available !important;
  }
}

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
@import "~material-bottom-nav";

.bottom-nav {
  border: none !important;
  @include bottom-nav(
    $background-color: var(--background),
    $active-color: var(--primary),
    $inactive-color: var(--secondary-text-color)
  );
}
