@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round");

$fontConfig: (
  font-family: $font-family-sans-serif,
  display-5: mat-typography-level($h5-font-size, 132%, $bold-weight),
  display-4: mat-typography-level($h4-font-size, 132%, $black-weight),
  display-3: mat-typography-level($h3-font-size, 132%, $black-weight),
  display-2: mat-typography-level($h2-font-size, 132%, $black-weight),
  display-1: mat-typography-level($h1-font-size, 132%, $black-weight),
  headline: mat-typography-level($h1-font-size, 132%, $black-weight),
  title: mat-typography-level($h2-font-size, 132%, $black-weight),
  card-title: mat-typography-level($card-content-title-font-size, 132%, $black-weight),
  subheading-2: mat-typography-level($h3-font-size, 132%, $black-weight),
  subheading-1: mat-typography-level($h4-font-size, 132%, $bold-weight),
  body-2: mat-typography-level($body-font-size, 1.5, $medium-weight),
  body-1: mat-typography-level($body-font-size, 1.5, $regular-weight),
  button: mat-typography-level($body-font-size, 1.5, $medium-weight),
  caption: mat-typography-level(12px, 20px, 400),
  input: mat-typography-level($form-control-font-size, 1.125, $regular-weight),
  input-l: mat-typography-level($form-control-lg-font-size, 1.125, $regular-weight),
  error: mat-typography-level($alert-error-Label-font-size, 1.5, $regular-weight),
  toggle-expander: mat-typography-level($toggle-expander-font-size, 1.6, $regular-weight),
  teaser: mat-typography-level($card-content-description-font-size, 1.5rem, $light-weight)
);


$fontConfig-sm: (
  display-5: mat-typography-level($h5-sm-font-size, 132%, $bold-weight),
  display-4: mat-typography-level($h4-sm-font-size, 132%, $black-weight),
  display-3: mat-typography-level($h3-sm-font-size, 132%, $black-weight),
  display-2: mat-typography-level($h2-sm-font-size, 132%, $black-weight),
  display-1: mat-typography-level($h1-sm-font-size, 132%, $black-weight),
  headline: mat-typography-level($h1-sm-font-size, 132%, $black-weight),
  title: mat-typography-level($h2-sm-font-size, 132%, $black-weight),
  card-title: mat-typography-level($card-content-title-sm-font-size, 132%, $black-weight),
  subheading-2: mat-typography-level($h3-sm-font-size, 132%, $black-weight),
  subheading-1: mat-typography-level($h4-sm-font-size, 132%, $bold-weight),
  body-2: mat-typography-level($body-sm-font-size, 1.5, $medium-weight),
  body-1: mat-typography-level($body-sm-font-size, 1.5, $regular-weight),
  button: mat-typography-level($body-sm-font-size, 1.5, $medium-weight),
  caption: mat-typography-level(12px, 20px, 400),
  input: mat-typography-level($form-control-sm-font-size, 1.125, $regular-weight),
  input-l: mat-typography-level($form-control-lg-sm-font-size, 1.125, $regular-weight),
  toggle-expander: mat-typography-level($toggle-expander-sm-font-size, 1.6, $regular-weight),
  teaser: mat-typography-level($card-content-description-sm-font-size, 160%, $light-weight)
);

$fontConfig-m: (
  display-5: mat-typography-level($h5-m-font-size, 132%, $bold-weight),
  display-4: mat-typography-level($h4-m-font-size, 132%, $black-weight),
  display-3: mat-typography-level($h3-m-font-size, 132%, $black-weight),
  display-2: mat-typography-level($h2-m-font-size, 132%, $black-weight),
  display-1: mat-typography-level($h1-m-font-size, 132%, $black-weight),
  headline: mat-typography-level($h1-m-font-size, 132%, $black-weight),
  title: mat-typography-level($h2-m-font-size, 132%, $black-weight),
  card-title: mat-typography-level($card-content-title-m-font-size, 132%, $black-weight),
  subheading-2: mat-typography-level($h3-m-font-size, 132%, $black-weight),
  subheading-1: mat-typography-level($h4-m-font-size, 132%, $bold-weight),
  body-2: mat-typography-level($body-m-font-size, 1.5, $medium-weight),
  body-1: mat-typography-level($body-m-font-size, 1.5, $regular-weight),
  button: mat-typography-level($body-m-font-size, 1.5, $medium-weight),
  caption: mat-typography-level(12px, 20px, 400),
  input: mat-typography-level($form-control-m-font-size, 1.125, $regular-weight),
  input-l: mat-typography-level($form-control-lg-m-font-size, 1.125, $regular-weight),
  toggle-expander: mat-typography-level($toggle-expander-m-font-size, 1.6, $regular-weight),
  teaser: mat-typography-level($card-content-description-m-font-size, 1.5rem, $light-weight)
);

$fontConfig-l: (
  display-5: mat-typography-level($h5-l-font-size, 132%, $bold-weight),
  display-4: mat-typography-level($h4-l-font-size, 132%, $black-weight),
  display-3: mat-typography-level($h3-l-font-size, 132%, $black-weight),
  display-2: mat-typography-level($h2-l-font-size, 132%, $black-weight),
  display-1: mat-typography-level($h1-l-font-size, 132%, $black-weight),
  headline:  mat-typography-level($h1-l-font-size, 132%, $black-weight),
  title: mat-typography-level($h2-l-font-size, 132%, $black-weight),
  card-title: mat-typography-level($card-content-title-l-font-size, 132%, $black-weight),
  subheading-2: mat-typography-level($h3-l-font-size, 132%, $black-weight),
  subheading-1: mat-typography-level($h4-l-font-size, 132%, $bold-weight),
  body-2: mat-typography-level($body-l-font-size, 1.5, $medium-weight),
  body-1: mat-typography-level($body-l-font-size, 1.5, $regular-weight),
  button: mat-typography-level($body-l-font-size, 1.5, $medium-weight),
  caption: mat-typography-level(12px, 20px, 400),
  input: mat-typography-level($form-control-l-font-size, 1.125, $regular-weight),
  input-l: mat-typography-level($form-control-lg-l-font-size, 1.125, $regular-weight),
  toggle-expander: mat-typography-level($toggle-expander-l-font-size, 1.6, $regular-weight),
  teaser: mat-typography-level($card-content-description-l-font-size, 1.5rem, $light-weight)
);

// Compute font config
@include mat-core($fontConfig);