// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
//@use 'chr-theme.scss' as theme;
@include mat.core();
// Plus imports for other components in your app.
//IMPORT MY THEME

//Tailwind import
@tailwind base;
@tailwind components;
@tailwind utilities;

// 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 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.

//COMMENT OUT THE DEFAULT THEME
//@include mat.all-component-themes($StockManager-theme);
//USE THE IMPORTED THEME INSTEAD
//@include mat.all-component-themes($chr-theme);
//@include mat.all-component-themes(theme.$chr-theme);

.dark-theme {
  // use our theme with angular-material-theme mixin
  //  @include angular-material-theme($dark-theme);
  //  @include mat.core-theme($light-theme);
  background-color: black;
}

.light-theme {
  // use our theme with angular-material-theme mixin
  //  @include angular-material-theme($dark-theme);
  //  @include mat.core-theme($light-theme);
  background-color: whitesmoke;
}

/* 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", serif;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

* {
  color: var(--text-color);
}

label {
  color: var(--text-neutral-color)
}

@media (prefers-color-scheme: dark) {

  * {
    color: var(--text-color);
  }

  label {
    color: var(--text-color)
  }

  cursor {
    color: var(--primary-color)
  }

  cursor::after {
    content: "aaaa";
    height: 1px;
    width: 100%;
  }

  cursor::before {
    content: "ttt";
    width: 1px;
    height: 100%;
  }
}

body {
  background-color: var(--background-color);
}

$chr-primary: var(--primary-color);
$chr-primary-contrast: var(--primary-contrast-color);
$chr-secondary: var(--secondary-color);
$chr-secondary-contrast: var(--secondary-contrast-color);
$chr-tertiary: var(--tertiary-color);
$chr-tertiary-contrast: var(--tertiary-contrast-color);
$chr-warn: var(--warn-color);
$chr-warn-contrast: var(--warn-contrast-color);
$chr-error: var(--error-color);
$chr-error-contrast: var(--error-contrast-color);

//Default classes
.bg-primary {
  background-color: var(--primary-color);
}

.bg-primary-contrast {
  background-color: var(--primary-contrast-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-secondary-contrast {
  background-color: var(--secondary-contrast-color);
}

.bg-tertiary {
  background-color: var(--tertiary-color);
}

.bg-tertiary-contrast {
  background-color: var(--tertiary-contrast-color);
}

.bg-warn {
  background-color: var(--warn-color);
}

.bg-warn-contrast {
  background-color: var(--warn-contrast-color);
}

.bg-error {
  background-color: var(--error-color);
}

.bg-error-contrast {
  background-color: var(--error-contrast-color);
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-primary-contrast {
  color: var(--primary-contrast-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-secondary-contrast {
  color: var(--secondary-contrast-color);
}

.text-tertiary {
  color: var(--tertiary-color);
}

.text-tertiary-contrast {
  color: var(--tertiary-contrast-color);
}

.text-warn {
  color: var(--warn-color);
}

.text-warn-contrast {
  color: var(--warn-contrast-color);
}

.text-error {
  color: var(--error-color);
}

.text-error-contrast {
  color: var(--error-contrast-color);
}

.border-primary {
  border-color: var(--primary-color);
}

.border-primary-contrast {
  border-color: var(--primary-contrast-color);
}

.border-secondary {
  border-color: var(--secondary-color);
}

.border-secondary-contrast {
  border-color: var(--secondary-contrast-color);
}

.border-tertiary {
  border-color: var(--tertiary-color);
}

.border-tertiary-contrast {
  border-color: var(--tertiary-contrast-color);
}

.border-warn {
  border-color: var(--warn-color);
}

.border-warn-contrast {
  border-color: var(--warn-contrast-color);
}

.border-error {
  border-color: var(--error-color);
}

.border-error-contrast {
  border-color: var(--error-contrast-color);
}