@use '@angular/material' as mat;
@import '@angular/material/theming';

$formColumnWidth: 64px;
$formColumnGap: 24px;
$dialogFormLargeColumnCount: 8;
$dialogFormMediumColumnCount: 6;
$dialogFormSmallColumnCount: 4;

$mw-mat-typography: mat.define-typography-config(
  $display-4: mat.define-typography-level(96px, 112px, 500, $letter-spacing: -1.5px),
  $display-3: mat.define-typography-level(60px, 71px, 500, $letter-spacing: -0.5px),
  $display-2: mat.define-typography-level(48px, 57px, 500),
  $display-1: mat.define-typography-level(34px, 40px, 500, $letter-spacing: 0.25px),
  $headline: mat.define-typography-level(24px, 28px, 500),
  $title: mat.define-typography-level(20px, 24px, 500, $letter-spacing: 0.15px),
  $subheading-2: mat.define-typography-level(16px, 24px, 500, $letter-spacing: 0.15px),
  $subheading-1: mat.define-typography-level(14px, 24px, 500, $letter-spacing: 0.1px),
  $body-2: mat.define-typography-level(16px, 24px, 400, $letter-spacing: 0.15px),
  $body-1: mat.define-typography-level(14px, 20px, 400, $letter-spacing: 0.25px),
  $caption: mat.define-typography-level(12px, 16px, 400, $letter-spacing: 0.4px),
  $button: mat.define-typography-level(14px, 16px, 500, $letter-spacing: 0.75px),
);

$mw-mat-typography-mapping: (
  headline1: display-4,
  headline2: display-3,
  headline3: display-2,
  headline4: display-1,
  headline5: headline,
  headline6: title,
  subtitle1: subheading-2,
  subtitle2: subheading-1,
  body1: body-2,
  body2: body-1,
  caption: caption,
  button: button,
);

@mixin mw-typography($name) {
  $mat-name: map-get($mw-mat-typography-mapping, $name);
  @include mat.typography-level($mw-mat-typography, $mat-name);
}