@use '@angular/material' as mat;
@import 'material-icons/iconfont/material-icons.css';
@import '@fontsource/open-sans';
@import '@alfresco/adf-core/theming';

$alfresco-typography: mat.define-typography-config(
  $font-family: '"Open Sans", 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;
}

adf-document-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
