@use '@angular/material' as mat;

@import '@alfresco/adf-core/theming';

$alfresco-typography: mat.define-typography-config(
  $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
  $display-4:     mat.define-typography-level(112px, 112px, 300),
  $display-3:     mat.define-typography-level(56px, 56px, 400),
  $display-2:     mat.define-typography-level(45px, 48px, 400),
  $display-1:     mat.define-typography-level(34px, 40px, 400),
  $headline:      mat.define-typography-level(24px, 32px, 400),
  $title:         mat.define-typography-level(20px, 32px, 500),
  $subheading-2:  mat.define-typography-level(16px, 28px, 400),
  $subheading-1:  mat.define-typography-level(15px, 24px, 400),
  $body-2:        mat.define-typography-level(14px, 24px, 500),
  $body-1:        mat.define-typography-level(14px, 20px, 400),
  $caption:       mat.define-typography-level(12px, 20px, 400),
  $button:        mat.define-typography-level(14px, 14px, 500),
  // Line-height must be unit-less fraction of the font-size.
  $input:         mat.define-typography-level(16px, 1.25, 400)
);

@include mat.core($alfresco-typography);

$primary: mat.define-palette($alfresco-accent-orange);
$accent:  mat.define-palette($alfresco-accent-purple);
$warn:    mat.define-palette($alfresco-warn);
$theme: mat.define-light-theme(
  (
      color: (
          primary: $primary,
          accent: $accent,
          warn: $warn
      ),
      typography: $alfresco-typography
  )
);

@include mat.all-component-themes($theme);
@include adf-core-theme($theme);

body, html {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-size: mat.font-size($alfresco-typography, body-1);
  font-family: mat.font-family($alfresco-typography);
  line-height: mat.line-height($alfresco-typography, body-1);
}

body {
  overflow: auto;
}
