// Include theming for Angular Material with `mat.theme()`.
// This Sass mixin will define CSS variables that are used for styling Angular Material
// components according to the Material 3 design spec.
// Learn more about theming and how to use it for your application's
// custom components at https://material.angular.dev/guide/theming
@use '@angular/material' as mat;
@use './_theme-colors' as theme-colors;

// Light Theme
html {
  color-scheme: light;
  @include mat.theme((
    color: (
      theme-type: light,
      primary: theme-colors.$primary-palette,
      tertiary: theme-colors.$tertiary-palette,
    ),
  ));
}

// Dark Theme
html.dark {
  color-scheme: dark;
  @include mat.theme((
    color: (
      theme-type: dark,
      primary: theme-colors.$primary-palette,
      tertiary: theme-colors.$tertiary-palette,
    ),
  ));
}



@include mat.progress-bar-overrides((
  active-indicator-color: white,
  track-color: transparent,
));

.mdc-linear-progress__buffer-bar {
  background: linear-gradient(to right, #6366f1, #db2777) !important;
}

@include mat.snack-bar-overrides((
  container-color: red,
));



.error-snackbar .mat-mdc-snack-bar-label {
  color: white !important;
}

.error-snackbar .mat-mdc-button {
  color: white !important;
}

.backdropBackground {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(2px);
}

.mat-step-header .mat-step-icon:not(.mat-step-icon-selected):not(.mat-step-icon-completed):not(.mat-step-icon-state-edit) {
  background-color: #bbb;
  color: white;
}



.error-button {
  @include mat.button-overrides((
    outlined-ripple-color: rgba(255, 0, 0, 0.1),
  ));

  &.mdc-button:not(.mat-mdc-outlined-button):not(:disabled) {
    background-color: var(--color-red-500) !important;
  }

  &.mdc-button.mat-mdc-outlined-button:not(:disabled) {
    color: var(--color-red-500) !important;
  }

  &.mdc-button.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
    background-color: var(--color-red-500) !important;
  }
}

.success-button {
  @include mat.button-overrides((
    outlined-ripple-color: rgba(0, 255, 0, 0.1),
  ));

  &.mdc-button:not(.mat-mdc-outlined-button):not(:disabled) {
    background-color: var(--color-green-500) !important;
  }

  &.mdc-button.mat-mdc-outlined-button:not(:disabled) {
    color: var(--mat-sys-on-surface) !important;
  }

  &.mdc-button.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
    background-color: var(--color-green-500) !important;
  }
}




body {
  // Default the application to a light color theme. This can be changed to
  // `dark` to enable the dark color theme, or to `light dark` to defer to the
  // user's system settings.
  color-scheme: light;

  // Set a default background, font and text colors for the application using
  // Angular Material's system-level CSS variables. Learn more about these
  // variables at https://material.angular.dev/guide/system-variables
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);

  // Reset the user agent margin.
  margin: 0;
}