@use '@angular/material' as mat;

html {
  // color-scheme: light dark;
  @include mat.theme((
    color: (
      primary: mat.$cyan-palette,
      tertiary: mat.$orange-palette,
      theme-type: light,
    ),
    typography: "Roboto, Farhang",
    density: 0
  ));
}

body {
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

// @include mat.core();

// /* $teal-pallet: (
//   50: #DFF4F1,
//   100: #B1E3DA,
//   200: #7DD1C2,
//   300: #43BEAA,
//   400: #00AF97,
//   500: #00A085,
//   600: #009279,
//   700: #008269,
//   800: #00725A,
//   900: #00553E
// );

// $pink-pallet: (
//   50: #FCE4EC,
//   100: #F8BBD0,
//   200: #F48FB0,
//   300: #F06291,
//   400: #EC4079,
//   500: #E91E62,
//   600: #D81B5F,
//   700: #C2185A,
//   800: #AD1356,
//   900: #880D4E
// ); */

// $my-primary: mat.define-palette(mat.$teal-palette, 300);
// $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// $my-warn: mat.define-palette(mat.$deep-orange-palette);

// $my-theme: mat.define-light-theme((
//  color: (
//    primary: $my-primary,
//    accent: $my-accent,
//    warn: $my-warn,
//  )
// ));
// @include mat.all-component-themes($my-theme);

// @import '~@angular/material/theming';
// $custom-typography: mat-typography-config(
//   $font-family: 'Farhang'
// );
// @include mat-base-typography($custom-typography);
// @include mat-checkbox-typography($custom-typography);
// @include angular-material-typography($custom-typography);
// @include mat-core($custom-typography);

/* ------- HACK ------- */
// .mat-toolbar.mat-primary {
//   color: white;
// }

.mdc-icon-button[accent] {
  --mat-icon-button-icon-color: var(--accent-color);
}

span[color="primary"] {
  color: var(--primary-color);
  
  &.logo-type {
    font-weight: 900;
  }
}

.mat-raised-button[color="primary"],
.mat-flat-button[color="primary"] {
  color: white;
}

h1[mat-dialog-title] {
  font-weight: 900;
  border-bottom: 1px solid var(--primary-color);
  color: var(--primary-color);
}