@use '@angular/material' as mat;
@import '../variables';

@mixin mw-mat-stepper-override($theme) {
  $is-dark: map-get($theme, is-dark);

  $background: (
    mw-stepper-icon: if($is-dark, rgba(white, 0.12), var(--mw-secondary-text)),
  );

  $foreground: (
    mw-stepper-icon: white,
  );

  $theme-background: map-get($theme, background);
  $theme-foreground: map-get($theme, foreground);

  $background: map-merge($background, $theme-background);
  $foreground: map-merge($foreground, $theme-background);
  $accent: map-get($theme, accent);

  --mw-stepper-icon: #{map-get($background, mw-stepper-icon)};

  .mat-step-header {
    .mat-step-icon {
      background-color: var(--mw-stepper-icon);
      color: map-get($foreground, mw-stepper-icon);
    }

    .mat-step-icon-selected,
    .mat-step-icon-state-done,
    .mat-step-icon-state-edit {
      background-color: mat.get-color-from-palette($accent);
      color: mat.get-color-from-palette($accent, default-contrast);
    }

    .mat-step-label,
    .mat-step-optional {
      color: var(--mw-secondary-text);

      &.mat-step-label-active {
        color: var(--mw-text);
      }
    }
  }

  .mat-stepper-horizontal,
  .mat-stepper-vertical {
    background-color: transparent;
  }

  .mat-step-label,
  .mat-step-icon-content {
    @include mw-typography(body2);
  }

  .mat-step-label-selected {
    @include mw-typography(subtitle2);
  }

  .mat-stepper-horizontal-line {
    border-top-color: rgba(
      var(--mw-base),
      var(--mw-base),
      var(--mw-base),
      0.12
    );
  }
}