@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;
}

.mdc-button,
.mdc-fab {
  &.abort,
  &.error,
  &.warn {
    $ripple: var(color-mix(in srgb, var(--mat-sys-on-error) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%), transparent));
    $fg: var(--mat-sys-on-error);
    $bg: var(--mat-sys-error);
    $fg-container: var(--mat-sys-on-error-container);
    $bg-container: var(--mat-sys-error-container);

    @include mat.button-overrides((
        // default
        text-label-text-color: $bg,
        text-ripple-color: $ripple,
        text-state-layer-color: $bg,
        // filled
        filled-label-text-color: $fg,
        filled-container-color: $bg,
        filled-ripple-color: $ripple,
        filled-state-layer-color: $fg,
    ));
    @include mat.fab-overrides((
        // default
        container-color: $bg-container,
        foreground-color: $fg-container,
        state-layer-color: $fg-container,
        ripple-color: $ripple,
        // mini
        small-container-color: $bg-container,
        small-foreground-color: $fg-container,
        small-state-layer-color: $fg-container,
        small-ripple-color: $ripple
      ));
  }
}

.mdc-fab.shadowless {
  @include mat.fab-overrides((
    // default
    container-elevation-shadow: transparent,
    hover-container-elevation-shadow: transparent,
    pressed-container-elevation-shadow: transparent,
    focus-container-elevation-shadow: transparent,
    // mini
    small-container-elevation-shadow: transparent,
    small-hover-container-elevation-shadow: transparent,
    small-pressed-container-elevation-shadow: transparent,
    small-focus-container-elevation-shadow: transparent,
  ));
}