@use 'sass:map';
@use '../base/colors';
@use '../base/opacity';
@use '../base/typography';

@mixin mx-stepper-theme($theme) {
  $is-dark: map.get($theme, is-dark);

  // Light Theme
  $color-theme: colors.$mx-light;
  @if $is-dark {
    // Dark Theme
    $color-theme: colors.$mx-dark;
  }

  $onSurfaceVariant: map.get($color-theme, onSurfaceVariant);
  $onSurface: map.get($color-theme, onSurface);
  $onSurface-opacity08: rgba($onSurface, opacity.$opacity-8);
  $error: map.get($color-theme, error);
  $primary: map.get($color-theme, primary);
  .mat-stepper-vertical,
  .mat-stepper-horizontal {
    background-color: transparent !important;
  }
  .mat-step-header {
    &:hover:not([aria-disabled]) {
      background-color: $onSurface-opacity08;
    }

    &[aria-disabled] {
      opacity: opacity.$opacity-38;
    }

    .mat-step-icon {
      background-color: $onSurfaceVariant;
    }
    .mat-step-icon-selected,
    .mat-step-icon-state-done,
    .mat-step-icon-state-edit {
      background-color: $primary;
    }

    .mat-step-icon-state-error {
      background-color: transparent;
      color: $error;
    }

    .mat-step-label {
      &.mat-step-label-selected {
        @extend .gl-body-lg;
      }
      &.mat-step-label-active {
        color: $onSurface;
      }

      &.mat-step-label-error {
        color: $error;
      }
    }

    .mat-step-optional {
      color: $onSurfaceVariant;
    }
  }
}