/**
* customizing colors defined in angular material theme
*/

@import 'node_modules/@angular/material/theming';


// Foreground Elements

// Light Theme Text
$dark-text: $ainiro_dark;
$dark-primary-text: rgba($dark-text, 0.87);
$dark-accent-text: rgba($dark-primary-text, 0.54);
$dark-disabled-text: rgba($dark-primary-text, 0.38);
$dark-dividers: rgba($dark-primary-text, 0.12);
$dark-focused: rgba($dark-primary-text, 0.12);

$mat-light-theme-foreground: (
  base: black,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba($dark-text, 0.26),
  disabled-text: $dark-disabled-text,
  elevation: black,
  secondary-text: $dark-accent-text,
  hint-text: $dark-disabled-text,
  accent-text: $dark-accent-text,
  icon: $dark-accent-text,
  icons: $dark-accent-text,
  text: $dark-primary-text,
  slider-min: $dark-primary-text,
  slider-off: rgba($dark-text, 0.26),
  slider-off-active: $dark-disabled-text,
);

// Background config
// Light bg
$light-background: $ainiro_default_alt;
$light-bg-darker-5: darken($light-background, 5%);
$light-bg-darker-10: darken($light-background, 10%);
$light-bg-darker-20: darken($light-background, 20%);
$light-bg-darker-30: darken($light-background, 30%);
$light-bg-lighter-5: lighten($light-background, 5%);
$dark-bg-tooltip: lighten($ainiro_dark, 20%);
$dark-bg-alpha-4: rgba($ainiro_dark, 0.04);
$dark-bg-alpha-12: rgba($ainiro_dark, 0.12);

$mat-light-theme-background: (
  background: $light-background,
  status-bar: $light-bg-darker-20,
  app-bar: $light-bg-darker-5,
  hover: $dark-bg-alpha-4,
  card: $light-bg-lighter-5,
  dialog: $ainiro_default,
  tooltip: $dark-bg-tooltip,
  disabled-button: $dark-bg-alpha-12,
  raised-button: $light-bg-lighter-5,
  focused-button: $dark-focused,
  selected-button: $light-bg-darker-20,
  selected-disabled-button: $light-bg-darker-30,
  disabled-button-toggle: $light-bg-darker-10,
  unselected-chip: $light-bg-darker-10,
  disabled-list-option: $light-bg-darker-10,
);

// primary

$mat-primary: (
  main: $ainiro_primary,
  lighter: $ainiro_primary,
  darker: $ainiro_primary,
  200: $ainiro_primary,
  // For slide toggle,
  contrast : (main: $ainiro_default,
    lighter: $ainiro_primary,
    darker: $ainiro_default,
  )
);
$theme-primary: mat-palette($mat-primary, main, lighter, darker);

// accent

$mat-accent: (
  main: $ainiro_accent,
  lighter: $ainiro_accent,
  darker: $ainiro_accent,
  200: $ainiro_accent,
  // For slide toggle,
  contrast : (main: $ainiro_default,
    lighter: $ainiro_accent,
    darker: $ainiro_default,
  )
);
$theme-accent: mat-palette($mat-accent, main, lighter, darker);


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

// Theme Init
@include angular-material-theme($theme);

// material symbols

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("~node_modules/material-symbols/material-symbols-outlined.woff2");
}

.material-icons {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}