// @import '@angular/material/prebuilt-themes/indigo-pink.css';


// 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/
$default-primary: mat-palette($mat-blue);
$default-accent: mat-palette($mat-teal, A200, A100, A400);

$custom-typography: mat-typography-config($font-family: '"Noto Sans", sans-serif;');
@include mat-core($custom-typography);

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

// Create the theme object (a Sass map containing all of the palettes).
$default-theme: mat-light-theme($default-primary, $default-accent, $default-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($default-theme);

$darkest-blue: #1C1922;
$whitish: #F0F0F0;
$light-blue: #6fbbee;
$main-blue: #047ef0;

/* You can add global styles to this file, and also import other style files */
html, body {
  margin: 0;
  padding: 0;
  background-color: $darkest-blue;;
  height: 100%;
  font-family: 'Noto Sans', sans-serif;
}

.raised {
  border-radius: 15px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.light-text{
  color: $whitish;
}

// non focused label color
.mat-form-field-label {

  color: $whitish;
 }

// input color 
input.mat-input-element {
  color: $whitish;
}

textarea.mat-input-element {
  color: $whitish;
}

/* Change label color on focused */
.mat-form-field.mat-focused .mat-form-field-label {
  color: $light-blue;
}

// hover underline color
.mat-form-field-underline .mat-form-field-ripple{
  background:linear-gradient(to right, $light-blue 0%, $main-blue 100%);
}

// focused underline color
.mat-focused .mat-form-field-underline .mat-form-field-ripple{
  background: linear-gradient(to right, $light-blue 0%, $main-blue 100%);
}

// focused placeholder color
.mat-input-element::placeholder{
  color: gray;
}


// MAT SELECT STYLE

// selected text color
.mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
  color: $whitish;
}

.mat-blueGrad {
  background-color: $main-blue;
  color: white;
}


.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


* {
  scrollbar-width: thin;
  scrollbar-color: #ffffff50 transparent;
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: #ffffff50;
  border-radius: 20px;
  border: 3px solid transparent;
}