@use '@angular/material' as mat;

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;

  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);

  --mat-sys-primary-overlay: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent);

  color-scheme: light dark;
  font-family: var(--mat-sys-label-medium-font);

  @include mat.theme((color: mat.$azure-palette,
      typography: Roboto,
      density: 0));

}

app-root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  &.abort, &.error, &.warn {
    @include mat.button-overrides((
      text-label-text-color: var(--mat-sys-error),
      text-ripple-color: var(--mat-sys-error),
      text-state-layer-color: var(--mat-sys-error),
      filled-label-text-color: var(--mat-sys-on-error),
      filled-container-color: var(--mat-sys-error),
      filled-ripple-color: var(--mat-sys-on-error),
      filled-state-layer-color: var(--mat-sys-on-error),
    ));
  }
}