@mixin uxg-wizard-theme($theme) {
  $accent: map-get($theme, accent);
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  $default-background-color: mat-color($background, card);

  $wizard-background-color: mat-color($background, background);
  $wizard-step-active-color: mat-color($accent, default);
  $wizard-step-done-color: map-get($uxg-grass, 100);
  $wizard-timeline-color: mat-color($foreground, disabled-text);

  $wizard-dark-blue: mat-color($primary, darker);
  $wizard-step-description-color: mat-color($primary, lighter, 0.8);
  $wizard-step-container-active-color: mat-color($primary, default, 0.45);

  $wizard-dot-color: map_get($mat-grey, 200);
  $wizard-dot-active-color: mat-color($primary, default);

  .uxg-wizard {
    background: $wizard-background-color;

    .uxg-wizard-container {
      background: $default-background-color;
    }

    .uxg-wizard-right-panel {
      background: $wizard-dark-blue;

      .close-button {
        color: mat-color($primary, darker-contrast);
      }
    }

    .uxg-wizard-timeline,
    .uxg-wizard-timeline-xs {
      .step {
        background-color: $default-background-color;
        color: $wizard-timeline-color;

        &.done {
          background-color: $wizard-step-done-color;
          border-color: $wizard-step-done-color;
          color: mat-contrast($uxg-grass, 100);
        }

        &.active {
          border-color: $wizard-step-active-color;
          background-color: $wizard-step-active-color;
          color: mat-color($accent, default-contrast);
        }
      }

      .timeline-progress-bar {
        background: $wizard-timeline-color;

        .timeline-progress {
          background: $wizard-step-done-color;
        }
      }

      .step-info-container {
        .step-title {
          color: mat-color($primary, darker-contrast);;
        }

        .step-description {
          color: $wizard-step-description-color;
        }

        &.disabled {
          .step-title,
          .step-description {
            opacity: 0.2;
          }
        }

        &.active {
          background-color: $wizard-step-container-active-color;

          .step-description {
            color: mat-color($primary, darker-contrast);
          }
        }
      }
    }

    .uxg-wizard-timeline-xs {
      background: $wizard-dark-blue;

      .close-button {
        color: mat-color($primary, darker-contrast);
      }
    }

    .uxg-wizard-footer {
      .dot {
        background-color: $wizard-dot-color;

        &.active {
          background-color: $wizard-dot-active-color;
        }
      }
    }
  }
}

@mixin uxg-wizard-typography($config) {
  .uxg-wizard {

    .uxg-wizard-timeline {
      .step {
        font: {
          weight: mat-font-weight($config, h1);
          size: mat-font-size($config, subtitle-1);
        }

        mat-icon {
          font-weight: mat-font-weight($config, h1);
        }
      }

      .step-info-container {
        .step-description {
          @include mat-typography-level-to-styles($config, caption);
        }
      }
    }

    .uxg-wizard-timeline-xs {
      .step {
        font: {
          weight: mat-font-weight($config, h2);
          size: mat-font-size($config, subtitle-2);
        }

        mat-icon {
          font-weight: mat-font-weight($config, h2);
        }
      }

      .step-info-container {
        .step-description {
          @include mat-typography-level-to-styles($config, body-3);

          font-weight: mat-font-weight($config, caption);
        }
      }
    }
  }
}