@use 'sass:map' as map;
@use '@angular/material' as mat;
@use 'theming' as theming;

@import 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;900&display=swap';
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(theming.$typography-config);`
@include mat.all-legacy-component-typographies(theming.$typography-config);
@include mat.legacy-core();
@include mat.all-legacy-component-themes(theming.$theme);

// TODO: migrate to CSS-variable-based theming
:root {
  --color-background: #edf0f2;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --color-on-surface-1: #000000de;
  --color-on-surface-2: #00000099;
  --color-on-surface-9: #0000001f;
  --color-primary: #344955;
  --color-on-primary: #ffffff;
  --color-on-primary-1: #ffffffde;
  --color-on-primary-2: #ffffff99;
  --color-on-primary-9: #ffffff1f;
  --color-accent: #f9aa33;
  --color-on-accent: #000000;
  --color-on-accent-1: #000000de;
  --color-on-accent-2: #00000099;
  --color-on-accent-9: #0000001f;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overscroll-behavior: none;
  background-color: map.get(theming.$theme, 'color', 'primary', 'default');
}

a {
  color: currentColor;
  text-decoration: initial;
  &:focus-visible {
    outline: none;
  }
}

input {
  border: none;
  font: inherit;
  color: inherit;
  background-color: none;
  &:focus {
    outline: none;
  }
}

textarea {
  border: none;
  font: inherit;
  color: inherit;
  background-color: none;
  resize: none;
  padding: initial;
  &:focus {
    outline: none;
  }
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: pan-x pan-y;
}

// Fix material button content positioning
.mat-icon-button .mat-button-wrapper {
  display: inline-block;
  transform: translateY(-2px);
}
.mat-fab .mat-button-wrapper {
  height: 100%;
  display: inline-flex !important;
  align-items: center;
  padding: initial !important;
}

// Fix material list icon size
.mat-list-base .mat-list-item .mat-list-icon,
.mat-list-base .mat-list-option .mat-list-icon {
  padding: 8px !important;
}

.snackbar-notification-panel {
  &.centered {
    margin-bottom: 88px !important; // TODO: computed value
  }
}

.mat-snack-bar-container {
  border-radius: 0 !important;
  padding: 8px 16px !important;
  box-shadow: none !important;
}

.mat-dialog-container {
  border-radius: 0 !important;
}

.mat-tooltip {
  @include mat.typography-level(theming.$typography-config, 'caption');
}

// Prevent <router-outlet> elements from interfering the layout because they
// can be "blocks" in certain layouts although they should be "inline".
router-outlet {
  display: none;
}
